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

guise/data/
avatargroup.rs
