From 825a7cb799bf297ba099ba69004eecff2771c832 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 27 Jun 2023 16:20:45 -0400 Subject: [PATCH] Update screenshare toggle, titlebar spacing --- 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(-) diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index 0a91a488edd895fb4e57559689b80a29e332ebdb..08d63dc1b475c9d18ba3c685a4e6c337fcce27cc 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/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::::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) -> AnyElement { let titlebar = &theme.workspace.titlebar; MouseEventHandler::::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) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index f2e9c4aa3ecd9e9db8dfd3af2d151415965011d4..49c93f38f3f8e85733f92c61fe2eebe4c8621a03 100644 --- a/crates/theme/src/theme.rs +++ b/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>, + pub sign_in_button: Toggleable>, pub outdated_warning: ContainedText, pub share_button: Toggleable>, pub screen_share_button: Toggleable>, diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts index 47953a56d34c3aa438b4197d9891429f42d06678..850acc62f9ccf850a977e91b17b79e75a867fdc3 100644 --- a/styles/src/component/icon_button.ts +++ b/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: { diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts index 921ecc639fcc44e06aaeb90afe2ff441086717a3..ae7fede900e8c0216b8dd2cda51b10ef583c25de 100644 --- a/styles/src/component/text_button.ts +++ b/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']; diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index ec3776dcb02a6660a05da52c15322915c2ca4582..4b3c5f3b517b7cb64b6659ef1d7ca2489668121b 100644 --- a/styles/src/styleTree/workspace.ts +++ b/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,