master..7ed3ecb · typeable/elm-ui

git.iko.soy/typeable/elm-ui

33 files changed+1176−870

unifiedsplit

README.md−4

@@ -66,10 +66,6 @@ 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−

7369## Contributing

7470

7571Want 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.8",

6+ "version": "1.1.5",

77 "exposed-modules": [

88 "Element",

99 "Element.Input",

src/Element.elm+5

@@ -1203,6 +1203,11 @@ 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+

12061211-}

12071212download :

12081213 List (Attribute msg)

src/Element/Input.elm+24−44

@@ -330,8 +330,6 @@ 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−

335333-}

336334button :

337335 List (Attribute msg)

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

369367

370368 Just msg ->

371369 Events.onClick 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− )

370+ :: onEnter msg

383371 :: attrs

384372 )

385373 )

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

457445 ]

458446 ++ attrs

459447 in

460− applyLabel

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

462− :: Internal.Attr

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

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

464457 if checked then

465458 "true"

466459

467460 else

468461 "false"

469− )

470− :: hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

462+ , hiddenLabelAttribute label

463+ , Element.centerY

478464 , Element.height Element.fill

479465 , Element.width Element.shrink

480466 ]

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

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

714700 thumbShadowStyle

715701 )

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

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

717703 , Internal.Attr

718704 (Html.Events.onInput

719705 (\str ->

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

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

780766 ++ [ Element.behindContent <|

781767 if vertical then

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

768+ viewVerticalThumb factor thumbAttributes trackWidth

783769

784770 else

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

771+ viewHorizontalThumb factor thumbAttributes trackHeight

786772 ]

787773 )

788774 Element.none

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

15651551

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

15671553

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

1569−

15701554-}

15711555multiline :

15721556 List (Attribute msg)

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

21052089 Json.field "key" Json.string

21062090 |> Json.andThen decode

21072091 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

2110− Internal.Attr <|

2111− Html.Events.preventDefaultOn "keydown"

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

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

21132093

21142094

21152095{-| -}

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

22052185defaultCheckbox checked =

22062186 Element.el

22072187 [ Internal.htmlClass "focusable"

2208− , Element.width

2209− (Element.px 14)

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

22102189 , Element.height (Element.px 14)

22112190 , Font.color white

22122191 , Element.centerY

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

22422221

22432222 else

22442223 1

2245− , Element.inFront

2246− (Element.el

2224+ ]

2225+ (if checked then

2226+ Element.el

22472227 [ Border.color white

22482228 , Element.height (Element.px 6)

22492229 , Element.width (Element.px 9)

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

22512231 , Element.centerX

22522232 , Element.centerY

22532233 , Element.moveUp 1

2254− , Element.transparent (not checked)

22552234 , Border.widthEach

22562235 { top = 0

22572236 , left = 2

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

22602239 }

22612240 ]

22622241 Element.none

2263− )

2264− ]

2265− Element.none

2242+

2243+ else

2244+ Element.none

2245+ )

src/Element/Region.elm+1−5

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

101101 Internal.Describe LivePolite

102102

103103

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−-}

104+{-| -}

109105description : String -> Attribute msg

110106description =

111107 Internal.Describe << Internal.Label

src/Internal/Model.elm+3−9

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

14781478 Single

14791479 cls

14801480 "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.

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

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

14841482

14851483 ( newFlag, newAttrs, newStyle ) =

14861484 renderHeight len

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

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

22452243 ]

22462244 )

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

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

22522246 (List.filterMap identity

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

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

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

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

26572651 ++ renderedProps

26582652 ++ "\n}"

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

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

26602654 ++ renderedProps

26612655 ++ "\n}"

26622656 ]

src/Internal/Style.elm+5−20

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

961961 ]

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

963963 [ Prop "display" "block"

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

964+ , Child "img"

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

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

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

975968 ]

976969 ]

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

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

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

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

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

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

1395− ]

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

13961381 ]

13971382 , Child (dot classes.heightFill)

13981383 [ Prop "flex-grow" "100000"

tests-rendering/cases/open/LabelledInputAlignRight.elmdeleted−28

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

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.elmdeleted−46

@@ -1,46 +0,0 @@

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.elmdeleted−63

@@ -1,63 +0,0 @@

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.elmdeleted−19

@@ -1,19 +0,0 @@

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/Layout/Columns/DistributeHeight.elmdeleted−46

@@ -1,46 +0,0 @@

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.elmdeleted−86

@@ -1,86 +0,0 @@

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.elmdeleted−48

@@ -1,48 +0,0 @@

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/SafariColumnBug.elmnew file+14

@@ -0,0 +1,14 @@

1+module SafariColumnBug exposing (main)

3+import Browser

4+import Element exposing (column, el, fill, height, layout, scrollbarY, text)

5+import Html exposing (Html)

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/Layout/Columns/SafariTwo.elm → tests-rendering/cases/resolved/Layout/SafariTwo.elmrenamed

The content is the same.

tests-rendering/cases/resolved/Images/ImageSizing.elm → tests-rendering/cases/resolved/Misc/ImageSizing.elmrenamed+3−7

@@ -1,9 +1,6 @@

11module ImageSizing exposing (main)

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

4−-}

5−

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

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

74import Element.Border as Border

85import Element.Font as Font

96import Html exposing (Html)

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

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

1512 E.image

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

17− -- ,

18− -- E.width E.fill

19− E.height E.fill

14+ E.width E.fill

15+ , E.height E.fill

2016 ]

2117 -- <| px 500 ]

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

tests-rendering/cases/resolved/Layout/NestedParagraphs.elm → tests-rendering/cases/resolved/NestedParagraphs.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Layout.NestedParagraphs exposing (view)

1+module NestedParagraphs exposing (view)

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

