Style the left and right sidebars independently in the theme

Nathan Sobo and Max Brunsfeld created 4 years ago

Co-Authored-By: Max Brunsfeld <[e-mail]>

Change summary

zed/assets/themes/_base.toml | 10 +++++++++-
zed/src/theme.rs             |  6 ++++--
zed/src/workspace/sidebar.rs | 18 +++++++++++++-----
3 files changed, 26 insertions(+), 8 deletions(-)

Detailed changes

zed/assets/themes/_base.toml

@@ -19,7 +19,7 @@ extends = "$workspace.tab"
 background = "$surface.1"
 text = "$text.0"
 
-[workspace.sidebar.icons]
+[workspace.sidebar]
 padding = { left = 10, right = 10 }
 
 [workspace.sidebar.resize_handle]
@@ -33,6 +33,14 @@ height = 18
 extends = "$workspace.sidebar.icon"
 color = "$text.0.color"
 
+[workspace.left_sidebar]
+extends = "$workspace.sidebar"
+border = { width = 1, color = "$surface.1", right = true }
+
+[workspace.right_sidebar]
+extends = "$workspace.sidebar"
+border = { width = 1, color = "$surface.1", left = true }
+
 [chat_panel]
 channel_name = { extends = "$text.0", weight = "bold" }
 channel_name_hash = { text = "$text.2", padding.right = 5 }

zed/src/theme.rs

@@ -36,7 +36,8 @@ pub struct Workspace {
     pub titlebar: ContainerStyle,
     pub tab: Tab,
     pub active_tab: Tab,
-    pub sidebar: Sidebar,
+    pub left_sidebar: Sidebar,
+    pub right_sidebar: Sidebar,
 }
 
 #[derive(Deserialize)]
@@ -52,7 +53,8 @@ pub struct Tab {
 
 #[derive(Deserialize)]
 pub struct Sidebar {
-    pub icons: ContainerStyle,
+    #[serde(flatten)]
+    pub container: ContainerStyle,
     pub icon: SidebarIcon,
     pub active_icon: SidebarIcon,
     pub resize_handle: ContainerStyle,

zed/src/workspace/sidebar.rs

@@ -1,5 +1,5 @@
 use super::Workspace;
-use crate::Settings;
+use crate::{theme, Settings};
 use gpui::{
     action, elements::*, platform::CursorStyle, AnyViewHandle, MutableAppContext, RenderContext,
 };
@@ -59,6 +59,13 @@ impl Sidebar {
             .map(|item| &item.view)
     }
 
+    fn theme<'a>(&self, settings: &'a Settings) -> &'a theme::Sidebar {
+        match self.side {
+            Side::Left => &settings.theme.workspace.left_sidebar,
+            Side::Right => &settings.theme.workspace.right_sidebar,
+        }
+    }
+
     pub fn render(&self, settings: &Settings, cx: &mut RenderContext<Workspace>) -> ElementBox {
         let side = self.side;
         let theme = &settings.theme;
@@ -66,14 +73,15 @@ impl Sidebar {
             theme.workspace.tab.label.text.font_id,
             theme.workspace.tab.label.text.font_size,
         );
+        let theme = self.theme(settings);
 
         Container::new(
             Flex::column()
                 .with_children(self.items.iter().enumerate().map(|(item_index, item)| {
                     let theme = if Some(item_index) == self.active_item_ix {
-                        &settings.theme.workspace.sidebar.active_icon
+                        &theme.active_icon
                     } else {
-                        &settings.theme.workspace.sidebar.icon
+                        &theme.icon
                     };
                     enum SidebarButton {}
                     MouseEventHandler::new::<SidebarButton, _, _, _>(item.view.id(), cx, |_, _| {
@@ -98,7 +106,7 @@ impl Sidebar {
                 }))
                 .boxed(),
         )
-        .with_style(&settings.theme.workspace.sidebar.icons)
+        .with_style(&theme.container)
         .boxed()
     }
 
@@ -147,7 +155,7 @@ impl Sidebar {
         let side = self.side;
         MouseEventHandler::new::<Self, _, _, _>(self.side.id(), &mut cx, |_, _| {
             Container::new(Empty::new().boxed())
-                .with_style(&settings.theme.workspace.sidebar.resize_handle)
+                .with_style(&self.theme(settings).resize_handle)
                 .boxed()
         })
         .with_cursor_style(CursorStyle::ResizeLeftRight)