guise/data/
avatargroup.rs

1//! `AvatarGroup` — a row of overlapping avatars with an optional overflow chip.
2
3use gpui::prelude::*;
4use gpui::{div, px, App, FontWeight, IntoElement, SharedString, Window};
5
6use crate::theme::{theme, ColorName, Size};
7
8const PALETTE: [ColorName; 6] = [
9    ColorName::Blue,
10    ColorName::Teal,
11    ColorName::Grape,
12    ColorName::Orange,
13    ColorName::Pink,
14    ColorName::Lime,
15];
16
17/// A stack of overlapping avatars. The Mantine `Avatar.Group`.
18#[derive(IntoElement)]
19pub struct AvatarGroup {
20    items: Vec<SharedString>,
21    size: Size,
22    limit: Option<usize>,
23}
24
25impl AvatarGroup {
26    pub fn new() -> Self {
27        AvatarGroup {
28            items: Vec::new(),
29            size: Size::Md,
30            limit: None,
31        }
32    }
33
34    pub fn avatar(mut self, initials: impl Into<SharedString>) -> Self {
35        self.items.push(initials.into());
36        self
37    }
38
39    pub fn avatars<I, S>(mut self, items: I) -> Self
40    where
41        I: IntoIterator<Item = S>,
42        S: Into<SharedString>,
43    {
44        self.items.extend(items.into_iter().map(Into::into));
45        self
46    }
47
48    pub fn size(mut self, size: Size) -> Self {
49        self.size = size;
50        self
51    }
52
53    /// Show at most `limit` avatars; the rest collapse into a `+N` chip.
54    pub fn limit(mut self, limit: usize) -> Self {
55        self.limit = Some(limit);
56        self
57    }
58
59}
60
61impl Default for AvatarGroup {
62    fn default() -> Self {
63        AvatarGroup::new()
64    }
65}
66
67impl RenderOnce for AvatarGroup {
68    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
69        let t = theme(cx);
70        let dim = super::avatar::avatar_size(self.size);
71        let ring = t.body().hsla();
72        let overflow_bg = t.color(ColorName::Gray, if t.scheme.is_dark() { 6 } else { 3 }).hsla();
73        let overflow_fg = t.text().hsla();
74        let dark = t.scheme.is_dark();
75
76        let total = self.items.len();
77        let shown = self.limit.unwrap_or(total).min(total);
78        let overflow = total - shown;
79
80        // A circle with a ring border so overlaps read cleanly.
81        let bubble = |bg, fg, content: SharedString, first: bool| {
82            let mut b = div()
83                .w(px(dim))
84                .h(px(dim))
85                .flex()
86                .items_center()
87                .justify_center()
88                .rounded(px(dim))
89                .border_2()
90                .border_color(ring)
91                .bg(bg)
92                .text_color(fg)
93                .text_size(px(dim * 0.38))
94                .font_weight(FontWeight::SEMIBOLD)
95                .child(content);
96            if !first {
97                b = b.ml(px(-(dim * 0.3)));
98            }
99            b
100        };
101
102        let mut row = div().flex().items_center();
103        for (i, initials) in self.items.into_iter().take(shown).enumerate() {
104            let name = PALETTE[i % PALETTE.len()];
105            let bg = t.color(name, if dark { 8 } else { 1 }).hsla();
106            let fg = t.color(name, if dark { 2 } else { 8 }).hsla();
107            row = row.child(bubble(bg, fg, initials, i == 0));
108        }
109        if overflow > 0 {
110            row = row.child(bubble(
111                overflow_bg,
112                overflow_fg,
113                SharedString::from(format!("+{overflow}")),
114                shown == 0,
115            ));
116        }
117        row
118    }
119}
guise/data/avatargroup.rs

guise/data/
avatargroup.rs
