freya_devtools_app/tabs/
computed_layout.rs

1use freya::prelude::*;
2use torin::gaps::Gaps;
3
4fn gap_label(tooltip_text: &'static str, value: f32) -> impl IntoElement {
5    TooltipContainer::new(Tooltip::new(tooltip_text)).child(
6        label()
7            .text_align(TextAlign::Center)
8            .width(Size::px(25.))
9            .height(Size::px(25.))
10            .text(format!("{value}")),
11    )
12}
13
14pub fn computed_layout(inner_area: String, padding: Gaps, margin: Gaps) -> impl IntoElement {
15    rect().width(Size::fill()).max_width(Size::px(300.)).child(
16        rect()
17            .width(Size::fill())
18            .height(Size::px(220.))
19            .main_align(Alignment::center())
20            .cross_align(Alignment::center())
21            .background((40, 40, 40))
22            .content(Content::Flex)
23            .corner_radius(CornerRadius::new_all(5.))
24            .child(gap_label("Top margin", margin.top()))
25            .child(
26                rect()
27                    .direction(Direction::Horizontal)
28                    .height(Size::flex(1.))
29                    .width(Size::fill())
30                    .cross_align(Alignment::center())
31                    .content(Content::Flex)
32                    .child(gap_label("Left margin", margin.left()))
33                    .child(
34                        rect()
35                            .width(Size::flex(1.))
36                            .height(Size::fill())
37                            .content(Content::Flex)
38                            .cross_align(Alignment::Center)
39                            .background((71, 180, 240))
40                            .corner_radius(CornerRadius::new_all(5.))
41                            .child(gap_label("Top padding", padding.top()))
42                            .child(
43                                rect()
44                                    .direction(Direction::Horizontal)
45                                    .height(Size::flex(1.))
46                                    .content(Content::Flex)
47                                    .cross_align(Alignment::center())
48                                    .child(gap_label("Left padding", padding.left()))
49                                    .child(
50                                        rect()
51                                            .width(Size::flex(1.))
52                                            .height(Size::fill())
53                                            .main_align(Alignment::center())
54                                            .cross_align(Alignment::center())
55                                            .background((40, 40, 40))
56                                            .corner_radius(CornerRadius::new_all(5.))
57                                            .child(
58                                                TooltipContainer::new(Tooltip::new("Inner area"))
59                                                    .child(label().text(inner_area)),
60                                            ),
61                                    )
62                                    .child(gap_label("Right padding", padding.right())),
63                            )
64                            .child(gap_label("Bottom padding", padding.bottom())),
65                    )
66                    .child(gap_label("Right margin", margin.right())),
67            )
68            .child(gap_label("Bottom margin", margin.bottom())),
69    )
70}
freya_devtools_app/tabs/computed_layout.rs

freya_devtools_app/tabs/
computed_layout.rs
