git.iko.soy/typeable/elm-ui
on dfef577 help sign in
typeable/elm-ui/tests-rendering/src/Tests/RowAlignment.elm
212 lines 8.5 kB history raw
1module Tests.RowAlignment exposing (..)
3import Generator
4import Html
5import Testable
6import Testable.Element as Element exposing (..)
7import Testable.Element.Background as Background
8import Testable.Element.Font as Font
9import Testable.Runner
10import Tests.Palette as Palette exposing (..)
13{-| -}
14main : Html.Html msg
15main =
16 Testable.Runner.show view
19box attrs =
20 el
21 ([ width (px 50)
22 , height (px 50)
23 , Background.color blue
24 ]
25 ++ attrs
26 )
27 none
30view =
31 let
32 rowContainer attrs children =
33 row
34 ([ spacing 20
35 , height (px 100)
36 , Background.color lightGrey
37 ]
38 ++ attrs
39 )
40 children
41 in
42 column [ width (px 500), spacing 20 ]
43 [ el [] (text "Alignment Within a Row")
44 , column [ spacing 20 ] <|
45 Generator.sizes <|
46 \resizeable ->
47 rowContainer
48 [ label "single child" ]
49 [ resizeable [] none ]
50 , column [ spacing 20 ] <|
51 Generator.sizes <|
52 \resizeable ->
53 rowContainer
54 [ label "single child" ]
55 [ resizeable [ centerX ] none ]
56 , column [ spacing 20 ] <|
57 Generator.sizes <|
58 \resizeable ->
59 rowContainer [ label "single child" ]
60 [ resizeable [ alignRight ] none ]
61 , column [ spacing 20 ] <|
62 Generator.sizes <|
63 \resizeable ->
64 rowContainer []
65 [ resizeable [] none
66 , resizeable [] none
67 , resizeable [] none
68 ]
69 , column [ spacing 20 ] <|
70 Generator.sizes <|
71 \resizeable ->
72 rowContainer []
73 [ resizeable [] none
74 , resizeable [] none
75 , resizeable [ alignRight, label "Right Child in Row" ] none
76 ]
77 , column [ spacing 20 ] <|
78 Generator.sizes <|
79 \resizeable ->
80 rowContainer
81 []
82 [ resizeable [] none
83 , resizeable [ alignRight, label "Middle Child in Row" ] none
84 , resizeable [] none
85 ]
86 , column [ spacing 20 ] <|
87 Generator.sizes <|
88 \resizeable ->
89 rowContainer []
90 [ resizeable [ alignRight, label "Left Child in Row" ] none
91 , resizeable [] none
92 , resizeable [] none
93 ]
94 , text "center X"
95 , column [ spacing 20 ] <|
96 Generator.sizes <|
97 \resizeable ->
98 rowContainer []
99 [ resizeable [ centerX, label "Left Child in Row" ] none
100 , resizeable [] none
101 , resizeable [] none
102 ]
103 , column [ spacing 20 ] <|
104 Generator.sizes <|
105 \resizeable ->
106 rowContainer []
107 [ resizeable [] none
108 , resizeable [ centerX, label "Middle Child in Row" ] none
109 , resizeable [] none
110 ]
111 , column [ spacing 20 ] <|
112 Generator.sizes <|
113 \resizeable ->
114 rowContainer []
115 [ resizeable [] none
116 , resizeable [] none
117 , resizeable [ centerX, label "Right Child in Row" ] none
118 ]
119 , column [ spacing 20 ] <|
120 Generator.sizes <|
121 \resizeable ->
122 rowContainer []
123 [ resizeable [] none
124 , resizeable [] none
125 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
126 , resizeable [] none
127 ]
128 , column [ spacing 20 ] <|
129 Generator.sizes <|
130 \resizeable ->
131 rowContainer []
132 [ resizeable [] none
133 , resizeable [] none
134 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
135 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
136 , resizeable [] none
137 ]
138 , column [ spacing 20 ] <|
139 Generator.sizes <|
140 \resizeable ->
141 rowContainer []
142 [ resizeable [] none
143 , resizeable [] none
144 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
145 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
146 , resizeable [ centerX, label "Middle-Right Child in Row" ] none
147 , resizeable [] none
148 ]
149 , text "left x right"
150 , column [ spacing 20 ] <|
151 Generator.sizes <|
152 \resizeable ->
153 rowContainer []
154 [ resizeable [ alignLeft, label "Left Child in Row" ] none
155 , resizeable [] none
156 , resizeable [ alignRight, label "Right Child in Row" ] none
157 ]
158 , text "left center right"
159 , column [ spacing 20 ] <|
160 Generator.sizes <|
161 \resizeable ->
162 rowContainer []
163 [ resizeable [ alignLeft, label "Left Child in Row" ] none
164 , resizeable [ centerX, label "Middle Child in Row" ] none
165 , resizeable [ alignRight, label "Right Child in Row" ] none
166 ]
167 , text "vertical alignment"
168 , column [ spacing 20 ] <|
169 Generator.sizes <|
170 \resizeable ->
171 rowContainer []
172 [ resizeable [ alignTop, label "Left Child in Row" ] none
173 , resizeable [ centerY, label "Middle Child in Row" ] none
174 , resizeable [ alignBottom, label "Right Child in Row" ] none
175 ]
176 , text "x and y alignments"
177 , column [ spacing 20 ] <|
178 Generator.sizes <|
179 \resizeable ->
180 rowContainer []
181 [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
182 , resizeable [ centerX, centerY, label "Middle Child" ] none
183 , resizeable [ alignRight, alignBottom, label "Right Child" ] none
184 ]
185 , text "align Top and X alignments "
186 , column [ spacing 20 ] <|
187 Generator.sizes <|
188 \resizeable ->
189 rowContainer []
190 [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
191 , resizeable [ centerX, alignTop, label "Middle Child" ] none
192 , resizeable [ alignRight, alignTop, label "Right Child" ] none
193 ]
194 , text "align Bottom and X alignments "
195 , column [ spacing 20 ] <|
196 Generator.sizes <|
197 \resizeable ->
198 rowContainer []
199 [ resizeable [ alignLeft, alignBottom, label "Left Child" ] none
200 , resizeable [ centerX, alignBottom, label "Middle Child" ] none
201 , resizeable [ alignRight, alignBottom, label "Right Child" ] none
202 ]
203 , text "centerY and X alignments "
204 , column [ spacing 20 ] <|
205 Generator.sizes <|
206 \resizeable ->
207 rowContainer []
208 [ resizeable [ alignLeft, centerY, label "Left Child" ] none
209 , resizeable [ centerX, centerY, label "Middle Child" ] none
210 , resizeable [ alignRight, centerY, label "Right Child" ] none
211 ]
212 ]