7ed3ecb..master · typeable/elm-ui

git.iko.soy/typeable/elm-ui

README.md+4

@@ -66,6 +66,10 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md

67The 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.

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+

69## Contributing

73## Contributing

71Want to help out fixing bugs or reporting issues?

75Want to help out fixing bugs or reporting issues?

elm.json+1−1

@@ -3,7 +3,7 @@

3 "name": "mdgriffith/elm-ui",

4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",

5 "license": "BSD-3-Clause",

6− "version": "1.1.5",

6+ "version": "1.1.8",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

src/Element.elm−5

@@ -1203,11 +1203,6 @@ newTabLink attrs { url, label } =

1203

1204

1205{-| 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−

1211-}

1206-}

1212download :

1207download :

1213 List (Attribute msg)

1208 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

330 , label = text "My Button"

331 }

332

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+

333-}

335-}

334button :

336button :

335 List (Attribute msg)

337 List (Attribute msg)

@@ -367,7 +369,17 @@ button attrs { onPress, label } =

367

369

368 Just msg ->

370 Just msg ->

369 Events.onClick msg

371 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+ )

371 :: attrs

383 :: attrs

372 )

384 )

373 )

385 )

@@ -445,22 +457,24 @@ checkbox attrs { label, icon, checked, onChange } =

445 ]

457 ]

446 ++ attrs

458 ++ attrs

447 in

459 in

448− applyLabel attributes

460+ applyLabel

449− label

450− (Internal.element

451− Internal.asEl

452− Internal.div

453− [ Internal.Attr <|

454− Html.Attributes.attribute "role" "checkbox"

461+ (Internal.Attr (Html.Attributes.attribute "role" "checkbox")

455− , Internal.Attr <|

462+ :: Internal.Attr

456− Html.Attributes.attribute "aria-checked" <|

463+ (Html.Attributes.attribute "aria-checked" <|

457 if checked then

464 if checked then

458 "true"

465 "true"

459

466

460 else

467 else

461 "false"

468 "false"

469+ )

462− , hiddenLabelAttribute label

470+ :: hiddenLabelAttribute label

471+ :: attributes

472+ )

473+ label

474+ (Internal.element

475+ Internal.asEl

476+ Internal.div

463− , Element.centerY

477+ [ Element.centerY

464 , Element.height Element.fill

478 , Element.height Element.fill

465 , Element.width Element.shrink

479 , Element.width Element.shrink

466 ]

480 ]

@@ -699,7 +713,7 @@ slider attributes input =

699 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

700 thumbShadowStyle

714 thumbShadowStyle

701 )

715 )

702− , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))

716+ , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))

703 , Internal.Attr

717 , Internal.Attr

704 (Html.Events.onInput

718 (Html.Events.onInput

705 (\str ->

719 (\str ->

@@ -765,10 +779,10 @@ slider attributes input =

765 -- This is after `attributes` because the thumb should be in front of everything.

779 -- This is after `attributes` because the thumb should be in front of everything.

766 ++ [ Element.behindContent <|

780 ++ [ Element.behindContent <|

767 if vertical then

781 if vertical then

768− viewVerticalThumb factor thumbAttributes trackWidth

782+ viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth

769

783

770 else

784 else

771− viewHorizontalThumb factor thumbAttributes trackHeight

785+ viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight

772 ]

786 ]

773 )

787 )

774 Element.none

788 Element.none

@@ -1551,6 +1565,8 @@ email =

1551

1565

1552By default it will have a minimum height of one line and resize based on it's contents.

1566By default it will have a minimum height of one line and resize based on it's contents.

1553

1567

1568+Use `Element.spacing` to change its line-height.

1569+

1554-}

1570-}

1555multiline :

1571multiline :

1556 List (Attribute msg)

1572 List (Attribute msg)

@@ -2089,7 +2105,11 @@ onKeyLookup lookup =

2089 Json.field "key" Json.string

2105 Json.field "key" Json.string

2090 |> Json.andThen decode

2106 |> Json.andThen decode

2091 in

2107 in

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

2092− Internal.Attr <| Html.Events.on "keyup" isKey

2110+ Internal.Attr <|

2111+ Html.Events.preventDefaultOn "keydown"

2112+ (Json.map (\fired -> ( fired, True )) isKey)

2093

2113

2094

2114

2095{-| -}

2115{-| -}

@@ -2185,7 +2205,8 @@ defaultCheckbox : Bool -> Element msg

2185defaultCheckbox checked =

2205defaultCheckbox checked =

2186 Element.el

2206 Element.el

