Change dragged tab styling

K Simmons created 3 years ago

Change summary

crates/theme/src/theme.rs          |  1 +
crates/workspace/src/pane.rs       | 27 +++++++++++----------------
styles/src/styleTree/components.ts |  8 ++++++++
styles/src/styleTree/tabBar.ts     | 17 ++++++++++++++++-
4 files changed, 36 insertions(+), 17 deletions(-)

Detailed changes

crates/theme/src/theme.rs

@@ -75,6 +75,7 @@ pub struct TabBar {
     pub pane_button: Interactive<IconButton>,
     pub active_pane: TabStyles,
     pub inactive_pane: TabStyles,
+    pub dragged_tab: Tab,
     pub height: f32,
 }
 

crates/workspace/src/pane.rs

@@ -1013,16 +1013,12 @@ impl Pane {
                         let detail = detail.clone();
                         let hovered = mouse_state.hovered;
 
+                        let theme = cx.global::<Settings>().theme.clone();
+
                         move |_, cx| {
-                            Self::render_tab(
-                                &item,
-                                pane,
-                                detail,
-                                hovered,
-                                pane_active,
-                                tab_active,
-                                cx,
-                            )
+                            let tab_style =
+                                theme.workspace.tab_bar.tab_style(pane_active, tab_active);
+                            Self::render_tab(&item, pane, detail, hovered, tab_style, cx)
                         }
                     })
                     .with_cursor_style(if pane_active && tab_active {
@@ -1053,15 +1049,17 @@ impl Pane {
                             pane: pane.clone(),
                         },
                         {
+                            let theme = cx.global::<Settings>().theme.clone();
+
                             let detail = detail.clone();
                             move |dragged_item, cx: &mut RenderContext<Workspace>| {
+                                let tab_style = &theme.workspace.tab_bar.dragged_tab;
                                 Pane::render_tab(
                                     &dragged_item.item,
                                     dragged_item.pane.clone(),
                                     detail,
                                     false,
-                                    pane_active,
-                                    tab_active,
+                                    &tab_style,
                                     cx,
                                 )
                             }
@@ -1130,13 +1128,10 @@ impl Pane {
         pane: WeakViewHandle<Pane>,
         detail: Option<usize>,
         hovered: bool,
-        pane_active: bool,
-        tab_active: bool,
+        tab_style: &theme::Tab,
         cx: &mut RenderContext<V>,
     ) -> ElementBox {
-        let theme = cx.global::<Settings>().theme.clone();
-        let tab_style = theme.workspace.tab_bar.tab_style(pane_active, tab_active);
-        let title = item.tab_content(detail, tab_style, cx);
+        let title = item.tab_content(detail, &tab_style, cx);
 
         Flex::row()
             .with_child(

styles/src/styleTree/components.ts

@@ -94,3 +94,11 @@ export function popoverShadow(theme: Theme) {
     offset: [1, 2],
   };
 }
+
+export function draggedShadow(theme: Theme) {
+  return {
+    blur: 6,
+    color: theme.shadow,
+    offset: [1, 2],
+  };
+}

styles/src/styleTree/tabBar.ts

@@ -1,5 +1,6 @@
 import Theme from "../themes/common/theme";
-import { iconColor, text, border, backgroundColor } from "./components";
+import { withOpacity } from "../utils/color";
+import { iconColor, text, border, backgroundColor, draggedShadow } from "./components";
 
 export default function tabBar(theme: Theme) {
   const height = 32;
@@ -55,6 +56,19 @@ export default function tabBar(theme: Theme) {
     },
   }
 
+  const draggedTab = {
+    ...activePaneActiveTab,
+    background: withOpacity(tab.background, 0.8),
+    border: {
+      ...tab.border,
+      top: false,
+      left: false,
+      right: false,
+      bottom: false,
+    },
+    shadow: draggedShadow(theme),
+  }
+
   return {
     height,
     background: backgroundColor(theme, 300),
@@ -71,6 +85,7 @@ export default function tabBar(theme: Theme) {
       activeTab: inactivePaneActiveTab,
       inactiveTab: inactivePaneInactiveTab,
     },
+    draggedTab,
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {