raui 0.70.17

Renderer Agnostic User Interface
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

// Make sure you have seen `responsive_box` code example first, because this is an evolution of that.

use raui_app::app::declarative::DeclarativeApp;
use raui_core::{
    make_widget,
    widget::{
        component::{
            containers::{
                content_box::content_box,
                responsive_box::{
                    MediaQueryExpression, MediaQueryOrientation, responsive_props_box,
                },
            },
            image_box::{ImageBoxProps, image_box},
            text_box::{TextBoxProps, text_box},
        },
        context::WidgetContext,
        node::WidgetNode,
        none_widget,
        unit::text::{TextBoxFont, TextBoxHorizontalAlign, TextBoxVerticalAlign},
        utils::Color,
    },
};

fn widget(context: WidgetContext) -> WidgetNode {
    let WidgetContext { key, props, .. } = context;

    let landscape = props.read_cloned_or_default::<bool>();
    let color = if landscape {
        Color {
            r: 0.25,
            g: 1.0,
            b: 0.25,
            a: 1.0,
        }
    } else {
        Color {
            r: 0.25,
            g: 0.25,
            b: 1.0,
            a: 1.0,
        }
    };
    let text = if landscape {
        "Landscape".to_owned()
    } else {
        "Portrait".to_owned()
    };

    make_widget!(content_box)
        .key(key)
        .listed_slot(
            make_widget!(image_box)
                .key("image")
                .with_props(ImageBoxProps::colored(color)),
        )
        .listed_slot(make_widget!(text_box).with_props(TextBoxProps {
            text,
            font: TextBoxFont {
                name: "./demos/hello-world/resources/verdana.ttf".to_owned(),
                size: 64.0,
            },
            color: Color {
                r: 0.25,
                g: 0.0,
                b: 0.0,
                a: 1.0,
            },
            horizontal_align: TextBoxHorizontalAlign::Center,
            vertical_align: TextBoxVerticalAlign::Middle,
            ..Default::default()
        }))
        .into()
}

fn main() {
    // responsive props box allows to select listed slot with media query, but
    // instead of selecting that slot as content, it only grabs its props and
    // applies them to named `content` slot - this is quite useful if we have
    // single kind of widget we wanna present, but its props are what's different.
    let tree = make_widget!(responsive_props_box)
        .listed_slot(
            // since because slot widget is not used, we need use `none_widget`
            // to not pollute UI with complex widgets that won't be ever used.
            make_widget!(none_widget)
                .with_props(MediaQueryExpression::ScreenOrientation(
                    MediaQueryOrientation::Portrait,
                ))
                .with_props(false),
        )
        .listed_slot(make_widget!(none_widget).with_props(true))
        .named_slot("content", make_widget!(widget));

    DeclarativeApp::simple("Responsive Props Box", tree);
}