zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-28 01:05:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Use Interactive wrapper for search option buttons

Browse Source
This commit is contained in:
Max Brunsfeld 2022-04-28 15:29:03 -07:00
parent 8481834847
commit d9497d49de
12 changed files with 226 additions and 584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
assets/themes/cave-dark.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#955ae780",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#efecf4",
"color": "#8b8792",
"size": 14,
"background": "#655f6d",
"background": "#26232a",
"corner_radius": 4,
"border": {
"color": "#655f6d",
"color": "#26232a",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#655f6d",
"corner_radius": 4,
"border": {
"color": "#655f6d",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#655f6d",
"border": {
"color": "#655f6d",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#655f6d",
"border": {
"color": "#655f6d",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#26232a",
"corner_radius": 4,
"border": {
"color": "#655f6d",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#19171c",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#8b8792",
"size": 14,
"background": "#26232a",
"corner_radius": 4,
"border": {
"color": "#26232a",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/cave-light.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#955ae780",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#19171c",
"color": "#585260",
"size": 14,
"background": "#7e7887",
"background": "#e2dfe7",
"corner_radius": 4,
"border": {
"color": "#7e7887",
"color": "#e2dfe7",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#7e7887",
"corner_radius": 4,
"border": {
"color": "#7e7887",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#7e7887",
"border": {
"color": "#7e7887",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#7e7887",
"border": {
"color": "#7e7887",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#e2dfe7",
"corner_radius": 4,
"border": {
"color": "#7e7887",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#efecf4",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#585260",
"size": 14,
"background": "#e2dfe7",
"corner_radius": 4,
"border": {
"color": "#e2dfe7",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/dark.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#3f15a380",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#ffffff",
"color": "#9c9c9c",
"size": 14,
"background": "#232323",
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#404040",
"color": "#232323",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#232323",
"corner_radius": 4,
"border": {
"color": "#404040",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#232323",
"border": {
"color": "#404040",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#1c1c1c",
"border": {
"color": "#404040",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#404040",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#000000",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
"size": 14,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#232323",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/light.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#fce9b7",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#000000",
"color": "#474747",
"size": 14,
"background": "#ffffff",
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#e3e3e3",
"color": "#d5d5d5",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#ffffff",
"corner_radius": 4,
"border": {
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#ffffff",
"border": {
"color": "#e3e3e3",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#f8f8f8",
"border": {
"color": "#e3e3e3",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#ffffff",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#474747",
"size": 14,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/solarized-dark.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#6c71c480",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#fdf6e3",
"color": "#93a1a1",
"size": 14,
"background": "#657b83",
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#657b83",
"color": "#073642",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#657b83",
"corner_radius": 4,
"border": {
"color": "#657b83",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#657b83",
"border": {
"color": "#657b83",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#657b83",
"border": {
"color": "#657b83",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#657b83",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#002b36",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#93a1a1",
"size": 14,
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#073642",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/solarized-light.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#6c71c480",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#002b36",
"color": "#586e75",
"size": 14,
"background": "#839496",
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#839496",
"color": "#eee8d5",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#839496",
"corner_radius": 4,
"border": {
"color": "#839496",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#839496",
"border": {
"color": "#839496",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#839496",
"border": {
"color": "#839496",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#839496",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#fdf6e3",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#586e75",
"size": 14,
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#eee8d5",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/sulphurpool-dark.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#6679cc80",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#f5f7ff",
"color": "#979db4",
"size": 14,
"background": "#6b7394",
"background": "#293256",
"corner_radius": 4,
"border": {
"color": "#6b7394",
"color": "#293256",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#6b7394",
"corner_radius": 4,
"border": {
"color": "#6b7394",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#6b7394",
"border": {
"color": "#6b7394",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#6b7394",
"border": {
"color": "#6b7394",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#293256",
"corner_radius": 4,
"border": {
"color": "#6b7394",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#202746",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#979db4",
"size": 14,
"background": "#293256",
"corner_radius": 4,
"border": {
"color": "#293256",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

87
assets/themes/sulphurpool-light.json
View File

@ -1304,14 +1304,14 @@
"match_background": "#6679cc80",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"option_button": {
"family": "Zed Mono",
"color": "#202746",
"color": "#5e6687",
"size": 14,
"background": "#898ea4",
"background": "#dfe2f1",
"corner_radius": 4,
"border": {
"color": "#898ea4",
"color": "#dfe2f1",
"width": 1
},
"margin": {
@ -1323,27 +1323,26 @@
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#898ea4",
"corner_radius": 4,
"border": {
"color": "#898ea4",
"width": 1
},
"margin": {
"left": 2,
"right": 2
"active": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#898ea4",
"border": {
"color": "#898ea4",
"width": 1
}
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
"hover": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#898ea4",
"border": {
"color": "#898ea4",
"width": 1
}
}
},
"editor": {
@ -1379,27 +1378,6 @@
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#dfe2f1",
"corner_radius": 4,
"border": {
"color": "#898ea4",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#f5f7ff",
"corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#5e6687",
"size": 14,
"background": "#dfe2f1",
"corner_radius": 4,
"border": {
"color": "#dfe2f1",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 4,

25
crates/search/src/buffer_search.rs
View File

@ -281,13 +281,12 @@ impl BufferSearchBar {
) -> ElementBox {
let is_active = self.is_search_option_enabled(search_option);
MouseEventHandler::new::<Self, _, _>(search_option as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search;
let style = match (is_active, state.hovered) {
(false, false) => &theme.option_button,
(false, true) => &theme.hovered_option_button,
(true, false) => &theme.active_option_button,
(true, true) => &theme.active_hovered_option_button,
};
let style = &cx
.global::<Settings>()
.theme
.search
.option_button
.style_for(state, is_active);
Label::new(icon.to_string(), style.text.clone())
.contained()
.with_style(style.container)
@ -306,12 +305,12 @@ impl BufferSearchBar {
) -> ElementBox {
enum NavButton {}
MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search;
let style = if state.hovered {
&theme.hovered_option_button
} else {
&theme.option_button
};
let style = &cx
.global::<Settings>()
.theme
.search
.option_button
.style_for(state, false);
Label::new(icon.to_string(), style.text.clone())
.contained()
.with_style(style.container)

25
crates/search/src/project_search.rs
View File

@ -655,12 +655,12 @@ impl ProjectSearchBar {
) -> ElementBox {
enum NavButton {}
MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search;
let style = if state.hovered {
&theme.hovered_option_button
} else {
&theme.option_button
};
let style = &cx
.global::<Settings>()
.theme
.search
.option_button
.style_for(state, false);
Label::new(icon.to_string(), style.text.clone())
.contained()
.with_style(style.container)
@ -682,13 +682,12 @@ impl ProjectSearchBar {
) -> ElementBox {
let is_active = self.is_option_enabled(option, cx);
MouseEventHandler::new::<ProjectSearchBar, _, _>(option as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search;
let style = match (is_active, state.hovered) {
(false, false) => &theme.option_button,
(false, true) => &theme.hovered_option_button,
(true, false) => &theme.active_option_button,
(true, true) => &theme.active_hovered_option_button,
};
let style = &cx
.global::<Settings>()
.theme
.search
.option_button
.style_for(state, is_active);
Label::new(icon.to_string(), style.text.clone())
.contained()
.with_style(style.container)

5
crates/theme/src/theme.rs
View File

@ -114,10 +114,7 @@ pub struct Search {
pub editor: FindEditor,
pub invalid_editor: ContainerStyle,
pub option_button_group: ContainerStyle,
pub option_button: ContainedText,
pub active_option_button: ContainedText,
pub hovered_option_button: ContainedText,
pub active_hovered_option_button: ContainedText,
pub option_button: Interactive<ContainedText>,
pub match_background: Color,
pub match_index: ContainedText,
pub results_status: TextStyle,

59
styles/src/styleTree/search.ts
View File

@ -2,23 +2,6 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) {
const optionButton = {
...text(theme, "mono", "secondary"),
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
border: border(theme, "secondary"),
margin: {
left: 2,
right: 2,
},
padding: {
bottom: 3,
left: 8,
right: 8,
top: 3,
},
};
const editor = {
background: backgroundColor(theme, 500),
cornerRadius: 8,
@ -43,24 +26,33 @@ export default function search(theme: Theme) {
matchBackground: theme.editor.highlight.match.value,
tabIconSpacing: 8,
tabIconWidth: 14,
activeHoveredOptionButton: {
...optionButton,
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
},
activeOptionButton: {
...optionButton,
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
optionButton: {
...text(theme, "mono", "secondary"),
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
border: border(theme, "secondary"),
margin: {
left: 2,
right: 2,
},
padding: {
bottom: 3,
left: 8,
right: 8,
top: 3,
},
active: {
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
},
hover: {
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "hovered"),
border: border(theme, "muted"),
}
},
editor,
hoveredOptionButton: {
...optionButton,
...text(theme, "mono", "active"),
border: border(theme, "muted"),
},
invalidEditor: {
...editor,
border: border(theme, "error"),
@ -69,7 +61,6 @@ export default function search(theme: Theme) {
...text(theme, "mono", "muted"),
padding: 6,
},
optionButton,
optionButtonGroup: {
padding: {
left: 4,