Add styles for microphone and speakers buttons

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 29 ++++++---
crates/theme/src/theme.rs                    |  2 
styles/src/styleTree/workspace.ts            | 64 ++++++++++++++++++++++
3 files changed, 85 insertions(+), 10 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -451,21 +451,22 @@ impl CollabTitlebarItem {
     ) -> AnyElement<Self> {
         let icon;
         let tooltip;
-        let background;
-        if room.read(cx).is_muted().unwrap_or(false) {
+        let is_muted = room.read(cx).is_muted().unwrap_or(false);
+        if is_muted {
             icon = "icons/radix/mic-mute.svg";
             tooltip = "Unmute microphone\nRight click for options";
-            background = Color::red();
         } else {
             icon = "icons/radix/mic.svg";
             tooltip = "Mute microphone\nRight click for options";
-            background = Color::transparent_black();
         }
 
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<ToggleMute, Self>::new(0, cx, |state, _| {
-            let style = titlebar.call_control.style_for(state);
-            Svg::new(icon)
+            let style = titlebar
+                .toggle_microphone_button
+                .in_state(is_muted)
+                .style_for(state);
+            let image = Svg::new(icon)
                 .with_color(style.color)
                 .constrained()
                 .with_width(style.icon_width)
@@ -474,8 +475,12 @@ impl CollabTitlebarItem {
                 .with_width(style.button_width)
                 .with_height(style.button_width)
                 .contained()
-                .with_style(style.container)
-                .with_background_color(background)
+                .with_style(style.container);
+            if let Some(color) = style.container.background_color {
+                image.with_background_color(color)
+            } else {
+                image
+            }
         })
         .with_cursor_style(CursorStyle::PointingHand)
         .on_click(MouseButton::Left, move |_, _, cx| {
@@ -499,7 +504,8 @@ impl CollabTitlebarItem {
     ) -> AnyElement<Self> {
         let icon;
         let tooltip;
-        if room.read(cx).is_deafened().unwrap_or(false) {
+        let is_deafened = room.read(cx).is_deafened().unwrap_or(false);
+        if is_deafened {
             icon = "icons/radix/speaker-off.svg";
             tooltip = "Unmute speakers\nRight click for options";
         } else {
@@ -509,7 +515,10 @@ impl CollabTitlebarItem {
 
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<ToggleDeafen, Self>::new(0, cx, |state, _| {
-            let style = titlebar.call_control.style_for(state);
+            let style = titlebar
+                .toggle_speakers_button
+                .in_state(is_deafened)
+                .style_for(state);
             Svg::new(icon)
                 .with_color(style.color)
                 .constrained()

crates/theme/src/theme.rs

@@ -133,6 +133,8 @@ pub struct Titlebar {
     pub share_button: Toggleable<Interactive<ContainedText>>,
     pub call_control: Interactive<IconButton>,
     pub toggle_contacts_button: Toggleable<Interactive<IconButton>>,
+    pub toggle_microphone_button: Toggleable<Interactive<IconButton>>,
+    pub toggle_speakers_button: Toggleable<Interactive<IconButton>>,
     pub user_menu_button: Toggleable<Interactive<IconButton>>,
     pub toggle_contacts_badge: ContainerStyle,
 }

styles/src/styleTree/workspace.ts

@@ -343,6 +343,70 @@ export default function workspace(colorScheme: ColorScheme) {
                     },
                 },
             }),
+            toggleMicrophoneButton: toggleable({
+                base: interactive({
+                    base: {
+                        margin: { left: itemSpacing },
+                        cornerRadius: 6,
+                        color: foreground(layer, "variant"),
+                        iconWidth: 14,
+                        buttonWidth: 20,
+                    },
+                    state: {
+                        clicked: {
+                            background: background(layer, "variant", "pressed"),
+                        },
+                        hovered: {
+                            background: background(layer, "variant", "hovered"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            background: background(layer, "on", "default"),
+                        },
+                        hovered: {
+                            background: background(layer, "on", "hovered"),
+                        },
+                        clicked: {
+                            background: background(layer, "on", "pressed"),
+                        },
+                    },
+                },
+            }),
+            toggleSpeakersButton: toggleable({
+                base: interactive({
+                    base: {
+                        margin: { left: itemSpacing },
+                        cornerRadius: 6,
+                        color: foreground(layer, "variant"),
+                        iconWidth: 14,
+                        buttonWidth: 20,
+                    },
+                    state: {
+                        clicked: {
+                            background: background(layer, "variant", "pressed"),
+                        },
+                        hovered: {
+                            background: background(layer, "variant", "hovered"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            background: background(layer, "on", "default"),
+                        },
+                        hovered: {
+                            background: background(layer, "on", "hovered"),
+                        },
+                        clicked: {
+                            background: background(layer, "on", "pressed"),
+                        },
+                    },
+                },
+            }),
             userMenuButton: merge(titlebarButton, {
                 inactive: {
                     default: {