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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

//! `Blockquote` — a quoted passage behind a left accent border, with an
//! optional icon and citation.
//!
//! ```ignore
//! Blockquote::new()
//!     .icon(IconName::Info)
//!     .text("Life is like an npm install — you never know what you are going to get.")
//!     .cite("– Forrest Gump")
//! ```

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

use crate::icon::{Icon, IconName};
use crate::theme::{theme, ColorName, Size};

/// A quote block. The Mantine `Blockquote`.
///
/// Content is either [`Blockquote::text`], `ParentElement` children
/// (`.child(..)`), or both — text renders first.
#[derive(IntoElement)]
pub struct Blockquote {
    children: Vec<AnyElement>,
    text: Option<SharedString>,
    color: ColorName,
    cite: Option<SharedString>,
    icon: Option<IconName>,
    padding: Size,
    radius: Option<Size>,
}

impl Blockquote {
    pub fn new() -> Self {
        Blockquote {
            children: Vec::new(),
            text: None,
            color: ColorName::Blue,
            cite: None,
            icon: None,
            padding: Size::Lg,
            radius: None,
        }
    }

    /// The quoted text (shorthand for a single themed text child).
    pub fn text(mut self, text: impl Into<SharedString>) -> Self {
        self.text = Some(text.into());
        self
    }

    /// The accent color for the border, icon, and background wash.
    pub fn color(mut self, color: ColorName) -> Self {
        self.color = color;
        self
    }

    /// Attribution line, rendered dimmed below the quote (include your own
    /// dash, e.g. `"– Forrest Gump"`).
    pub fn cite(mut self, cite: impl Into<SharedString>) -> Self {
        self.cite = Some(cite.into());
        self
    }

    /// A glyph shown above the quote in the accent color.
    pub fn icon(mut self, icon: IconName) -> Self {
        self.icon = Some(icon);
        self
    }

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

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

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

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

impl RenderOnce for Blockquote {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let t = theme(cx);
        let dark = t.scheme.is_dark();
        let accent = t.color(self.color, if dark { 4 } else { 6 }).hsla();
        let wash = t.color(self.color, if dark { 5 } else { 6 }).alpha(0.06);
        let text_color = t.text().hsla();
        let dimmed = t.dimmed().hsla();
        let padding = t.spacing(self.padding);
        let gap = t.spacing(Size::Sm);
        let radius = t.radius(self.radius.unwrap_or(t.default_radius));
        let font_md = t.font_size(Size::Md);
        let font_sm = t.font_size(Size::Sm);

        let mut el = div()
            .flex()
            .flex_col()
            .gap(px(gap))
            .p(px(padding))
            .border_l(px(3.0))
            .border_color(accent)
            .rounded_r(px(radius))
            .bg(wash)
            .text_size(px(font_md))
            .text_color(text_color);

        if let Some(icon) = self.icon {
            el = el.child(
                div()
                    .flex()
                    .text_color(accent)
                    .child(Icon::new(icon).size(Size::Sm)),
            );
        }
        if let Some(text) = self.text {
            el = el.child(div().child(text));
        }
        el = el.children(self.children);
        if let Some(cite) = self.cite {
            el = el.child(div().text_size(px(font_sm)).text_color(dimmed).child(cite));
        }
        el
    }
}