1
//! Frame widget — a titled border container similar to an HTML `<fieldset>`
2
//! or a Windows group box. Renders a header with a centered title flanked by
3
//! horizontal border lines, and a bordered content area below.
4

            
5
use azul_core::dom::{Dom, DomVec, IdOrClass, IdOrClass::Class, IdOrClassVec};
6
use azul_css::{
7
    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
8
    props::{
9
        basic::*,
10
        layout::*,
11
        property::{CssProperty, *},
12
        style::*,
13
    },
14
    *,
15
};
16

            
17
const BORDER_COLOR: ColorU = ColorU {
18
    r: 221,
19
    g: 221,
20
    b: 221,
21
    a: 255,
22
};
23

            
24
const STRING_16146701490593874959: AzString = AzString::from_const_str("system:ui");
25
const STYLE_FONT_FAMILY_8122988506401935406_ITEMS: &[StyleFontFamily] =
26
    &[StyleFontFamily::System(STRING_16146701490593874959)];
27

            
28
const CSS_MATCH_15775557796860201720_PROPERTIES: &[CssPropertyWithConditions] = &[
29
    // .__azul-native-frame .__azul-native-frame-header .__azul-native-frame-header-before div
30
    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
31
        LayoutHeight::Px(PixelValue::const_px(8)),
32
    ))),
33
    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
34
        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
35
            inner: PixelValue::const_px(1),
36
        }),
37
    )),
38
    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
39
        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
40
            inner: BorderStyle::Solid,
41
        }),
42
    )),
43
    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
44
        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
45
            inner: BORDER_COLOR,
46
        }),
47
    )),
48
    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
49
        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
50
            inner: PixelValue::const_px(1),
51
        }),
52
    )),
53
    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
54
        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
55
            inner: BorderStyle::Solid,
56
        }),
57
    )),
58
    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
59
        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
60
            inner: BORDER_COLOR,
61
        }),
62
    )),
63
    // .__azul-native-frame .__azul-native-frame-header .__azul-native-frame-header-before
64
    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
65
        LayoutWidth::Px(PixelValue::const_px(5)),
66
    ))),
67
    CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
68
        LayoutMarginTop {
69
            inner: PixelValue::const_px(6),
70
        },
71
    ))),
72
    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
73
        LayoutFlexGrow {
74
            inner: FloatValue::const_new(1),
75
        },
76
    ))),
77
    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
78
        LayoutFlexDirection::Column,
79
    ))),
80
];
81
const CSS_MATCH_15775557796860201720: CssPropertyWithConditionsVec =
82
    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_15775557796860201720_PROPERTIES);
83

            
84
const CSS_MATCH_16739370686243728873_PROPERTIES: &[CssPropertyWithConditions] = &[
85
    // .__azul-native-frame .__azul-native-frame-header
86
    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
87
        StyleFontSize {
88
            inner: PixelValue::const_px(11),
89
        },
90
    ))),
91
    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
92
        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
93
    ))),
94
    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
95
        LayoutFlexDirection::Row,
96
    ))),
97
    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
98
        LayoutAlignItems::End,
99
    ))),
100
];
101
const CSS_MATCH_16739370686243728873: CssPropertyWithConditionsVec =
102
    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_16739370686243728873_PROPERTIES);
103

            
104
const CSS_MATCH_4236783900531286611_PROPERTIES: &[CssPropertyWithConditions] = &[
105
    // .__azul-native-frame .__azul-native-frame-header p
106
    CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
107
        StyleTextAlign::Center,
108
    ))),
109
    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
110
        LayoutPaddingLeft {
111
            inner: PixelValue::const_px(3),
112
        },
113
    ))),
114
    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
115
        LayoutPaddingRight {
116
            inner: PixelValue::const_px(1),
117
        },
118
    ))),
119
    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
120
        LayoutPaddingBottom {
121
            inner: PixelValue::const_px(0),
122
        },
123
    ))),
124
    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
125
        LayoutPaddingTop {
126
            inner: PixelValue::const_px(0),
127
        },
128
    ))),
129
];
130
const CSS_MATCH_4236783900531286611: CssPropertyWithConditionsVec =
131
    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4236783900531286611_PROPERTIES);
132

            
133
const CSS_MATCH_8602559445190067154_PROPERTIES: &[CssPropertyWithConditions] = &[
134
    // .__azul-native-frame
135
    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
136
        LayoutPaddingRight {
137
            inner: PixelValue::const_px(5),
138
        },
139
    ))),
140
    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
141
        LayoutPaddingLeft {
142
            inner: PixelValue::const_px(5),
143
        },
144
    ))),
145
    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
146
        LayoutPaddingBottom {
147
            inner: PixelValue::const_px(3),
148
        },
