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

use crate::{
    app::theme::Theme,
    components::{label_style, section_title},
};
use michiu_ui::prelude::*;
use std::time::Duration;

pub fn container() -> Element {
    v_flex(ts().gap(28.0).p(16.0)).children([section_inherit(), section_self(), section_within()])
}

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

fn wrapper_style() -> ThisStyle {
    ts().w_full().gap(16.0)
}

fn item(label: &'static str, style: ThisStyle) -> Element {
    flex(style
        .p(12.0)
        .r(4.0)
        .justify_center()
        .items_center()
        .border_solid(1.0)
        .border_color(dynamic(|t: &Theme| t.border))
        .hovered(ts().bg_color(dynamic(|t: &Theme| t.background_hover))))
    .label(label, label_style())
}

fn section_inherit() -> Element {
    let item_1 = item("Focus 3", ts().focusable_inherit_keyboard());
    let item_2 = item("Focus 4", ts().focusable_inherit_keyboard());
    let item_3 = item("Focus 5", ts().focusable_inherit_keyboard());
    let item_4 = item("Focus 6", ts().focusable_inherit_keyboard());

    let wrapper = h_flex(wrapper_style()).children([item_1, item_2, item_3, item_4]);

    let parent_focused = section_style().focused(
        ts().outline_solid(1.0)
            .outline_offset(2.0)
            .outline_color(dynamic(|t: &Theme| t.text)),
    );

    v_flex(parent_focused).children([section_title("Keyboard & Inherit"), wrapper])
}

fn section_self() -> Element {
    let item_1 = item(
        "Focus 7",
        ts().focusable_self_keyboard().focused(
            ts().outline_dashed(2.0)
                .outline_offset(2.0)
                .outline_color(dynamic(|t: &Theme| t.primary)),
        ),
    );
    let item_2 = item(
        "Focus 8",
        ts().focusable_self_keyboard()
            .focused(ts().bg_color(dynamic(|t: &Theme| t.border_hover))),
    );
    let item_3 = item(
        "Focus 9",
        ts().focusable_self_keyboard()
            .trans_transform(Duration::from_millis(300), AnimationCurve::EaseInOutQuad)
            .focused(ts().transform_scale(1.1, 1.1)),
    );
    let item_4 = item(
        "Focus 10",
        ts().focusable_self_keyboard().focused(
            ts().box_shadow(
                shadow()
                    .blur(8.0)
                    .offset(0.0)
                    .spread(1.0)
                    .color(Color::BLACK),
            ),
        ),
    );

    let wrapper = h_flex(wrapper_style()).children([item_1, item_2, item_3, item_4]);

    v_flex(section_style()).children([section_title("Keyboard & SelfStyle"), wrapper])
}

fn section_within() -> Element {
    let item_1 = item(
        "Focus 12",
        ts().focusable_self_keyboard().focused(
            ts().outline_dashed(2.0)
                .outline_offset(2.0)
                .outline_color(dynamic(|t: &Theme| t.primary)),
        ),
    );

    let item_2 = item("Focus 12", ts().focusable_inherit_keyboard());

    let wrapper = h_flex(
        ts().w_full()
            .gap(16.0)
            .p(6.0)
            .border_solid(1.0)
            .border_color(dynamic(|t: &Theme| t.border))
            .focused(ts().bg_color(dynamic(|t: &Theme| t.primary)))
            .focused_within(
                ts().outline_solid(1.0)
                    .outline_offset(2.0)
                    .outline_color(dynamic(|t: &Theme| t.text)),
            ),
    )
    .children([item_1, item_2]);

    v_flex(section_style()).children([section_title("Keyboard & Focus Within"), wrapper])
}