guise-ui 1.5.2

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

//! `Divider` — a thin separating line, optionally with a centered label.

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

use crate::devtools::Probed;
use crate::theme::theme;

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Orientation {
  Horizontal,
  Vertical,
}

/// A separator line.
#[derive(IntoElement)]
pub struct Divider {
  orientation: Orientation,
  label: Option<SharedString>,
}

impl Divider {
  pub fn new() -> Self {
    Divider {
      orientation: Orientation::Horizontal,
      label: None,
    }
  }

  pub fn vertical() -> Self {
    Divider {
      orientation: Orientation::Vertical,
      label: None,
    }
  }

  /// A label rendered centered on a horizontal divider.
  pub fn label(mut self, label: impl Into<SharedString>) -> Self {
    self.label = Some(label.into());
    self
  }
}

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

impl RenderOnce for Divider {
  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
    let t = theme(cx);
    let line_color = t.border().hsla();

    if self.orientation == Orientation::Vertical {
      return div().w(px(1.0)).h_full().bg(line_color).into_any_element();
    }

    let element = match self.label {
      None => div().w_full().h(px(1.0)).bg(line_color),
      Some(label) => div()
        .flex()
        .items_center()
        .gap(px(t.spacing(crate::theme::Size::Sm)))
        .w_full()
        .child(div().flex_1().h(px(1.0)).bg(line_color))
        .child(
          div()
            .text_size(px(t.font_size(crate::theme::Size::Sm)))
            .text_color(t.dimmed().hsla())
            .child(label),
        )
        .child(div().flex_1().h(px(1.0)).bg(line_color)),
    };

    element.probe("Divider").into_any_element()
  }
}