guise-ui 0.4.1

A Mantine-inspired component library for gpui, Zed's GPU-accelerated UI framework.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

//! `AvatarGroup` — a row of overlapping avatars with an optional overflow chip.

use gpui::prelude::*;
use gpui::{div, px, App, FontWeight, IntoElement, SharedString, Window};

use crate::theme::{theme, ColorName, Size};

const PALETTE: [ColorName; 6] = [
    ColorName::Blue,
    ColorName::Teal,
    ColorName::Grape,
    ColorName::Orange,
    ColorName::Pink,
    ColorName::Lime,
];

/// A stack of overlapping avatars. The Mantine `Avatar.Group`.
#[derive(IntoElement)]
pub struct AvatarGroup {
    items: Vec<SharedString>,
    size: Size,
    limit: Option<usize>,
}

impl AvatarGroup {
    pub fn new() -> Self {
        AvatarGroup {
            items: Vec::new(),
            size: Size::Md,
            limit: None,
        }
    }

    pub fn avatar(mut self, initials: impl Into<SharedString>) -> Self {
        self.items.push(initials.into());
        self
    }

    pub fn avatars<I, S>(mut self, items: I) -> Self
    where
        I: IntoIterator<Item = S>,
        S: Into<SharedString>,
    {
        self.items.extend(items.into_iter().map(Into::into));
        self
    }

    pub fn size(mut self, size: Size) -> Self {
        self.size = size;
        self
    }

    /// Show at most `limit` avatars; the rest collapse into a `+N` chip.
    pub fn limit(mut self, limit: usize) -> Self {
        self.limit = Some(limit);
        self
    }
}

impl Default for AvatarGroup {
    fn default() -> Self {
        AvatarGroup::new()
    }
}

impl RenderOnce for AvatarGroup {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let t = theme(cx);
        let dim = super::avatar::avatar_size(self.size);
        let ring = t.body().hsla();
        let overflow_bg = t
            .color(ColorName::Gray, if t.scheme.is_dark() { 6 } else { 3 })
            .hsla();
        let overflow_fg = t.text().hsla();
        let dark = t.scheme.is_dark();

        let total = self.items.len();
        let shown = self.limit.unwrap_or(total).min(total);
        let overflow = total - shown;

        // A circle with a ring border so overlaps read cleanly.
        let bubble = |bg, fg, content: SharedString, first: bool| {
            let mut b = div()
                .w(px(dim))
                .h(px(dim))
                .flex()
                .items_center()
                .justify_center()
                .rounded(px(dim))
                .border_2()
                .border_color(ring)
                .bg(bg)
                .text_color(fg)
                .text_size(px(dim * 0.38))
                .font_weight(FontWeight::SEMIBOLD)
                .child(content);
            if !first {
                b = b.ml(px(-(dim * 0.3)));
            }
            b
        };

        let mut row = div().flex().items_center();
        for (i, initials) in self.items.into_iter().take(shown).enumerate() {
            let name = PALETTE[i % PALETTE.len()];
            let bg = t.color(name, if dark { 8 } else { 1 }).hsla();
            let fg = t.color(name, if dark { 2 } else { 8 }).hsla();
            row = row.child(bubble(bg, fg, initials, i == 0));
        }
        if overflow > 0 {
            row = row.child(bubble(
                overflow_bg,
                overflow_fg,
                SharedString::from(format!("+{overflow}")),
                shown == 0,
            ));
        }
        row
    }
}