git.iko.soy/typeable/elm-ui
on master help sign in
add resolved and open cases
563e862Matthew Griffith
cases/open/MultilineInput.elmdeleted−89
compare with master
unifiedsplit
@@ -1,89 +0,0 @@
1−module Main exposing (main)
2−
3−import Browser
4−import Element exposing (..)
5−import Element.Input exposing (labelLeft, multiline)
6−import Html exposing (Html)
7−import Html.Events exposing (onClick)
8−
9−
10−type alias Model =
11− { count : Int }
12−
13−
14−initialModel : Model
15−initialModel =
16− { count = 0 }
17−
18−
19−type Msg
20− = Increment
21− | Decrement
22− | MLChanged String
23−
24−
25−update : Msg -> Model -> Model
26−update msg model =
27− case msg of
28− Increment ->
29− { model | count = model.count + 1 }
30−
31− Decrement ->
32− { model | count = model.count - 1 }
33−
34− MLChanged s ->
35− model
36−
37−
38−testtxt =
39− "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?"
40−
41−
42−testtxtnewlines =
43− """orem Ipsum is simply dummy text of the printing
44−and typesetting industry. Lorem Ipsum has been the industry's
45−standard dummy text ever since the 1500s, when an unknown
46−printer took a galley of type and scrambled it to make a type specimen book.
47−It has survived not only five centuries, but also the leap into electronic
48−typesetting
49−, 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?"""
50−
51−
52−view : Model -> Html Msg
53−view model =
54− layout [] <|
55− column
56− [ width (px 500)
57− , spacing 50
58− ]
59− [ multiline []
60− { onChange = MLChanged
61− , text = testtxt
62− , placeholder = Nothing
63− , spellcheck = False
64− , label = labelLeft [ width (px 200) ] <| text "Default height"
65− }
66− , multiline [ height shrink ]
67− { onChange = MLChanged
68− , text = testtxt
69− , placeholder = Nothing
70− , spellcheck = False
71− , label = labelLeft [ width (px 200) ] <| text "Shrink - no nl"
72− }
73− , multiline [ height shrink ]
74− { onChange = MLChanged
75− , text = testtxtnewlines
76− , placeholder = Nothing
77− , spellcheck = False
78− , label = labelLeft [ width (px 200) ] <| text "Shrink - w/nl"
79− }
80− ]
81−
82−
83−main : Program () Model Msg
84−main =
85− Browser.sandbox
86− { init = initialModel
87− , view = view
88− , update = update
89− }
cases/open/Scrollbar2.elmnew file+39
@@ -0,0 +1,39 @@
1+module Main exposing (main, myElement, sidebar)
2+
3+import Element exposing (Element, alignRight, centerY, column, el, fill, height, padding, px, rgb255, row, spacing, text, width)
4+import Element.Background as Background
5+import Element.Border as Border
6+import Element.Font as Font
7+
8+
9+main =
10+ Element.layout [ height fill ] <|
11+ row [ width fill, height fill ]
12+ [ sidebar
13+ ]
14+
15+
16+sidebar =
17+ column [ width fill, height fill, spacing 30 ]
18+ [ myElement
19+ , column [ width fill, height fill ]
20+ [ column [ width (px 350), height fill, Element.scrollbarY, Element.clip, Border.width 1 ]
21+ [ column [ width fill ] <|
22+ el [] (text "this should scroll indepedendently")
23+ :: List.map (always myElement) (List.range 0 100)
24+ ]
25+ , el [] (text "this should be at the bottom of the screen")
26+ ]
27+ ]
28+
29+
30+myElement : Element msg
31+myElement =
32+ el
33+ [ Background.color (rgb255 240 0 245)
34+ , Font.color (rgb255 255 255 255)
35+ , Border.rounded 3
36+ , padding 30
37+ , width fill
38+ ]
39+ (text "stylish!")
cases/open/Scrollbars.elmnew file+50
@@ -0,0 +1,50 @@
1+module Main exposing (main)
2+
3+import Element exposing (..)
4+import Element.Background as Background
5+import Html.Attributes
6+import Lorem as Lorem
7+
8+
9+main =
10+ layout [ height fill ] <|
11+ column
12+ [ width fill
13+ , Background.color (rgba 0.8 0 0 0.5)
14+ , height fill
15+ ]
16+ [ row
17+ [ padding 15
18+ , width fill
19+ , Background.color (rgba 0.8 0.2 0 0.5)
20+ ]
21+ [ text "this row should always be visible" ]
22+ , row
23+ [ width fill
24+
25+ --, height (px 700)
26+ -- Don't know why it doesn't work with `height fill`
27+ , height fill
28+ , clip
29+
30+ --, htmlAttribute (Html.Attributes.style "flex-shrink" "1")
31+ , Element.explain Debug.todo
32+ ]
33+ [ column
34+ [ spacing 15
35+ , scrollbarY
36+ , height fill
37+ , width fill
38+ , padding 10
39+ ]
40+ (List.map (\p -> paragraph [] [ text p ]) <| Lorem.paragraphs 10)
41+ , column
42+ [ spacing 15
43+ , scrollbarY
44+ , width fill
45+ , height fill
46+ , padding 10
47+ ]
48+ (List.map (\p -> paragraph [] [ text p ]) <| Lorem.paragraphs 10)
49+ ]
50+ ]
cases/open/WeirdCentering.elmnew file+31
@@ -0,0 +1,31 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element
5+import Element.Background as Background
6+import Element.Input as Input
7+import Html exposing (Html, button, div, text)
8+import Html.Events exposing (onClick)
9+
10+
11+main : Html msg
12+main =
13+ Element.layout [] <|
14+ Element.column []
15+ [ Element.text "Example with centerX:"
16+ , Element.row
17+ [ Element.width Element.fill ]
18+ [ Element.row [ Element.centerX, Background.color <| Element.rgb255 0 200 0 ]
19+ [ Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
20+ , Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
21+ ]
22+ ]
23+ , Element.text "Example without centerX:"
24+ , Element.row
25+ [ Element.width Element.fill ]
26+ [ Element.row [ Background.color <| Element.rgb255 0 200 0 ]
27+ [ Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
28+ , Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
29+ ]
30+ ]
31+ ]
cases/resolved/ColumnGrowth.elmnew file+40
@@ -0,0 +1,40 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (column, fill, fillPortion, height, minimum, paddingXY, px, rgb, row, shrink, spacing, width)
5+import Element.Background as Back
6+import Element.Border as Border
7+import Html exposing (Html)
8+
9+
10+main : Html m
11+main =
12+ let
13+ box =
14+ row
15+ [ Border.solid
16+ , Border.width 2
17+ , Back.color (rgb 1 1 1)
18+ , width (px 80)
19+ , height (fillPortion 1)
20+ ]
21+ []
22+
23+ grower =
24+ column
25+ [ width fill
26+
27+ -- fillPortion is not being applied here unless we set it to 1.
28+ -- It will also resume working if we delete the minimum bound.
29+ , height
30+ (fillPortion 2
31+ |> minimum 20
32+ )
33+ ]
34+ []
35+ in
36+ Element.layout
37+ [ Back.color (rgb 0.9 1 0.8)
38+ , paddingXY 20 20
39+ ]
40+ (column [ height fill ] [ box, grower, box ])
cases/resolved/HugePlaceholder.elmnew file+25
@@ -0,0 +1,25 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (Element)
5+import Element.Background as Background
6+import Element.Border as Border
7+import Element.Input as Input
8+import Html exposing (Html, button, div, text)
9+import Html.Events exposing (onClick)
10+
11+
12+main =
13+ Element.layout [] sscce
14+
15+
16+sscce =
17+ Input.text
18+ [ Border.width 1
19+ , Element.width <| Element.px 50
20+ ]
21+ { onChange = always ()
22+ , text = ""
23+ , placeholder = Just <| Input.placeholder [] <| Element.text "this is a very long place holder ......................"
24+ , label = Input.labelHidden ""
25+ }
cases/resolved/MismatchTextInputText.elmnew file+82
@@ -0,0 +1,82 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (text)
5+import Element.Border as Border
6+import Element.Input as Input
7+import Html exposing (Html, button, div)
8+import Html.Events exposing (onClick)
9+
10+
11+black =
12+ Element.rgb 0 0 0
13+
14+
15+styles =
16+ [ Border.color black
17+ , Border.width 1
18+ , Element.padding 5
19+ , Border.rounded 0
20+ ]
21+
22+
23+view : () -> Html ()
24+view () =
25+ -- Element.layout []
26+ -- (Input.text [ Border.rounded 0 ]
27+ -- { onChange = always ()
28+ -- , text = "yes"
29+ -- , placeholder = Nothing
30+ -- , label = Input.labelAbove [] <| text ""
31+ -- }
32+ -- )
33+ Element.layout [] <|
34+ Element.row [ Element.padding 10 ]
35+ [ Element.el
36+ styles
37+ <|
38+ Element.text "Hello yes"
39+ , Input.text
40+ styles
41+ { onChange = always ()
42+ , text = "Hello yes"
43+ , placeholder = Nothing
44+ , label = Input.labelHidden "Hello"
45+ }
46+ , Element.el
47+ [ Element.padding 0
48+ , Border.color black
49+ , Border.width 1
50+ ]
51+ <|
52+ Element.text "Hello yes"
53+ , Input.search
54+ [ Element.padding 0
55+ , Border.color black
56+ , Border.width 1
57+ ]
58+ { onChange = always ()
59+ , text = "Hello yes"
60+ , placeholder = Nothing
61+ , label = Input.labelHidden "Hello"
62+ }
63+ , Input.text
64+ [ Element.padding 0
65+ , Border.color black
66+ , Border.width 1
67+ ]
68+ { onChange = always ()
69+ , text = "Hello yes"
70+ , placeholder = Nothing
71+ , label = Input.labelHidden "Hello"
72+ }
73+ ]
74+
75+
76+main : Program () () ()
77+main =
78+ Browser.sandbox
79+ { init = ()
80+ , view = view
81+ , update = \_ _ -> ()
82+ }
cases/resolved/MultilineInput.elmnew file+228
@@ -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+ }
cases/open/TextAreaMax.elm → cases/resolved/TextAreaMax.elmrenamed+23−3
@@ -22,6 +22,10 @@ singleLine =
22 "Hello World! ->"
22 "Hello World! ->"
23
23
24
24
25+placeholder =
26+ "placeholder"
27+
28+
25main =
29main =
26 Element.layout [ width fill, height fill, Font.color (rgb 1 0 0) ] <|
30 Element.layout [ width fill, height fill, Font.color (rgb 1 0 0) ] <|
27 column [ width fill, height fill ]
31 column [ width fill, height fill ]
@@ -47,14 +51,30 @@ main =
47 none
51 none
48 , Input.text
52 , Input.text
49 [ centerX
53 [ centerX
54+ , spacing 5
50
55
51− -- , spacing 20
52 -- , height (px 100)
56 -- , height (px 100)
53− , width shrink
57+ -- , width shrink
58+ -- , height shrink
59+ , width (px 200)
54 ]
60 ]
55 { onChange = always ()
61 { onChange = always ()
56 , text = empty
62 , text = empty
57− , placeholder = Just (Input.placeholder [] (text "hello"))
63+ , placeholder = Just (Input.placeholder [] (text placeholder))
58 , label = Input.labelAbove [] (text "labeled")
64 , label = Input.labelAbove [] (text "labeled")
59 }
65 }
66+ , Input.text
67+ [ centerX
68+ , spacing 5
69+
70+ -- , height (px 100)
71+ -- , width shrink
72+ -- , height shrink
73+ , width (px 200)
74+ ]
75+ { onChange = always ()
76+ , text = "Filled Content"
77+ , placeholder = Just (Input.placeholder [] (text placeholder))
78+ , label = Input.labelBelow [] (text "labeled")
79+ }
60 ]
80 ]
cases/resolved/WeirdWrapping.elmnew file+32
@@ -0,0 +1,32 @@
1+module Main exposing (main)
2+
3+import Element exposing (..)
4+import Element.Background as Background
5+import Element.Border as Border exposing (widthEach)
6+import Element.Font as Font
7+
8+
9+main =
10+ Element.layout
11+ [ height fill
12+ , width fill
13+ , padding 5
14+ ]
15+ <|
16+ row
17+ [ width fill ]
18+ [ newTabLink
19+ [ widthEach
20+ { bottom = 0
21+ , left = 2
22+ , right = 0
23+ , top = 0
24+ }
25+ , paddingXY 3 0
26+ ]
27+ { url = "url.example.com"
28+ , label =
29+ [ text "My news site super cool header" ]
30+ |> paragraph []
31+ }
32+ ]