2187 [ Internal.htmlClass "focusable"

2207 [ Internal.htmlClass "focusable"

2188− , Element.width (Element.px 14)

2208+ , Element.width

2209+ (Element.px 14)

2189 , Element.height (Element.px 14)

2210 , Element.height (Element.px 14)

2190 , Font.color white

2211 , Font.color white

2191 , Element.centerY

2212 , Element.centerY

@@ -2221,9 +2242,8 @@ defaultCheckbox checked =

2221

2242

2222 else

2243 else

2223 1

2244 1

2224− ]

2245+ , Element.inFront

2225− (if checked then

2226− Element.el

2246+ (Element.el

2227 [ Border.color white

2247 [ Border.color white

2228 , Element.height (Element.px 6)

2248 , Element.height (Element.px 6)

2229 , Element.width (Element.px 9)

2249 , Element.width (Element.px 9)

@@ -2231,6 +2251,7 @@ defaultCheckbox checked =

2231 , Element.centerX

2251 , Element.centerX

2232 , Element.centerY

2252 , Element.centerY

2233 , Element.moveUp 1

2253 , Element.moveUp 1

2254+ , Element.transparent (not checked)

2234 , Border.widthEach

2255 , Border.widthEach

2235 { top = 0

2256 { top = 0

2236 , left = 2

2257 , left = 2

@@ -2239,7 +2260,6 @@ defaultCheckbox checked =

2239 }

2260 }

2240 ]

2261 ]

2241 Element.none

2262 Element.none

2242−

2263+ )

2243− else

2264+ ]

2244− Element.none

2265+ Element.none

2245− )

src/Element/Region.elm+5−1

@@ -101,7 +101,11 @@ announce =

101 Internal.Describe LivePolite

102

103

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+

104−{-| -}

108+-}

105description : String -> Attribute msg

109description : String -> Attribute msg

106description =

110description =

107 Internal.Describe << Internal.Label

111 Internal.Describe << Internal.Label

src/Internal/Model.elm+9−3

@@ -1478,7 +1478,9 @@ renderHeight h =

1478 Single

1479 cls

1480 "min-height"

1481+ -- This needs to be !important because we're using `min-height: min-content`

1482+ -- to correct for safari's incorrect implementation of flexbox.

1481− (String.fromInt minSize ++ "px")

1483+ (String.fromInt minSize ++ "px !important")

1482

1484

1483 ( newFlag, newAttrs, newStyle ) =

1485 ( newFlag, newAttrs, newStyle ) =

1484 renderHeight len

1486 renderHeight len

@@ -2242,7 +2244,11 @@ renderFocusStyle focus =

2242 , Just <| Property "outline" "none"

2244 , Just <| Property "outline" "none"

2243 ]

2245 ]

2244 )

2246 )

2247+ , Style

2245− , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")

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+ )

2246 (List.filterMap identity

2252 (List.filterMap identity

2247 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2248 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

2254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

@@ -2650,7 +2656,7 @@ renderStyle options maybePseudo selector props =

2650 , (selector ++ "-fs:focus-within {")

2656 , (selector ++ "-fs:focus-within {")

2651 ++ renderedProps

2657 ++ renderedProps

2652 ++ "\n}"

2658 ++ "\n}"

2653− , (".focusable-parent:focus ~ " ++ "." ++ classes.any ++ " " ++ selector ++ "-fs {")

2659+ , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")

2654 ++ renderedProps

2660 ++ renderedProps

2655 ++ "\n}"

2661 ++ "\n}"

2656 ]

2662 ]

src/Internal/Style.elm+20−5

@@ -961,10 +961,17 @@ baseSheet =

961 ]

962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)

963 [ Prop "display" "block"

964+ , Descriptor (dot classes.heightFill)

964− , Child "img"

965+ [ Child "img"

965− [ Prop "max-height" "100%"

966+ [ Prop "max-height" "100%"

967+ , Prop "object-fit" "cover"

968+ ]

969+ ]

970+ , Descriptor (dot classes.widthFill)

971+ [ Child "img"

966− , Prop "max-width" "100%"

972+ [ Prop "max-width" "100%"

967− , Prop "object-fit" "cover"

973+ , Prop "object-fit" "cover"

974+ ]

968 ]

975 ]

969 ]

976 ]

970 , Class (dot classes.any ++ ":focus")

977 , Class (dot classes.any ++ ":focus")

@@ -1377,7 +1384,15 @@ baseSheet =

1377 -- This apparently is a different story for columns.

1384 -- This apparently is a different story for columns.

1378 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1385 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1379 -- instead of the expected content size.

1386 -- instead of the expected content size.

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)

