freya_devtools_app/tabs/computed_layout.rs
1use freya::prelude::*;
2use torin::gaps::Gaps;
3
4pub fn computed_layout(inner_area: String, padding: Gaps, margin: Gaps) -> impl IntoElement {
5 rect().width(Size::fill()).max_width(Size::px(300.)).child(
6 rect()
7 .width(Size::fill())
8 .height(Size::px(220.))
9 .main_align(Alignment::center())
10 .cross_align(Alignment::center())
11 .background((40, 40, 40))
12 .content(Content::Flex)
13 .corner_radius(CornerRadius::new_all(5.))
14 .child(
15 TooltipContainer::new(Tooltip::new("Top margin")).child(
16 label()
17 .text_align(TextAlign::Center)
18 .width(Size::px(25.))
19 .height(Size::px(25.))
20 .text(format!("{}", margin.top())),
21 ),
22 )
23 .child(
24 rect()
25 .direction(Direction::Horizontal)
26 .height(Size::flex(1.))
27 .width(Size::fill())
28 .cross_align(Alignment::center())
29 .content(Content::Flex)
30 .child(
31 TooltipContainer::new(Tooltip::new("Left margin")).child(
32 label()
33 .text_align(TextAlign::Center)
34 .width(Size::px(25.))
35 .height(Size::px(25.))
36 .text(format!("{}", margin.left())),
37 ),
38 )
39 .child(
40 rect()
41 .width(Size::flex(1.))
42 .height(Size::fill())
43 .content(Content::Flex)
44 .cross_align(Alignment::Center)
45 .background((71, 180, 240))
46 .corner_radius(CornerRadius::new_all(5.))
47 .child(
48 TooltipContainer::new(Tooltip::new("Top padding")).child(
49 label()
50 .text_align(TextAlign::Center)
51 .width(Size::px(25.))
52 .height(Size::px(25.))
53 .text(format!("{}", padding.top())),
54 ),
55 )
56 .child(
57 rect()
58 .direction(Direction::Horizontal)
59 .height(Size::flex(1.))
60 .content(Content::Flex)
61 .cross_align(Alignment::center())
62 .child(
63 TooltipContainer::new(Tooltip::new("Left padding")).child(
64 label()
65 .text_align(TextAlign::Center)
66 .width(Size::px(25.))
67 .height(Size::px(25.))
68 .text(format!("{}", padding.left())),
69 ),
70 )
71 .child(
72 rect()
73 .width(Size::flex(1.))
74 .height(Size::fill())
75 .main_align(Alignment::center())
76 .cross_align(Alignment::center())
77 .background((40, 40, 40))
78 .corner_radius(CornerRadius::new_all(5.))
79 .child(
80 TooltipContainer::new(Tooltip::new("Inner area"))
81 .child(label().text(inner_area)),
82 ),
83 )
84 .child(
85 TooltipContainer::new(Tooltip::new("Right padding")).child(
86 label()
87 .text_align(TextAlign::Center)
88 .width(Size::px(25.))
89 .height(Size::px(25.))
90 .text(format!("{}", padding.right())),
91 ),
92 ),
93 )
94 .child(
95 TooltipContainer::new(Tooltip::new("Bottom padding")).child(
96 label()
97 .text_align(TextAlign::Center)
98 .width(Size::px(25.))
99 .height(Size::px(25.))
100 .text(format!("{}", padding.bottom())),
101 ),
102 ),
103 )
104 .child(
105 TooltipContainer::new(Tooltip::new("Right margin")).child(
106 label()
107 .text_align(TextAlign::Center)
108 .width(Size::px(25.))
109 .height(Size::px(25.))
110 .text(format!("{}", margin.right())),
111 ),
112 ),
113 )
114 .child(
115 TooltipContainer::new(Tooltip::new("Bottom margin")).child(
116 label()
117 .text_align(TextAlign::Center)
118 .width(Size::px(25.))
119 .height(Size::px(25.))
120 .text(format!("{}", margin.bottom())),
121 ),
122 ),
123 )
124}