tests-rendering/cases/resolved/Nearby/InFrontIssue.elm → tests-rendering/cases/resolved/ZIndex/InFrontIssue.elmrenamed+30−3

@@ -1,4 +1,4 @@

1−module Nearby.InFrontIssue exposing (view)

1+module InFrontIssue exposing (main)

33import Browser

44import Element as Ui exposing (..)

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

77import Html exposing (Html)

10−view : Html Msg

11−view =

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 =

1230 let

1331 a =

1432 el

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

6280 , paddingXY 0 30

6381 ]

6482 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/Nearby/Issue22ZIndex.elm → tests-rendering/cases/resolved/ZIndex/Issue22ZIndex.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.Issue22ZIndex exposing (main)

1+module Issue22ZIndex exposing (main)

33import Browser

44import Element as Ui exposing (..)

tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elm → tests-rendering/cases/resolved/ZIndex/OtherInFrontIssue.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.OtherInFrontIssue exposing (main)

1+module OtherInFrontIssue exposing (main)

33import Browser

44import Element exposing (Element)

tests-rendering/cases/resolved/Nearby/ZIndexRegression.elm → tests-rendering/cases/resolved/ZIndex/ZIndexRegression.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.ZIndexRegression exposing (main)

1+module ZIndexRegression exposing (main)

33import Element exposing (..)

44import Element.Background as Background

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

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

2020element label attrs =

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

2222 -- ]

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 =

4323 mapEveryCombo3

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

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

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

5131 contents

5232

5333

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−

9734layouts =

9835 [ ( "el"

9936 , \attrs child ->

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

11855 ]

11956

12057

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−

18558nearbys =

186− [ ( "inFront", inFront )

187− , ( "above", above )

188− , ( "onLeft", onLeft )

189− , ( "onRight", onRight )

190− , ( "below", below )

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

59+ [ inFront

60+ , above

61+ , onLeft

62+ , onRight

63+ , below

64+ , behindContent

21065 ]

21166

21267

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−

24068contents =

24169 [ ( "none", none )

24270 , ( "short text", text short )

243−

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

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

24572 , ( "box"

24673 , box

24774 )

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

294121 listOne

295122

296123

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−

317124sizes render =

318125 List.concatMap

319126 (\( widthLen, heightLen ) ->

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

356163 |> maximum 100

357164 |> minimum 50

358165 ]

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.elmdeleted−49

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

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+33−15

@@ -2,31 +2,50 @@ module Tests.All exposing (main)

33{-| -}

5−import Layout.NestedParagraphs

5+import ClippedElInFixedWidthColumn

6+import ElInFixedHeightColumn

7+import InFrontSize

68import Layout.SafariBugIssue147

9+import NestedParagraphs

10+import StackedScrollingColumnsHeight

711import Testable.Generator

812import Testable.Runner

9−import Tests.Alignment

13+import Tests.Basic

14+import Tests.ColumnAlignment

15+import Tests.ColumnSpacing

16+import Tests.ElementAlignment

1017import Tests.Nearby

11−import Tests.Spacing

18+import Tests.RowAlignment

19+import Tests.RowSpacing

1220import Tests.TextWrapping

1321import Tests.Transparency

22+import WeirdCentering

1423

1524

1625main : Testable.Runner.TestableProgram

1726main =

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

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

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

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

2847 -- ]

29− , issues

48+ -- , issues

3049 ]

3150

3251

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

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

3655 -- ,

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

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

3957

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

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

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

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

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

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

4462 ]

tests-rendering/src/Tests/Basic.elmnew file+54

@@ -0,0 +1,54 @@

1+module Tests.Basic exposing (view)

3+{-| -}

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.elmnew file+176

@@ -0,0 +1,176 @@

1+module Tests.ColumnAlignment exposing (..)

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.elmnew file+68

@@ -0,0 +1,68 @@

1+module Tests.ColumnSpacing exposing (..)

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.elmnew file+111

@@ -0,0 +1,111 @@

1+module Tests.ElementAlignment exposing (..)

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

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

88import Testable.Element exposing (..)

99import Testable.Element.Background as Background

1010import Testable.Element.Font as Font

11−import Testable.Generator

1211import Testable.Runner

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

1413

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

5857

5958

6059{-| -}

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

60+main : Html.Html msg

61+main =

62+ Testable.Runner.show view

63+

64+

65+{-| -}

66+view : Testable.Element msg

6267view =

63− List.concat

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

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

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

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

68− ]

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

68+ let

69+ transparentBox attrs =

70+ el

71+ ([ Font.color white

72+ , width (px 50)

73+ , height (px 50)

74+ , Background.color white

75+ ]

76+ ++ attrs

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

93+ -- [ location

94+ -- (el

95+ -- [ width (px 20)

96+ -- , height (px 20)

97+ -- , alignLeft

98+ -- , Background.color darkCharcoal

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

76263 ]

77− none

78− )

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

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

275+ )

276+ ]

277+ , p

278+ [ location

279+ (el

280+ [ label name

281+ , width (px 20)

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)

342+ , height (px 20)

343+ , alignBottom

344+ , Background.color darkCharcoal

345+ ]

346+ none

347+ )

348+ ]

88349 ]

89− none

90− )

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

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

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

350+ ]

351+

352+ master =

353+ el [ padding 20 ] <|

354+ box

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

94419 ]

95420

96421

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

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

112437 (justBox 40 darkGrey [])

113438 ]

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.elmnew file+212

@@ -0,0 +1,212 @@

1+module Tests.RowAlignment exposing (..)

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.elmnew file+69

@@ -0,0 +1,69 @@

1+module Tests.RowSpacing exposing (..)

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.elmdeleted−36

@@ -1,36 +0,0 @@

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