1380− [ Prop "flex-basis" "auto"

1394+ [ Prop "flex-basis" "auto"

1395+ ]

1381 ]

1396 ]

1382 , Child (dot classes.heightFill)

1397 , Child (dot classes.heightFill)

1383 [ Prop "flex-grow" "100000"

1398 [ Prop "flex-grow" "100000"

tests-rendering/cases/open/LabelledInputAlignRight.elmnew file+28

@@ -0,0 +1,28 @@

1+module LabelledInputAlignRight exposing (view)

3+import Testable.Element exposing (..)

4+import Testable.Element.Input as Input

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)

3+{-| Elements placed with onLeft, onRight, above & below overlap main element's border

6+# inFront elements with width fill are contained within the parent's border

8+<https://github.com/mdgriffith/elm-ui/issues/223>

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)

3+{-| <https://github.com/mdgriffith/elm-ui/issues/232>

4+-}

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)

3+{-| <https://github.com/mdgriffith/elm-ui/issues/228>

4+-}

6+import Element exposing (..)

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 @@

1module ImageSizing exposing (main)

3+{-| <https://github.com/mdgriffith/elm-ui/issues/62>

4+-}

3−import Element as E exposing (column, el, row, text)

6+import Element as E exposing (column, el, px, row, text)

4import Element.Border as Border

7import Element.Border as Border

5import Element.Font as Font

8import Element.Font as Font

6import Html exposing (Html)

9import Html exposing (Html)

@@ -11,8 +14,9 @@ main =

11 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

14 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

12 E.image

15 E.image

13 [ -- E.height (E.px 500)

16 [ -- E.height (E.px 500)

14− E.width E.fill

17+ -- ,

18+ -- E.width E.fill

15− , E.height E.fill

19+ E.height E.fill

16 ]

20 ]

17 -- <| px 500 ]

21 -- <| px 500 ]

18 { src = "http://bburdette.github.io/music-reader.png"

22 { 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)

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)

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)

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

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)

3+{-|

6+# Safari bug for `el` heigh calculation in combination with `height fill`

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)

3{-| Paragraph with children more than one level deep breaks flow

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)

3import Browser

4import Element as Ui exposing (..)

@@ -7,26 +7,8 @@ import Element.Font as Font

7import Html exposing (Html)

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

10+view : Html Msg

29−view model =

11+view =

30 let

12 let

31 a =

13 a =

32 el

14 el

@@ -80,12 +62,3 @@ view model =

80 , paddingXY 0 30

62 , paddingXY 0 30

81 ]

63 ]

82 b

64 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)

3import Browser

4import 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)

3import Browser

4import 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)

3import Element exposing (..)

4import Element.Background as Background

tests-rendering/src/Testable/Generator.elm+240−7

@@ -20,6 +20,26 @@ element : String -> List (Testable.Attr msg) -> List ( String, Testable.Element

20element label attrs =

21 -- [ ( label, paragraph attrs [ short ] )

22 -- ]

23+ mapEveryCombo

24+ (\( selfLabel, makeSelf ) ( childLabel, child ) ->

25+ ( label ++ " - " ++ selfLabel ++ " > " ++ childLabel

26+ , makeSelf attrs child

27+ )

28+ )

29+ layouts

30+ contents

31+

32+

33+{-| Given a list of attributes, generate every context this list of attributes could be in.

34+

35+So, this means,

36+

37+ - every element type

38+ - in every element type

39+

40+-}

41+elementInLayout : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )

42+elementInLayout label attrs =

23 mapEveryCombo3

43 mapEveryCombo3

