master..c2bb294 · typeable/elm-ui

git.iko.soy/typeable/elm-ui

12 files changed+43−319

unifiedsplit

README.md−4 elm.json+1−1 src/Element/Input.elm+24−42 src/Internal/Model.elm+3−9 src/Internal/Style.elm+1−9 tests-rendering/cases/open/LabelledInputAlignRight.elm−28 tests-rendering/cases/open/NearbyElementBordersOverlap.elm−46 tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elm−46 tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elm−86 tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elm−48 tests-rendering/cases/resolved/Layout/SafariColumnBug.elm+14 tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elm → tests-rendering/cases/resolved/Layout/SafariTwo.elm

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

77 "exposed-modules": [

88 "Element",

99 "Element.Input",

src/Element/Input.elm+24−42

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

369369

370370 Just msg ->

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

372+ :: onEnter msg

383373 :: attrs

384374 )

385375 )

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

457447 ]

458448 ++ attrs

459449 in

460− applyLabel

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

462− :: Internal.Attr

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

450+ applyLabel attributes

451+ label

452+ (Internal.element

453+ Internal.asEl

454+ Internal.div

455+ [ Internal.Attr <|

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

457+ , Internal.Attr <|

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

464459 if checked then

465460 "true"

466461

467462 else

468463 "false"

469− )

470− :: hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

464+ , hiddenLabelAttribute label

465+ , Element.centerY

478466 , Element.height Element.fill

479467 , Element.width Element.shrink

480468 ]

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

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

714702 thumbShadowStyle

715703 )

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

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

717705 , Internal.Attr

718706 (Html.Events.onInput

719707 (\str ->

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

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

780768 ++ [ Element.behindContent <|

781769 if vertical then

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

770+ viewVerticalThumb factor thumbAttributes trackWidth

783771

784772 else

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

773+ viewHorizontalThumb factor thumbAttributes trackHeight

786774 ]

787775 )

788776 Element.none

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

15651553

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

15671555

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

1569−

15701556-}

15711557multiline :

15721558 List (Attribute msg)

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

21052091 Json.field "key" Json.string

21062092 |> Json.andThen decode

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

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

21132095

21142096

21152097{-| -}

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

22052187defaultCheckbox checked =

22062188 Element.el

22072189 [ Internal.htmlClass "focusable"

2208− , Element.width

2209− (Element.px 14)

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

22102191 , Element.height (Element.px 14)

22112192 , Font.color white

22122193 , Element.centerY

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

22422223

22432224 else

22442225 1

2245− , Element.inFront

2246− (Element.el

2226+ ]

2227+ (if checked then

2228+ Element.el

22472229 [ Border.color white

22482230 , Element.height (Element.px 6)

22492231 , Element.width (Element.px 9)

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

22512233 , Element.centerX

22522234 , Element.centerY

22532235 , Element.moveUp 1

2254− , Element.transparent (not checked)

22552236 , Border.widthEach

22562237 { top = 0

22572238 , left = 2

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

22602241 }

22612242 ]

22622243 Element.none

2263− )

2264− ]

2265− Element.none

2244+

2245+ else

2246+ Element.none

2247+ )

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+1−9

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

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

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

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

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

13961388 ]

13971389 , Child (dot classes.heightFill)

13981390 [ 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)

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.