michiu_ui 0.0.3

The michiu library handles layout and rendering.
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

use crate::{
    app::theme::Theme,
    components::{label_style, section_title},
};
use michiu_ui::GlobalCursorIcon;
pub use michiu_ui::prelude::*;

pub fn container() -> Element {
    v_flex(ts().gap(20.0).p(16.0)).children([
        cursor_container(),
        resize_container(),
        global_container(),
        custom_container(),
    ])
}

fn section_style() -> ThisStyle {
    ts().gap(12.0)
}

fn wrapper_style() -> ThisStyle {
    ts().w_full().gap((20.0, 10.0)).p(6.0)
}

fn item(label: &'static str, style: ThisStyle) -> Element {
    flex(style
        .p(10.0)
        .r(4.0)
        .size((150.0, 60.0))
        .justify_center()
        .items_center()
        .border_dashed(2.0)
        .border_color(dynamic(|t: &Theme| t.border)))
    .label(label, label_style())
}

fn cursor_container() -> Element {
    let default = item("Default", ts().cursor_default());
    let grab = item("Grab", ts().cursor_grab());
    let grabbing = item("Grabbing", ts().cursor_grabbing());
    let not_allowed = item("Not Allowed", ts().cursor_not_allowed());
    let pointer = item("Pointer", ts().cursor_pointer());

    v_flex(section_style()).children([
        section_title("Cursor"),
        h_flex(wrapper_style()).children([default, grab, grabbing, not_allowed, pointer]),
    ])
}

fn resize_container() -> Element {
    let item = item(
        "Resizable",
        ts().min_size((150.0, 60.0))
            .resizable_all(true)
            .resizable_cursor_default(),
    );

    v_flex(section_style()).children([
        section_title("Resize Cursor"),
        h_flex(wrapper_style()).child(item),
    ])
}

fn global_container() -> Element {
    let item1 = item("Not Style", ts());
    let item2 = item("Local Text", ts().cursor_text());

    let wrapper = h_flex(
        ts().w_full()
            .gap((20.0, 10.0))
            .p(8.0)
            .r(4.0)
            .border_color(dynamic(|t: &Theme| t.border))
            .border_solid(1.0)
            .cursor_global_pointer(),
    );

    v_flex(section_style()).children([
        section_title("Global Cursor"),
        wrapper.children([item1, item2]),
    ])
}

fn custom_container() -> Element {
    let grab_path = concat!(
        env!("CARGO_MANIFEST_DIR"),
        "/examples/sample_collection/assets/cursor_grab.png"
    );
    let grabbing_path = concat!(
        env!("CARGO_MANIFEST_DIR"),
        "/examples/sample_collection/assets/cursor_grabbing.png"
    );

    let grab_icon = CursorIcon::create_from_path(grab_path, 16, 16).ok();
    let grabbing_icon = CursorIcon::create_from_path(grabbing_path, 16, 16).ok();

    let wrapper = h_flex(
        ts().w_full()
            .gap((20.0, 10.0))
            .p(8.0)
            .r(4.0)
            .border_color(dynamic(|t: &Theme| t.border))
            .border_solid(1.0)
            .cursor_global(GlobalCursorIcon::Grab(grab_icon)),
    );

    let grabbing = item("Grabbing", ts().cursor(CursorIcon::Grabbing(grabbing_icon)));

    v_flex(section_style()).children([
        section_title("Custom Cursor"),
        wrapper.children([
            flex(ts().p(10.0).r(4.0).justify_center().items_center()).label("Grab", label_style()),
            grabbing,
        ]),
    ])
}