Add collaborator count to collaborator list button

Julia created 3 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 49 +++++++++++++++------
crates/theme/src/theme.rs                    |  5 +
styles/src/styleTree/workspace.ts            | 10 +++
3 files changed, 45 insertions(+), 19 deletions(-)

Detailed changes

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::<ToggleCollaboratorList>::new(0, cx, |state, _| {
+                MouseEventHandler::<ToggleCollaboratorList>::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)

crates/theme/src/theme.rs

@@ -84,7 +84,8 @@ pub struct Titlebar {
     pub outdated_warning: ContainedText,
     pub share_button: Interactive<ContainedText>,
     pub call_control: Interactive<IconButton>,
-    pub toggle_collaborators_button: Interactive<IconButton>,
+    pub toggle_collaborators_button: Interactive<Icon>,
+    pub collaborator_count: ContainedText,
     pub toggle_contacts_button: Interactive<IconButton>,
     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,

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,