@@ -0,0 +1,228 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (..)
5+import Element.Background as Background
6+import Element.Border as Border
7+import Element.Input exposing (labelAbove, multiline)
8+import Html exposing (Html)
9+import Html.Events exposing (onClick)
10+
11+
12+type alias Model =
13+ { count : Int }
14+
15+
16+initialModel : Model
17+initialModel =
18+ { count = 0 }
19+
20+
21+type Msg
22+ = Increment
23+ | Decrement
24+ | MLChanged String
25+
26+
27+update : Msg -> Model -> Model
28+update msg model =
29+ case msg of
30+ Increment ->
31+ { model | count = model.count + 1 }
32+
33+ Decrement ->
34+ { model | count = model.count - 1 }
35+
36+ MLChanged s ->
37+ model
38+
39+
40+testtxt =
41+ "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"
42+
43+
44+testtxtnewlines =
45+ """orem Ipsum is simply dummy text of the printing
46+and typesetting industry. Lorem Ipsum has been the industry's
47+standard dummy text ever since the 1500s, when an unknown
48+printer took a galley of type and scrambled it to make a type specimen book.
49+It has survived not only five centuries, but also the leap into electronic
50+typesetting
51+
52+, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"""
53+
54+
55+view : Model -> Html Msg
56+view model =
57+ layout [] <|
58+ column
59+ [ width (px 1200)
60+ , padding 100
61+ , spacing 50
62+ , centerX
63+ ]
64+ [ column
65+ [ width (px 700)
66+ , padding 100
67+ , spacing 50
68+ , centerX
69+ ]
70+ [ multiline [ spacing 3 ]
71+ { onChange = MLChanged
72+ , text = testtxt
73+ , placeholder = Nothing
74+ , spellcheck = False
75+ , label =
76+ labelAbove
77+ [ width (px 100)
78+ , Background.color (Element.rgb 0.5 0.5 0.5)
79+ ]
80+ <|
81+ text "Default height"
82+ }
83+ , multiline [ spacing 0, padding 10, height shrink ]
84+ { onChange = MLChanged
85+ , text = testtxt
86+ , placeholder = Nothing
87+ , spellcheck = False
88+ , label =
89+ labelAbove
90+ [ Background.color (Element.rgb 0.5 0.5 0.5)
91+ , width (px 100)
92+ ]
93+ <|
94+ text "Shrink - no nl"
95+ }
96+ , multiline [ spacing 3, height shrink ]
97+ { onChange = MLChanged
98+ , text = testtxtnewlines
99+ , placeholder = Nothing
100+ , spellcheck = False
101+ , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
102+ }
103+ ]
104+ , row [ width fill, height (px 400), spacing 40 ]
105+ [ multiline [ spacing 3 ]
106+ { onChange = MLChanged
107+ , text = testtxt
108+ , placeholder = Nothing
109+ , spellcheck = False
110+ , label =
111+ labelAbove
112+ [ width (px 100)
113+ , Background.color (Element.rgb 0.5 0.5 0.5)
114+ ]
115+ <|
116+ text "Default height"
117+ }
118+ , multiline [ spacing 0, padding 10, height shrink ]
119+ { onChange = MLChanged
120+ , text = testtxt
121+ , placeholder = Nothing
122+ , spellcheck = False
123+ , label =
124+ labelAbove
125+ [ Background.color (Element.rgb 0.5 0.5 0.5)
126+ , width (px 100)
127+ ]
128+ <|
129+ text "Shrink - no nl"
130+ }
131+ , multiline [ spacing 3, height shrink ]
132+ { onChange = MLChanged
133+ , text = testtxtnewlines
134+ , placeholder = Nothing
135+ , spellcheck = False
136+ , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
137+ }
138+ ]
139+ , row
140+ [ width fill
141+ , height (px 400)
142+ , spacing 40
143+ , Border.width 1
144+ ]
145+ [ multiline [ padding 20, spacing 20, height fill ]
146+ { onChange = MLChanged
147+ , text = testtxt
148+ , placeholder = Nothing
149+ , spellcheck = False
150+ , label =
151+ labelAbove
152+ [ width (px 100)
153+ , Background.color (Element.rgb 0.5 0.5 0.5)
154+ ]
155+ <|
156+ text "Default height"
157+ }
158+ , multiline [ spacing 0, padding 10, height shrink ]
159+ { onChange = MLChanged
160+ , text = testtxt
161+ , placeholder = Nothing
162+ , spellcheck = False
163+ , label =
164+ labelAbove
165+ [ Background.color (Element.rgb 0.5 0.5 0.5)
166+ , width (px 100)
167+ ]
168+ <|
169+ text "Shrink - no nl"
170+ }
171+ , multiline [ spacing 3, height shrink ]
172+ { onChange = MLChanged
173+ , text = testtxtnewlines
174+ , placeholder = Nothing
175+ , spellcheck = False
176+ , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
177+ }
178+ ]
179+ , row
180+ [ width fill
181+ , height (px 800)
182+ , spacing 40
183+ , Border.width 1
184+ ]
185+ [ multiline [ spacing 3, height fill ]
186+ { onChange = MLChanged
187+ , text = testtxt
188+ , placeholder = Nothing
189+ , spellcheck = False
190+ , label =
191+ labelAbove
192+ [ width (px 100)
193+ , Background.color (Element.rgb 0.5 0.5 0.5)
194+ ]
195+ <|
196+ text "Default height"
197+ }
198+ , multiline [ spacing 0, padding 10, height shrink ]
199+ { onChange = MLChanged
200+ , text = testtxt
201+ , placeholder = Nothing
202+ , spellcheck = False
203+ , label =
204+ labelAbove
205+ [ Background.color (Element.rgb 0.5 0.5 0.5)
206+ , width (px 100)
207+ ]
208+ <|
209+ text "Shrink - no nl"
210+ }
211+ , multiline [ spacing 3, height shrink ]
212+ { onChange = MLChanged
213+ , text = testtxtnewlines
214+ , placeholder = Nothing
215+ , spellcheck = False
216+ , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
217+ }
218+ ]
219+ ]
220+
221+
222+main : Program () Model Msg
223+main =
224+ Browser.sandbox
225+ { init = initialModel
226+ , view = view
227+ , update = update
228+ }