Add collaborator count to collaborator list button

This commit is contained in:
Julia 2023-01-30 17:07:30 -05:00
parent c697c1a96a
commit bf8658067f
3 changed files with 45 additions and 19 deletions

View file

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

View file

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

View file

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