zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-19 10:29:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add styles for microphone and speakers buttons

Browse Source
This commit is contained in:
Piotr Osiewicz 2023-06-23 11:52:06 +02:00
parent 8bd9fe1fb0
commit 437e41f99d
3 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
crates/collab_ui/src/collab_titlebar_item.rs
View File

@ -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()

2
crates/theme/src/theme.rs
View File

@ -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,
}

64
styles/src/styleTree/workspace.ts
View File

@ -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: {