From 0a97a9c0fd116abafa538c03ea51fa10fdfc6b3d Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Tue, 23 Aug 2022 18:02:01 -0700
Subject: [PATCH] Change dragged tab styling

---
 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(-)

diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 08fb65a001..d9a6c631c6 100644
--- a/crates/theme/src/theme.rs
+++ b/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,
 }
 
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index 3191bd6ddc..0a8f68744f 100644
--- a/crates/workspace/src/pane.rs
+++ b/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(
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 10e70ba3ef..f0d1dd8412 100644
--- a/styles/src/styleTree/components.ts
+++ b/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],
+  };
+}
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 66da26d7ed..039b8d89f4 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/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: {