Allow styling sidebar's resize handle

Antonio Scandurra created

Change summary

zed/assets/themes/_base.toml |  5 ++++-
zed/src/theme.rs             |  8 +++++++-
zed/src/workspace.rs         |  8 ++++++--
zed/src/workspace/sidebar.rs | 14 +++++++-------
4 files changed, 24 insertions(+), 11 deletions(-)

Detailed changes

zed/assets/themes/_base.toml 🔗

@@ -13,9 +13,12 @@ extends = "$workspace.tab"
 background = "$surface.1"
 text = "$text.0"
 
-[workspace.sidebar]
+[workspace.sidebar.icons]
 padding = { left = 10, right = 10 }
 
+[workspace.sidebar.resize_handle]
+margin = { left = 6 }
+
 [workspace.sidebar_icon]
 color = "$text.2.color"
 

zed/src/theme.rs 🔗

@@ -36,7 +36,7 @@ pub struct Workspace {
     pub background: Color,
     pub tab: Tab,
     pub active_tab: Tab,
-    pub sidebar: ContainerStyle,
+    pub sidebar: Sidebar,
     pub sidebar_icon: SidebarIcon,
     pub active_sidebar_icon: SidebarIcon,
 }
@@ -52,6 +52,12 @@ pub struct Tab {
     pub icon_conflict: Color,
 }
 
+#[derive(Deserialize)]
+pub struct Sidebar {
+    pub icons: ContainerStyle,
+    pub resize_handle: ContainerStyle,
+}
+
 #[derive(Deserialize)]
 pub struct SidebarIcon {
     pub color: Color,

zed/src/workspace.rs 🔗

@@ -960,11 +960,15 @@ impl View for Workspace {
                             .with_child({
                                 let mut content = Flex::row();
                                 content.add_child(self.left_sidebar.render(&settings, cx));
-                                if let Some(element) = self.left_sidebar.render_active_item(cx) {
+                                if let Some(element) =
+                                    self.left_sidebar.render_active_item(&settings, cx)
+                                {
                                     content.add_child(element);
                                 }
                                 content.add_child(Expanded::new(1.0, self.center.render()).boxed());
-                                if let Some(element) = self.right_sidebar.render_active_item(cx) {
+                                if let Some(element) =
+                                    self.right_sidebar.render_active_item(&settings, cx)
+                                {
                                     content.add_child(element);
                                 }
                                 content.add_child(self.right_sidebar.render(&settings, cx));

zed/src/workspace/sidebar.rs 🔗

@@ -1,5 +1,5 @@
 use crate::Settings;
-use gpui::{action, color::Color, elements::*, AnyViewHandle, AppContext, Border};
+use gpui::{action, elements::*, AnyViewHandle, AppContext};
 use std::{cell::RefCell, rc::Rc};
 
 pub struct Sidebar {
@@ -94,15 +94,15 @@ impl Sidebar {
                 }))
                 .boxed(),
         )
-        .with_style(&settings.theme.workspace.sidebar)
+        .with_style(&settings.theme.workspace.sidebar.icons)
         .boxed()
     }
 
-    pub fn render_active_item(&self, cx: &AppContext) -> Option<ElementBox> {
+    pub fn render_active_item(&self, settings: &Settings, cx: &AppContext) -> Option<ElementBox> {
         if let Some(active_item) = self.active_item() {
             let mut container = Flex::row();
             if matches!(self.side, Side::Right) {
-                container.add_child(self.render_resize_handle(cx));
+                container.add_child(self.render_resize_handle(settings, cx));
             }
             container.add_child(
                 ConstrainedBox::new(ChildView::new(active_item.id()).boxed())
@@ -110,7 +110,7 @@ impl Sidebar {
                     .boxed(),
             );
             if matches!(self.side, Side::Left) {
-                container.add_child(self.render_resize_handle(cx));
+                container.add_child(self.render_resize_handle(settings, cx));
             }
             Some(container.boxed())
         } else {
@@ -118,12 +118,12 @@ impl Sidebar {
         }
     }
 
-    fn render_resize_handle(&self, cx: &AppContext) -> ElementBox {
+    fn render_resize_handle(&self, settings: &Settings, cx: &AppContext) -> ElementBox {
         let width = self.width.clone();
         let side = self.side;
         MouseEventHandler::new::<Self, _>(self.side.id(), cx, |_| {
             Container::new(Empty::new().boxed())
-                .with_border(Border::left(3., Color::white()))
+                .with_style(&settings.theme.workspace.sidebar.resize_handle)
                 .boxed()
         })
         .on_drag(move |delta, cx| {