Remove project divider in titlebar

Nate Butler created 2 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs |  8 ----
styles/src/component/index.ts                |  6 +++
styles/src/component/text_button.ts          | 44 +++++++++++-----------
styles/src/element/index.ts                  |  2 +
styles/src/element/margin.ts                 |  0 
styles/src/element/padding.ts                |  0 
styles/src/style_tree/titlebar.ts            | 12 ++----
styles/src/theme/index.ts                    |  1 
8 files changed, 35 insertions(+), 38 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -213,7 +213,6 @@ impl CollabTitlebarItem {
             .map(|branch| util::truncate_and_trailoff(&branch, MAX_BRANCH_NAME_LENGTH));
         let project_style = theme.titlebar.project_menu_button.clone();
         let git_style = theme.titlebar.git_menu_button.clone();
-        let divider_style = theme.titlebar.project_name_divider.clone();
         let item_spacing = theme.titlebar.item_spacing;
 
         let mut ret = Flex::row().with_child(
@@ -249,13 +248,6 @@ impl CollabTitlebarItem {
         if let Some(git_branch) = branch_prepended {
             ret = ret.with_child(
                 Flex::row()
-                    .with_child(
-                        Label::new("/", divider_style.text)
-                            .contained()
-                            .with_style(divider_style.container)
-                            .aligned()
-                            .left(),
-                    )
                     .with_child(
                         Stack::new()
                             .with_child(

styles/src/component/index.ts

@@ -0,0 +1,6 @@
+export * from "./icon_button"
+export * from "./indicator"
+export * from "./input"
+export * from "./tab"
+export * from "./tab_bar_button"
+export * from "./text_button"

styles/src/component/text_button.ts

@@ -74,31 +74,31 @@ export function text_button({
             hovered: disabled
                 ? {}
                 : {
-                      background: background(
-                          layer ?? theme.lowest,
-                          color,
-                          "hovered"
-                      ),
-                      color: foreground(
-                          layer ?? theme.lowest,
-                          color,
-                          "hovered"
-                      ),
-                  },
+                    background: background(
+                        layer ?? theme.lowest,
+                        color,
+                        "hovered"
+                    ),
+                    color: foreground(
+                        layer ?? theme.lowest,
+                        color,
+                        "hovered"
+                    ),
+                },
             clicked: disabled
                 ? {}
                 : {
-                      background: background(
-                          layer ?? theme.lowest,
-                          color,
-                          "pressed"
-                      ),
-                      color: foreground(
-                          layer ?? theme.lowest,
-                          color,
-                          "pressed"
-                      ),
-                  },
+                    background: background(
+                        layer ?? theme.lowest,
+                        color,
+                        "pressed"
+                    ),
+                    color: foreground(
+                        layer ?? theme.lowest,
+                        color,
+                        "pressed"
+                    ),
+                },
         },
     })
 }

styles/src/element/index.ts

@@ -1,4 +1,6 @@
 import { interactive, Interactive } from "./interactive"
 import { toggleable, Toggleable } from "./toggle"
 
+export * from "./padding"
+export * from "./margin"
 export { interactive, Interactive, toggleable, Toggleable }

styles/src/component/margin.ts → styles/src/element/margin.ts

styles/src/component/padding.ts → styles/src/element/padding.ts

styles/src/style_tree/titlebar.ts

@@ -1,8 +1,6 @@
-import { icon_button, toggleable_icon_button } from "../component/icon_button"
-import { toggleable_text_button } from "../component/text_button"
+import { icon_button, toggleable_icon_button, toggleable_text_button } from "../component"
 import { interactive, toggleable } from "../element"
-import { useTheme } from "../theme"
-import { with_opacity } from "../theme/color"
+import { useTheme, with_opacity } from "../theme"
 import { background, border, foreground, text } from "./components"
 
 const ITEM_SPACING = 8
@@ -185,12 +183,10 @@ export function titlebar(): any {
             height: 400,
         },
 
-        // Project
-        project_name_divider: text(theme.lowest, "sans", "variant"),
-
         project_menu_button: toggleable_text_button(theme, {
-            color: "base",
+            color: "base"
         }),
+
         git_menu_button: toggleable_text_button(theme, {
             color: "variant",
         }),

styles/src/theme/index.ts

@@ -23,3 +23,4 @@ export * from "./create_theme"
 export * from "./ramps"
 export * from "./syntax"
 export * from "./theme_config"
+export * from "./color"