master..f05fa94 · typeable/elm-ui

README.md−4

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

66

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.

68

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−

73## Contributing

69## Contributing

74

70

75Want to help out fixing bugs or reporting issues?

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

6+ "version": "1.1.6",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

src/Element/Input.elm+24−42

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

369

370 Just msg ->

371 Events.onClick msg

372− :: onKeyLookup

372+ :: onEnter msg

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

383 :: attrs

373 :: attrs

384 )

374 )

385 )

375 )

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

457 ]

447 ]

458 ++ attrs

448 ++ attrs

459 in

449 in

460− applyLabel

450+ applyLabel attributes

451+ label

452+ (Internal.element

453+ Internal.asEl

454+ Internal.div

455+ [ Internal.Attr <|

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

456+ Html.Attributes.attribute "role" "checkbox"

462− :: Internal.Attr

457+ , Internal.Attr <|

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

458+ Html.Attributes.attribute "aria-checked" <|

464 if checked then

459 if checked then

465 "true"

460 "true"

466

461

467 else

462 else

468 "false"

463 "false"

469− )

470− :: hiddenLabelAttribute label

464+ , hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

465+ , Element.centerY

478 , Element.height Element.fill

466 , Element.height Element.fill

479 , Element.width Element.shrink

467 , Element.width Element.shrink

480 ]

468 ]

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

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

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

714 thumbShadowStyle

702 thumbShadowStyle

715 )

703 )

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

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

717 , Internal.Attr

705 , Internal.Attr

718 (Html.Events.onInput

706 (Html.Events.onInput

719 (\str ->

707 (\str ->

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

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

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

780 ++ [ Element.behindContent <|

768 ++ [ Element.behindContent <|

781 if vertical then

769 if vertical then

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

770+ viewVerticalThumb factor thumbAttributes trackWidth

783

771

784 else

772 else

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

773+ viewHorizontalThumb factor thumbAttributes trackHeight

786 ]

774 ]

787 )

775 )

788 Element.none

776 Element.none

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

1565

1553

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

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

1567

1555

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

1569−

1570-}

1556-}

1571multiline :

1557multiline :

1572 List (Attribute msg)

1558 List (Attribute msg)

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

2105 Json.field "key" Json.string

2091 Json.field "key" Json.string

2106 |> Json.andThen decode

2092 |> Json.andThen decode

2107 in

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

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

2111− Html.Events.preventDefaultOn "keydown"

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

2113

2095

2114

2096

2115{-| -}

2097{-| -}

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

2205defaultCheckbox checked =

2187defaultCheckbox checked =

2206 Element.el

2188 Element.el

2207 [ Internal.htmlClass "focusable"

2189 [ Internal.htmlClass "focusable"

2208− , Element.width

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

2209− (Element.px 14)

2210 , Element.height (Element.px 14)

2191 , Element.height (Element.px 14)

2211 , Font.color white

2192 , Font.color white

2212 , Element.centerY

2193 , Element.centerY

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

2242

2223

2243 else

2224 else

2244 1

2225 1

2245− , Element.inFront

2226+ ]

2227+ (if checked then

2246− (Element.el

2228+ Element.el

2247 [ Border.color white

2229 [ Border.color white

2248 , Element.height (Element.px 6)

2230 , Element.height (Element.px 6)

2249 , Element.width (Element.px 9)

2231 , Element.width (Element.px 9)

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

2251 , Element.centerX

2233 , Element.centerX

2252 , Element.centerY

2234 , Element.centerY

2253 , Element.moveUp 1

2235 , Element.moveUp 1

2254− , Element.transparent (not checked)

2255 , Border.widthEach

2236 , Border.widthEach

2256 { top = 0

2237 { top = 0

2257 , left = 2

2238 , left = 2

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

2260 }

2241 }

2261 ]

2242 ]

2262 Element.none

2243 Element.none

2263− )

2244+

2264− ]

2245+ else

2265− Element.none

2246+ Element.none

2247+ )

src/Internal/Model.elm+3−9

@@ -1478,9 +1478,7 @@ 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.

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

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

1484

1482

1485 ( newFlag, newAttrs, newStyle ) =

1483 ( newFlag, newAttrs, newStyle ) =

1486 renderHeight len

1484 renderHeight len

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

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

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

2245 ]

2243 ]

2246 )

2244 )

2247− , Style

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

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

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

2250− ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")

2251− )

2252 (List.filterMap identity

2246 (List.filterMap identity

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

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

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

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

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

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

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

2657 ++ renderedProps

2651 ++ renderedProps

2658 ++ "\n}"

2652 ++ "\n}"

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

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

2660 ++ renderedProps

2654 ++ renderedProps

2661 ++ "\n}"

2655 ++ "\n}"

2662 ]

2656 ]

src/Internal/Style.elm+1−9

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

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

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

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)

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

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

1395− ]

1396 ]

1388 ]

1397 , Child (dot classes.heightFill)

1389 , Child (dot classes.heightFill)

1398 [ Prop "flex-grow" "100000"

1390 [ 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/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)

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

The content is the same.