git.iko.soy/typeable/elm-ui
on master help sign in
32 files changed+556−1093
since splitsnapshots
unifiedsplit
README.md+4 elm.json+1−1 src/Element.elm−5 src/Element/Input.elm+44−24 src/Element/Region.elm+5−1 src/Internal/Model.elm+9−3 src/Internal/Style.elm+20−5 tests-rendering/cases/open/LabelledInputAlignRight.elm+28 tests-rendering/cases/open/NearbyElementBordersOverlap.elm+46 tests-rendering/cases/resolved/Images/ImageRegression.elm+63 tests-rendering/cases/resolved/Images/ImageRegression2.elm+19 tests-rendering/cases/resolved/Misc/ImageSizing.elm → tests-rendering/cases/resolved/Images/ImageSizing.elm+7−3 tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elm+46 tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elm+86 tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elm+48 tests-rendering/cases/resolved/Layout/SafariTwo.elm → tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elm tests-rendering/cases/resolved/NestedParagraphs.elm → tests-rendering/cases/resolved/Layout/NestedParagraphs.elm+1−1 tests-rendering/cases/resolved/Layout/SafariColumnBug.elm−14 tests-rendering/cases/resolved/ZIndex/InFrontIssue.elm → tests-rendering/cases/resolved/Nearby/InFrontIssue.elm+3−30 tests-rendering/cases/resolved/ZIndex/Issue22ZIndex.elm → tests-rendering/cases/resolved/Nearby/Issue22ZIndex.elm+1−1 tests-rendering/cases/resolved/ZIndex/OtherInFrontIssue.elm → tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elm+1−1 tests-rendering/cases/resolved/ZIndex/ZIndexRegression.elm → tests-rendering/cases/resolved/Nearby/ZIndexRegression.elm+1−1 tests-rendering/src/Tests/Alignment.elm+49 tests-rendering/src/Tests/All.elm+15−33 tests-rendering/src/Tests/Basic.elm−54 tests-rendering/src/Tests/ColumnAlignment.elm−176 tests-rendering/src/Tests/ColumnSpacing.elm−68 tests-rendering/src/Tests/ElementAlignment.elm−111 tests-rendering/src/Tests/Nearby.elm+23−280 tests-rendering/src/Tests/RowAlignment.elm−212 tests-rendering/src/Tests/RowSpacing.elm−69 tests-rendering/src/Tests/Spacing.elm+36
README.md+4
@@ -66,6 +66,10 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md
6666
6767The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.
6868
69+## Notes
70+
71+Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.
72+
6973## Contributing
7074
7175Want to help out fixing bugs or reporting issues?
elm.json+1−1
@@ -3,7 +3,7 @@
33 "name": "mdgriffith/elm-ui",
44 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
55 "license": "BSD-3-Clause",
6− "version": "1.1.5",
6+ "version": "1.1.8",
77 "exposed-modules": [
88 "Element",
99 "Element.Input",
src/Element.elm−5
@@ -1203,11 +1203,6 @@ newTabLink attrs { url, label } =
12031203
12041204
12051205{-| A link to download a file.
1206−
1207−**Note** If you're using `Browser.application`, then this won't be enough to actually trigger a file download due to how `Browser.Navigation` works.
1208−
1209−[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).
1210−
12111206-}
12121207download :
12131208 List (Attribute msg)
src/Element/Input.elm+44−24
@@ -330,6 +330,8 @@ The `onPress` handler will be fired either `onClick` or when the element is focu
330330 , label = text "My Button"
331331 }
332332
333+**Note** If you have an icon button but want it to be accessible, consider adding a [`Region.description`](Element-Region#description), which will describe the button to screen readers.
334+
333335-}
334336button :
335337 List (Attribute msg)
@@ -367,7 +369,17 @@ button attrs { onPress, label } =
367369
368370 Just msg ->
369371 Events.onClick msg
370− :: onEnter msg
372+ :: onKeyLookup
373+ (\code ->
374+ if code == enter then
375+ Just msg
376+
377+ else if code == space then
378+ Just msg
379+
380+ else
381+ Nothing
382+ )
371383 :: attrs
372384 )
373385 )
@@ -445,22 +457,24 @@ checkbox attrs { label, icon, checked, onChange } =
445457 ]
446458 ++ attrs
447459 in
448− applyLabel attributes
449− label
450− (Internal.element
451− Internal.asEl
452− Internal.div
453− [ Internal.Attr <|
454− Html.Attributes.attribute "role" "checkbox"
455− , Internal.Attr <|
456− Html.Attributes.attribute "aria-checked" <|
460+ applyLabel
461+ (Internal.Attr (Html.Attributes.attribute "role" "checkbox")
462+ :: Internal.Attr
463+ (Html.Attributes.attribute "aria-checked" <|
457464 if checked then
458465 "true"
459466
460467 else
461468 "false"
462− , hiddenLabelAttribute label
463− , Element.centerY
469+ )
470+ :: hiddenLabelAttribute label
471+ :: attributes
472+ )
473+ label
474+ (Internal.element
475+ Internal.asEl
476+ Internal.div
477+ [ Element.centerY
464478 , Element.height Element.fill
465479 , Element.width Element.shrink
466480 ]
@@ -699,7 +713,7 @@ slider attributes input =
699713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
700714 thumbShadowStyle
701715 )
702− , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))
716+ , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))
703717 , Internal.Attr
704718 (Html.Events.onInput
705719 (\str ->
@@ -765,10 +779,10 @@ slider attributes input =
765779 -- This is after `attributes` because the thumb should be in front of everything.
766780 ++ [ Element.behindContent <|
767781 if vertical then
768− viewVerticalThumb factor thumbAttributes trackWidth
782+ viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth
769783
770784 else
771− viewHorizontalThumb factor thumbAttributes trackHeight
785+ viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight
772786 ]
773787 )
774788 Element.none
@@ -1551,6 +1565,8 @@ email =
15511565
15521566By default it will have a minimum height of one line and resize based on it's contents.
15531567
1568+Use `Element.spacing` to change its line-height.
1569+
15541570-}
15551571multiline :
15561572 List (Attribute msg)
@@ -2089,7 +2105,11 @@ onKeyLookup lookup =
20892105 Json.field "key" Json.string
20902106 |> Json.andThen decode
20912107 in
2092− Internal.Attr <| Html.Events.on "keyup" isKey
2108+ -- We generally want these attached to the keydown event becaues it allows us to prevent default on things like spacebar scrolling the page.
2109+ -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
2110+ Internal.Attr <|
2111+ Html.Events.preventDefaultOn "keydown"
2112+ (Json.map (\fired -> ( fired, True )) isKey)
20932113
20942114
20952115{-| -}
@@ -2185,7 +2205,8 @@ defaultCheckbox : Bool -> Element msg
21852205defaultCheckbox checked =
21862206 Element.el
21872207 [ Internal.htmlClass "focusable"
2188− , Element.width (Element.px 14)
2208+ , Element.width
2209+ (Element.px 14)
21892210 , Element.height (Element.px 14)
21902211 , Font.color white
21912212 , Element.centerY
@@ -2221,9 +2242,8 @@ defaultCheckbox checked =
22212242
22222243 else
22232244 1
2224− ]
2225− (if checked then
2226− Element.el
2245+ , Element.inFront
2246+ (Element.el
22272247 [ Border.color white
22282248 , Element.height (Element.px 6)
22292249 , Element.width (Element.px 9)
@@ -2231,6 +2251,7 @@ defaultCheckbox checked =
22312251 , Element.centerX
22322252 , Element.centerY
22332253 , Element.moveUp 1
2254+ , Element.transparent (not checked)
22342255 , Border.widthEach
22352256 { top = 0
22362257 , left = 2
@@ -2239,7 +2260,6 @@ defaultCheckbox checked =
22392260 }
22402261 ]
22412262 Element.none
2242−
2243− else
2244− Element.none
2245− )
2263+ )
2264+ ]
2265+ Element.none
src/Element/Region.elm+5−1
@@ -101,7 +101,11 @@ announce =
101101 Internal.Describe LivePolite
102102
103103
104−{-| -}
104+{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.
105+
106+A common use for this would be to label buttons that only have an icon.
107+
108+-}
105109description : String -> Attribute msg
106110description =
107111 Internal.Describe << Internal.Label
src/Internal/Model.elm+9−3
@@ -1478,7 +1478,9 @@ renderHeight h =
14781478 Single
14791479 cls
14801480 "min-height"
1481− (String.fromInt minSize ++ "px")
1481+ -- This needs to be !important because we're using `min-height: min-content`
1482+ -- to correct for safari's incorrect implementation of flexbox.
1483+ (String.fromInt minSize ++ "px !important")
14821484
14831485 ( newFlag, newAttrs, newStyle ) =
14841486 renderHeight len
@@ -2242,7 +2244,11 @@ renderFocusStyle focus =
22422244 , Just <| Property "outline" "none"
22432245 ]
22442246 )
2245− , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2247+ , Style
2248+ ((Internal.Style.dot classes.any ++ ":focus .focusable, ")
2249+ ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")
2250+ ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")
2251+ )
22462252 (List.filterMap identity
22472253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
22482254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -2650,7 +2656,7 @@ renderStyle options maybePseudo selector props =
26502656 , (selector ++ "-fs:focus-within {")
26512657 ++ renderedProps
26522658 ++ "\n}"
2653− , (".focusable-parent:focus ~ " ++ "." ++ classes.any ++ " " ++ selector ++ "-fs {")
2659+ , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")
26542660 ++ renderedProps
26552661 ++ "\n}"
26562662 ]
src/Internal/Style.elm+20−5
@@ -961,10 +961,17 @@ baseSheet =
961961 ]
962962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
963963 [ Prop "display" "block"
964− , Child "img"
965− [ Prop "max-height" "100%"
966− , Prop "max-width" "100%"
967− , Prop "object-fit" "cover"
964+ , Descriptor (dot classes.heightFill)
965+ [ Child "img"
966+ [ Prop "max-height" "100%"
967+ , Prop "object-fit" "cover"
968+ ]
969+ ]
970+ , Descriptor (dot classes.widthFill)
971+ [ Child "img"
972+ [ Prop "max-width" "100%"
973+ , Prop "object-fit" "cover"
974+ ]
968975 ]
969976 ]
970977 , Class (dot classes.any ++ ":focus")
@@ -1377,7 +1384,15 @@ baseSheet =
13771384 -- This apparently is a different story for columns.
13781385 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,
13791386 -- instead of the expected content size.
1380− [ Prop "flex-basis" "auto"
1387+ -- So we add `min-height: min-content`, which isn't supported by IE, but works for all other browsers!
1388+ -- Separately, 0% is different than 0px, but only for columns
1389+ -- In columns, 0% will actually be calculated as `auto` for columns
1390+ -- So, 0px is the one we want.
1391+ [ Prop "flex-basis" "0px"
1392+ , Prop "min-height" "min-content"
1393+ , Descriptor (dot classes.heightExact)
1394+ [ Prop "flex-basis" "auto"
1395+ ]
13811396 ]
13821397 , Child (dot classes.heightFill)
13831398 [ Prop "flex-grow" "100000"
tests-rendering/cases/open/LabelledInputAlignRight.elmnew file+28
@@ -0,0 +1,28 @@
1+module LabelledInputAlignRight exposing (view)
2+
3+import Testable.Element exposing (..)
4+import Testable.Element.Input as Input
5+
6+
7+view =
8+ layout [] <|
9+ column [ width fill ]
10+ [ Input.text
11+ [ width (px 200)
12+ , alignRight
13+ ]
14+ { onChange = always False
15+ , text = ""
16+ , placeholder = Nothing
17+ , label = Input.labelLeft [] (text "label")
18+ }
19+ , Input.text
20+ [ width (px 200)
21+ , alignRight
22+ ]
23+ { onChange = always False
24+ , text = ""
25+ , placeholder = Nothing
26+ , label = Input.labelHidden "label"
27+ }
28+ ]
tests-rendering/cases/open/NearbyElementBordersOverlap.elmnew file+46
@@ -0,0 +1,46 @@
1+module NearbyElementBordersOverlap exposing (view)
2+
3+{-| Elements placed with onLeft, onRight, above & below overlap main element's border
4+
5+
6+# inFront elements with width fill are contained within the parent's border
7+
8+<https://github.com/mdgriffith/elm-ui/issues/223>
9+
10+In addition to the overlap, it affects layout in unexpected ways: eg if the elements
11+are the same height, onLeft and onRight elements will be vertically offset
12+from the main element.
13+
14+-}
15+
16+import Testable.Element exposing (..)
17+import Testable.Element.Border as Border
18+
19+
20+blue =
21+ rgb 0 0 1
22+
23+
24+green =
25+ rgb 0 1 0
26+
27+
28+grey =
29+ rgb 0.5 0.5 0.5
30+
31+
32+view =
33+ layout [ width fill, height fill ] <|
34+ el
35+ [ centerX
36+ , centerY
37+ , Border.width 10
38+ , Border.color green
39+ , padding 50
40+ , above <| el [ Border.color grey, Border.width 10 ] <| text "above"
41+ , below <| el [ Border.color grey, Border.width 10 ] <| text "below"
42+ , onRight <| el [ Border.color blue, Border.width 10 ] <| text "onRight"
43+ , onLeft <| el [ Border.color blue, Border.width 10 ] <| text "onLeft"
44+ ]
45+ <|
46+ text "Centre"
tests-rendering/cases/resolved/Images/ImageRegression.elmnew file+63
@@ -0,0 +1,63 @@
1+module ImageRegression exposing (main)
2+
3+{-| <https://github.com/mdgriffith/elm-ui/issues/232>
4+-}
5+
6+import Browser
7+import Element exposing (Element, centerX, clipX, el, image, px, rgb255, row, shrink, width)
8+import Element.Background as Background
9+import Html exposing (Html, button, div, text)
10+import Html.Events exposing (onClick)
11+
12+
13+type alias Model =
14+ Int
15+
16+
17+type Msg
18+ = NoOp
19+
20+
21+update : Msg -> Model -> Model
22+update msg model =
23+ model
24+
25+
26+view : Model -> Html Msg
27+view model =
28+ Element.layout [] <|
29+ row
30+ [ centerX
31+ , width shrink
32+ , Background.color <| rgb255 255 255 255
33+ ]
34+ [ viewCard "qs" True
35+ , viewCard "ah" False
36+ ]
37+
38+
39+main : Program () Model Msg
40+main =
41+ Browser.sandbox
42+ { init = 0
43+ , view = view
44+ , update = update
45+ }
46+
47+
48+viewCard : String -> Bool -> Element Msg
49+viewCard card bool =
50+ let
51+ source =
52+ "https://hearts-bawolk.herokuapp.com/static/cards/" ++ card ++ ".png"
53+
54+ overlapStyles =
55+ if bool then
56+ [ width (px 50)
57+ , clipX
58+ ]
59+
60+ else
61+ []
62+ in
63+ el overlapStyles (image [] { src = source, description = "" })
tests-rendering/cases/resolved/Images/ImageRegression2.elmnew file+19
@@ -0,0 +1,19 @@
1+module ImageRegression2 exposing (main)
2+
3+{-| <https://github.com/mdgriffith/elm-ui/issues/228>
4+-}
5+
6+import Element exposing (..)
7+
8+
9+main =
10+ Element.layout []
11+ (Element.row [ width fill, height fill, explain Debug.todo ]
12+ [ text "BEFORE"
13+ , image []
14+ { src = "https://placekitten.com/300/200"
15+ , description = "kitten"
16+ }
17+ , text "AFTER"
18+ ]
19+ )
tests-rendering/cases/resolved/Misc/ImageSizing.elm → tests-rendering/cases/resolved/Images/ImageSizing.elmrenamed+7−3
@@ -1,6 +1,9 @@
11module ImageSizing exposing (main)
22
3−import Element as E exposing (column, el, row, text)
3+{-| <https://github.com/mdgriffith/elm-ui/issues/62>
4+-}
5+
6+import Element as E exposing (column, el, px, row, text)
47import Element.Border as Border
58import Element.Font as Font
69import Html exposing (Html)
@@ -11,8 +14,9 @@ main =
1114 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|
1215 E.image
1316 [ -- E.height (E.px 500)
14− E.width E.fill
15− , E.height E.fill
17+ -- ,
18+ -- E.width E.fill
19+ E.height E.fill
1620 ]
1721 -- <| px 500 ]
1822 { src = "http://bburdette.github.io/music-reader.png"
tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elmnew file+46
@@ -0,0 +1,46 @@
1+module DistributeHeight exposing (main)
2+
3+import Browser
4+import Element exposing (column, el, fill, fillPortion, height, minimum, none, px, rgb, row, text, width)
5+import Element.Background as Bg
6+import Html as Html exposing (Html)
7+
8+
9+type alias Model =
10+ ()
11+
12+
13+update : msg -> Model -> Model
14+update _ model =
15+ model
16+
17+
18+view : model -> Html msg
19+view _ =
20+ Element.layout [ height fill, width fill ] <|
21+ column [ height fill, width fill ]
22+ [ row
23+ [ height
24+ fill
25+ , width fill
26+ , Bg.color <| rgb 1 0 0
27+ ]
28+ [ el
29+ [ height <| px 200
30+ , width fill
31+ , Bg.color <| rgb 1 0 1
32+ ]
33+ (text "Helloooo!")
34+ ]
35+ , row [ height fill, width fill, Bg.color <| rgb 0 1 0 ]
36+ [ none ]
37+ ]
38+
39+
40+main : Program () Model msg
41+main =
42+ Browser.sandbox
43+ { init = ()
44+ , view = view
45+ , update = update
46+ }
tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elmnew file+86
@@ -0,0 +1,86 @@
1+module Other exposing (main)
2+
3+import Browser
4+import Element exposing (..)
5+import Element.Border as Border
6+import Element.Events as Events
7+import Html exposing (Html)
8+import Html.Attributes
9+
10+
11+type alias Model =
12+ { count : Int }
13+
14+
15+initialModel : Model
16+initialModel =
17+ { count = 0 }
18+
19+
20+type Msg
21+ = Increment
22+ | Decrement
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+
35+view : Model -> Html Msg
36+view model =
37+ viewElements model
38+ |> layout []
39+
40+
41+viewElements : Model -> Element Msg
42+viewElements model =
43+ el [ height fill ] <|
44+ column [ height fill ]
45+ [ el
46+ [ height (fillPortion 1)
47+ ]
48+ <|
49+ viewCounter model
50+ , el
51+ [ height (fillPortion 2)
52+ ]
53+ <|
54+ viewCounters model
55+ ]
56+
57+
58+flexBasisZero : Element.Attribute msg
59+flexBasisZero =
60+ htmlAttribute (Html.Attributes.style "flex-basis" "0")
61+
62+
63+viewCounters : Model -> Element Msg
64+viewCounters model =
65+ column [ height fill ]
66+ (List.repeat model.count model
67+ |> List.map viewCounter
68+ )
69+
70+
71+viewCounter : Model -> Element Msg
72+viewCounter model =
73+ column [ width fill, height fill, Border.width 1, Border.dotted ]
74+ [ el [ Events.onClick Increment, Border.width 1, Border.rounded 3 ] <| text "+1"
75+ , el [] <| text <| String.fromInt model.count
76+ , el [ Events.onClick Decrement, Border.width 1, Border.rounded 3 ] <| text "-1"
77+ ]
78+
79+
80+main : Program () Model Msg
81+main =
82+ Browser.sandbox
83+ { init = initialModel
84+ , view = view
85+ , update = update
86+ }
tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elmnew file+48
@@ -0,0 +1,48 @@
1+module DoNotCollapseBelow0 exposing (main)
2+
3+{-|
4+
5+
6+# Safari bug for `el` heigh calculation in combination with `height fill`
7+
8+The problem appears to be that the height of the first el is 0, and therefore the second
9+text is rendered on the first.
10+
11+Versions
12+
13+OS: macOS Mojave 10.14.5
14+Browser: Safari
15+Browser Version: 12.1.1 (14607.2.6.1.1)
16+Elm Version: 0.19
17+Elm UI Version: 1.1.5
18+
19+<https://github.com/mdgriffith/elm-ui/issues/147>
20+
21+I was able to pinpoint the issue using git bisect to this fd08f1a commit, which lines up.
22+
23+<https://github.com/mdgriffith/elm-ui/commit/fd08f1a953484ba96f2d05037d4f208eab351514>
24+
25+-}
26+
27+import Browser
28+import Element exposing (column, el, fill, height, layout, scrollbarY, text)
29+import Html exposing (Html)
30+
31+
32+view : () -> Html ()
33+view () =
34+ layout [ height fill ] <|
35+ column
36+ [ height fill ]
37+ [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
38+ , text "Text below the el above"
39+ ]
40+
41+
42+main : Program () () ()
43+main =
44+ Browser.sandbox
45+ { init = ()
46+ , view = view
47+ , update = \() () -> ()
48+ }
tests-rendering/cases/resolved/Layout/SafariTwo.elm → tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elmrenamed

The content is the same.

tests-rendering/cases/resolved/NestedParagraphs.elm → tests-rendering/cases/resolved/Layout/NestedParagraphs.elmrenamed+1−1
@@ -1,4 +1,4 @@
1−module NestedParagraphs exposing (view)
1+module Layout.NestedParagraphs exposing (view)
22
33{-| Paragraph with children more than one level deep breaks flow
44
tests-rendering/cases/resolved/Layout/SafariColumnBug.elmdeleted−14
@@ -1,14 +0,0 @@
1−module SafariColumnBug exposing (main)
2−
3−import Browser
4−import Element exposing (column, el, fill, height, layout, scrollbarY, text)
5−import Html exposing (Html)
6−
7−
8−main =
9− layout [ height fill ] <|
10− column
11− [ height fill ]
12− [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
13− , text "Text below the el above"
14− ]
tests-rendering/cases/resolved/ZIndex/InFrontIssue.elm → tests-rendering/cases/resolved/Nearby/InFrontIssue.elmrenamed+3−30
@@ -1,4 +1,4 @@
1−module InFrontIssue exposing (main)
1+module Nearby.InFrontIssue exposing (view)
22
33import Browser
44import Element as Ui exposing (..)
@@ -7,26 +7,8 @@ import Element.Font as Font
77import Html exposing (Html)
88
99
10−type alias Model =
11− {}
12−
13−
14−initialModel : Model
15−initialModel =
16− {}
17−
18−
19−type Msg
20− = NoOp
21−
22−
23−update : Msg -> Model -> Model
24−update msg model =
25− model
26−
27−
28−view : Model -> Html Msg
29−view model =
10+view : Html Msg
11+view =
3012 let
3113 a =
3214 el
@@ -80,12 +62,3 @@ view model =
8062 , paddingXY 0 30
8163 ]
8264 b
83−
84−
85−main : Program () Model Msg
86−main =
87− Browser.sandbox
88− { init = initialModel
89− , view = view
90− , update = update
91− }
tests-rendering/cases/resolved/ZIndex/Issue22ZIndex.elm → tests-rendering/cases/resolved/Nearby/Issue22ZIndex.elmrenamed+1−1
@@ -1,4 +1,4 @@
1−module Issue22ZIndex exposing (main)
1+module Nearby.Issue22ZIndex exposing (main)
22
33import Browser
44import Element as Ui exposing (..)
tests-rendering/cases/resolved/ZIndex/OtherInFrontIssue.elm → tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elmrenamed+1−1
@@ -1,4 +1,4 @@
1−module OtherInFrontIssue exposing (main)
1+module Nearby.OtherInFrontIssue exposing (main)
22
33import Browser
44import Element exposing (Element)
tests-rendering/cases/resolved/ZIndex/ZIndexRegression.elm → tests-rendering/cases/resolved/Nearby/ZIndexRegression.elmrenamed+1−1
@@ -1,4 +1,4 @@
1−module ZIndexRegression exposing (main)
1+module Nearby.ZIndexRegression exposing (main)
22
33import Element exposing (..)
44import Element.Background as Background
tests-rendering/src/Tests/Alignment.elmnew file+49
@@ -0,0 +1,49 @@
1+module Tests.Alignment exposing (view)
2+
3+{-| Testing nearby elements such as those defined with `above`, `below`, etc.
4+-}
5+
6+import Testable
7+import Testable.Element exposing (..)
8+import Testable.Element.Background as Background
9+import Testable.Element.Font as Font
10+import Testable.Generator
11+import Tests.Palette as Palette exposing (..)
12+
13+
14+box attrs =
15+ el
16+ ([ width (px 50)
17+ , height (px 50)
18+ , Background.color blue
19+ ]
20+ ++ attrs
21+ )
22+ none
23+
24+
25+{-| -}
26+view : List ( String, Testable.Element msg )
27+view =
28+ List.concat
29+ [ Testable.Generator.generate "Alignments"
30+ (\layout element alignment ->
31+ layout
32+ [ width (px 800)
33+ , height (px 800)
34+ , Background.color lightGrey
35+ ]
36+ (element
37+ ([ width (px 200)
38+ , height (px 200)
39+ , Background.color red
40+ ]
41+ ++ alignment
42+ )
43+ none
44+ )
45+ )
46+ |> Testable.Generator.with Testable.Generator.allLayouts
47+ |> Testable.Generator.with Testable.Generator.allElements
48+ |> Testable.Generator.with Testable.Generator.allAlignments
49+ ]
tests-rendering/src/Tests/All.elm+15−33
@@ -2,50 +2,31 @@ module Tests.All exposing (main)
22
33{-| -}
44
5−import ClippedElInFixedWidthColumn
6−import ElInFixedHeightColumn
7−import InFrontSize
5+import Layout.NestedParagraphs
86import Layout.SafariBugIssue147
9−import NestedParagraphs
10−import StackedScrollingColumnsHeight
117import Testable.Generator
128import Testable.Runner
13−import Tests.Basic
14−import Tests.ColumnAlignment
15−import Tests.ColumnSpacing
16−import Tests.ElementAlignment
9+import Tests.Alignment
1710import Tests.Nearby
18−import Tests.RowAlignment
19−import Tests.RowSpacing
11+import Tests.Spacing
2012import Tests.TextWrapping
2113import Tests.Transparency
22−import WeirdCentering
2314
2415
2516main : Testable.Runner.TestableProgram
2617main =
2718 (Testable.Runner.program << List.concat)
28− [ Testable.Generator.element "Basics"
29− []
30−
31− -- , Testable.Generator.element "Align "
32− -- []
33− -- , [ Tuple.pair
34− -- "Basic Element"
35− -- Tests.Basic.view
36− -- , Tuple.pair "Nearby" Tests.Nearby.view
37− -- , Tuple.pair "Element Alignment" Tests.ElementAlignment.view
38− -- , Tuple.pair "Transparency" Tests.Transparency.view
39− -- , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view
40− -- -- This has 12k cases, so it runs slow and sometimes crashes IE
41− -- , Tuple.pair "Row Alignment" Tests.RowAlignment.view
42− -- , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view
43− -- , Tuple.pair "Row Spacing"
44− -- Tests.RowSpacing.view
45− -- ]
19+ [ Testable.Generator.elementInLayout "Basics" []
20+ , Tests.Nearby.view
21+ , Tests.Alignment.view
22+ , Tests.Spacing.view
23+
24+ -- [
25+ -- , Tuple.pair "Transparency" Tests.Transparency.view
26+ -- ]
4627 -- , [ Tuple.pair "Paragraph wrapping" Tests.TextWrapping.view
4728 -- ]
48− -- , issues
29+ , issues
4930 ]
5031
5132
@@ -54,9 +35,10 @@ issues =
5435 -- , Testable.Runner.rename "Stacked scrolling columns height" StackedScrollingColumnsHeight.view
5536 -- ,
5637 Testable.Runner.rename "Safari bug issue147" Layout.SafariBugIssue147.view
38+ , Testable.Runner.rename "Nested paragraphs" Layout.NestedParagraphs.view
5739
58− -- , Testable.Runner.rename "Nested paragraphs" NestedParagraphs.view
59− -- , Testable.Runner.rename "In front size" InFrontSize.view
40+ -- , Testable.Runner.rename "Issue 22, zIndex" Nearby.Issue22ZIndex.view
41+ -- , Testable.Runner.rename "inFrontIssue" Nearby.InFrontIssue.view
6042 -- , Testable.Runner.rename "El in fixed height column" ElInFixedHeightColumn.view
6143 -- , Testable.Runner.rename "Clipped el in fixed width column" ClippedElInFixedWidthColumn.view
6244 ]
tests-rendering/src/Tests/Basic.elmdeleted−54
@@ -1,54 +0,0 @@
1−module Tests.Basic exposing (view)
2−
3−{-| -}
4−
5−import Element as Actual
6−import Html
7−import Testable
8−import Testable.Element exposing (..)
9−import Testable.Element.Background as Background
10−import Testable.Element.Font as Font
11−import Testable.Runner
12−import Tests.Palette as Palette
13−
14−
15−{-| -}
16−main : Html.Html msg
17−main =
18− Testable.Runner.show view
19−
20−
21−{-| -}
22−view : Testable.Element msg
23−view =
24− row [ spacing 50, alignTop ]
25− [ el
26− [ width (px 200)
27− , height (px 200)
28− , Background.color Palette.blue
29− , Font.color Palette.white
30− ]
31− (text "Hello!")
32− , el
33− [ width (px 200)
34− , height (px 200)
35− , Background.color Palette.blue
36− , Font.color Palette.white
37− ]
38− (text "Hello!")
39− , el
40− [ width (px 200)
41− , height (px 200)
42− , Background.color (Actual.rgba 0 0 1 1)
43− , Font.color Palette.white
44− , below
45− (el
46− [ Background.color Palette.grey
47− , width (px 50)
48− , height (px 50)
49− ]
50− none
51− )
52− ]
53− (text "Hello!")
54− ]
tests-rendering/src/Tests/ColumnAlignment.elmdeleted−176
@@ -1,176 +0,0 @@
1−module Tests.ColumnAlignment exposing (..)
2−
3−import Html
4−import Testable
5−import Testable.Element as Element exposing (..)
6−import Testable.Element.Background as Background
7−import Testable.Element.Font as Font
8−import Testable.Runner
9−import Tests.Palette as Palette exposing (..)
10−
11−
12−{-| -}
13−main : Html.Html msg
14−main =
15− Testable.Runner.show view
16−
17−
18−box attrs =
19− el
20− ([ width (px 50)
21− , height (px 50)
22− , Background.color blue
23− ]
24− ++ attrs
25− )
26− none
27−
28−
29−container =
30− el [ width (px 100), height (px 100) ]
31−
32−
33−view =
34− let
35− colContainer attrs children =
36− column ([ Background.color lightGrey, spacing 20, width (px 100), height (px 500) ] ++ attrs) children
37−
38− tallContainer attrs children =
39− column ([ Background.color lightGrey, spacing 20, width (px 100), height fill ] ++ attrs) children
40− in
41− column
42− [ width fill, spacing 20 ]
43− [ el [] (text "Alignment Within a Column")
44− , row [ spacing 20 ]
45− [ colContainer []
46− [ box [] ]
47− , colContainer []
48− [ box [ centerY ]
49− ]
50− , colContainer []
51− [ box [ alignBottom, label "first" ]
52− ]
53− ]
54− , row [ spacing 20 ]
55− [ colContainer []
56− [ box [] ]
57− , colContainer []
58− [ box []
59− , box []
60− , box []
61− ]
62− , colContainer []
63− [ box [ alignLeft, label "first" ]
64− , box [ centerX, label "second" ]
65− , box [ alignRight, label "third" ]
66− ]
67− ]
68− , row [ spacing 20 ]
69− [ colContainer []
70− [ box []
71− , box []
72− , box []
73− ]
74− , colContainer []
75− [ box []
76− , box []
77− , box [ alignBottom, label "third" ]
78− ]
79− , colContainer []
80− [ box []
81− , box [ alignBottom, label "second" ]
82− , box []
83− ]
84− , colContainer []
85− [ box [ alignBottom, label "first" ]
86− , box []
87− , box []
88− ]
89− ]
90− , text "centerY"
91− , row [ spacing 20 ]
92− [ colContainer [ height fill ]
93− [ box [ centerY, label "solo" ]
94− ]
95− , colContainer []
96− [ box []
97− , box [ centerY, label "middle" ]
98− , box []
99− ]
100− , colContainer []
101− [ box []
102− , box []
103− , box [ centerY, label "last" ]
104− ]
105− ]
106− , text "multiple centerY"
107− , row [ height (px 800), spacing 20 ]
108− [ tallContainer []
109− [ box []
110− , box [ centerY ]
111− , box [ centerY ]
112− , box [ centerY ]
113− , box [ centerY ]
114− , box [ alignBottom ]
115− ]
116− , tallContainer []
117− [ box []
118− , box [ centerY ]
119− , box []
120− ]
121− , tallContainer []
122− [ box []
123− , box []
124− , box [ centerY ]
125− ]
126− ]
127− , text "top, center, bottom"
128− , row [ spacing 20 ]
129− [ colContainer []
130− [ box [ alignTop, label "first" ]
131− , box []
132− , box [ alignBottom, label "last" ]
133− ]
134− , colContainer []
135− [ box [ alignTop ]
136− , box [ centerY ]
137− , box [ alignBottom ]
138− ]
139− , colContainer []
140− [ box [ alignLeft, alignTop ]
141− , box [ centerX, centerY ]
142− , box [ alignRight, alignBottom ]
143− ]
144− ]
145− , el [ width fill ] (text "Column in a Row")
146− , row [ width fill, spacing 20, label "row" ]
147− [ box [ alignLeft, alignTop, label "box" ]
148− , column
149− [ alignLeft
150− , alignTop
151− , spacing 20
152− , label "column"
153− , Background.color lightGrey
154− ]
155− [ box []
156− , box []
157− , box []
158− ]
159− , column
160− [ spacing 20
161− , width (px 100)
162− , alignLeft
163− , alignTop
164− , Background.color lightGrey
165− ]
166− [ box []
167− , box []
168− , box []
169− ]
170− , colContainer []
171− [ box [ alignRight ]
172− , box [ centerX ]
173− , box [ alignLeft ]
174− ]
175− ]
176− ]
tests-rendering/src/Tests/ColumnSpacing.elmdeleted−68
@@ -1,68 +0,0 @@
1−module Tests.ColumnSpacing exposing (..)
2−
3−import Html
4−import Testable
5−import Testable.Element as Element exposing (..)
6−import Testable.Element.Background as Background
7−import Testable.Element.Font as Font
8−import Testable.Runner
9−import Tests.Palette as Palette exposing (..)
10−
11−
12−{-| -}
13−main : Html.Html msg
14−main =
15− Testable.Runner.show view
16−
17−
18−box attrs =
19− el
20− ([ width (px 50)
21− , height (px 50)
22− , Background.color blue
23− ]
24− ++ attrs
25− )
26− none
27−
28−
29−tinyBox attrs =
30− el
31− ([ width (px 20)
32− , height (px 20)
33−
34− -- , centerY
35− , Background.color darkCharcoal
36− ]
37− ++ attrs
38− )
39− none
40−
41−
42−container =
43− el [ width (px 100), height (px 100) ]
44−
45−
46−view =
47− let
48− colContainer attrs children =
49− column ([ spacing 20, width (px 100), height (px 500) ] ++ attrs) children
50− in
51− column
52− []
53− [ el [] (text "Spacing within a column")
54− , row []
55− [ colContainer []
56− [ box [] ]
57− , colContainer []
58− [ box []
59− , box []
60− , box []
61− ]
62− , colContainer [ onRight (tinyBox []) ]
63− [ box []
64− , box []
65− , box []
66− ]
67− ]
68− ]
tests-rendering/src/Tests/ElementAlignment.elmdeleted−111
@@ -1,111 +0,0 @@
1−module Tests.ElementAlignment exposing (..)
2−
3−import Generator
4−import Html
5−import Testable
6−import Testable.Element as Element exposing (..)
7−import Testable.Element.Background as Background
8−import Testable.Element.Font as Font
9−import Testable.Runner
10−import Tests.Palette as Palette exposing (..)
11−
12−
13−{-| -}
14−main : Html.Html msg
15−main =
16− Testable.Runner.show view
17−
18−
19−box : List (Testable.Attr msg) -> Testable.Element msg
20−box attrs =
21− el
22− ([ width (px 50)
23− , height (px 50)
24− , Background.color blue
25− ]
26− ++ attrs
27− )
28− none
29−
30−
31−container : Testable.Element msg -> Testable.Element msg
32−container =
33− el
34− [ width (px 200)
35− , height (px 200)
36− , Background.color lightGrey
37− ]
38−
39−
40−view : Testable.Element msg
41−view =
42− column []
43− [ el [] (text "Alignment Within an El")
44− , container <|
45− box []
46− , text "alignLeft, centerX, alignRight"
47− , column [ spacing 20 ] <|
48− Generator.sizes
49− (\resizeable ->
50− row [ spacing 20 ]
51− [ container <|
52− resizeable [ Background.color blue, alignLeft ] none
53− , container <|
54− resizeable [ Background.color blue, centerX ] none
55− , container <|
56− resizeable [ Background.color blue, alignRight ] none
57− ]
58− )
59− , text "top, centerY, bottom"
60− , column [ spacing 20 ] <|
61− Generator.sizes
62− (\resizeable ->
63− row [ spacing 20 ]
64− [ container <|
65− resizeable [ alignTop ] none
66− , container <|
67− resizeable [ centerY ] none
68− , container <|
69− resizeable [ alignBottom ] none
70− ]
71− )
72− , text "align top ++ alignments"
73− , column [ spacing 20 ] <|
74− Generator.sizes
75− (\resizeable ->
76− row [ spacing 20 ]
77− [ container <|
78− resizeable [ alignTop, alignLeft ] none
79− , container <|
80− resizeable [ alignTop, centerX ] none
81− , container <|
82− resizeable [ alignTop, alignRight ] none
83− ]
84− )
85− , text "centerY ++ alignments"
86− , column [ spacing 20 ] <|
87− Generator.sizes
88− (\resizeable ->
89− row [ spacing 20 ]
90− [ container <|
91− resizeable [ centerY, alignLeft ] none
92− , container <|
93− resizeable [ centerY, centerX ] none
94− , container <|
95− resizeable [ centerY, alignRight ] none
96− ]
97− )
98− , text "alignBottom ++ alignments"
99− , column [ spacing 20 ] <|
100− Generator.sizes
101− (\resizeable ->
102− row [ spacing 20 ]
103− [ container <|
104− resizeable [ alignBottom, alignLeft ] none
105− , container <|
106− resizeable [ alignBottom, centerX ] none
107− , container <|
108− resizeable [ alignBottom, alignRight ] none
109− ]
110− )
111− ]
tests-rendering/src/Tests/Nearby.elm+23−280
@@ -66,38 +66,31 @@ view =
6666 , Tuple.pair "el with all nearbys and alignments" master
6767 , Tuple.pair "paragraph with all nearbys and alignments" masterParagraph
6868 ]
69− , Testable.Generator.elementWith "Nearbys"
70− (Testable.Generator.nearbys
71− |> List.map
72− (\( nearbyLabel, nearby ) ->
73− Tuple.pair nearbyLabel
74− [ nearby (box [])
75− , width (px 200)
76− , height (px 200)
77− , Background.color red
78− ]
79− )
69+ , Testable.Generator.generate "Nearbys"
70+ (\element nearby ->
71+ element
72+ [ nearby (box [])
73+ , width (px 200)
74+ , height (px 200)
75+ , Background.color red
76+ ]
77+ none
8078 )
81− , Testable.Generator.elementWith "Nearbys with alignment"
82− (Testable.Generator.mapEveryCombo
83− (\( nearbyLabel, nearby ) ( alignmentLabel, align ) ->
84− Tuple.pair (nearbyLabel ++ " ++ " ++ alignmentLabel)
85− [ nearby (box [ align ])
86− , width (px 200)
87− , height (px 200)
88− , Background.color red
89− ]
90− )
91− Testable.Generator.nearbys
92− Testable.Generator.alignments
79+ |> Testable.Generator.with Testable.Generator.allElements
80+ |> Testable.Generator.with Testable.Generator.nearbys
81+ , Testable.Generator.generate "Nearbys with alignment"
82+ (\element nearby align ->
83+ element
84+ [ nearby (box [ align ])
85+ , width (px 200)
86+ , height (px 200)
87+ , Background.color red
88+ ]
89+ none
9390 )
94−
95− -- , nearby above "above" box
96− -- , nearby below "below" box
97− -- , nearby inFront "inFront" box
98− -- , nearby onRight "onRight" box
99− -- , nearby onLeft "onLeft" box
100− -- , nearby behindContent "behindContent" transparentBox
91+ |> Testable.Generator.with Testable.Generator.allElements
92+ |> Testable.Generator.with Testable.Generator.nearbys
93+ |> Testable.Generator.with Testable.Generator.alignments
10194 ]
10295
10396
@@ -132,18 +125,6 @@ little name attrs =
132125 none
133126
134127
135−transparentBox attrs =
136− el
137− ([ Font.color white
138− , width (px 50)
139− , height (px 50)
140− , Background.color white
141− ]
142− ++ attrs
143− )
144− (text "hi")
145−
146−
147128master =
148129 el [ padding 20 ] <|
149130 box
@@ -196,241 +177,3 @@ masterParagraph =
196177 , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
197178 , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
198179 ]
199−
200−
201−nearbyOld location name render =
202− column [ spacing 32, label "column" ]
203− [ el [ padding 20, Background.color green, Font.color white ] (text name)
204− , row [ height (px 100), width fill, spacing 50 ]
205− [ render
206− [ location
207− (el
208− [ label name
209− , width (px 20)
210− , height (px 20)
211− , Background.color darkCharcoal
212− ]
213− none
214− )
215− ]
216− , render
217− [ location
218− (el
219− [ label name
220− , width (px 20)
221− , height (px 20)
222− , alignLeft
223− , Background.color darkCharcoal
224− ]
225− none
226− )
227− ]
228− , render
229− [ location
230− (el
231− [ label name
232− , width (px 20)
233− , height (px 20)
234− , centerX
235− , Background.color darkCharcoal
236− ]
237− none
238− )
239− ]
240− , render
241− [ location
242− (el
243− [ label name
244− , width (px 20)
245− , height (px 20)
246− , alignRight
247− , Background.color darkCharcoal
248− ]
249− none
250− )
251− ]
252− , render
253− [ location
254− (el
255− [ label name
256− , width (px 20)
257− , height (px 20)
258− , alignTop
259− , Background.color darkCharcoal
260− ]
261− none
262− )
263− ]
264− , render
265− [ location
266− (el
267− [ label name
268− , width (px 20)
269− , height (px 20)
270− , centerY
271− , Background.color darkCharcoal
272− ]
273− none
274− )
275− ]
276− , render
277− [ location
278− (el
279− [ label name
280− , width (px 20)
281− , height (px 20)
282− , alignBottom
283− , Background.color darkCharcoal
284− ]
285− none
286− )
287− ]
288− ]
289− , text "widths/heights"
290− , row [ height (px 100), width fill, spacing 50, label "Row" ]
291− [ render
292− [ location
293− (el
294− [ label name
295− , width fill
296− , height fill
297− , Background.color darkCharcoal
298− ]
299− none
300− )
301− ]
302− , render
303− [ location
304− (el
305− [ label name
306− , width (px 20)
307− , height fill
308− , Background.color darkCharcoal
309− ]
310− none
311− )
312− ]
313− , render
314− [ label "render"
315− , location
316− (el
317− [ label name
318− , width fill
319− , height (px 20)
320− , Background.color darkCharcoal
321− ]
322− none
323− )
324− ]
325− , render
326− [ location
327− (el
328− [ label name
329− , width (px 20)
330− , height shrink
331− , Background.color darkCharcoal
332− , Font.color white
333− ]
334− (text "h-shrink")
335− )
336− ]
337− , render
338− [ location
339− (el
340− [ label name
341− , width shrink
342− , height (px 20)
343− , Background.color darkCharcoal
344− , Font.color white
345− ]
346− (text "w-shrink")
347− )
348− ]
349− ]
350− , text "on paragraph"
351− , row [ width fill, spacing 50, label "Row" ]
352− [ p
353− [ location
354− (el
355− [ label name
356− , width (px 20)
357− , height (px 20)
358− , Background.color darkCharcoal
359− ]
360− none
361− )
362− ]
363− , p
364− [ location
365− (el
366− [ label name
367− , width (px 20)
368− , height (px 20)
369− , alignLeft
370− , Background.color darkCharcoal
371− ]
372− none
373− )
374− ]
375− , p
376− [ location
377− (el
378− [ label name
379− , width (px 20)
380− , height (px 20)
381− , centerX
382− , Background.color darkCharcoal
383− ]
384− none
385− )
386− ]
387− , p
388− [ location
389− (el
390− [ label name
391− , width (px 20)
392− , height (px 20)
393− , alignRight
394− , Background.color darkCharcoal
395− ]
396− none
397− )
398− ]
399− , p
400− [ location
401− (el
402− [ label name
403− , width (px 20)
404− , height (px 20)
405− , alignTop
406− , Background.color darkCharcoal
407− ]
408− none
409− )
410− ]
411− , p
412− [ location
413− (el
414− [ label name
415− , width (px 20)
416− , height (px 20)
417− , centerY
418− , Background.color darkCharcoal
419− ]
420− none
421− )
422− ]
423− , p
424− [ location
425− (el
426− [ label name
427− , width (px 20)
428− , height (px 20)
429− , alignBottom
430− , Background.color darkCharcoal
431− ]
432− none
433− )
434− ]
435− ]
436− ]
tests-rendering/src/Tests/RowAlignment.elmdeleted−212
@@ -1,212 +0,0 @@
1−module Tests.RowAlignment exposing (..)
2−
3−import Generator
4−import Html
5−import Testable
6−import Testable.Element as Element exposing (..)
7−import Testable.Element.Background as Background
8−import Testable.Element.Font as Font
9−import Testable.Runner
10−import Tests.Palette as Palette exposing (..)
11−
12−
13−{-| -}
14−main : Html.Html msg
15−main =
16− Testable.Runner.show view
17−
18−
19−box attrs =
20− el
21− ([ width (px 50)
22− , height (px 50)
23− , Background.color blue
24− ]
25− ++ attrs
26− )
27− none
28−
29−
30−view =
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− ]
tests-rendering/src/Tests/RowSpacing.elmdeleted−69
@@ -1,69 +0,0 @@
1−module Tests.RowSpacing exposing (..)
2−
3−import Html
4−import Testable
5−import Testable.Element as Element exposing (..)
6−import Testable.Element.Background as Background
7−import Testable.Element.Font as Font
8−import Testable.Runner
9−import Tests.Palette as Palette exposing (..)
10−
11−
12−{-| -}
13−main : Html.Html msg
14−main =
15− Testable.Runner.show view
16−
17−
18−box attrs =
19− el
20− ([ width (px 50)
21− , height (px 50)
22− , Background.color blue
23− ]
24− ++ attrs
25− )
26− none
27−
28−
29−tinyBox attrs =
30− el
31− ([ width (px 20)
32− , height (px 20)
33−
34− -- , centerY
35− , Background.color darkCharcoal
36− ]
37− ++ attrs
38− )
39− none
40−
41−
42−container =
43− el [ width (px 100), height (px 100) ]
44−
45−
46−view =
47− let
48− colContainer attrs children =
49− row ([ spacing 20, width (px 500), height (px 120) ] ++ attrs) children
50− in
51− column
52− []
53− [ el [] (text "Spacing within a row")
54− , column []
55− [ box []
56− , colContainer []
57− [ box [] ]
58− , colContainer []
59− [ box []
60− , box []
61− , box []
62− ]
63− , colContainer [ below (tinyBox []) ]
64− [ box []
65− , box []
66− , box []
67− ]
68− ]
69− ]
tests-rendering/src/Tests/Spacing.elmnew file+36
@@ -0,0 +1,36 @@
1+module Tests.Spacing exposing (view)
2+
3+{-| Test that spacing works
4+-}
5+
6+import Testable
7+import Testable.Element exposing (..)
8+import Testable.Element.Background as Background
9+import Testable.Element.Font as Font
10+import Testable.Generator
11+import Tests.Palette as Palette exposing (..)
12+
13+
14+{-| -}
15+view : List ( String, Testable.Element msg )
16+view =
17+ List.concat
18+ [ Testable.Generator.generate "Spacing"
19+ (\layout element ->
20+ layout
21+ [ width (px 800)
22+ , height (px 800)
23+ , Background.color lightGrey
24+ , spacing 20
25+ ]
26+ (element
27+ [ width (px 200)
28+ , height (px 200)
29+ , Background.color red
30+ ]
31+ none
32+ )
33+ )
34+ |> Testable.Generator.with Testable.Generator.allLayouts
35+ |> Testable.Generator.with Testable.Generator.allElements
36+ ]