Update project & git menus to be Toggleable<Interactive<ContainedText>>

Nate Butler and Piotr Osiewicz created 2 years ago

Co-Authored-By: Piotr Osiewicz <[e-mail]>

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 18 ++++++++++--------
crates/theme/src/theme.rs                    |  4 ++--
styles/src/style_tree/titlebar.ts            |  9 +++++++--
3 files changed, 19 insertions(+), 12 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -221,17 +221,19 @@ impl CollabTitlebarItem {
             .as_ref()
             .and_then(RepositoryEntry::branch)
             .map(|branch| util::truncate_and_trailoff(&branch, MAX_BRANCH_NAME_LENGTH));
-        let project_style = theme.titlebar.title.clone();
-        let git_style = theme.titlebar.git_branch.clone();
+        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(
             Stack::new()
                 .with_child(
-                    MouseEventHandler::<ToggleProjectMenu, Self>::new(0, cx, |_, _| {
-                        Label::new(name, project_style.text.clone())
+                    MouseEventHandler::<ToggleProjectMenu, Self>::new(0, cx, |mouse_state, _| {
+                        let style = project_style.in_state(self.project_popover.is_some()).style_for(mouse_state);
+                        Label::new(name, style.text.clone())
                             .contained()
+                            .with_style(style.container)
                             .aligned()
                             .left()
                             .into_any_named("title-project-name")
@@ -241,8 +243,6 @@ impl CollabTitlebarItem {
                         this.toggle_project_menu(&Default::default(), cx)
                     })
                     .on_click(MouseButton::Left, move |_, _, _| {})
-                    .contained()
-                    .with_style(project_style.container),
                 )
                 .with_children(self.render_project_popover_host(&theme.titlebar, cx)),
         );
@@ -259,9 +259,11 @@ impl CollabTitlebarItem {
                     .with_child(
                         Stack::new()
                             .with_child(
-                                MouseEventHandler::<ToggleVcsMenu, Self>::new(0, cx, |_, _| {
-                                    Label::new(git_branch, git_style.text)
+                                MouseEventHandler::<ToggleVcsMenu, Self>::new(0, cx, |mouse_state, _| {
+                                    let style = git_style.in_state(self.branch_popover.is_some()).style_for(mouse_state);
+                                    Label::new(git_branch, style.text.clone())
                                         .contained()
+                                        .with_style(style.container.clone())
                                         .with_margin_right(item_spacing)
                                         .aligned()
                                         .left()

crates/theme/src/theme.rs

@@ -118,9 +118,9 @@ pub struct Titlebar {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub height: f32,
-    pub title: ContainedText,
+    pub project_menu_button: Toggleable<Interactive<ContainedText>>,
     pub project_name_divider: ContainedText,
-    pub git_branch: ContainedText,
+    pub git_menu_button: Toggleable<Interactive<ContainedText>>,
     pub item_spacing: f32,
     pub face_pile_spacing: f32,
     pub avatar_ribbon: AvatarRibbon,

styles/src/style_tree/titlebar.ts

@@ -173,9 +173,14 @@ export function titlebar(theme: ColorScheme): any {
         },
 
         // Project
-        title: text(theme.lowest, "sans", "active"),
         project_name_divider: text(theme.lowest, "sans", "variant"),
-        git_branch: text(theme.lowest, "sans", "variant"),
+
+        project_menu_button: toggleable_text_button(theme, {
+            color: 'base',
+        }),
+        git_menu_button: toggleable_text_button(theme, {
+            color: 'variant',
+        }),
 
         // Collaborators
         leader_avatar: {