Add styles for user menu

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 22 +++--
crates/theme/src/theme.rs                    | 11 ++
styles/src/styleTree/app.ts                  |  2 
styles/src/styleTree/titlebar.ts             | 81 ++++++++++++++++++++++
4 files changed, 107 insertions(+), 9 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -639,12 +639,17 @@ impl CollabTitlebarItem {
         avatar: Option<Arc<ImageData>>,
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
-        let titlebar = &theme.workspace.titlebar;
-        let avatar_style = &theme.workspace.titlebar.follower_avatar;
+        let tooltip = theme.tooltip.clone();
+        let user_menu_button = &theme.titlebar;
+        let avatar_style = &user_menu_button.user_menu_button.avatar;
         Stack::new()
             .with_child(
                 MouseEventHandler::<ToggleUserMenu, Self>::new(0, cx, |state, _| {
-                    let style = titlebar.call_control.style_for(state);
+                    let style = user_menu_button
+                        .user_menu_button
+                        .user_menu
+                        .inactive_state()
+                        .style_for(state);
 
                     let mut dropdown = Flex::row().align_children_center();
 
@@ -658,15 +663,15 @@ impl CollabTitlebarItem {
                     dropdown
                         .with_child(
                             Svg::new("icons/caret_down_8.svg")
-                                .with_color(style.color)
+                                .with_color(theme.titlebar.user_menu_button.icon.color)
                                 .constrained()
-                                .with_width(style.icon_width)
+                                .with_width(theme.titlebar.user_menu_button.icon.width)
                                 .contained()
                                 .into_any(),
                         )
                         .aligned()
                         .constrained()
-                        .with_height(style.button_width)
+                        .with_height(style.width)
                         .contained()
                         .with_style(style.container)
                         .into_any()
@@ -679,11 +684,10 @@ impl CollabTitlebarItem {
                     0,
                     "Toggle user menu".to_owned(),
                     Some(Box::new(ToggleUserMenu)),
-                    theme.tooltip.clone(),
+                    tooltip,
                     cx,
                 )
-                .contained()
-                .with_margin_left(theme.workspace.titlebar.item_spacing),
+                .contained(),
             )
             .with_child(
                 ChildView::new(&self.user_menu, cx)

crates/theme/src/theme.rs

@@ -65,6 +65,7 @@ pub struct Theme {
     pub feedback: FeedbackStyle,
     pub welcome: WelcomeStyle,
     pub color_scheme: ColorScheme,
+    pub titlebar: UserMenu,
 }
 
 #[derive(Deserialize, Default, Clone)]
@@ -140,6 +141,16 @@ pub struct Titlebar {
     pub toggle_contacts_badge: ContainerStyle,
 }
 
+#[derive(Clone, Deserialize, Default)]
+pub struct UserMenu {
+    pub user_menu_button: UserMenuButton,
+}
+#[derive(Clone, Deserialize, Default)]
+pub struct UserMenuButton {
+    pub user_menu: Toggleable<Interactive<Icon>>,
+    pub avatar: AvatarStyle,
+    pub icon: Icon,
+}
 #[derive(Copy, Clone, Deserialize, Default)]
 pub struct AvatarStyle {
     #[serde(flatten)]

styles/src/styleTree/app.ts

@@ -23,6 +23,7 @@ import feedback from "./feedback"
 import welcome from "./welcome"
 import copilot from "./copilot"
 import assistant from "./assistant"
+import { titlebar } from "./titlebar"
 
 export default function app(colorScheme: ColorScheme): Object {
     return {
@@ -36,6 +37,7 @@ export default function app(colorScheme: ColorScheme): Object {
         incomingCallNotification: incomingCallNotification(colorScheme),
         picker: picker(colorScheme),
         workspace: workspace(colorScheme),
+        titlebar: titlebar(colorScheme),
         copilot: copilot(colorScheme),
         welcome: welcome(colorScheme),
         contextMenu: contextMenu(colorScheme),

styles/src/styleTree/titlebar.ts

@@ -0,0 +1,81 @@
+import { ColorScheme } from "../common";
+import { interactive, toggleable } from "../element"
+import { background, foreground, text } from "./components";
+
+const titlebarButton = (theme: ColorScheme) => toggleable({
+    base: interactive({
+        base: {
+            cornerRadius: 6,
+            height: 24,
+            width: 24,
+            padding: {
+                top: 4,
+                bottom: 4,
+                left: 4,
+                right: 4,
+            },
+            ...text(theme.lowest, "sans", { size: "xs" }),
+            background: background(theme.lowest),
+        },
+        state: {
+            hovered: {
+                ...text(theme.lowest, "sans", "hovered", {
+                    size: "xs",
+                }),
+                background: background(theme.lowest, "hovered"),
+            },
+            clicked: {
+                ...text(theme.lowest, "sans", "pressed", {
+                    size: "xs",
+                }),
+                background: background(theme.lowest, "pressed"),
+            },
+        },
+    }),
+    state: {
+        active: {
+            default: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle),
+            },
+            hovered: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle, "hovered"),
+            },
+            clicked: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle, "pressed"),
+            },
+        },
+    }
+});
+
+/**
+* Opens the User Menu when toggled
+*
+* When logged in shows the user's avatar and a chevron,
+* When logged out only shows a chevron.
+*/
+function userMenuButton(theme: ColorScheme) {
+    return {
+        userMenu: titlebarButton(theme),
+        avatar: {
+            icon_width: 16,
+            icon_height: 16,
+            cornerRadius: 4,
+            outerWidth: 10,
+            outerCornerRadius: 10
+        },
+        icon: {
+            width: 11,
+            height: 11,
+            color: foreground(theme.lowest)
+        }
+    }
+}
+
+export function titlebar(theme: ColorScheme) {
+    return {
+        userMenuButton: userMenuButton(theme)
+    }
+}