azul_layout/widgets/
list_view.rs

1//! Native list view widget with column headers, row selection, and sorting indicators.
2
3use alloc::vec::Vec;
4
5use azul_core::{
6    callbacks::{CoreCallbackData, Update},
7    dom::{Dom, DomVec, IdOrClass, IdOrClass::Class, IdOrClassVec, TabIndex},
8    geom::{LogicalPosition, LogicalSize},
9    menu::{Menu, OptionMenu},
10    refany::RefAny,
11};
12use azul_css::{
13    corety::OptionUsize,
14    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
15    props::{
16        basic::*,
17        layout::*,
18        property::{CssProperty, *},
19        style::*,
20    },
21    *,
22};
23use azul_css::css::BoxOrStatic;
24
25use crate::callbacks::{Callback, CallbackInfo};
26
27const STRING_16146701490593874959: AzString = AzString::from_const_str("system:ui");
28const STYLE_BACKGROUND_CONTENT_661302523448178568_ITEMS: &[StyleBackgroundContent] =
29    &[StyleBackgroundContent::Color(ColorU {
30        r: 209,
31        g: 232,
32        b: 255,
33        a: 255,
34    })];
35const STYLE_BACKGROUND_CONTENT_2444935983575427872_ITEMS: &[StyleBackgroundContent] =
36    &[StyleBackgroundContent::Color(ColorU {
37        r: 252,
38        g: 252,
39        b: 252,
40        a: 255,
41    })];
42const STYLE_BACKGROUND_CONTENT_3010057533077499049_ITEMS: &[StyleBackgroundContent] =
43    &[StyleBackgroundContent::Color(ColorU {
44        r: 229,
45        g: 243,
46        b: 251,
47        a: 255,
48    })];
49const STYLE_BACKGROUND_CONTENT_3839348353894170136_ITEMS: &[StyleBackgroundContent] =
50    &[StyleBackgroundContent::Color(ColorU {
51        r: 249,
52        g: 250,
53        b: 251,
54        a: 255,
55    })];
56const STYLE_BACKGROUND_CONTENT_6112684430356720596_ITEMS: &[StyleBackgroundContent] =
57    &[StyleBackgroundContent::LinearGradient(LinearGradient {
58        direction: Direction::FromTo(DirectionCorners {
59            dir_from: DirectionCorner::Top,
60            dir_to: DirectionCorner::Bottom,
61        }),
62        extend_mode: ExtendMode::Clamp,
63        stops: NormalizedLinearColorStopVec::from_const_slice(
64            LINEAR_COLOR_STOP_10827796861537038040_ITEMS,
65        ),
66    })];
67const STYLE_BACKGROUND_CONTENT_7422581697888665934_ITEMS: &[StyleBackgroundContent] =
68    &[StyleBackgroundContent::LinearGradient(LinearGradient {
69        direction: Direction::FromTo(DirectionCorners {
70            dir_from: DirectionCorner::Top,
71            dir_to: DirectionCorner::Bottom,
72        }),
73        extend_mode: ExtendMode::Clamp,
74        stops: NormalizedLinearColorStopVec::from_const_slice(
75            LINEAR_COLOR_STOP_513857305091467054_ITEMS,
76        ),
77    })];
78const STYLE_BACKGROUND_CONTENT_11062356617965867290_ITEMS: &[StyleBackgroundContent] =
79    &[StyleBackgroundContent::Color(ColorU {
80        r: 240,
81        g: 240,
82        b: 240,
83        a: 255,
84    })];
85const STYLE_BACKGROUND_CONTENT_11098930083828139815_ITEMS: &[StyleBackgroundContent] =
86    &[StyleBackgroundContent::Color(ColorU {
87        r: 184,
88        g: 224,
89        b: 243,
90        a: 255,
91    })];
92const STYLE_TRANSFORM_6162542744002865382_ITEMS: &[StyleTransform] =
93    &[StyleTransform::Translate(StyleTransformTranslate2D {
94        x: PixelValue::const_px(7),
95        y: PixelValue::const_px(0),
96    })];
97const STYLE_TRANSFORM_16978981723642914576_ITEMS: &[StyleTransform] =
98    &[StyleTransform::Rotate(AngleValue::const_deg(45))];
99const STYLE_TRANSFORM_17732691695785266054_ITEMS: &[StyleTransform] = &[
100    StyleTransform::Rotate(AngleValue::const_deg(315)),
101    StyleTransform::Translate(StyleTransformTranslate2D {
102        x: PixelValue::const_px(0),
103        y: PixelValue::const_px(2),
104    }),
105];
106const STYLE_FONT_FAMILY_8122988506401935406_ITEMS: &[StyleFontFamily] =
107    &[StyleFontFamily::System(STRING_16146701490593874959)];
108const LINEAR_COLOR_STOP_513857305091467054_ITEMS: &[NormalizedLinearColorStop] = &[
109    NormalizedLinearColorStop {
110        offset: PercentageValue::const_new(0),
111        color: ColorOrSystem::color(ColorU {
112            r: 255,
113            g: 255,
114            b: 255,
115            a: 255,
116        }),
117    },
118    NormalizedLinearColorStop {
119        offset: PercentageValue::const_new(50),
120        color: ColorOrSystem::color(ColorU {
121            r: 255,
122            g: 255,
123            b: 255,
124            a: 255,
125        }),
126    },
127    NormalizedLinearColorStop {
128        offset: PercentageValue::const_new(51),
129        color: ColorOrSystem::color(ColorU {
130            r: 247,
131            g: 248,
132            b: 250,
133            a: 255,
134        }),
135    },
136    NormalizedLinearColorStop {
137        offset: PercentageValue::const_new(100),
138        color: ColorOrSystem::color(ColorU {
139            r: 243,
140            g: 244,
141            b: 246,
142            a: 255,
143        }),
144    },
145];
146const LINEAR_COLOR_STOP_10827796861537038040_ITEMS: &[NormalizedLinearColorStop] = &[
147    NormalizedLinearColorStop {
148        offset: PercentageValue::const_new(0),
149        color: ColorOrSystem::color(ColorU {
150            r: 247,
151            g: 252,
152            b: 254,
153            a: 255,
154        }),
155    },
156    NormalizedLinearColorStop {
157        offset: PercentageValue::const_new(50),
158        color: ColorOrSystem::color(ColorU {
159            r: 247,
160            g: 252,
161            b: 254,
162            a: 255,
163        }),
164    },
165    NormalizedLinearColorStop {
166        offset: PercentageValue::const_new(51),
167        color: ColorOrSystem::color(ColorU {
168            r: 232,
169            g: 246,
170            b: 254,
171            a: 255,
172        }),
173    },
174    NormalizedLinearColorStop {
175        offset: PercentageValue::const_new(100),
176        color: ColorOrSystem::color(ColorU {
177            r: 206,
178            g: 231,
179            b: 244,
180            a: 255,
181        }),
182    },
183];
184
185const CSS_MATCH_1085706216385961159_PROPERTIES: &[CssPropertyWithConditions] = &[
186    // .__azul_native-list-header-arrow-down
187    CssPropertyWithConditions::simple(CssProperty::Transform(StyleTransformVecValue::Exact(
188        StyleTransformVec::from_const_slice(STYLE_TRANSFORM_6162542744002865382_ITEMS),
189    ))),
190    CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
191        LayoutPosition::Absolute,
192    ))),
193    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
194        LayoutPaddingRight {
195            inner: PixelValue::const_px(3),
196        },
197    ))),
198    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
199        LayoutPaddingLeft {
200            inner: PixelValue::const_px(3),
201        },
202    ))),
203    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
204        LayoutPaddingBottom {
205            inner: PixelValue::const_px(3),
206        },
207    ))),
208    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
209        LayoutPaddingTop {
210            inner: PixelValue::const_px(3),
211        },
212    ))),
213    CssPropertyWithConditions::simple(CssProperty::JustifyContent(
214        LayoutJustifyContentValue::Exact(LayoutJustifyContent::Center),
215    )),
216    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
217        LayoutFlexDirection::Row,
218    ))),
219];
220const CSS_MATCH_1085706216385961159: CssPropertyWithConditionsVec =
221    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_1085706216385961159_PROPERTIES);
222
223const CSS_MATCH_12498280255863106397_PROPERTIES: &[CssPropertyWithConditions] = &[
224    // .__azul_native-list-header-item:hover
225    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
226        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
227            inner: PixelValue::const_px(1),
228        }),
229    )),
230    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
231        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
232            inner: BorderStyle::Solid,
233        }),
234    )),
235    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
236        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
237            inner: ColorU {
238                r: 154,
239                g: 223,
240                b: 254,
241                a: 255,
242            },
243        }),
244    )),
245    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
246        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
247            STYLE_BACKGROUND_CONTENT_6112684430356720596_ITEMS,
248        )),
249    )),
250    // .__azul_native-list-header-item:active
251    CssPropertyWithConditions::on_active(CssProperty::BoxShadowBottom(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
252        StyleBoxShadow {
253            offset_x: PixelValueNoPercent {
254                inner: PixelValue::const_px(0),
255            },
256            offset_y: PixelValueNoPercent {
257                inner: PixelValue::const_px(0),
258            },
259            color: ColorU {
260                r: 206,
261                g: 231,
262                b: 244,
263                a: 255,
264            },
265            blur_radius: PixelValueNoPercent {
266                inner: PixelValue::const_px(5),
267            },
268            spread_radius: PixelValueNoPercent {
269                inner: PixelValue::const_px(0),
270            },
271            clip_mode: BoxShadowClipMode::Inset,
272        },
273    )))),
274    CssPropertyWithConditions::on_active(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
275        StyleBoxShadow {
276            offset_x: PixelValueNoPercent {
277                inner: PixelValue::const_px(0),
278            },
279            offset_y: PixelValueNoPercent {
280                inner: PixelValue::const_px(0),
281            },
282            color: ColorU {
283                r: 206,
284                g: 231,
285                b: 244,
286                a: 255,
287            },
288            blur_radius: PixelValueNoPercent {
289                inner: PixelValue::const_px(5),
290            },
291            spread_radius: PixelValueNoPercent {
292                inner: PixelValue::const_px(0),
293            },
294            clip_mode: BoxShadowClipMode::Inset,
295        },
296    )))),
297    CssPropertyWithConditions::on_active(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
298        StyleBoxShadow {
299            offset_x: PixelValueNoPercent {
300                inner: PixelValue::const_px(0),
301            },
302            offset_y: PixelValueNoPercent {
303                inner: PixelValue::const_px(0),
304            },
305            color: ColorU {
306                r: 206,
307                g: 231,
308                b: 244,
309                a: 255,
310            },
311            blur_radius: PixelValueNoPercent {
312                inner: PixelValue::const_px(5),
313            },
314            spread_radius: PixelValueNoPercent {
315                inner: PixelValue::const_px(0),
316            },
317            clip_mode: BoxShadowClipMode::Inset,
318        },
319    )))),
320    CssPropertyWithConditions::on_active(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
321        StyleBoxShadow {
322            offset_x: PixelValueNoPercent {
323                inner: PixelValue::const_px(0),
324            },
325            offset_y: PixelValueNoPercent {
326                inner: PixelValue::const_px(0),
327            },
328            color: ColorU {
329                r: 206,
330                g: 231,
331                b: 244,
332                a: 255,
333            },
334            blur_radius: PixelValueNoPercent {
335                inner: PixelValue::const_px(5),
336            },
337            spread_radius: PixelValueNoPercent {
338                inner: PixelValue::const_px(0),
339            },
340            clip_mode: BoxShadowClipMode::Inset,
341        },
342    )))),
343    CssPropertyWithConditions::on_active(CssProperty::BorderBottomWidth(
344        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
345            inner: PixelValue::const_px(1),
346        }),
347    )),
348    CssPropertyWithConditions::on_active(CssProperty::BorderLeftWidth(
349        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
350            inner: PixelValue::const_px(1),
351        }),
352    )),
353    CssPropertyWithConditions::on_active(CssProperty::BorderRightWidth(
354        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
355            inner: PixelValue::const_px(1),
356        }),
357    )),
358    CssPropertyWithConditions::on_active(CssProperty::BorderTopWidth(
359        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
360            inner: PixelValue::const_px(1),
361        }),
362    )),
363    CssPropertyWithConditions::on_active(CssProperty::BorderBottomStyle(
364        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
365            inner: BorderStyle::Solid,
366        }),
367    )),
368    CssPropertyWithConditions::on_active(CssProperty::BorderLeftStyle(
369        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
370            inner: BorderStyle::Solid,
371        }),
372    )),
373    CssPropertyWithConditions::on_active(CssProperty::BorderRightStyle(
374        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
375            inner: BorderStyle::Solid,
376        }),
377    )),
378    CssPropertyWithConditions::on_active(CssProperty::BorderTopStyle(
379        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
380            inner: BorderStyle::Solid,
381        }),
382    )),
383    CssPropertyWithConditions::on_active(CssProperty::BorderBottomColor(
384        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
385            inner: ColorU {
386                r: 194,
387                g: 205,
388                b: 219,
389                a: 255,
390            },
391        }),
392    )),
393    CssPropertyWithConditions::on_active(CssProperty::BorderLeftColor(
394        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
395            inner: ColorU {
396                r: 194,
397                g: 205,
398                b: 219,
399                a: 255,
400            },
401        }),
402    )),
403    CssPropertyWithConditions::on_active(CssProperty::BorderRightColor(
404        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
405            inner: ColorU {
406                r: 194,
407                g: 205,
408                b: 219,
409                a: 255,
410            },
411        }),
412    )),
413    CssPropertyWithConditions::on_active(CssProperty::BorderTopColor(
414        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
415            inner: ColorU {
416                r: 194,
417                g: 205,
418                b: 219,
419                a: 255,
420            },
421        }),
422    )),
423    CssPropertyWithConditions::on_active(CssProperty::BackgroundContent(
424        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
425            STYLE_BACKGROUND_CONTENT_3839348353894170136_ITEMS,
426        )),
427    )),
428    // .__azul_native-list-header-item
429    CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
430        LayoutPosition::Relative,
431    ))),
432    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
433        LayoutPaddingLeft {
434            inner: PixelValue::const_px(7),
435        },
436    ))),
437    CssPropertyWithConditions::simple(CssProperty::MinWidth(LayoutMinWidthValue::Exact(
438        LayoutMinWidth {
439            inner: PixelValue::const_px(100),
440        },
441    ))),
442    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
443        LayoutFlexDirection::Column,
444    ))),
445    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
446        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
447            inner: PixelValue::const_px(1),
448        }),
449    )),
450    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
451        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
452            inner: BorderStyle::Solid,
453        }),
454    )),
455    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
456        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
457            inner: ColorU {
458                r: 243,
459                g: 244,
460                b: 246,
461                a: 255,
462            },
463        }),
464    )),
465];
466const CSS_MATCH_12498280255863106397: CssPropertyWithConditionsVec =
467    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_12498280255863106397_PROPERTIES);
468
469const CSS_MATCH_12980082330151137475_PROPERTIES: &[CssPropertyWithConditions] = &[
470    // .__azul_native-list-rows-row-cell
471    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
472        LayoutPaddingLeft {
473            inner: PixelValue::const_px(7),
474        },
475    ))),
476    CssPropertyWithConditions::simple(CssProperty::MinWidth(LayoutMinWidthValue::Exact(
477        LayoutMinWidth {
478            inner: PixelValue::const_px(100),
479        },
480    ))),
481    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
482        StyleFontSize {
483            inner: PixelValue::const_px(11),
484        },
485    ))),
486    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
487        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
488    ))),
489];
490const CSS_MATCH_12980082330151137475: CssPropertyWithConditionsVec =
491    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_12980082330151137475_PROPERTIES);
492
493const CSS_MATCH_13758717721055992976_PROPERTIES: &[CssPropertyWithConditions] = &[
494    // .__azul_native-list-header-arrow-down-inner
495    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
496        LayoutWidth::Px(PixelValue::const_px(6)),
497    ))),
498    CssPropertyWithConditions::simple(CssProperty::Transform(StyleTransformVecValue::Exact(
499        StyleTransformVec::from_const_slice(STYLE_TRANSFORM_16978981723642914576_ITEMS),
500    ))),
501    CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(
502        LayoutOverflow::Hidden,
503    ))),
504    CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(
505        LayoutOverflow::Hidden,
506    ))),
507    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
508        LayoutHeight::Px(PixelValue::const_px(6)),
509    ))),
510];
511const CSS_MATCH_13758717721055992976: CssPropertyWithConditionsVec =
512    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_13758717721055992976_PROPERTIES);
513
514const CSS_MATCH_15295293133676720691_PROPERTIES: &[CssPropertyWithConditions] = &[
515    // .__azul_native-list-header-dragwidth-drag
516    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
517        LayoutWidth::Px(PixelValue::const_px(2)),
518    ))),
519    CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
520        LayoutPosition::Absolute,
521    ))),
522];
523const CSS_MATCH_15295293133676720691: CssPropertyWithConditionsVec =
524    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_15295293133676720691_PROPERTIES);
525
526const CSS_MATCH_15315949193378715186_PROPERTIES: &[CssPropertyWithConditions] = &[
527    // .__azul_native-list-header
528    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
529        LayoutHeight::Px(PixelValue::const_px(25)),
530    ))),
531    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
532        LayoutFlexDirection::Row,
533    ))),
534    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
535        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
536            STYLE_BACKGROUND_CONTENT_7422581697888665934_ITEMS,
537        )),
538    )),
539];
540const CSS_MATCH_15315949193378715186: CssPropertyWithConditionsVec =
541    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_15315949193378715186_PROPERTIES);
542
543const CSS_MATCH_15673486787900743642_PROPERTIES: &[CssPropertyWithConditions] = &[
544    // .__azul_native-list-header .__azul_native-list-header-item p
545    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
546        StyleFontSize {
547            inner: PixelValue::const_px(11),
548        },
549    ))),
550    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
551        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
552    ))),
553    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
554        LayoutFlexGrow {
555            inner: FloatValue::const_new(1),
556        },
557    ))),
558    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
559        LayoutFlexDirection::Column,
560    ))),
561    CssPropertyWithConditions::simple(CssProperty::TextColor(StyleTextColorValue::Exact(
562        StyleTextColor {
563            inner: ColorU {
564                r: 0,
565                g: 0,
566                b: 0,
567                a: 255,
568            },
569        },
570    ))),
571    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
572        LayoutAlignItems::Center,
573    ))),
574];
575const CSS_MATCH_15673486787900743642: CssPropertyWithConditionsVec =
576    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_15673486787900743642_PROPERTIES);
577
578const CSS_MATCH_1574792189506859253_PROPERTIES: &[CssPropertyWithConditions] = &[
579    // .__azul_native-list-header-arrow-down-inner-deco
580    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
581        LayoutWidth::Px(PixelValue::const_px(12)),
582    ))),
583    CssPropertyWithConditions::simple(CssProperty::Transform(StyleTransformVecValue::Exact(
584        StyleTransformVec::from_const_slice(STYLE_TRANSFORM_17732691695785266054_ITEMS),
585    ))),
586    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
587        LayoutHeight::Px(PixelValue::const_px(12)),
588    ))),
589    CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
590        StyleBoxShadow {
591            offset_x: PixelValueNoPercent {
592                inner: PixelValue::const_px(3),
593            },
594            offset_y: PixelValueNoPercent {
595                inner: PixelValue::const_px(3),
596            },
597            color: ColorU {
598                r: 60,
599                g: 94,
600                b: 114,
601                a: 255,
602            },
603            blur_radius: PixelValueNoPercent {
604                inner: PixelValue::const_px(10),
605            },
606            spread_radius: PixelValueNoPercent {
607                inner: PixelValue::const_px(0),
608            },
609            clip_mode: BoxShadowClipMode::Inset,
610        },
611    )))),
612    CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
613        StyleBoxShadow {
614            offset_x: PixelValueNoPercent {
615                inner: PixelValue::const_px(3),
616            },
617            offset_y: PixelValueNoPercent {
618                inner: PixelValue::const_px(3),
619            },
620            color: ColorU {
621                r: 60,
622                g: 94,
623                b: 114,
624                a: 255,
625            },
626            blur_radius: PixelValueNoPercent {
627                inner: PixelValue::const_px(10),
628            },
629            spread_radius: PixelValueNoPercent {
630                inner: PixelValue::const_px(0),
631            },
632            clip_mode: BoxShadowClipMode::Inset,
633        },
634    )))),
635    CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
636        StyleBoxShadow {
637            offset_x: PixelValueNoPercent {
638                inner: PixelValue::const_px(3),
639            },
640            offset_y: PixelValueNoPercent {
641                inner: PixelValue::const_px(3),
642            },
643            color: ColorU {
644                r: 60,
645                g: 94,
646                b: 114,
647                a: 255,
648            },
649            blur_radius: PixelValueNoPercent {
650                inner: PixelValue::const_px(10),
651            },
652            spread_radius: PixelValueNoPercent {
653                inner: PixelValue::const_px(0),
654            },
655            clip_mode: BoxShadowClipMode::Inset,
656        },
657    )))),
658    CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
659        StyleBoxShadow {
660            offset_x: PixelValueNoPercent {
661                inner: PixelValue::const_px(3),
662            },
663            offset_y: PixelValueNoPercent {
664                inner: PixelValue::const_px(3),
665            },
666            color: ColorU {
667                r: 60,
668                g: 94,
669                b: 114,
670                a: 255,
671            },
672            blur_radius: PixelValueNoPercent {
673                inner: PixelValue::const_px(10),
674            },
675            spread_radius: PixelValueNoPercent {
676                inner: PixelValue::const_px(0),
677            },
678            clip_mode: BoxShadowClipMode::Inset,
679        },
680    )))),
681];
682const CSS_MATCH_1574792189506859253: CssPropertyWithConditionsVec =
683    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_1574792189506859253_PROPERTIES);
684
685const CSS_MATCH_17553577885456905601_PROPERTIES: &[CssPropertyWithConditions] = &[
686    // .__azul_native_list-container
687    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
688        LayoutFlexGrow {
689            inner: FloatValue::const_new(1),
690        },
691    ))),
692    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
693        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
694            STYLE_BACKGROUND_CONTENT_2444935983575427872_ITEMS,
695        )),
696    )),
697];
698const CSS_MATCH_17553577885456905601: CssPropertyWithConditionsVec =
699    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_17553577885456905601_PROPERTIES);
700
701const CSS_MATCH_2883986488332352590_PROPERTIES: &[CssPropertyWithConditions] = &[
702    // body
703    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
704        LayoutPaddingRight {
705            inner: PixelValue::const_px(5),
706        },
707    ))),
708    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
709        LayoutPaddingLeft {
710            inner: PixelValue::const_px(5),
711        },
712    ))),
713    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
714        LayoutPaddingBottom {
715            inner: PixelValue::const_px(5),
716        },
717    ))),
718    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
719        LayoutPaddingTop {
720            inner: PixelValue::const_px(5),
721        },
722    ))),
723    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
724        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
725            STYLE_BACKGROUND_CONTENT_11062356617965867290_ITEMS,
726        )),
727    )),
728];
729const CSS_MATCH_2883986488332352590: CssPropertyWithConditionsVec =
730    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_2883986488332352590_PROPERTIES);
731
732const CSS_MATCH_4852927511892172364_PROPERTIES: &[CssPropertyWithConditions] = &[
733    // .__azul_native-list-rows
734    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
735        LayoutFlexDirection::Column,
736    ))),
737];
738const CSS_MATCH_4852927511892172364: CssPropertyWithConditionsVec =
739    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4852927511892172364_PROPERTIES);
740
741const CSS_MATCH_6002662151290653203_PROPERTIES: &[CssPropertyWithConditions] = &[
742    // .__azul_native-list-header-dragwidth
743    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
744        LayoutWidth::Px(PixelValue::const_px(0)),
745    ))),
746    CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
747        LayoutPosition::Relative,
748    ))),
749    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
750        LayoutFlexGrow {
751            inner: FloatValue::const_new(1),
752        },
753    ))),
754];
755const CSS_MATCH_6002662151290653203: CssPropertyWithConditionsVec =
756    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_6002662151290653203_PROPERTIES);
757
758const CSS_MATCH_6827198030119836081_PROPERTIES: &[CssPropertyWithConditions] = &[
759    // .__azul_native-list-rows-row.selected
760    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
761        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
762            inner: PixelValue::const_px(1),
763        }),
764    )),
765    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
766        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
767            inner: PixelValue::const_px(1),
768        }),
769    )),
770    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
771        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
772            inner: PixelValue::const_px(1),
773        }),
774    )),
775    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
776        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
777            inner: PixelValue::const_px(1),
778        }),
779    )),
780    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
781        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
782            inner: BorderStyle::Solid,
783        }),
784    )),
785    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
786        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
787            inner: BorderStyle::Solid,
788        }),
789    )),
790    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
791        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
792            inner: BorderStyle::Solid,
793        }),
794    )),
795    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
796        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
797            inner: BorderStyle::Solid,
798        }),
799    )),
800    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
801        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
802            inner: ColorU {
803                r: 102,
804                g: 167,
805                b: 232,
806                a: 255,
807            },
808        }),
809    )),
810    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
811        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
812            inner: ColorU {
813                r: 102,
814                g: 167,
815                b: 232,
816                a: 255,
817            },
818        }),
819    )),
820    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
821        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
822            inner: ColorU {
823                r: 102,
824                g: 167,
825                b: 232,
826                a: 255,
827            },
828        }),
829    )),
830    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
831        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
832            inner: ColorU {
833                r: 102,
834                g: 167,
835                b: 232,
836                a: 255,
837            },
838        }),
839    )),
840    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
841        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
842            STYLE_BACKGROUND_CONTENT_661302523448178568_ITEMS,
843        )),
844    )),
845    // .__azul_native-list-rows-row:hover
846    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
847        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
848            inner: PixelValue::const_px(1),
849        }),
850    )),
851    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftWidth(
852        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
853            inner: PixelValue::const_px(1),
854        }),
855    )),
856    CssPropertyWithConditions::on_hover(CssProperty::BorderRightWidth(
857        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
858            inner: PixelValue::const_px(1),
859        }),
860    )),
861    CssPropertyWithConditions::on_hover(CssProperty::BorderTopWidth(
862        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
863            inner: PixelValue::const_px(1),
864        }),
865    )),
866    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
867        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
868            inner: BorderStyle::Solid,
869        }),
870    )),
871    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftStyle(
872        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
873            inner: BorderStyle::Solid,
874        }),
875    )),
876    CssPropertyWithConditions::on_hover(CssProperty::BorderRightStyle(
877        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
878            inner: BorderStyle::Solid,
879        }),
880    )),
881    CssPropertyWithConditions::on_hover(CssProperty::BorderTopStyle(
882        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
883            inner: BorderStyle::Solid,
884        }),
885    )),
886    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
887        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
888            inner: ColorU {
889                r: 101,
890                g: 181,
891                b: 220,
892                a: 255,
893            },
894        }),
895    )),
896    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftColor(
897        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
898            inner: ColorU {
899                r: 101,
900                g: 181,
901                b: 220,
902                a: 255,
903            },
904        }),
905    )),
906    CssPropertyWithConditions::on_hover(CssProperty::BorderRightColor(
907        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
908            inner: ColorU {
909                r: 101,
910                g: 181,
911                b: 220,
912                a: 255,
913            },
914        }),
915    )),
916    CssPropertyWithConditions::on_hover(CssProperty::BorderTopColor(
917        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
918            inner: ColorU {
919                r: 101,
920                g: 181,
921                b: 220,
922                a: 255,
923            },
924        }),
925    )),
926    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
927        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
928            STYLE_BACKGROUND_CONTENT_3010057533077499049_ITEMS,
929        )),
930    )),
931    // .__azul_native-list-rows-row
932    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
933        LayoutPaddingRight {
934            inner: PixelValue::const_px(0),
935        },
936    ))),
937    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
938        LayoutPaddingLeft {
939            inner: PixelValue::const_px(0),
940        },
941    ))),
942    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
943        LayoutPaddingBottom {
944            inner: PixelValue::const_px(2),
945        },
946    ))),
947    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
948        LayoutPaddingTop {
949            inner: PixelValue::const_px(2),
950        },
951    ))),
952    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
953        LayoutFlexGrow {
954            inner: FloatValue::const_new(1),
955        },
956    ))),
957    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
958        LayoutFlexDirection::Row,
959    ))),
960    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
961        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
962            inner: PixelValue::const_px(1),
963        }),
964    )),
965    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
966        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
967            inner: PixelValue::const_px(1),
968        }),
969    )),
970    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
971        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
972            inner: PixelValue::const_px(1),
973        }),
974    )),
975    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
976        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
977            inner: PixelValue::const_px(1),
978        }),
979    )),
980    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
981        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
982            inner: BorderStyle::Solid,
983        }),
984    )),
985    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
986        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
987            inner: BorderStyle::Solid,
988        }),
989    )),
990    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
991        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
992            inner: BorderStyle::Solid,
993        }),
994    )),
995    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
996        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
997            inner: BorderStyle::Solid,
998        }),
999    )),
1000    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1001        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1002            inner: ColorU {
1003                r: 255,
1004                g: 255,
1005                b: 255,
1006                a: 0,
1007            },
1008        }),
1009    )),
1010    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1011        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1012            inner: ColorU {
1013                r: 255,
1014                g: 255,
1015                b: 255,
1016                a: 0,
1017            },
1018        }),
1019    )),
1020    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1021        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1022            inner: ColorU {
1023                r: 255,
1024                g: 255,
1025                b: 255,
1026                a: 0,
1027            },
1028        }),
1029    )),
1030    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1031        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1032            inner: ColorU {
1033                r: 255,
1034                g: 255,
1035                b: 255,
1036                a: 0,
1037            },
1038        }),
1039    )),
1040];
1041const CSS_MATCH_6827198030119836081: CssPropertyWithConditionsVec =
1042    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_6827198030119836081_PROPERTIES);
1043
1044const CSS_MATCH_7894335449545988724_PROPERTIES: &[CssPropertyWithConditions] = &[
1045    // .__azul_native-list-rows-row.focused
1046    CssPropertyWithConditions::on_focus(CssProperty::BorderBottomWidth(
1047        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1048            inner: PixelValue::const_px(1),
1049        }),
1050    )),
1051    CssPropertyWithConditions::on_focus(CssProperty::BorderLeftWidth(
1052        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1053            inner: PixelValue::const_px(1),
1054        }),
1055    )),
1056    CssPropertyWithConditions::on_focus(CssProperty::BorderRightWidth(
1057        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1058            inner: PixelValue::const_px(1),
1059        }),
1060    )),
1061    CssPropertyWithConditions::on_focus(CssProperty::BorderTopWidth(
1062        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1063            inner: PixelValue::const_px(1),
1064        }),
1065    )),
1066    CssPropertyWithConditions::on_focus(CssProperty::BorderBottomStyle(
1067        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1068            inner: BorderStyle::Solid,
1069        }),
1070    )),
1071    CssPropertyWithConditions::on_focus(CssProperty::BorderLeftStyle(
1072        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1073            inner: BorderStyle::Solid,
1074        }),
1075    )),
1076    CssPropertyWithConditions::on_focus(CssProperty::BorderRightStyle(
1077        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1078            inner: BorderStyle::Solid,
1079        }),
1080    )),
1081    CssPropertyWithConditions::on_focus(CssProperty::BorderTopStyle(
1082        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1083            inner: BorderStyle::Solid,
1084        }),
1085    )),
1086    CssPropertyWithConditions::on_focus(CssProperty::BorderBottomColor(
1087        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1088            inner: ColorU {
1089                r: 38,
1090                g: 160,
1091                b: 218,
1092                a: 255,
1093            },
1094        }),
1095    )),
1096    CssPropertyWithConditions::on_focus(CssProperty::BorderLeftColor(
1097        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1098            inner: ColorU {
1099                r: 38,
1100                g: 160,
1101                b: 218,
1102                a: 255,
1103            },
1104        }),
1105    )),
1106    CssPropertyWithConditions::on_focus(CssProperty::BorderRightColor(
1107        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1108            inner: ColorU {
1109                r: 38,
1110                g: 160,
1111                b: 218,
1112                a: 255,
1113            },
1114        }),
1115    )),
1116    CssPropertyWithConditions::on_focus(CssProperty::BorderTopColor(
1117        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1118            inner: ColorU {
1119                r: 38,
1120                g: 160,
1121                b: 218,
1122                a: 255,
1123            },
1124        }),
1125    )),
1126    CssPropertyWithConditions::on_focus(CssProperty::BackgroundContent(
1127        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1128            STYLE_BACKGROUND_CONTENT_11098930083828139815_ITEMS,
1129        )),
1130    )),
1131    // .__azul_native-list-rows-row:hover
1132    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
1133        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1134            inner: PixelValue::const_px(1),
1135        }),
1136    )),
1137    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftWidth(
1138        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1139            inner: PixelValue::const_px(1),
1140        }),
1141    )),
1142    CssPropertyWithConditions::on_hover(CssProperty::BorderRightWidth(
1143        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1144            inner: PixelValue::const_px(1),
1145        }),
1146    )),
1147    CssPropertyWithConditions::on_hover(CssProperty::BorderTopWidth(
1148        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1149            inner: PixelValue::const_px(1),
1150        }),
1151    )),
1152    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
1153        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1154            inner: BorderStyle::Solid,
1155        }),
1156    )),
1157    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftStyle(
1158        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1159            inner: BorderStyle::Solid,
1160        }),
1161    )),
1162    CssPropertyWithConditions::on_hover(CssProperty::BorderRightStyle(
1163        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1164            inner: BorderStyle::Solid,
1165        }),
1166    )),
1167    CssPropertyWithConditions::on_hover(CssProperty::BorderTopStyle(
1168        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1169            inner: BorderStyle::Solid,
1170        }),
1171    )),
1172    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
1173        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1174            inner: ColorU {
1175                r: 101,
1176                g: 181,
1177                b: 220,
1178                a: 255,
1179            },
1180        }),
1181    )),
1182    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftColor(
1183        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1184            inner: ColorU {
1185                r: 101,
1186                g: 181,
1187                b: 220,
1188                a: 255,
1189            },
1190        }),
1191    )),
1192    CssPropertyWithConditions::on_hover(CssProperty::BorderRightColor(
1193        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1194            inner: ColorU {
1195                r: 101,
1196                g: 181,
1197                b: 220,
1198                a: 255,
1199            },
1200        }),
1201    )),
1202    CssPropertyWithConditions::on_hover(CssProperty::BorderTopColor(
1203        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1204            inner: ColorU {
1205                r: 101,
1206                g: 181,
1207                b: 220,
1208                a: 255,
1209            },
1210        }),
1211    )),
1212    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
1213        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1214            STYLE_BACKGROUND_CONTENT_3010057533077499049_ITEMS,
1215        )),
1216    )),
1217    // .__azul_native-list-rows-row
1218    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
1219        LayoutPaddingRight {
1220            inner: PixelValue::const_px(0),
1221        },
1222    ))),
1223    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1224        LayoutPaddingLeft {
1225            inner: PixelValue::const_px(0),
1226        },
1227    ))),
1228    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
1229        LayoutPaddingBottom {
1230            inner: PixelValue::const_px(2),
1231        },
1232    ))),
1233    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
1234        LayoutPaddingTop {
1235            inner: PixelValue::const_px(2),
1236        },
1237    ))),
1238    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1239        LayoutFlexGrow {
1240            inner: FloatValue::const_new(1),
1241        },
1242    ))),
1243    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
1244        LayoutFlexDirection::Row,
1245    ))),
1246    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
1247        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1248            inner: PixelValue::const_px(1),
1249        }),
1250    )),
1251    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
1252        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1253            inner: PixelValue::const_px(1),
1254        }),
1255    )),
1256    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
1257        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1258            inner: PixelValue::const_px(1),
1259        }),
1260    )),
1261    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
1262        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1263            inner: PixelValue::const_px(1),
1264        }),
1265    )),
1266    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
1267        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1268            inner: BorderStyle::Solid,
1269        }),
1270    )),
1271    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
1272        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1273            inner: BorderStyle::Solid,
1274        }),
1275    )),
1276    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
1277        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1278            inner: BorderStyle::Solid,
1279        }),
1280    )),
1281    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
1282        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1283            inner: BorderStyle::Solid,
1284        }),
1285    )),
1286    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1287        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1288            inner: ColorU {
1289                r: 255,
1290                g: 255,
1291                b: 255,
1292                a: 0,
1293            },
1294        }),
1295    )),
1296    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1297        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1298            inner: ColorU {
1299                r: 255,
1300                g: 255,
1301                b: 255,
1302                a: 0,
1303            },
1304        }),
1305    )),
1306    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1307        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1308            inner: ColorU {
1309                r: 255,
1310                g: 255,
1311                b: 255,
1312                a: 0,
1313            },
1314        }),
1315    )),
1316    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1317        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1318            inner: ColorU {
1319                r: 255,
1320                g: 255,
1321                b: 255,
1322                a: 0,
1323            },
1324        }),
1325    )),
1326];
1327const CSS_MATCH_7894335449545988724: CssPropertyWithConditionsVec =
1328    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_7894335449545988724_PROPERTIES);
1329
1330const CSS_MATCH_7937682281721781688_PROPERTIES: &[CssPropertyWithConditions] = &[
1331    // .__azul_native-list-rows-row-cell
1332    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1333        LayoutPaddingLeft {
1334            inner: PixelValue::const_px(7),
1335        },
1336    ))),
1337    CssPropertyWithConditions::simple(CssProperty::MinWidth(LayoutMinWidthValue::Exact(
1338        LayoutMinWidth {
1339            inner: PixelValue::const_px(100),
1340        },
1341    ))),
1342    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
1343        StyleFontSize {
1344            inner: PixelValue::const_px(11),
1345        },
1346    ))),
1347    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
1348        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
1349    ))),
1350];
1351const CSS_MATCH_7937682281721781688: CssPropertyWithConditionsVec =
1352    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_7937682281721781688_PROPERTIES);
1353
1354const CSS_MATCH_8793836789597026811_PROPERTIES: &[CssPropertyWithConditions] = &[
1355    // .__azul_native-list-rows-row-cell
1356    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1357        LayoutPaddingLeft {
1358            inner: PixelValue::const_px(7),
1359        },
1360    ))),
1361    CssPropertyWithConditions::simple(CssProperty::MinWidth(LayoutMinWidthValue::Exact(
1362        LayoutMinWidth {
1363            inner: PixelValue::const_px(100),
1364        },
1365    ))),
1366    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
1367        StyleFontSize {
1368            inner: PixelValue::const_px(11),
1369        },
1370    ))),
1371    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
1372        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
1373    ))),
1374];
1375const CSS_MATCH_8793836789597026811: CssPropertyWithConditionsVec =
1376    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_8793836789597026811_PROPERTIES);
1377
1378const IDS_AND_CLASSES_790316832563530605: &[IdOrClass] = &[Class(AzString::from_const_str(
1379    "__azul_native-list-rows-row",
1380))];
1381const ROW_CLASS: IdOrClassVec = IdOrClassVec::from_const_slice(IDS_AND_CLASSES_790316832563530605);
1382
1383const IDS_AND_CLASSES_3034181810805097699: &[IdOrClass] = &[Class(AzString::from_const_str(
1384    "__azul_native-list-rows-row-cell",
1385))];
1386const CELL_CLASS: IdOrClassVec =
1387    IdOrClassVec::from_const_slice(IDS_AND_CLASSES_3034181810805097699);
1388
1389const IDS_AND_CLASSES_6012478019077291002: &[IdOrClass] =
1390    &[Class(AzString::from_const_str("__azul_native-list-rows"))];
1391const ROW_CONTAINER_CLASS: IdOrClassVec =
1392    IdOrClassVec::from_const_slice(IDS_AND_CLASSES_6012478019077291002);
1393
1394const IDS_AND_CLASSES_10742579426112804392: &[IdOrClass] =
1395    &[Class(AzString::from_const_str("__azul_native-list-header"))];
1396const HEADER_CONTAINER_CLASS: IdOrClassVec =
1397    IdOrClassVec::from_const_slice(IDS_AND_CLASSES_10742579426112804392);
1398
1399const IDS_AND_CLASSES_9205819539370539587: &[IdOrClass] = &[Class(AzString::from_const_str(
1400    "__azul_native_list-container",
1401))];
1402const LIST_VIEW_CONTAINER_CLASS: IdOrClassVec =
1403    IdOrClassVec::from_const_slice(IDS_AND_CLASSES_9205819539370539587);
1404
1405const IDS_AND_CLASSES_18330792117162403422: &[IdOrClass] = &[Class(AzString::from_const_str(
1406    "__azul_native-list-header-item",
1407))];
1408const COLUMN_NAME_CLASS: IdOrClassVec =
1409    IdOrClassVec::from_const_slice(IDS_AND_CLASSES_18330792117162403422);
1410
1411pub type ListViewOnLazyLoadScrollCallbackType =
1412    extern "C" fn(RefAny, CallbackInfo, ListViewState) -> Update;
1413impl_widget_callback!(
1414    ListViewOnLazyLoadScroll,
1415    OptionListViewOnLazyLoadScroll,
1416    ListViewOnLazyLoadScrollCallback,
1417    ListViewOnLazyLoadScrollCallbackType
1418);
1419
1420azul_core::impl_managed_callback! {
1421    wrapper:        ListViewOnLazyLoadScrollCallback,
1422    info_ty:        CallbackInfo,
1423    return_ty:      Update,
1424    default_ret:    Update::DoNothing,
1425    invoker_static: LIST_VIEW_ON_LAZY_LOAD_SCROLL_INVOKER,
1426    invoker_ty:     AzListViewOnLazyLoadScrollCallbackInvoker,
1427    thunk_fn:       az_list_view_on_lazy_load_scroll_callback_thunk,
1428    setter_fn:      AzApp_setListViewOnLazyLoadScrollCallbackInvoker,
1429    from_handle_fn: AzListViewOnLazyLoadScrollCallback_createFromHostHandle,
1430    extra_args:     [ state: ListViewState ],
1431}
1432
1433pub type ListViewOnColumnClickCallbackType =
1434    extern "C" fn(RefAny, CallbackInfo, ListViewState, column_clicked: usize) -> Update;
1435impl_widget_callback!(
1436    ListViewOnColumnClick,
1437    OptionListViewOnColumnClick,
1438    ListViewOnColumnClickCallback,
1439    ListViewOnColumnClickCallbackType
1440);
1441
1442azul_core::impl_managed_callback! {
1443    wrapper:        ListViewOnColumnClickCallback,
1444    info_ty:        CallbackInfo,
1445    return_ty:      Update,
1446    default_ret:    Update::DoNothing,
1447    invoker_static: LIST_VIEW_ON_COLUMN_CLICK_INVOKER,
1448    invoker_ty:     AzListViewOnColumnClickCallbackInvoker,
1449    thunk_fn:       az_list_view_on_column_click_callback_thunk,
1450    setter_fn:      AzApp_setListViewOnColumnClickCallbackInvoker,
1451    from_handle_fn: AzListViewOnColumnClickCallback_createFromHostHandle,
1452    extra_args:     [ state: ListViewState, column_clicked: usize ],
1453}
1454
1455pub type ListViewOnRowClickCallbackType =
1456    extern "C" fn(RefAny, CallbackInfo, ListViewState, row_clicked: usize) -> Update;
1457impl_widget_callback!(
1458    ListViewOnRowClick,
1459    OptionListViewOnRowClick,
1460    ListViewOnRowClickCallback,
1461    ListViewOnRowClickCallbackType
1462);
1463
1464azul_core::impl_managed_callback! {
1465    wrapper:        ListViewOnRowClickCallback,
1466    info_ty:        CallbackInfo,
1467    return_ty:      Update,
1468    default_ret:    Update::DoNothing,
1469    invoker_static: LIST_VIEW_ON_ROW_CLICK_INVOKER,
1470    invoker_ty:     AzListViewOnRowClickCallbackInvoker,
1471    thunk_fn:       az_list_view_on_row_click_callback_thunk,
1472    setter_fn:      AzApp_setListViewOnRowClickCallbackInvoker,
1473    from_handle_fn: AzListViewOnRowClickCallback_createFromHostHandle,
1474    extra_args:     [ state: ListViewState, row_clicked: usize ],
1475}
1476
1477/// State of the ListView, but without row data
1478#[derive(Debug, Clone)]
1479#[repr(C)]
1480pub struct ListViewState {
1481    /// Copy of the current column names
1482    pub columns: StringVec,
1483    /// Which column the rows are currently sorted by
1484    pub sorted_by: OptionUsize,
1485    /// Row count of rows currently loaded in the DOM
1486    pub current_row_count: usize,
1487    /// Y-offset currently applied to the rows
1488    pub scroll_offset: PixelValueNoPercent,
1489    /// Current position where the user has scrolled the ListView to
1490    pub current_scroll_position: LogicalPosition,
1491    /// Current height of the row container
1492    pub current_content_height: LogicalSize,
1493}
1494
1495/// List view, optionally able to lazy-load data
1496#[derive(Debug, Clone)]
1497#[repr(C)]
1498pub struct ListView {
1499    /// Column names
1500    pub columns: StringVec,
1501    /// Currently rendered rows. Note that the ListView does not
1502    /// have to render all rows at once, usually you'd only render
1503    /// the top 100 rows
1504    pub rows: ListViewRowVec,
1505    /// Which column is the list view sorted by (default = None)?
1506    pub sorted_by: OptionUsize,
1507    /// Offset to add to the rows used when layouting row positions
1508    /// during lazy-loaded scrolling. Also affects the scroll position
1509    pub scroll_offset: PixelValueNoPercent,
1510    /// Height of the content, if not all rows are loaded
1511    pub content_height: OptionPixelValueNoPercent,
1512    /// Context menu for the columns (usually opens a context menu
1513    /// to select which columns to show)
1514    pub column_context_menu: OptionMenu,
1515    /// Indicates that this ListView is being lazily loaded, allows
1516    /// control over what happens when the user scrolls the ListView.
1517    pub on_lazy_load_scroll: OptionListViewOnLazyLoadScroll,
1518    /// What to do when the user left-clicks the column
1519    /// (usually used for storing which column to sort by)
1520    pub on_column_click: OptionListViewOnColumnClick,
1521    /// What to do when the user left-clicks a row
1522    /// (usually used for selecting the row depending on the state)
1523    pub on_row_click: OptionListViewOnRowClick,
1524}
1525
1526impl Default for ListView {
1527    fn default() -> Self {
1528        Self {
1529            columns: StringVec::from_const_slice(&[]),
1530            rows: ListViewRowVec::from_const_slice(&[]),
1531            sorted_by: None.into(),
1532            scroll_offset: PixelValueNoPercent {
1533                inner: PixelValue::const_px(0),
1534            },
1535            content_height: None.into(),
1536            column_context_menu: None.into(),
1537            on_lazy_load_scroll: None.into(),
1538            on_column_click: None.into(),
1539            on_row_click: None.into(),
1540        }
1541    }
1542}
1543
1544/// Row of the ListView
1545#[derive(Debug, Clone)]
1546#[repr(C)]
1547pub struct ListViewRow {
1548    /// Each cell is an opaque Dom object
1549    pub cells: DomVec,
1550    /// Height of the row, if known beforehand
1551    pub height: OptionPixelValueNoPercent,
1552}
1553
1554impl_option!(ListViewRow, OptionListViewRow, copy = false, [Debug, Clone]);
1555impl_vec!(ListViewRow, ListViewRowVec, ListViewRowVecDestructor, ListViewRowVecDestructorType, ListViewRowVecSlice, OptionListViewRow);
1556impl_vec_clone!(ListViewRow, ListViewRowVec, ListViewRowVecDestructor);
1557impl_vec_mut!(ListViewRow, ListViewRowVec);
1558impl_vec_debug!(ListViewRow, ListViewRowVec);
1559
1560impl ListView {
1561    pub fn create(columns: StringVec) -> Self {
1562        Self {
1563            columns,
1564            ..Default::default()
1565        }
1566    }
1567
1568    pub fn swap_with_default(&mut self) -> Self {
1569        let mut m = Self::default();
1570        core::mem::swap(&mut m, self);
1571        m
1572    }
1573
1574    pub fn with_columns(mut self, columns: StringVec) -> Self {
1575        self.set_columns(columns);
1576        self
1577    }
1578
1579    pub fn set_columns(&mut self, columns: StringVec) {
1580        self.columns = columns;
1581    }
1582
1583    pub fn with_rows(mut self, rows: ListViewRowVec) -> Self {
1584        self.set_rows(rows);
1585        self
1586    }
1587
1588    pub fn set_rows(&mut self, rows: ListViewRowVec) {
1589        self.rows = rows;
1590    }
1591
1592    pub fn with_sorted_by(mut self, sorted_by: OptionUsize) -> Self {
1593        self.set_sorted_by(sorted_by);
1594        self
1595    }
1596
1597    pub fn set_sorted_by(&mut self, sorted_by: OptionUsize) {
1598        self.sorted_by = sorted_by;
1599    }
1600
1601    pub fn with_scroll_offset(mut self, scroll_offset: PixelValueNoPercent) -> Self {
1602        self.set_scroll_offset(scroll_offset);
1603        self
1604    }
1605
1606    pub fn set_scroll_offset(&mut self, scroll_offset: PixelValueNoPercent) {
1607        self.scroll_offset = scroll_offset;
1608    }
1609
1610    pub fn with_content_height(mut self, content_height: PixelValueNoPercent) -> Self {
1611        self.set_content_height(content_height);
1612        self
1613    }
1614
1615    pub fn set_content_height(&mut self, content_height: PixelValueNoPercent) {
1616        self.content_height = Some(content_height).into();
1617    }
1618
1619    pub fn with_column_context_menu(mut self, context_menu: Menu) -> Self {
1620        self.set_column_context_menu(context_menu);
1621        self
1622    }
1623
1624    pub fn set_column_context_menu(&mut self, column_context_menu: Menu) {
1625        self.column_context_menu = Some(column_context_menu).into();
1626    }
1627
1628    pub fn with_on_column_click<C: Into<ListViewOnColumnClickCallback>>(
1629        mut self,
1630        refany: RefAny,
1631        on_column_click: C,
1632    ) -> Self {
1633        self.set_on_column_click(refany, on_column_click);
1634        self
1635    }
1636
1637    pub fn set_on_column_click<C: Into<ListViewOnColumnClickCallback>>(
1638        &mut self,
1639        refany: RefAny,
1640        on_column_click: C,
1641    ) {
1642        self.on_column_click = Some(ListViewOnColumnClick {
1643            refany,
1644            callback: on_column_click.into(),
1645        })
1646        .into();
1647    }
1648
1649    pub fn with_on_row_click<C: Into<ListViewOnRowClickCallback>>(
1650        mut self,
1651        refany: RefAny,
1652        on_row_click: C,
1653    ) -> Self {
1654        self.set_on_row_click(refany, on_row_click);
1655        self
1656    }
1657
1658    pub fn set_on_row_click<C: Into<ListViewOnRowClickCallback>>(
1659        &mut self,
1660        refany: RefAny,
1661        on_row_click: C,
1662    ) {
1663        self.on_row_click = Some(ListViewOnRowClick {
1664            refany,
1665            callback: on_row_click.into(),
1666        })
1667        .into();
1668    }
1669
1670    pub fn dom(self) -> Dom {
1671        Dom::create_div()
1672            .with_css_props(CSS_MATCH_17553577885456905601)
1673            .with_ids_and_classes(LIST_VIEW_CONTAINER_CLASS)
1674            .with_children(DomVec::from_vec(vec![
1675                // header
1676                Dom::create_div()
1677                    .with_css_props(CSS_MATCH_15315949193378715186)
1678                    .with_ids_and_classes(HEADER_CONTAINER_CLASS)
1679                    .with_children(
1680                        self.columns
1681                            .iter()
1682                            .map(|col| {
1683                                Dom::create_div()
1684                                    .with_css_props(CSS_MATCH_12498280255863106397)
1685                                    .with_ids_and_classes(COLUMN_NAME_CLASS)
1686                                    .with_child({
1687                                        Dom::create_text(col.clone())
1688                                            .with_css_props(CSS_MATCH_15673486787900743642)
1689                                    })
1690                            })
1691                            .collect::<Vec<_>>()
1692                            .into(),
1693                    ),
1694                // rows
1695                Dom::create_div()
1696                    .with_css_props(CSS_MATCH_4852927511892172364)
1697                    .with_ids_and_classes(ROW_CONTAINER_CLASS)
1698                    .with_children(
1699                        self.rows
1700                            .into_iter()
1701                            .map(|row| {
1702                                Dom::create_div()
1703                                    .with_css_props(CSS_MATCH_7894335449545988724)
1704                                    .with_ids_and_classes(ROW_CLASS.clone())
1705                                    .with_tab_index(TabIndex::Auto)
1706                                    .with_children(
1707                                        row.cells
1708                                            .as_ref()
1709                                            .iter()
1710                                            .map(|cell| {
1711                                                Dom::create_div()
1712                                                    .with_css_props(CSS_MATCH_12980082330151137475)
1713                                                    .with_ids_and_classes(CELL_CLASS)
1714                                                    .with_child(cell.clone())
1715                                            })
1716                                            .collect::<Vec<_>>()
1717                                            .into(),
1718                                    )
1719                            })
1720                            .collect::<Vec<_>>()
1721                            .into(),
1722                    ),
1723            ]))
1724    }
1725}
azul_layout/widgets/list_view.rs

azul_layout/widgets/
list_view.rs
