gpui_component/avatar/
avatar.rs

1use gpui::{
2    div, img, prelude::FluentBuilder, App, Div, Hsla, ImageSource, InteractiveElement,
3    Interactivity, IntoElement, ParentElement as _, RenderOnce, SharedString, StyleRefinement,
4    Styled, Window,
5};
6
7use crate::{
8    avatar::{avatar_size, AvatarSized as _},
9    ActiveTheme, Colorize, Icon, IconName, Sizable, Size, StyledExt,
10};
11
12/// User avatar element.
13///
14/// We can use [`Sizable`] trait to set the size of the avatar (see also: [`avatar_size`] about the size in pixels).
15#[derive(IntoElement)]
16pub struct Avatar {
17    base: Div,
18    style: StyleRefinement,
19    src: Option<ImageSource>,
20    name: Option<SharedString>,
21    short_name: SharedString,
22    placeholder: Icon,
23    size: Size,
24}
25
26impl Avatar {
27    pub fn new() -> Self {
28        Self {
29            base: div(),
30            style: StyleRefinement::default(),
31            src: None,
32            name: None,
33            short_name: SharedString::default(),
34            placeholder: Icon::new(IconName::User),
35            size: Size::Medium,
36        }
37    }
38
39    /// Set to use image source for the avatar.
40    pub fn src(mut self, source: impl Into<ImageSource>) -> Self {
41        self.src = Some(source.into());
42        self
43    }
44
45    /// Set name of the avatar user, if `src` is none, will use this name as placeholder.
46    pub fn name(mut self, name: impl Into<SharedString>) -> Self {
47        let name: SharedString = name.into();
48        let short: SharedString = extract_text_initials(&name).into();
49
50        self.name = Some(name);
51        self.short_name = short;
52        self
53    }
54
55    /// Set placeholder icon, default: [`IconName::User`]
56    pub fn placeholder(mut self, icon: impl Into<Icon>) -> Self {
57        self.placeholder = icon.into();
58        self
59    }
60}
61
62impl Sizable for Avatar {
63    fn with_size(mut self, size: impl Into<Size>) -> Self {
64        self.size = size.into();
65        self
66    }
67}
68
69impl Styled for Avatar {
70    fn style(&mut self) -> &mut StyleRefinement {
71        &mut self.style
72    }
73}
74
75impl InteractiveElement for Avatar {
76    fn interactivity(&mut self) -> &mut Interactivity {
77        self.base.interactivity()
78    }
79}
80
81impl RenderOnce for Avatar {
82    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
83        let corner_radii = self.style.corner_radii.clone();
84        let mut inner_style = StyleRefinement::default();
85        inner_style.corner_radii = corner_radii;
86
87        const COLOR_COUNT: u64 = 360 / 15;
88        fn default_color(ix: u64, cx: &mut App) -> Hsla {
89            let h = (ix * 15).clamp(0, 360) as f32;
90            cx.theme().blue.hue(h / 360.0)
91        }
92
93        const BG_OPACITY: f32 = 0.2;
94
95        self.base
96            .avatar_size(self.size)
97            .flex()
98            .items_center()
99            .justify_center()
100            .flex_shrink_0()
101            .rounded_full()
102            .overflow_hidden()
103            .bg(cx.theme().secondary)
104            .text_color(cx.theme().background)
105            .border_1()
106            .border_color(cx.theme().background)
107            .when(self.name.is_none() && self.src.is_none(), |this| {
108                this.text_size(avatar_size(self.size) * 0.6)
109                    .child(self.placeholder)
110            })
111            .map(|this| match self.src {
112                None => this.when(self.name.is_some(), |this| {
113                    let color_ix = gpui::hash(&self.short_name) % COLOR_COUNT;
114                    let color = default_color(color_ix, cx);
115
116                    this.bg(color.opacity(BG_OPACITY))
117                        .text_color(color)
118                        .child(div().avatar_text_size(self.size).child(self.short_name))
119                }),
120                Some(src) => this.child(
121                    img(src)
122                        .avatar_size(self.size)
123                        .rounded_full()
124                        .refine_style(&inner_style),
125                ),
126            })
127            .refine_style(&self.style)
128    }
129}
130
131fn extract_text_initials(text: &str) -> String {
132    let mut result = text
133        .split(" ")
134        .flat_map(|word| word.chars().next().map(|c| c.to_string()))
135        .take(2)
136        .collect::<Vec<String>>()
137        .join("");
138
139    if result.len() == 1 {
140        result = text.chars().take(2).collect::<String>();
141    }
142
143    result.to_uppercase()
144}
145
146#[cfg(test)]
147mod tests {
148    use super::*;
149
150    #[test]
151    fn test_avatar_text_initials() {
152        assert_eq!(extract_text_initials(&"Jason Lee"), "JL".to_string());
153        assert_eq!(extract_text_initials(&"Foo Bar Dar"), "FB".to_string());
154        assert_eq!(extract_text_initials(&"huacnlee"), "HU".to_string());
155    }
156}
gpui_component/avatar/avatar.rs

gpui_component/avatar/
avatar.rs
