fluid.tour.margins source code

1 module fluid.tour.margins;
2 
3 import fluid;
4 
5 
6 @safe:
7 
8 
9 @NodeTag
10 enum BoxTags {
11     margin,
12     border,
13     padding,
14     content,
15 }
16 
17 Theme boxTheme;
18 
19 static this() {
20 
21     import fluid.theme;
22 
23     boxTheme = Theme(
24         rule!Frame(
25             margin = 0,
26             margin.sideBottom = 18,
27             padding.sideY = 2,
28             padding.sideX = 18,
29             border = 1,
30             borderStyle = colorBorder(color("#0005")),
31         ),
32         rule!(Frame, BoxTags.margin)(
33             backgroundColor = color("#ff8a5c"),
34         ),
35         rule!(Frame, BoxTags.border)(
36             backgroundColor = color("#ffb35d"),
37         ),
38         rule!(Frame, BoxTags.padding)(
39             backgroundColor = color("#f7ff5e"),
40         ),
41         rule!(Frame, BoxTags.content)(
42             backgroundColor = color("#61ff66"),
43         ),
44         rule!Label(
45             typeface = Style.defaultTypeface,
46             fontSize = 10,
47             margin = 0,
48             padding = 0,
49         ),
50     );
51 
52 }
53 
54 
55 @(
56     () => label("When it comes to margins, Fluid uses a model that is very similar, or even identical, to "
57         ~ `HTML. Each node is composed of a few "boxes", stacked one within each other. From the core, `
58         ~ "the content box holds text, images, other nodes. Padding adds some space for that content to "
59         ~ "breathe, border is used to add an outline around the node, and margin defines the outer spacing."),
60     () => vframe(
61         .layout!"center",
62         .boxTheme,
63         .tags!(BoxTags.margin),
64         label(.layout!"center", "Margin"),
65         vframe(
66             .tags!(BoxTags.border),
67             label(.layout!"center", "Border"),
68             vframe(
69                 .tags!(BoxTags.padding),
70                 label(.layout!"center", "Padding"),
71                 vframe(
72                     .tags!(BoxTags.content),
73                     label(.layout!"center", "Content"),
74                 )
75             )
76         )
77     ),
78     () => label("If you add background to a node, it will be displayed behind the border box. In fact, "
79         ~ "backgrounds and borders are drawn during the same step."),
80     () => label("Let's start by making a node with nothing but border."),
81 )
82 Frame marginExample() {
83 
84     // TODO
85     // This example should have the user manipulate the values themselves
86 
87     import fluid.theme;
88 
89     auto myTheme = Theme(
90         rule!Label(
91             textColor = color("#ff0000"),
92         ),
93     );
94 
95     return vframe(
96         myTheme,
97         label("Hello, World!"),
98         hseparator(),
99         label("Foo"),
100     );
101 }