24 (\( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

44 (\( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

25 ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " > " ++ childLabel

45 ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " > " ++ childLabel

@@ -31,6 +51,49 @@ element label attrs =

31 contents

51 contents

54+{-| Sometimes we want to try a whole bunch of combinations of attributes

55+

56+This makes it a bit easier to construct

57+

58+-}

59+elementWith : String -> List ( String, List (Testable.Attr msg) ) -> List ( String, Testable.Element msg )

60+elementWith label labelAttrs =

61+ mapEveryCombo3

62+ (\( attrLabel, attrs ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

63+ ( label ++ " - " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel

64+ , makeSelf attrs child

65+ )

66+ )

67+ labelAttrs

68+ layouts

69+ contents

70+

71+

72+{-| This varies the layout element that an element is in.

73+-}

74+elementInLayoutWith :

75+ String

76+ ->

77+ List

78+ ( String

79+ , { self : List (Testable.Attr msg)

80+ , parent : List (Testable.Attr msg)

81+ }

82+ )

83+ -> List ( String, Testable.Element msg )

84+elementInLayoutWith label labelAttrs =

85+ mapEveryCombo4

86+ (\( attrLabel, attrs ) ( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

87+ ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel

88+ , makeLayout attrs.parent (makeSelf attrs.self child)

89+ )

90+ )

91+ labelAttrs

92+ allLayouts

93+ layouts

94+ contents

95+

96+

34layouts =

97layouts =

35 [ ( "el"

98 [ ( "el"

36 , \attrs child ->

99 , \attrs child ->

@@ -55,20 +118,130 @@ layouts =

55 ]

118 ]

119

120

121+allElements =

122+ [ ( "el"

123+ , \attrs child ->

124+ el attrs child

125+ )

126+ , ( "row"

127+ , \attrs child ->

128+ row attrs [ child ]

129+ )

130+ , ( "col"

131+ , \attrs child ->

132+ column attrs [ child ]

133+ )

134+ , ( "para"

135+ , \attrs child ->

136+ paragraph attrs [ child ]

137+ )

138+ , ( "txtCol"

139+ , \attrs child ->

140+ textColumn attrs [ child ]

141+ )

142+ ]

143+

144+

145+allLayouts =

146+ [ ( "el"

147+ , \attrs child ->

148+ el attrs child

149+ )

150+ , ( "row 3, self 1"

151+ , \attrs child ->

152+ row attrs [ child, box, box ]

153+ )

154+ , ( "row 3, self 2"

155+ , \attrs child ->

156+ row attrs [ box, child, box ]

157+ )

158+ , ( "row 3, self 3"

159+ , \attrs child ->

160+ row attrs [ box, box, child ]

161+ )

162+ , ( "col 3, self 1"

163+ , \attrs child ->

164+ column attrs [ child, box, box ]

165+ )

166+ , ( "col 3, self 2"

167+ , \attrs child ->

168+ column attrs [ box, child, box ]

169+ )

170+ , ( "col 3, self 3"

171+ , \attrs child ->

172+ column attrs [ box, box, child ]

173+ )

174+ , ( "para"

175+ , \attrs child ->

176+ paragraph attrs [ child ]

177+ )

178+ , ( "txtCol"

179+ , \attrs child ->

180+ textColumn attrs [ child ]

181+ )

182+ ]

183+

184+

58nearbys =

185nearbys =

59− [ inFront

186+ [ ( "inFront", inFront )

60− , above

187+ , ( "above", above )

61− , onLeft

188+ , ( "onLeft", onLeft )

62− , onRight

189+ , ( "onRight", onRight )

63− , below

190+ , ( "below", below )

64− , behindContent

191+ , ( "behindContent", behindContent )

192+ ]

193+

194+

195+alignments =

196+ horizontal ++ vertical

197+

198+

199+horizontal =

200+ [ Tuple.pair "alignLeft" alignLeft

201+ , Tuple.pair "alignRight" alignRight

202+ , Tuple.pair "centerX" centerX

203+ ]

204+

205+

206+vertical =

207+ [ Tuple.pair "alignTop" alignTop

208+ , Tuple.pair "alignBottom" alignBottom

209+ , Tuple.pair "centerY" centerY

65 ]

210 ]

211

212

213+extractLabel maybe =

214+ maybe

215+

216+

217+allAlignments =

218+ mapEveryCombo

219+ (\maybeOne maybeTwo ->

220+ let

221+ labels =

222+ List.filterMap (Maybe.map Tuple.first)

223+ [ maybeOne

224+ , maybeTwo

225+ ]

226+

227+ attrs =

228+ List.filterMap (Maybe.map Tuple.second)

229+ [ maybeOne

230+ , maybeTwo

231+ ]

232+ in

233+ Tuple.pair (String.join "++" labels)

234+ attrs

235+ )

236+ (Nothing :: List.map Just horizontal)

237+ (Nothing :: List.map Just vertical)

238+

239+

68contents =

240contents =

69 [ ( "none", none )

241 [ ( "none", none )

70 , ( "short text", text short )

242 , ( "short text", text short )

243+

71− , ( "long text", text lorem )

244+ -- , ( "long text", text lorem )

72 , ( "box"

245 , ( "box"

73 , box

246 , box

74 )

247 )

@@ -121,6 +294,26 @@ mapEveryCombo3 fn listOne listTwo listThree =

121 listOne

294 listOne

122

295

123

296

297+mapEveryCombo4 fn listOne listTwo listThree listFour =

298+ List.concatMap

299+ (\one ->

300+ List.concatMap

301+ (\two ->

302+ List.concatMap

303+ (\three ->

304+ List.map

305+ (\four ->

306+ fn one two three four

307+ )

308+ listFour

309+ )

310+ listThree

311+ )

312+ listTwo

313+ )

314+ listOne

315+

316+

124sizes render =

317sizes render =

125 List.concatMap

318 List.concatMap

126 (\( widthLen, heightLen ) ->

319 (\( widthLen, heightLen ) ->

@@ -163,3 +356,43 @@ lengths =

163 |> maximum 100

356 |> maximum 100

164 |> minimum 50

357 |> minimum 50

165 ]

358 ]

359+

360+

361+type Generated thing

362+ = Generated (List (Labeled thing))

363+

364+

365+type alias Labeled thing =

366+ ( String, thing )

367+

368+

369+with : List (Labeled a) -> List (Labeled (a -> b)) -> List (Labeled b)

370+with first funcs =

371+ List.concatMap

372+ (\( lbl, fst ) ->

373+ List.map

374+ (\( fnLbl, fn ) ->

375+ Tuple.pair (fnLbl ++ "+" ++ lbl) (fn fst)

376+ )

377+ funcs

378+ )

379+ first

380+

381+

382+generate : String -> generated -> List (Labeled generated)

383+generate lbl fn =

384+ [ Tuple.pair lbl fn

385+ ]

386+

387+

388+test : List (Labeled (Testable.Element msg))

389+test =

390+ generate "Alignments"

391+ (\align ->

392+ el align none

393+ )

394+ |> with allAlignments

395+

396+

397+

398+-- |>

tests-rendering/src/Tests/Alignment.elmnew file+49

@@ -0,0 +1,49 @@

1+module Tests.Alignment exposing (view)

3+{-| Testing nearby elements such as those defined with `above`, `below`, etc.

4+-}

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)

3{-| -}

5−import ClippedElInFixedWidthColumn

5+import Layout.NestedParagraphs

6−import ElInFixedHeightColumn

7−import InFrontSize

8import Layout.SafariBugIssue147

6import Layout.SafariBugIssue147

9−import NestedParagraphs

10−import StackedScrollingColumnsHeight

11import Testable.Generator

7import Testable.Generator

12import Testable.Runner

8import Testable.Runner

13−import Tests.Basic

9+import Tests.Alignment

14−import Tests.ColumnAlignment

15−import Tests.ColumnSpacing

16−import Tests.ElementAlignment

17import Tests.Nearby

10import Tests.Nearby

18−import Tests.RowAlignment

11+import Tests.Spacing

19−import Tests.RowSpacing

20import Tests.TextWrapping

12import Tests.TextWrapping

21import Tests.Transparency

13import Tests.Transparency

22−import WeirdCentering

25main : Testable.Runner.TestableProgram

16main : Testable.Runner.TestableProgram

26main =

17main =

27 (Testable.Runner.program << List.concat)

18 (Testable.Runner.program << List.concat)

28− [ Testable.Generator.element "Basics"

19+ [ Testable.Generator.elementInLayout "Basics" []

29− []

30−

31− -- , Testable.Generator.element "Align "

32− -- []

33− -- , [ Tuple.pair

34− -- "Basic Element"

35− -- Tests.Basic.view

20+ , Tests.Nearby.view

36− -- , Tuple.pair "Nearby" Tests.Nearby.view

21+ , Tests.Alignment.view

37− -- , Tuple.pair "Element Alignment" Tests.ElementAlignment.view

22+ , Tests.Spacing.view

38− -- , Tuple.pair "Transparency" Tests.Transparency.view

23+

39− -- , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view

24+ -- [

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

25+ -- , Tuple.pair "Transparency" Tests.Transparency.view

43− -- , Tuple.pair "Row Spacing"

26+ -- ]

44− -- Tests.RowSpacing.view

45− -- ]

46 -- , [ Tuple.pair "Paragraph wrapping" Tests.TextWrapping.view

27 -- , [ Tuple.pair "Paragraph wrapping" Tests.TextWrapping.view

47 -- ]

28 -- ]

48− -- , issues

29+ , issues

49 ]

30 ]

@@ -54,9 +35,10 @@ issues =

54 -- , Testable.Runner.rename "Stacked scrolling columns height" StackedScrollingColumnsHeight.view

35 -- , Testable.Runner.rename "Stacked scrolling columns height" StackedScrollingColumnsHeight.view

55 -- ,

36 -- ,

56 Testable.Runner.rename "Safari bug issue147" Layout.SafariBugIssue147.view

37 Testable.Runner.rename "Safari bug issue147" Layout.SafariBugIssue147.view

38+ , Testable.Runner.rename "Nested paragraphs" Layout.NestedParagraphs.view

58− -- , Testable.Runner.rename "Nested paragraphs" NestedParagraphs.view

40+ -- , Testable.Runner.rename "Issue 22, zIndex" Nearby.Issue22ZIndex.view

59− -- , Testable.Runner.rename "In front size" InFrontSize.view

41+ -- , Testable.Runner.rename "inFrontIssue" Nearby.InFrontIssue.view

60 -- , Testable.Runner.rename "El in fixed height column" ElInFixedHeightColumn.view

42 -- , Testable.Runner.rename "El in fixed height column" ElInFixedHeightColumn.view

61 -- , Testable.Runner.rename "Clipped el in fixed width column" ClippedElInFixedWidthColumn.view

43 -- , Testable.Runner.rename "Clipped el in fixed width column" ClippedElInFixedWidthColumn.view

62 ]

44 ]

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+97−356

@@ -8,6 +8,7 @@ import Testable

8import Testable.Element exposing (..)

9import Testable.Element.Background as Background

10import Testable.Element.Font as Font

11+import Testable.Generator

11import Testable.Runner

12import Testable.Runner

12import Tests.Palette as Palette exposing (..)

13import Tests.Palette as Palette exposing (..)

@@ -57,365 +58,39 @@ p attrs =

59{-| -}

60{-| -}

60−main : Html.Html msg

61−main =

62− Testable.Runner.show view

63−

64−

65−{-| -}

66−view : Testable.Element msg

61+view : List ( String, Testable.Element msg )

67view =

62view =

68− let

63+ List.concat

69− transparentBox attrs =

64+ [ [ Tuple.pair "Parent inFront above child inFront" layeredVisibility

70− el

65+ , Tuple.pair "Sibling onLeft above sibling inFront" overlappingChildren

71− ([ Font.color white

66+ , Tuple.pair "el with all nearbys and alignments" master

72− , width (px 50)

67+ , Tuple.pair "paragraph with all nearbys and alignments" masterParagraph

73− , height (px 50)

68+ ]

74− , Background.color white

69+ , Testable.Generator.generate "Nearbys"

75− ]

70+ (\element nearby ->

76− ++ attrs

71+ element

77− )

78− (text "hi")

79−

80− -- single location name box =

81− -- row [ height (px 100), width fill, spacing 50 ]

82− -- [ box

83− -- [ location

84− -- (el

85− -- [ width (px 20)

86− -- , height (px 20)

87− -- , Background.color darkCharcoal

88− -- ]

89− -- none

90− -- )

91− -- ]

92− -- , box

72+ [ nearby (box [])

93− -- [ location

94− -- (el

95− -- [ width (px 20)

73+ , width (px 200)

96− -- , height (px 20)

74+ , height (px 200)

97− -- , alignLeft

98− -- , Background.color darkCharcoal

75+ , Background.color red

99− -- ]

100− -- none

101− -- )

102− -- ]

103− -- ]

104− little name attrs =

105− el

106− ([ label name

107− , width (px 5)

108− , height (px 5)

109− , Background.color darkCharcoal

110− ]

111− ++ attrs

112− )

113− none

114−

115− nearby location name render =

116− column [ spacing 32, label "column" ]

117− [ el [ padding 20, Background.color green, Font.color white ] (text name)

118− , row [ height (px 100), width fill, spacing 50 ]

119− [ render

120− [ location

121− (el

122− [ label name

123− , width (px 20)

124− , height (px 20)

125− , Background.color darkCharcoal

126− ]

127− none

128− )

129− ]

130− , render

131− [ location

132− (el

133− [ label name

134− , width (px 20)

135− , height (px 20)

136− , alignLeft

137− , Background.color darkCharcoal

138− ]

139− none

140− )

141− ]

142− , render

143− [ location

144− (el

145− [ label name

146− , width (px 20)

147− , height (px 20)

148− , centerX

149− , Background.color darkCharcoal

150− ]

151− none

152− )

153− ]

154− , render

155− [ location

156− (el

157− [ label name

158− , width (px 20)

159− , height (px 20)

160− , alignRight

161− , Background.color darkCharcoal

162− ]

163− none

164− )

165− ]

166− , render

167− [ location

168− (el

169− [ label name

170− , width (px 20)

171− , height (px 20)

172− , alignTop

173− , Background.color darkCharcoal

174− ]

175− none

176− )

177− ]

178− , render

179− [ location

180− (el

181− [ label name

182− , width (px 20)

183− , height (px 20)

184− , centerY

185− , Background.color darkCharcoal

186− ]

187− none

188− )

189− ]

190− , render

191− [ location

192− (el

193− [ label name

194− , width (px 20)

195− , height (px 20)

196− , alignBottom

197− , Background.color darkCharcoal

198− ]

199− none

200− )

201− ]

202− ]

203− , text "widths/heights"

204− , row [ height (px 100), width fill, spacing 50, label "Row" ]

205− [ render

206− [ location

207− (el

208− [ label name

209− , width fill

210− , height fill

211− , Background.color darkCharcoal

212− ]

213− none

214− )

215− ]

216− , render

217− [ location

218− (el

219− [ label name

220− , width (px 20)

221− , height fill

222− , Background.color darkCharcoal

223− ]

224− none

225− )

226− ]

227− , render

228− [ label "render"

229− , location

230− (el

231− [ label name

232− , width fill

233− , height (px 20)

234− , Background.color darkCharcoal

235− ]

236− none

237− )

238− ]

239− , render

240− [ location

241− (el

242− [ label name

243− , width (px 20)

244− , height shrink

245− , Background.color darkCharcoal

246− , Font.color white

247− ]

248− (text "h-shrink")

249− )

250− ]

251− , render

252− [ location

253− (el

254− [ label name

255− , width shrink

256− , height (px 20)

257− , Background.color darkCharcoal

258− , Font.color white

259− ]

260− (text "w-shrink")

261− )

262− ]

263 ]

76 ]

264− , text "on paragraph"

265− , row [ width fill, spacing 50, label "Row" ]

266− [ p

267− [ location

268− (el

269− [ label name

270− , width (px 20)

271− , height (px 20)

272− , Background.color darkCharcoal

273− ]

274− none

77+ none

275− )

78+ )

276− ]

79+ |> Testable.Generator.with Testable.Generator.allElements

277− , p

80+ |> Testable.Generator.with Testable.Generator.nearbys

278− [ location

81+ , Testable.Generator.generate "Nearbys with alignment"

279− (el

82+ (\element nearby align ->

280− [ label name

83+ element

281− , width (px 20)

84+ [ nearby (box [ align ])

282− , height (px 20)

283− , alignLeft

284− , Background.color darkCharcoal

285− ]

286− none

287− )

288− ]

289− , p

290− [ location

291− (el

292− [ label name

293− , width (px 20)

294− , height (px 20)

295− , centerX

296− , Background.color darkCharcoal

297− ]

298− none

299− )

300− ]

301− , p

302− [ location

303− (el

304− [ label name

305− , width (px 20)

306− , height (px 20)

307− , alignRight

308− , Background.color darkCharcoal

309− ]

310− none

311− )

312− ]

313− , p

314− [ location

315− (el

316− [ label name

317− , width (px 20)

318− , height (px 20)

319− , alignTop

320− , Background.color darkCharcoal

321− ]

322− none

323− )

324− ]

325− , p

326− [ location

327− (el

328− [ label name

329− , width (px 20)

330− , height (px 20)

331− , centerY

332− , Background.color darkCharcoal

333− ]

334− none

335− )

336− ]

337− , p

338− [ location

339− (el

340− [ label name

341− , width (px 20)

85+ , width (px 200)

342− , height (px 20)

86+ , height (px 200)

343− , alignBottom

344− , Background.color darkCharcoal

87+ , Background.color red

345− ]

346− none

347− )

348− ]

349 ]

88 ]

350− ]

89+ none

351−

90+ )

352− master =

91+ |> Testable.Generator.with Testable.Generator.allElements

353− el [ padding 20 ] <|

92+ |> Testable.Generator.with Testable.Generator.nearbys

354− box

93+ |> Testable.Generator.with Testable.Generator.alignments

355− [ above (little "above-left" [ alignLeft ])

356− , above (little "above-center" [ centerX ])

357− , above (little "above-right" [ alignRight ])

358− , below (little "below-left" [ alignLeft ])

359− , below (little "below-center" [ centerX ])

360− , below (little "below-right" [ alignRight ])

361− , onRight (little "onRight-left" [ alignTop ])

362− , onRight (little "onRight-center" [ centerY ])

363− , onRight (little "onRight-right" [ alignBottom ])

364− , onLeft (little "onLeft-left" [ alignTop ])

365− , onLeft (little "onLeft-center" [ centerY ])

366− , onLeft (little "onLeft-right" [ alignBottom ])

367− , inFront (little "infront-left-top" [ alignTop, alignLeft ])

368− , inFront (little "infront-center-top" [ alignTop, centerX ])

369− , inFront (little "infront-right-top" [ alignTop, alignRight ])

370− , inFront (little "infront-left-center" [ centerY, alignLeft ])

371− , inFront (little "infront-center-center" [ centerY, centerX ])

372− , inFront (little "infront-right-center" [ centerY, alignRight ])

373− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

374− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

375− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

376− ]

377−

378− masterParagraph =

379− el [ padding 20 ] <|

380− p

381− [ above (little "above-left" [ alignLeft ])

382− , above (little "above-center" [ centerX ])

383− , above (little "above-right" [ alignRight ])

384− , below (little "below-left" [ alignLeft ])

385− , below (little "below-center" [ centerX ])

386− , below (little "below-right" [ alignRight ])

387− , onRight (little "onRight-left" [ alignTop ])

388− , onRight (little "onRight-center" [ centerY ])

389− , onRight (little "onRight-right" [ alignBottom ])

390− , onLeft (little "onLeft-left" [ alignTop ])

391− , onLeft (little "onLeft-center" [ centerY ])

392− , onLeft (little "onLeft-right" [ alignBottom ])

393− , inFront (little "infront-left-top" [ alignTop, alignLeft ])

394− , inFront (little "infront-center-top" [ alignTop, centerX ])

395− , inFront (little "infront-right-top" [ alignTop, alignRight ])

396− , inFront (little "infront-left-center" [ centerY, alignLeft ])

397− , inFront (little "infront-center-center" [ centerY, centerX ])

398− , inFront (little "infront-right-center" [ centerY, alignRight ])

399− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

400− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

401− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

402− ]

403− in

404− column

405− [ centerX, label "Nearby Elements", spacing 100 ]

406− [ layeredVisibility

407− , overlappingChildren

408−

409− -- Note: visibility checks like the above

410− -- need to be at the top so they're in the viewport

411− , master

412− , masterParagraph

413− , nearby above "above" box

414− , nearby below "below" box

415− , nearby inFront "inFront" box

416− , nearby onRight "onRight" box

417− , nearby onLeft "onLeft" box

418− , nearby behindContent "behindContent" transparentBox

419 ]

94 ]

420

421

@@ -436,3 +111,69 @@ overlappingChildren =

436 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]

111 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]

437 (justBox 40 darkGrey [])

112 (justBox 40 darkGrey [])

438 ]

113 ]

114+

115+

116+little name attrs =

117+ el

118+ ([ label name

119+ , width (px 5)

120+ , height (px 5)

121+ , Background.color darkCharcoal

122+ ]

123+ ++ attrs

124+ )

125+ none

126+

127+

128+master =

129+ el [ padding 20 ] <|

130+ box

131+ [ above (little "above-left" [ alignLeft ])

132+ , above (little "above-center" [ centerX ])

133+ , above (little "above-right" [ alignRight ])

134+ , below (little "below-left" [ alignLeft ])

135+ , below (little "below-center" [ centerX ])

136+ , below (little "below-right" [ alignRight ])

137+ , onRight (little "onRight-left" [ alignTop ])

138+ , onRight (little "onRight-center" [ centerY ])

139+ , onRight (little "onRight-right" [ alignBottom ])

140+ , onLeft (little "onLeft-left" [ alignTop ])

141+ , onLeft (little "onLeft-center" [ centerY ])

142+ , onLeft (little "onLeft-right" [ alignBottom ])

143+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

144+ , inFront (little "infront-center-top" [ alignTop, centerX ])

145+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

146+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

147+ , inFront (little "infront-center-center" [ centerY, centerX ])

148+ , inFront (little "infront-right-center" [ centerY, alignRight ])

149+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

150+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

151+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

152+ ]

153+

154+

155+masterParagraph =

156+ el [ padding 20 ] <|

157+ p

158+ [ above (little "above-left" [ alignLeft ])

159+ , above (little "above-center" [ centerX ])

160+ , above (little "above-right" [ alignRight ])

161+ , below (little "below-left" [ alignLeft ])

162+ , below (little "below-center" [ centerX ])

163+ , below (little "below-right" [ alignRight ])

164+ , onRight (little "onRight-left" [ alignTop ])

165+ , onRight (little "onRight-center" [ centerY ])

166+ , onRight (little "onRight-right" [ alignBottom ])

167+ , onLeft (little "onLeft-left" [ alignTop ])

168+ , onLeft (little "onLeft-center" [ centerY ])

169+ , onLeft (little "onLeft-right" [ alignBottom ])

170+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

171+ , inFront (little "infront-center-top" [ alignTop, centerX ])

172+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

173+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

174+ , inFront (little "infront-center-center" [ centerY, centerX ])

175+ , inFront (little "infront-right-center" [ centerY, alignRight ])

176+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

177+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

178+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

179+ ]

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)

3+{-| Test that spacing works

4+-}

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+ ]