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.loadTypeface(10),  // default typeface at size 10
46             margin = 0,
47             padding = 0,
48         ),
49     );
50 
51 }
52 
53 
54 @(
55     () => label("When it comes to margins, Fluid uses a model that is very similar, or even identical, to "
56         ~ `HTML. Each node is composed of a few "boxes", stacked one within each other. From the core, `
57         ~ "the content box holds text, images, other nodes. Padding adds some space for that content to "
58         ~ "breathe, border is used to add an outline around the node, and margin defines the outer spacing."),
59     () => vframe(
60         .layout!"center",
61         .boxTheme,
62         .tags!(BoxTags.margin),
63         label(.layout!"center", "Margin"),
64         vframe(
65             .tags!(BoxTags.border),
66             label(.layout!"center", "Border"),
67             vframe(
68                 .tags!(BoxTags.padding),
69                 label(.layout!"center", "Padding"),
70                 vframe(
71                     .tags!(BoxTags.content),
72                     label(.layout!"center", "Content"),
73                 )
74             )
75         )
76     ),
77     () => label("If you add background to a node, it will be displayed behind the border box. In fact, "
78         ~ "backgrounds and borders are drawn during the same step."),
79     () => label("Let's start by making a node with nothing but border."),
80 )
81 Frame marginExample() {
82 
83     // TODO
84     // This example should have the user manipulate the values themselves
85 
86     import fluid.theme;
87 
88     auto myTheme = Theme(
89         rule!Label(
90             textColor = color("#ff0000"),
91         ),
92     );
93 
94     return vframe(
95         myTheme,
96         label("Hello, World!"),
97         hseparator(),
98         label("Foo"),
99     );
100 }