Improve styling of bottom and right docks

Antonio Scandurra created 2 years ago

Change summary

crates/theme/src/theme.rs         |  6 +++---
crates/workspace/src/dock.rs      | 17 +++++++++++++----
styles/src/styleTree/workspace.ts | 11 +++++++++--
3 files changed, 25 insertions(+), 9 deletions(-)

Detailed changes

crates/theme/src/theme.rs

@@ -402,9 +402,9 @@ pub struct StatusBarLspStatus {
 
 #[derive(Deserialize, Default)]
 pub struct Dock {
-    pub initial_size: f32,
-    #[serde(flatten)]
-    pub container: ContainerStyle,
+    pub left: ContainerStyle,
+    pub bottom: ContainerStyle,
+    pub right: ContainerStyle,
 }
 
 #[derive(Clone, Deserialize, Default)]

crates/workspace/src/dock.rs

@@ -372,11 +372,10 @@ impl Dock {
 
     pub fn render_placeholder(&self, cx: &WindowContext) -> AnyElement<Workspace> {
         if let Some(active_entry) = self.active_entry() {
-            let style = &settings::get::<ThemeSettings>(cx).theme.workspace.dock;
             Empty::new()
                 .into_any()
                 .contained()
-                .with_style(style.container)
+                .with_style(self.style(cx))
                 .resizable(
                     self.position.to_resize_handle_side(),
                     active_entry.panel.size(cx),
@@ -387,6 +386,16 @@ impl Dock {
             Empty::new().into_any()
         }
     }
+
+    fn style(&self, cx: &WindowContext) -> ContainerStyle {
+        let theme = &settings::get::<ThemeSettings>(cx).theme;
+        let style = match self.position {
+            DockPosition::Left => theme.workspace.dock.left,
+            DockPosition::Bottom => theme.workspace.dock.bottom,
+            DockPosition::Right => theme.workspace.dock.right,
+        };
+        style
+    }
 }
 
 impl Entity for Dock {
@@ -400,10 +409,10 @@ impl View for Dock {
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
         if let Some(active_entry) = self.active_entry() {
-            let style = &settings::get::<ThemeSettings>(cx).theme.workspace.dock;
+            let style = self.style(cx);
             ChildView::new(active_entry.panel.as_any(), cx)
                 .contained()
-                .with_style(style.container)
+                .with_style(style)
                 .resizable(
                     self.position.to_resize_handle_side(),
                     active_entry.panel.size(cx),

styles/src/styleTree/workspace.ts

@@ -128,8 +128,15 @@ export default function workspace(colorScheme: ColorScheme) {
             border: border(colorScheme.highest, { overlay: true }),
         },
         dock: {
-            initialSize: 240,
-            border: border(layer, { left: true, right: true }),
+            left: {
+                border: border(layer, { right: true }),
+            },
+            bottom: {
+                border: border(layer, { top: true }),
+            },
+            right: {
+                border: border(layer, { left: true }),
+            }
         },
         paneDivider: {
             color: borderColor(layer),