149
    ))),
150
    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
151
        LayoutPaddingTop {
152
            inner: PixelValue::const_px(3),
153
        },
154
    ))),
155
];
156
const CSS_MATCH_8602559445190067154: CssPropertyWithConditionsVec =
157
    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_8602559445190067154_PROPERTIES);
158

            
159
const CSS_MATCH_9156589477016488419_PROPERTIES: &[CssPropertyWithConditions] = &[
160
    // .__azul-native-frame .__azul-native-frame-header .__azul-native-frame-header-after div
161
    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
162
        LayoutHeight::Px(PixelValue::const_px(8)),
163
    ))),
164
    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
165
        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
166
            inner: PixelValue::const_px(1),
167
        }),
168
    )),
169
    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
170
        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
171
            inner: BorderStyle::Solid,
172
        }),
173
    )),
174
    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
175
        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
176
            inner: BORDER_COLOR,
177
        }),
178
    )),
179
    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
180
        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
181
            inner: PixelValue::const_px(1),
182
        }),
183
    )),
184
    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
185
        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
186
            inner: BorderStyle::Solid,
187
        }),
188
    )),
189
    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
190
        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
191
            inner: BORDER_COLOR,
192
        }),
193
    )),
194
    // .__azul-native-frame .__azul-native-frame-header .__azul-native-frame-header-after
195
    CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
196
        LayoutMarginTop {
197
            inner: PixelValue::const_px(6),
198
        },
199
    ))),
200
    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
201
        LayoutFlexGrow {
202
            inner: FloatValue::const_new(1),
203
        },
204
    ))),
205
    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
206
        LayoutFlexDirection::Column,
207
    ))),
208
];
209
const CSS_MATCH_9156589477016488419: CssPropertyWithConditionsVec =
210
    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_9156589477016488419_PROPERTIES);
