Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#8b8792", "icon_color": "#8b8792",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#8b8792", "icon_color": "#8b8792",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#efecf4", "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": { "titlebar": {

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

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#585260", "icon_color": "#585260",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#585260", "icon_color": "#585260",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#19171c", "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": { "titlebar": {

32
assets/themes/dark.json
View file

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#9c9c9c", "icon_color": "#9c9c9c",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#9c9c9c", "icon_color": "#9c9c9c",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#ffffff", "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": { "titlebar": {

32
assets/themes/light.json
View file

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#717171", "icon_color": "#717171",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#717171", "icon_color": "#717171",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#000000", "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": { "titlebar": {

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

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#93a1a1", "icon_color": "#93a1a1",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#93a1a1", "icon_color": "#93a1a1",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#fdf6e3", "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": { "titlebar": {

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

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#586e75", "icon_color": "#586e75",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#586e75", "icon_color": "#586e75",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#002b36", "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": { "titlebar": {

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

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#979db4", "icon_color": "#979db4",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#979db4", "icon_color": "#979db4",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#f5f7ff", "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": { "titlebar": {

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

@ -212,17 +212,43 @@
"sidebar_item": { "sidebar_item": {
"height": 32, "height": 32,
"icon_color": "#5e6687", "icon_color": "#5e6687",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_hover": { "sidebar_item_hover": {
"height": 32, "height": 32,
"icon_color": "#5e6687", "icon_color": "#5e6687",
"icon_size": 18 "icon_size": 18,
"padding": {
"left": 5,
"right": 5
},
"corner_radius": 5
}, },
"sidebar_item_active": { "sidebar_item_active": {
"height": 32, "height": 32,
"icon_color": "#202746", "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": { "titlebar": {

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

@ -136,6 +136,24 @@ pub struct FindEditor {
pub max_width: f32, 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)] #[derive(Deserialize, Default)]
pub struct Sidebar { pub struct Sidebar {
pub resize_handle: ContainerStyle, pub resize_handle: ContainerStyle,
@ -150,22 +168,6 @@ pub struct SidebarItem {
pub height: f32, 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)] #[derive(Deserialize, Default)]
pub struct ChatPanel { pub struct ChatPanel {
#[serde(flatten)] #[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 { fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
let theme = &cx.global::<Settings>().theme.workspace.status_bar; 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 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 active_ix = sidebar.active_item_ix;
let side = sidebar.side; 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(); let items = sidebar.items.clone();
Flex::row() Flex::row()
.with_children(items.iter().enumerate().map(|(ix, item)| { .with_children(items.iter().enumerate().map(|(ix, item)| {
MouseEventHandler::new::<Self, _, _>(ix, cx, move |state, _| { MouseEventHandler::new::<Self, _, _>(ix, cx, move |state, _| {
let style = if Some(ix) == active_ix { let style = if Some(ix) == active_ix {
active_style active_item_style
} else if state.hovered { } else if state.hovered {
hover_style hover_item_style
} else { } else {
style item_style
}; };
Svg::new(item.icon_path) Svg::new(item.icon_path)
.with_color(style.icon_color) .with_color(style.icon_color)
@ -210,6 +214,8 @@ impl View for SidebarButtons {
}) })
.boxed() .boxed()
})) }))
.contained()
.with_style(group_style)
.boxed() .boxed()
} }
} }

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

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