yororen_ui 0.2.0

Reusable UI components and widgets built on top of gpui.
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
121
122

use std::sync::Arc;

use gpui::{
    Div, ElementId, Hsla, Image, InteractiveElement, IntoElement, ObjectFit, ParentElement,
    RenderOnce, Styled, StyledImage, div, img, prelude::FluentBuilder, px,
};

use crate::theme::ActiveTheme;

/// Creates a new avatar element.
pub fn avatar(image: Option<Arc<Image>>) -> Avatar {
    Avatar::new(image)
}

#[derive(Clone, Copy)]
pub enum AvatarShape {
    Circle,
    Square,
}

#[derive(IntoElement)]
pub struct Avatar {
    element_id: ElementId,
    base: Div,
    image: Option<Arc<Image>>,
    shape: AvatarShape,
    bg: Option<Hsla>,
    status: Option<Hsla>,
}

impl Avatar {
    pub fn new(image: Option<Arc<Image>>) -> Self {
        Self {
            element_id: "ui:avatar".into(),
            base: div(),
            image,
            shape: AvatarShape::Circle,
            bg: None,
            status: None,
        }
    }

    pub fn id(mut self, id: impl Into<ElementId>) -> Self {
        self.element_id = id.into();
        self
    }

    /// Alias for `id(...)`. Use `key(...)` when you want to emphasize state identity.
    pub fn key(self, key: impl Into<ElementId>) -> Self {
        self.id(key)
    }

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

    pub fn bg(mut self, color: impl Into<Hsla>) -> Self {
        self.bg = Some(color.into());
        self
    }

    pub fn status(mut self, color: impl Into<Hsla>) -> Self {
        self.status = Some(color.into());
        self
    }
}

impl ParentElement for Avatar {
    fn extend(&mut self, elements: impl IntoIterator<Item = gpui::AnyElement>) {
        self.base.extend(elements);
    }
}

impl Styled for Avatar {
    fn style(&mut self) -> &mut gpui::StyleRefinement {
        self.base.style()
    }
}

impl RenderOnce for Avatar {
    fn render(self, _window: &mut gpui::Window, cx: &mut gpui::App) -> impl IntoElement {
        let is_circle = matches!(self.shape, AvatarShape::Circle);

        let mut base = self.base.id(self.element_id);

        if let Some(bg) = self.bg {
            base = base.bg(bg);
        }

        base = match self.shape {
            AvatarShape::Circle => base.rounded_full(),
            AvatarShape::Square => base.rounded_md(),
        };

        let base = if let Some(image) = self.image {
            base.child(
                img(image)
                    .size_full()
                    .object_fit(ObjectFit::Cover)
                    .when(is_circle, |this| this.rounded_full())
                    .when(!is_circle, |this| this.rounded_md()),
            )
        } else {
            base.child("?")
        };

        base.when_some(self.status, |this, color| {
            this.child(
                div()
                    .absolute()
                    .right(px(2.))
                    .bottom(px(2.))
                    .size_3()
                    .rounded_full()
                    .bg(color)
                    .border_2()
                    .border_color(cx.theme().surface.base),
            )
        })
    }
}