211

            
212
/// A titled border container widget, similar to an HTML `<fieldset>` or
213
/// a Windows group box. Displays a header with a centered title and a
214
/// bordered content area below.
215
#[derive(Debug, Clone)]
216
#[repr(C)]
217
pub struct Frame {
218
    pub title: AzString,
219
    pub flex_grow: f32,
220
    pub content: Dom,
221
}
222

            
223
impl Frame {
224
    /// Creates a new `Frame` with the given title and content DOM.
225
    pub fn create(title: AzString, content: Dom) -> Self {
226
        Self {
227
            title,
228
            content,
229
            flex_grow: 0.0,
230
        }
231
    }
232

            
233
    /// Replaces `self` with a default frame and returns the original.
234
    pub fn swap_with_default(&mut self) -> Self {
235
        let mut s = Self::create(AzString::from_const_str(""), Dom::create_div());
236
        core::mem::swap(&mut s, self);
237
        s
238
    }
239

            
240
    /// Sets the flex-grow factor for the content area.
241
    pub fn set_flex_grow(&mut self, flex_grow: f32) {
242
        self.flex_grow = flex_grow;
243
    }
244

            
245
    /// Builder-style setter for the flex-grow factor.
246
    pub fn with_flex_grow(mut self, flex_grow: f32) -> Self {
247
        self.set_flex_grow(flex_grow);
248
        self
249
    }
250

            
251
    pub fn dom(self) -> Dom {
252
        Dom::create_div()
253
            .with_css_props(CSS_MATCH_8602559445190067154)
254
            .with_ids_and_classes({
255
                const IDS_AND_CLASSES_14615537625743340639: &[IdOrClass] =
256
                    &[Class(AzString::from_const_str("__azul-native-frame"))];
257
                IdOrClassVec::from_const_slice(IDS_AND_CLASSES_14615537625743340639)
258
            })
259
            .with_children(DomVec::from_vec(vec![
260
                Dom::create_div()
261
                    .with_css_props(CSS_MATCH_16739370686243728873)
262
                    .with_ids_and_classes({
263
                        const IDS_AND_CLASSES_17776797146874875377: &[IdOrClass] = &[Class(
264
                            AzString::from_const_str("__azul-native-frame-header"),
265
                        )];
266
                        IdOrClassVec::from_const_slice(IDS_AND_CLASSES_17776797146874875377)
267
                    })
268
                    .with_children(DomVec::from_vec(vec![
269
                        Dom::create_div()
270
                            .with_css_props(CSS_MATCH_15775557796860201720)
271
                            .with_ids_and_classes({
272
                                const IDS_AND_CLASSES_15264202958442287530: &[IdOrClass] =
273
                                    &[Class(AzString::from_const_str(
274
                                        "__azul-native-frame-header-before",
275
                                    ))];
276
                                IdOrClassVec::from_const_slice(IDS_AND_CLASSES_15264202958442287530)
277
                            })
278
                            .with_children(DomVec::from_vec(vec![Dom::create_div()])),
279
                        Dom::create_text(self.title).with_css_props(CSS_MATCH_4236783900531286611),
280
                        Dom::create_div()
281
                            .with_css_props(CSS_MATCH_9156589477016488419)
282
                            .with_ids_and_classes({
283
                                const IDS_AND_CLASSES_5689091102265932280: &[IdOrClass] = &[Class(
284
                                    AzString::from_const_str("__azul-native-frame-header-after"),
285
                                )];
286
                                IdOrClassVec::from_const_slice(IDS_AND_CLASSES_5689091102265932280)
287
                            })
288
                            .with_children(DomVec::from_vec(vec![Dom::create_div()])),
289
                    ])),
290
                Dom::create_div()
291
                    .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![
292
                        // .__azul-native-frame .__azul-native-frame-content
293
                        CssPropertyWithConditions::simple(CssProperty::FlexGrow(
294
                            LayoutFlexGrowValue::Exact(LayoutFlexGrow::new(
295
                                self.flex_grow as isize,
296
                            )),
297
                        )),
298
                        CssPropertyWithConditions::simple(CssProperty::PaddingRight(
299
                            LayoutPaddingRightValue::Exact(LayoutPaddingRight {
300
                                inner: PixelValue::const_px(5),
301
                            }),
302
                        )),
303
                        CssPropertyWithConditions::simple(CssProperty::PaddingLeft(
304
                            LayoutPaddingLeftValue::Exact(LayoutPaddingLeft {
305
                                inner: PixelValue::const_px(5),
306
                            }),
307
                        )),
308
                        CssPropertyWithConditions::simple(CssProperty::PaddingBottom(
309
                            LayoutPaddingBottomValue::Exact(LayoutPaddingBottom {
310
                                inner: PixelValue::const_px(5),
311
                            }),
312
                        )),
313
                        CssPropertyWithConditions::simple(CssProperty::PaddingTop(
314
                            LayoutPaddingTopValue::Exact(LayoutPaddingTop {
315
                                inner: PixelValue::const_px(5),
316
                            }),
317
                        )),
318
                        CssPropertyWithConditions::simple(CssProperty::FontSize(
319
                            StyleFontSizeValue::Exact(StyleFontSize {
320
                                inner: PixelValue::const_px(11),
321
                            }),
322
                        )),
323
                        CssPropertyWithConditions::simple(CssProperty::FontFamily(
324
                            StyleFontFamilyVecValue::Exact(StyleFontFamilyVec::from_const_slice(
325
                                STYLE_FONT_FAMILY_8122988506401935406_ITEMS,
326
                            )),
327
                        )),
328
                        CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
329
                            LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
330
                                inner: PixelValue::const_px(1),
331
                            }),
332
                        )),
333
                        CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
334
                            LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
335
                                inner: PixelValue::const_px(1),
336
                            }),
337
                        )),
338
                        CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
339
                            LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
340
                                inner: PixelValue::const_px(1),
341
                            }),
342
                        )),
343
                        CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
344
                            LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
345
                                inner: PixelValue::const_px(1),
346
                            }),
347
                        )),
348
                        CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
349
                            StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
350
                                inner: BorderStyle::Solid,
351
                            }),
352
                        )),
353
                        CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
354
                            StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
355
                                inner: BorderStyle::Solid,
356
                            }),
357
                        )),
358
                        CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
359
                            StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
360
                                inner: BorderStyle::Solid,
361
                            }),
362
                        )),
363
                        CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
364
                            StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
365
                                inner: BorderStyle::Solid,
366
                            }),
367
                        )),
368
                        CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
369
                            StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
370
                                inner: BORDER_COLOR,
371
                            }),
372
                        )),
373
                        CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
374
                            StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
375
                                inner: BORDER_COLOR,
376
                            }),
377
                        )),
378
                        CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
379
                            StyleBorderRightColorValue::Exact(StyleBorderRightColor {
380
                                inner: BORDER_COLOR,
381
                            }),
382
                        )),
383
                        CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
384
                            StyleBorderTopColorValue::Exact(StyleBorderTopColor {
385
                                inner: BORDER_COLOR,
386
                            }),
387
                        )),
388
                    ]))
389
                    .with_ids_and_classes({
390
                        const IDS_AND_CLASSES_9898887665724137124: &[IdOrClass] = &[Class(
391
                            AzString::from_const_str("__azul-native-frame-content"),
392
                        )];
393
                        IdOrClassVec::from_const_slice(IDS_AND_CLASSES_9898887665724137124)
394
                    })
395
                    .with_children(vec![self.content].into()),
396
            ]))
397
    }
398
}