@@ -11,31 +11,31 @@ import Html.Events exposing (onClick)
1111
1212
1313type alias Model =
14− { count : Int }
14+ { multiline : String
15+ , single : String
16+ }
1517
1618
1719initialModel : Model
1820initialModel =
19− { count = 0 }
21+ { multiline = testtxt
22+ , single = ""
23+ }
2024
2125
2226type Msg
23− = Increment
24− | Decrement
25− | MLChanged String
27+ = MultilineChanged String
28+ | SingleChanged String
2629
2730
2831update : Msg -> Model -> Model
2932update msg model =
3033 case msg of
31− Increment ->
32− { model | count = model.count + 1 }
34+ MultilineChanged new ->
35+ { model | multiline = new }
3336
34− Decrement ->
35− { model | count = model.count - 1 }
36−
37− MLChanged s ->
38− model
37+ SingleChanged new ->
38+ { model | single = new }
3939
4040
4141examplePlaceholder =
@@ -86,198 +86,286 @@ label str =
8686view : Model -> Html Msg
8787view model =
8888 layout [] <|
89− column
90− [ width (px 1500)
91− , padding 100
92− , spacing 500
93− , centerX
89+ column []
90+ [ el [ Font.size 32 ] (text "Single Input")
91+ , viewSingle model
92+ , el [ Font.size 32 ] (text "Multiline")
93+ , viewMultiline model
9494 ]
95− [ rowTest "Heights"
96− [ multiline [ background ]
97− { onChange = MLChanged
98− , text = testtxt
99− , placeholder = Nothing
100− , spellcheck = False
101− , label =
102− label "Default"
103− }
104− , multiline [ background, height shrink ]
105− { onChange = MLChanged
106− , text = testtxt
107− , placeholder = Nothing
108− , spellcheck = False
109− , label =
110− label "Height shrink"
111− }
112− , multiline [ background, height fill ]
113− { onChange = MLChanged
114− , text = testtxt
115− , placeholder = Nothing
116− , spellcheck = False
117− , label =
118− label "Height Fill"
119− }
120− , multiline [ background, height (px 200) ]
121− { onChange = MLChanged
122− , text = testtxt
123− , placeholder = Nothing
124− , spellcheck = False
125− , label =
126− label "Height 200px"
127− }
128− ]
129− , rowTest "Widths"
130− [ multiline []
131− { onChange = MLChanged
132− , text = testtxt
133− , placeholder = Nothing
134− , spellcheck = False
135− , label =
136− label "Default"
137− }
138− , multiline [ width fill ]
139− { onChange = MLChanged
140− , text = testtxt
141− , placeholder = Nothing
142− , spellcheck = False
143− , label =
144− label "Width fill"
145− }
146− , multiline [ width shrink ]
147− { onChange = MLChanged
148− , text = testtxt
149− , placeholder = Nothing
150− , spellcheck = False
151− , label =
152− label "Width Shrink"
153− }
154− , multiline [ width (px 300) ]
155− { onChange = MLChanged
156− , text = testtxt
157− , placeholder = Nothing
158− , spellcheck = False
159− , label = label "width 300"
160− }
161− ]
162− , rowTest "Spacing"
163− [ multiline []
164− { onChange = MLChanged
165− , text = testtxt
166− , placeholder = Nothing
167− , spellcheck = False
168− , label =
169− label "Default"
170− }
171− , multiline [ spacing 30, padding 60 ]
172− { onChange = MLChanged
173− , text = testtxt
174− , placeholder = Nothing
175− , spellcheck = False
176− , label =
177− label "Spacing 30"
178− }
179− , multiline [ spacing 0 ]
180− { onChange = MLChanged
181− , text = testtxt
182− , placeholder = Nothing
183− , spellcheck = False
184− , label = label "Spacing 0"
185− }
186− ]
187− , rowTest "Scrollable viewport with different paddings "
188− [ multiline [ height (px 200), padding 30 ]
189− { onChange = MLChanged
190− , text = testtxt
191− , placeholder = Nothing
192− , spellcheck = False
193− , label =
194− label "Height 200, Padding 30"
195− }
196− , multiline [ height (px 200), padding 60 ]
197− { onChange = MLChanged
198− , text = testtxt
199− , placeholder = Nothing
200− , spellcheck = False
201− , label =
202− label "Height 200, Padding 60"
203− }
204− , multiline [ height (px 200), padding 0 ]
205− { onChange = MLChanged
206− , text = testtxt
207− , placeholder = Nothing
208− , spellcheck = False
209− , label = label "Height 200, Padding 0"
210− }
211− ]
212− , rowTest "Placeholders"
213− [ multiline []
214− { onChange = MLChanged
215− , text = ""
216− , placeholder = Just examplePlaceholder
217− , spellcheck = False
218− , label =
219− label "Default"
220− }
221− , multiline [ height shrink ]
222− { onChange = MLChanged
223− , text = ""
224− , placeholder = Just examplePlaceholder
225− , spellcheck = False
226− , label =
227− label "Height shrink"
228− }
229− , multiline [ height fill ]
230− { onChange = MLChanged
231− , text = ""
232− , placeholder = Just examplePlaceholder
233− , spellcheck = False
234− , label =
235− label "Height Fill"
236− }
237− , multiline [ height (px 200) ]
238− { onChange = MLChanged
239− , text = ""
240− , placeholder = Just examplePlaceholder
241− , spellcheck = False
242− , label =
243− label "Height 200px"
244− }
95+
96+
97+viewMultiline model =
98+ column
99+ [ width (px 1500)
100+ , padding 100
101+ , spacing 500
102+ , centerX
103+ ]
104+ [ rowTest "Heights"
105+ [ multiline [ background ]
106+ { onChange = MultilineChanged
107+ , text = model.multiline
108+ , placeholder = Nothing
109+ , spellcheck = False
110+ , label =
111+ label "Default"
112+ }
113+ , multiline [ background, height shrink ]
114+ { onChange = MultilineChanged
115+ , text = model.multiline
116+ , placeholder = Nothing
117+ , spellcheck = False
118+ , label =
119+ label "Height shrink"
120+ }
121+ , multiline [ background, height fill ]
122+ { onChange = MultilineChanged
123+ , text = model.multiline
124+ , placeholder = Nothing
125+ , spellcheck = False
126+ , label =
127+ label "Height Fill"
128+ }
129+ , multiline [ background, height (px 200) ]
130+ { onChange = MultilineChanged
131+ , text = model.multiline
132+ , placeholder = Nothing
133+ , spellcheck = False
134+ , label =
135+ label "Height 200px"
136+ }
137+ ]
138+ , rowTest "Widths"
139+ [ multiline []
140+ { onChange = MultilineChanged
141+ , text = model.multiline
142+ , placeholder = Nothing
143+ , spellcheck = False
144+ , label =
145+ label "Default"
146+ }
147+ , multiline [ width fill ]
148+ { onChange = MultilineChanged
149+ , text = model.multiline
150+ , placeholder = Nothing
151+ , spellcheck = False
152+ , label =
153+ label "Width fill"
154+ }
155+ , multiline [ width shrink ]
156+ { onChange = MultilineChanged
157+ , text = model.multiline
158+ , placeholder = Nothing
159+ , spellcheck = False
160+ , label =
161+ label "Width Shrink"
162+ }
163+ , multiline [ width (px 300) ]
164+ { onChange = MultilineChanged
165+ , text = model.multiline
166+ , placeholder = Nothing
167+ , spellcheck = False
168+ , label = label "width 300"
169+ }
170+ ]
171+ , rowTest "Spacing"
172+ [ multiline []
173+ { onChange = MultilineChanged
174+ , text = model.multiline
175+ , placeholder = Nothing
176+ , spellcheck = False
177+ , label =
178+ label "Default"
179+ }
180+ , multiline [ spacing 30, padding 60 ]
181+ { onChange = MultilineChanged
182+ , text = model.multiline
183+ , placeholder = Nothing
184+ , spellcheck = False
185+ , label =
186+ label "Spacing 30"
187+ }
188+ , multiline [ spacing 0 ]
189+ { onChange = MultilineChanged
190+ , text = model.multiline
191+ , placeholder = Nothing
192+ , spellcheck = False
193+ , label = label "Spacing 0"
194+ }
195+ ]
196+ , rowTest "Scrollable viewport with different paddings "
197+ [ multiline [ height (px 200), padding 30 ]
198+ { onChange = MultilineChanged
199+ , text = model.multiline
200+ , placeholder = Nothing
201+ , spellcheck = False
202+ , label =
203+ label "Height 200, Padding 30"
204+ }
205+ , multiline [ height (px 200), padding 60 ]
206+ { onChange = MultilineChanged
207+ , text = model.multiline
208+ , placeholder = Nothing
209+ , spellcheck = False
210+ , label =
211+ label "Height 200, Padding 60"
212+ }
213+ , multiline [ height (px 200), padding 0 ]
214+ { onChange = MultilineChanged
215+ , text = model.multiline
216+ , placeholder = Nothing
217+ , spellcheck = False
218+ , label = label "Height 200, Padding 0"
219+ }
220+ ]
221+ , rowTest "Placeholders"
222+ [ multiline []
223+ { onChange = MultilineChanged
224+ , text = ""
225+ , placeholder = Just examplePlaceholder
226+ , spellcheck = False
227+ , label =
228+ label "Default"
229+ }
230+ , multiline [ height shrink ]
231+ { onChange = MultilineChanged
232+ , text = ""
233+ , placeholder = Just examplePlaceholder
234+ , spellcheck = False
235+ , label =
236+ label "Height shrink"
237+ }
238+ , multiline [ height fill ]
239+ { onChange = MultilineChanged
240+ , text = ""
241+ , placeholder = Just examplePlaceholder
242+ , spellcheck = False
243+ , label =
244+ label "Height Fill"
245+ }
246+ , multiline [ height (px 200) ]
247+ { onChange = MultilineChanged
248+ , text = ""
249+ , placeholder = Just examplePlaceholder
250+ , spellcheck = False
251+ , label =
252+ label "Height 200px"
253+ }
254+ ]
255+ , rowTest "Long Placeholders"
256+ [ multiline []
257+ { onChange = MultilineChanged
258+ , text = ""
259+ , placeholder = Just examplePlaceholderLong
260+ , spellcheck = False
261+ , label =
262+ label "Default"
263+ }
264+ , multiline [ height shrink ]
265+ { onChange = MultilineChanged
266+ , text = ""
267+ , placeholder = Just examplePlaceholderLong
268+ , spellcheck = False
269+ , label =
270+ label "Height shrink"
271+ }
272+ , multiline [ height fill ]
273+ { onChange = MultilineChanged
274+ , text = ""
275+ , placeholder = Just examplePlaceholderLong
276+ , spellcheck = False
277+ , label =
278+ label "Height Fill"
279+ }
280+ , multiline [ height (px 200) ]
281+ { onChange = MultilineChanged
282+ , text = ""
283+ , placeholder = Just examplePlaceholderLong
284+ , spellcheck = False
285+ , label =
286+ label "Height 200px"
287+ }
288+ ]
289+ ]
290+
291+
292+singleInput attrs labelTxt model =
293+ Input.text attrs
294+ { onChange = SingleChanged
295+ , text = model
296+ , label =
297+ labelAbove
298+ [ width (px 100)
299+ , Font.italic
245300 ]
246− , rowTest "Long Placeholders"
247− [ multiline []
248− { onChange = MLChanged
249− , text = ""
250− , placeholder = Just examplePlaceholderLong
251− , spellcheck = False
252− , label =
253− label "Default"
254− }
255− , multiline [ height shrink ]
256− { onChange = MLChanged
257− , text = ""
258− , placeholder = Just examplePlaceholderLong
259− , spellcheck = False
260− , label =
261− label "Height shrink"
262− }
263− , multiline [ height fill ]
264− { onChange = MLChanged
265− , text = ""
266− , placeholder = Just examplePlaceholderLong
267− , spellcheck = False
268− , label =
269− label "Height Fill"
270− }
271− , multiline [ height (px 200) ]
272− { onChange = MLChanged
273− , text = ""
274− , placeholder = Just examplePlaceholderLong
275− , spellcheck = False
276− , label =
277− label "Height 200px"
278− }
301+ (text labelTxt)
302+ , placeholder =
303+ Just
304+ (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]
305+ (text "Here is my single input")
306+ )
307+ }
308+
309+
310+singleInputLongPlaceholder attrs labelTxt model =
311+ Input.text attrs
312+ { onChange = SingleChanged
313+ , text = model
314+ , label =
315+ labelAbove
316+ [ width (px 100)
317+ , Font.italic
279318 ]
319+ (text labelTxt)
320+ , placeholder =
321+ Just
322+ (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]
323+ (text "Here is my single input with a placeholder that is super long")
324+ )
325+ }
326+
327+
328+viewSingle model =
329+ column
330+ [ width (px 1500)
331+ , padding 100
332+ , spacing 500
333+ , centerX
334+ ]
335+ [ rowTest "Heights"
336+ [ singleInput [] "Default" model.single
337+ , singleInput [ height shrink ] "Height shrink" model.single
338+ , singleInput [ height fill ] "Height Fill" model.single
339+ , singleInput [ height (px 200) ] "Height 200px" model.single
340+ ]
341+ , rowTest "Widths"
342+ [ singleInput [] "Default" model.single
343+ , singleInput [ width fill ] "Width fill" model.single
344+ , singleInput [ width shrink ] "Width Shrink" model.single
345+ , singleInput [ width (px 200) ] "width 200" model.single
346+ ]
347+ , rowTest "Spacing (no effect)"
348+ [ singleInput [] "Default" model.single
349+ , singleInput [ spacing 60 ] "Spacing 30" model.single
350+ , singleInput [ spacing 0 ] "Spacing 0" model.single
351+ ]
352+ , rowTest "Padding"
353+ [ singleInput [] "Default" model.single
354+ , singleInput [ padding 60 ] "Padding 30" model.single
355+ , singleInput [ padding 0 ] "Padding 0" model.single
280356 ]
357+ , rowTest "Scrollable viewport with different paddings "
358+ [ singleInput [ height (px 200), padding 30 ] "Height 200, Padding 30" model.single
359+ , singleInput [ height (px 200), padding 60 ] "Height 200, Padding 60" model.single
360+ , singleInput [ height (px 200), padding 0 ] "Height 200, Padding 0" model.single
361+ ]
362+ , rowTest "Long Placeholders"
363+ [ singleInputLongPlaceholder [] "Default" model.single
364+ , singleInputLongPlaceholder [ height shrink ] "Height shrink" model.single
365+ , singleInputLongPlaceholder [ height fill ] "Height Fill" model.single
366+ , singleInputLongPlaceholder [ height (px 200) ] "Height 200px" model.single
367+ ]
368+ ]
281369
282370
283371main : Program () Model Msg