guise-ui 0.2.3

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

//! `LoadingOverlay` — a dimming busy layer over a container.
//!
//! Stateless: render it as the **last child** of a `.relative()` container and
//! flip [`LoadingOverlay::visible`]. While visible it fills the parent with
//! the body color at 60% opacity, centers a [`Loader`], and occludes the mouse
//! so the content underneath can't be interacted with.
//!
//! ```ignore
//! div()
//!     .relative() // required: the overlay is absolutely positioned
//!     .child(form)
//!     .child(LoadingOverlay::new().visible(self.saving))
//! ```

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

use crate::feedback::Loader;
use crate::theme::theme;

/// A busy overlay for one container. The Mantine `LoadingOverlay`.
#[derive(IntoElement)]
pub struct LoadingOverlay {
    visible: bool,
    loader: Option<Loader>,
}

impl LoadingOverlay {
    pub fn new() -> Self {
        LoadingOverlay {
            visible: false,
            loader: None,
        }
    }

    /// Show or hide the overlay. Hidden renders nothing at all.
    pub fn visible(mut self, visible: bool) -> Self {
        self.visible = visible;
        self
    }

    /// Replace the default centered [`Loader`] (e.g. to change variant/color).
    pub fn loader(mut self, loader: Loader) -> Self {
        self.loader = Some(loader);
        self
    }
}

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

impl RenderOnce for LoadingOverlay {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        if !self.visible {
            return div().into_any_element();
        }

        let t = theme(cx);
        let scrim = t.body().alpha(0.6);

        div()
            .id("guise-loading-overlay")
            .occlude()
            .absolute()
            .top(px(0.0))
            .left(px(0.0))
            .size_full()
            .flex()
            .items_center()
            .justify_center()
            .bg(scrim)
            .child(self.loader.unwrap_or_default())
            .into_any_element()
    }
}