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

use gpui::{
    Div, ElementId, FontWeight, Hsla, InteractiveElement, IntoElement, ParentElement, RenderOnce,
    SharedString, Styled, div,
};

use crate::theme::ActiveTheme;

/// Creates a new badge element.
pub fn badge(text: impl Into<SharedString>) -> Badge {
    Badge::new(text)
}

#[derive(IntoElement)]
pub struct Badge {
    element_id: ElementId,
    base: Div,
    text: SharedString,
    tone: Option<Hsla>,
}

impl Badge {
    pub fn new(text: impl Into<SharedString>) -> Self {
        Self {
            element_id: "ui:badge".into(),
            base: div(),
            text: text.into(),
            tone: 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 tone(mut self, color: impl Into<Hsla>) -> Self {
        self.tone = Some(color.into());
        self
    }
}

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

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

impl RenderOnce for Badge {
    fn render(self, _window: &mut gpui::Window, cx: &mut gpui::App) -> impl IntoElement {
        let element_id = self.element_id;

        let default_bg = cx.theme().status.info.bg;
        let bg = self.tone.unwrap_or(default_bg);
        let fg = if self.tone.is_some() {
            cx.theme().content.on_status
        } else {
            cx.theme().status.info.fg
        };

        self.base
            .id(element_id)
            .px_2()
            .h_5()
            .rounded_full()
            .bg(bg)
            .text_color(fg)
            .text_xs()
            .font_weight(FontWeight::MEDIUM)
            .flex()
            .items_center()
            .child(self.text)
    }
}