mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-25 01:34:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Allow styling sidebar icons and groups in themes

Browse source
This commit is contained in:
Max Brunsfeld 2022-04-27 09:38:31 -07:00
parent 0291f2d54a
commit 7f63ed3835
11 changed files with 271 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
assets/themes/cave-dark.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#8b8792",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#8b8792",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#efecf4",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#5852607a"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/cave-light.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#585260",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#585260",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#19171c",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#8b87922e"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/dark.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#9c9c9c",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#9c9c9c",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#ffffff",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#2b2b2b"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/light.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#717171",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#717171",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#000000",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#e3e3e3"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/solarized-dark.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#93a1a1",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#93a1a1",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#fdf6e3",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#586e757a"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/solarized-light.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#586e75",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#586e75",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#002b36",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#93a1a12e"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/sulphurpool-dark.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#979db4",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#979db4",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#f5f7ff",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#5e66877a"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

32
assets/themes/sulphurpool-light.json
View file

@ -212,17 +212,43 @@
"sidebar_item": {
"height": 32,
"icon_color": "#5e6687",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_hover": {
"height": 32,
"icon_color": "#5e6687",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
},
"sidebar_item_active": {
"height": 32,
"icon_color": "#202746",
"icon_size": 18
"icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5,
"background": "#979db42e"
},
"sidebar_items_left": {
"margin": {
"right": 20
}
},
"sidebar_items_right": {
"margin": {
"left": 20
}
}
},
"titlebar": {

34
crates/theme/src/theme.rs
View file

@ -136,6 +136,24 @@ pub struct FindEditor {
pub max_width: f32,
}
#[derive(Deserialize, Default)]
pub struct StatusBar {
#[serde(flatten)]
pub container: ContainerStyle,
pub height: f32,
pub item_spacing: f32,
pub cursor_position: TextStyle,
pub diagnostic_message: TextStyle,
pub lsp_message: TextStyle,
pub auto_update_progress_message: TextStyle,
pub auto_update_done_message: TextStyle,
pub sidebar_items_left: ContainerStyle,
pub sidebar_items_right: ContainerStyle,
pub sidebar_item: SidebarItem,
pub sidebar_item_active: SidebarItem,
pub sidebar_item_hover: SidebarItem,
}
#[derive(Deserialize, Default)]
pub struct Sidebar {
pub resize_handle: ContainerStyle,
@ -150,22 +168,6 @@ pub struct SidebarItem {
pub height: f32,
}
#[derive(Deserialize, Default)]
pub struct StatusBar {
#[serde(flatten)]
pub container: ContainerStyle,
pub height: f32,
pub item_spacing: f32,
pub cursor_position: TextStyle,
pub diagnostic_message: TextStyle,
pub lsp_message: TextStyle,
pub auto_update_progress_message: TextStyle,
pub auto_update_done_message: TextStyle,
pub sidebar_item: SidebarItem,
pub sidebar_item_active: SidebarItem,
pub sidebar_item_hover: SidebarItem,
}
#[derive(Deserialize, Default)]
pub struct ChatPanel {
#[serde(flatten)]

18
crates/workspace/src/sidebar.rs
View file

@ -176,22 +176,26 @@ impl View for SidebarButtons {
fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
let theme = &cx.global::<Settings>().theme.workspace.status_bar;
let style = theme.sidebar_item;
let hover_style = theme.sidebar_item_hover;
let active_style = theme.sidebar_item_active;
let sidebar = self.sidebar.read(cx);
let item_style = theme.sidebar_item;
let hover_item_style = theme.sidebar_item_hover;
let active_item_style = theme.sidebar_item_active;
let active_ix = sidebar.active_item_ix;
let side = sidebar.side;
let group_style = match side {
Side::Left => theme.sidebar_items_left,
Side::Right => theme.sidebar_items_right,
};
let items = sidebar.items.clone();
Flex::row()
.with_children(items.iter().enumerate().map(|(ix, item)| {
MouseEventHandler::new::<Self, _, _>(ix, cx, move |state, _| {
let style = if Some(ix) == active_ix {
active_style
active_item_style
} else if state.hovered {
hover_style
hover_item_style
} else {
style
item_style
};
Svg::new(item.icon_path)
.with_color(style.icon_color)
@ -210,6 +214,8 @@ impl View for SidebarButtons {
})
.boxed()
}))
.contained()
.with_style(group_style)
.boxed()
}
}

9
styles/src/styleTree/workspace.ts
View file

@ -51,6 +51,8 @@ export default function workspace(theme: Theme) {
height: 32,
iconColor: iconColor(theme, "secondary"),
iconSize: 18,
padding: { left: 5, right: 5 },
cornerRadius: 5,
};
const shareIcon = {
margin: { top: 3, bottom: 2 },
@ -102,7 +104,14 @@ export default function workspace(theme: Theme) {
sidebarItemActive: {
...sidebarItem,
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "active"),
},
sidebarItemsLeft: {
margin: { right: 20 }
},
sidebarItemsRight: {
margin: { left: 20 }
}
},
titlebar: {
avatarWidth: 18,