azul_layout/widgets/
frame.rs

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
5use azul_core::dom::{Dom, DomVec, IdOrClass, IdOrClass::Class, IdOrClassVec};
6use azul_css::{
7    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
8    props::{
9        basic::*,
10        layout::*,
11        property::{CssProperty, *},
12        style::*,
13    },
14    *,
15};
16
17const BORDER_COLOR: ColorU = ColorU {
18    r: 221,
19    g: 221,
20    b: 221,
21    a: 255,
22};
23
24const STRING_16146701490593874959: AzString = AzString::from_const_str("system:ui");
25const STYLE_FONT_FAMILY_8122988506401935406_ITEMS: &[StyleFontFamily] =
26    &[StyleFontFamily::System(STRING_16146701490593874959)];
27
28const 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];
81const CSS_MATCH_15775557796860201720: CssPropertyWithConditionsVec =
82    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_15775557796860201720_PROPERTIES);
83
84const 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];
101const CSS_MATCH_16739370686243728873: CssPropertyWithConditionsVec =
102    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_16739370686243728873_PROPERTIES);
103
104const 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];
130const CSS_MATCH_4236783900531286611: CssPropertyWithConditionsVec =
131    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4236783900531286611_PROPERTIES);
132
133const 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];
156const CSS_MATCH_8602559445190067154: CssPropertyWithConditionsVec =
157    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_8602559445190067154_PROPERTIES);
158
159const 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];
209const 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)]
217pub struct Frame {
218    pub title: AzString,
219    pub flex_grow: f32,
220    pub content: Dom,
221}
222
223impl 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}
azul_layout/widgets/frame.rs

azul_layout/widgets/
frame.rs
