guise-ui 1.4.0

A component library for gpui, Zed's GPU-accelerated UI framework: a themed palette, sizing tokens, 130+ composable components, a reactive state layer, and an in-app Safari-style inspector.
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

//! `SettingsSection` — a titled group of rows inside a settings page.
//!
//! A page is rarely one flat list. "Appearance" wants Theme separated from
//! Typography; "Security" wants the settings worth reading twice under their
//! own heading. This is that grouping: a title, an optional sentence, a rule,
//! and the rows.
//!
//! It is a plain [`ParentElement`], so the rows are whatever the caller puts
//! in — usually [`SettingsRow`](super::SettingsRow), but a section holding a
//! chart or a table is just as valid.

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

use crate::devtools::Probed;
use crate::theme::{theme, Size};

/// A titled group of settings.
#[derive(IntoElement)]
pub struct SettingsSection {
    title: SharedString,
    description: Option<SharedString>,
    rule: bool,
    children: Vec<AnyElement>,
}

impl SettingsSection {
    pub fn new(title: impl Into<SharedString>) -> Self {
        SettingsSection {
            title: title.into(),
            description: None,
            rule: true,
            children: Vec::new(),
        }
    }

    /// A sentence under the heading.
    pub fn description(mut self, description: impl Into<SharedString>) -> Self {
        self.description = Some(description.into());
        self
    }

    /// Draw the rule under the heading (default `true`).
    pub fn rule(mut self, rule: bool) -> Self {
        self.rule = rule;
        self
    }
}

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

impl RenderOnce for SettingsSection {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let t = theme(cx);
        let text = t.text().hsla();
        let dimmed = t.dimmed().hsla();
        let border = t.border().hsla();
        let font_md = t.font_size(Size::Md);
        let font_sm = t.font_size(Size::Sm);
        let gap = t.spacing(Size::Xs);

        let mut header = div().flex().flex_col().w_full().gap(px(gap)).child(
            div()
                .text_size(px(font_md))
                .font_weight(FontWeight::SEMIBOLD)
                .text_color(text)
                .child(self.title.clone()),
        );
        if let Some(description) = self.description {
            header = header.child(
                div()
                    .text_size(px(font_sm))
                    .text_color(dimmed)
                    .child(description),
            );
        }
        if self.rule {
            header = header.child(div().w_full().h(px(1.0)).bg(border));
        }

        div()
            .flex()
            .flex_col()
            .w_full()
            .pt(px(18.0))
            .gap(px(gap))
            .child(header)
            .children(self.children)
            .probe("SettingsSection")
            .attr("title", self.title)
    }
}