Update screenshare toggle, titlebar spacing

Nate Butler created 2 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 11 ++++-
crates/theme/src/theme.rs                    |  2 
styles/src/component/icon_button.ts          | 12 +++++-
styles/src/component/text_button.ts          |  2 
styles/src/styleTree/workspace.ts            | 39 +++++++++++++++------
5 files changed, 47 insertions(+), 19 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -408,16 +408,21 @@ impl CollabTitlebarItem {
         let icon;
         let tooltip;
         if room.read(cx).is_screen_sharing() {
-            icon = "icons/radix/desktop-mute.svg";
+            icon = "icons/radix/desktop.svg";
             tooltip = "Stop Sharing Screen"
         } else {
             icon = "icons/radix/desktop.svg";
             tooltip = "Share Screen";
         }
 
+        let active = room.read(cx).is_screen_sharing();
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<ToggleScreenSharing, Self>::new(0, cx, |state, _| {
-            let style = titlebar.screen_share_button.style_for(state);
+            let style = titlebar
+                .screen_share_button
+                .in_state(active)
+                .style_for(state);
+
             Svg::new(icon)
                 .with_color(style.color)
                 .constrained()
@@ -701,7 +706,7 @@ impl CollabTitlebarItem {
     fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<SignIn, Self>::new(0, cx, |state, _| {
-            let style = titlebar.sign_in_prompt.inactive_state().style_for(state);
+            let style = titlebar.sign_in_button.inactive_state().style_for(state);
             Label::new("Sign In", style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/theme/src/theme.rs

@@ -130,7 +130,7 @@ pub struct Titlebar {
     pub leader_avatar: AvatarStyle,
     pub follower_avatar: AvatarStyle,
     pub inactive_avatar_grayscale: bool,
-    pub sign_in_prompt: Toggleable<Interactive<ContainedText>>,
+    pub sign_in_button: Toggleable<Interactive<ContainedText>>,
     pub outdated_warning: ContainedText,
     pub share_button: Toggleable<Interactive<ContainedText>>,
     pub screen_share_button: Toggleable<Interactive<IconButton>>,

styles/src/component/icon_button.ts

@@ -1,7 +1,13 @@
 import { ColorScheme } from "../common";
 import { interactive, toggleable } from "../element";
 import { background, foreground } from "../styleTree/components";
-import { Margin } from "../types/zed";
+
+export type Margin = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
 
 interface IconButtonOptions {
     layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
@@ -34,8 +40,8 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
             margin: m,
             icon_width: 15,
             icon_height: 15,
-            button_width: 23,
-            button_height: 19,
+            button_width: 21,
+            button_height: 17,
         },
         state: {
             default: {

styles/src/component/text_button.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../common";
 import { interactive, toggleable } from "../element";
 import { TextProperties, background, foreground, text } from "../styleTree/components";
-import { Margin } from "../types/zed";
+import { Margin } from "./icon_button";
 
 interface TextButtonOptions {
     layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];

styles/src/styleTree/workspace.ts

@@ -260,7 +260,7 @@ export default function workspace(colorScheme: ColorScheme) {
 
             // Sign in buttom
             // FlatButton, Variant
-            signInPrompt: merge(titlebarButton, {
+            sign_in_button: merge(titlebarButton, {
                 inactive: {
                     default: {
                         margin: {
@@ -300,25 +300,41 @@ export default function workspace(colorScheme: ColorScheme) {
                 cornerRadius: 6,
             },
 
-            screen_share_button: icon_button(colorScheme, {
-                margin: { left: itemSpacing / 2 },
-            }),
-
-            toggle_contacts_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing }
+            leave_call_button: icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing
+                },
             }),
 
             toggle_microphone_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing },
+                margin: {
+                    left: itemSpacing,
+                    right: itemSpacing / 2
+                },
                 active_color: 'negative'
             }),
 
             toggle_speakers_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing / 2 },
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing / 2
+                },
             }),
 
-            leave_call_button: icon_button(colorScheme, {
-                margin: { left: itemSpacing },
+            screen_share_button: toggleable_icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing
+                },
+                active_color: 'accent'
+            }),
+
+            toggle_contacts_button: toggleable_icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing,
+                    right: itemSpacing / 2
+                },
             }),
 
             user_menu_button:
@@ -339,6 +355,7 @@ export default function workspace(colorScheme: ColorScheme) {
                     },
                 }),
 
+            // Jewel that notifies you that there are new contact requests
             toggleContactsBadge: {
                 cornerRadius: 3,
                 padding: 2,