diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index 59098e3492db0b133258d6121f50d17aae0319cd..5ca242cd0b062937558e133de24a26eb2387ac40 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -84,10 +84,9 @@ impl View for CollabTitlebarItem { if ActiveCall::global(cx).read(cx).room().is_some() { left_container.add_child(self.render_share_unshare_button(&workspace, &theme, cx)); + left_container.add_child(self.render_toggle_collaborator_list_button(&theme, cx)); } - left_container.add_child(self.render_toggle_collaborator_list_button(&theme, cx)); - let mut right_container = Flex::row(); right_container.add_children(self.render_toggle_screen_sharing_button(&theme, cx)); @@ -200,18 +199,40 @@ impl CollabTitlebarItem { Stack::new() .with_child( - MouseEventHandler::::new(0, cx, |state, _| { + MouseEventHandler::::new(0, cx, |state, cx| { + let collaborator_count_style = titlebar.collaborator_count.clone(); let style = titlebar .toggle_collaborators_button .style_for(state, self.collaborator_list_popover.is_some()); - Svg::new("icons/user_group_12.svg") - .with_color(style.color) - .constrained() - .with_width(style.icon_width) - .aligned() - .constrained() - .with_width(style.button_width) - .with_height(style.button_width) + + let active_call = ActiveCall::global(cx); + let collaborator_count = active_call + .read(cx) + .room() + .map_or(0, |room| room.read(cx).remote_participants().len()) + + 1; + + Flex::row() + .with_child( + Svg::new("icons/user_group_12.svg") + .with_color(style.color) + .constrained() + .with_width(style.width) + .aligned() + .contained() + .with_style(style.container) + .boxed(), + ) + .with_child( + Label::new( + format!("{collaborator_count}"), + collaborator_count_style.text, + ) + .contained() + .with_style(collaborator_count_style.container) + .aligned() + .boxed(), + ) .contained() .with_style(style.container) .boxed() @@ -228,10 +249,8 @@ impl CollabTitlebarItem { ChildView::new(popover, cx) .contained() .with_margin_top(titlebar.height) - .with_margin_left(titlebar.toggle_collaborators_button.default.button_width) - .with_margin_right( - -titlebar.toggle_collaborators_button.default.button_width, - ) + .with_margin_left(titlebar.toggle_collaborators_button.default.width) + .with_margin_right(-titlebar.toggle_collaborators_button.default.width) .boxed(), ) .with_fit_mode(OverlayFitMode::SwitchAnchor) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 26f071167e630e7eb64b711d0ef2cefd8028465c..b4d3883b4a0c2ce68c7679714ffb478a3e2cbe6c 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -84,7 +84,8 @@ pub struct Titlebar { pub outdated_warning: ContainedText, pub share_button: Interactive, pub call_control: Interactive, - pub toggle_collaborators_button: Interactive, + pub toggle_collaborators_button: Interactive, + pub collaborator_count: ContainedText, pub toggle_contacts_button: Interactive, pub toggle_contacts_badge: ContainerStyle, } @@ -382,7 +383,7 @@ pub struct InviteLink { pub icon: Icon, } -#[derive(Deserialize, Default)] +#[derive(Deserialize, Clone, Copy, Default)] pub struct Icon { #[serde(flatten)] pub container: ContainerStyle, diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index e81ce608f42e33fd59dfffa492eccb98e9c2305a..22aa361591a2bbbd3c6efab37d1d1ab404b31043 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -151,8 +151,7 @@ export default function workspace(colorScheme: ColorScheme) { margin: { left: 6 }, cornerRadius: 6, color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, + width: 12, active: { background: background(layer, "variant", "active"), color: foreground(layer, "variant", "active"), @@ -162,6 +161,13 @@ export default function workspace(colorScheme: ColorScheme) { color: foreground(layer, "variant", "hovered"), }, }, + collaboratorCount: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: 4, + right: 6, + }, + }, toggleContactsButton: { margin: { left: 6 }, cornerRadius: 6,