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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

//! `StatusBar` — a thin app status bar with left, center, and right sections.

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

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

/// A bottom/top status bar with three slots — the shell most desktop apps
/// need; styled to match the theme.
#[derive(IntoElement)]
pub struct StatusBar {
  left: Vec<AnyElement>,
  center: Vec<AnyElement>,
  right: Vec<AnyElement>,
  height: f32,
}

impl StatusBar {
  pub fn new() -> Self {
    StatusBar {
      left: Vec::new(),
      center: Vec::new(),
      right: Vec::new(),
      height: 28.0,
    }
  }

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

  pub fn left(mut self, child: impl IntoElement) -> Self {
    self.left.push(child.into_any_element());
    self
  }

  pub fn center(mut self, child: impl IntoElement) -> Self {
    self.center.push(child.into_any_element());
    self
  }

  pub fn right(mut self, child: impl IntoElement) -> Self {
    self.right.push(child.into_any_element());
    self
  }
}

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

impl RenderOnce for StatusBar {
  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
    let t = theme(cx);
    let font = t.font_size(Size::Xs);

    div()
      .flex()
      .items_center()
      .w_full()
      .h(px(self.height))
      .px(px(12.0))
      .gap(px(12.0))
      .border_t_1()
      .border_color(t.border().hsla())
      .bg(t.surface().hsla())
      .text_size(px(font))
      .text_color(t.dimmed().hsla())
      .child(
        div()
          .flex()
          .items_center()
          .gap(px(12.0))
          .children(self.left),
      )
      .child(
        div()
          .flex_1()
          .flex()
          .items_center()
          .justify_center()
          .gap(px(12.0))
          .children(self.center),
      )
      .child(
        div()
          .flex()
          .items_center()
          .gap(px(12.0))
          .children(self.right),
      )
      .probe("StatusBar")
  }
}