18fb463..master · typeable/elm-ui

git.iko.soy/typeable/elm-ui

README.md+4

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

67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.

69+## Notes

70+

71+Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.

72+

69## Contributing

73## Contributing

71Want to help out fixing bugs or reporting issues?

75Want to help out fixing bugs or reporting issues?

elm.json+1−1

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

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

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

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

6− "version": "1.1.7",

6+ "version": "1.1.8",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

src/Element/Input.elm+29−13

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

369

370 Just msg ->

371 Events.onClick msg

372− :: onEnter msg

372+ :: onKeyLookup

373+ (\code ->

374+ if code == enter then

375+ Just msg

376+

377+ else if code == space then

378+ Just msg

379+

380+ else

381+ Nothing

382+ )

373 :: attrs

383 :: attrs

374 )

384 )

375 )

385 )

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

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

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

704 thumbShadowStyle

714 thumbShadowStyle

705 )

715 )

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

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

707 , Internal.Attr

717 , Internal.Attr

708 (Html.Events.onInput

718 (Html.Events.onInput

709 (\str ->

719 (\str ->

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

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

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

770 ++ [ Element.behindContent <|

780 ++ [ Element.behindContent <|

771 if vertical then

781 if vertical then

772− viewVerticalThumb factor thumbAttributes trackWidth

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

773

783

774 else

784 else

775− viewHorizontalThumb factor thumbAttributes trackHeight

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

776 ]

786 ]

777 )

787 )

778 Element.none

788 Element.none

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

1555

1565

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

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

1557

1567

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

1569+

1558-}

1570-}

1559multiline :

1571multiline :

1560 List (Attribute msg)

1572 List (Attribute msg)

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

2093 Json.field "key" Json.string

2105 Json.field "key" Json.string

2094 |> Json.andThen decode

2106 |> Json.andThen decode

2095 in

2107 in

2108+ -- We generally want these attached to the keydown event becaues it allows us to prevent default on things like spacebar scrolling the page.

2109+ -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

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

2110+ Internal.Attr <|

2111+ Html.Events.preventDefaultOn "keydown"

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

2097

2113

2098

2114

2099{-| -}

2115{-| -}

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

2189defaultCheckbox checked =

2205defaultCheckbox checked =

2190 Element.el

2206 Element.el

2191 [ Internal.htmlClass "focusable"

2207 [ Internal.htmlClass "focusable"

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

2208+ , Element.width

2209+ (Element.px 14)

2193 , Element.height (Element.px 14)

2210 , Element.height (Element.px 14)

2194 , Font.color white

2211 , Font.color white

2195 , Element.centerY

2212 , Element.centerY

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

2225

2242

2226 else

2243 else

2227 1

2244 1

2228− ]

2245+ , Element.inFront

2229− (if checked then

2230− Element.el

2246+ (Element.el

2231 [ Border.color white

2247 [ Border.color white

2232 , Element.height (Element.px 6)

2248 , Element.height (Element.px 6)

2233 , Element.width (Element.px 9)

2249 , Element.width (Element.px 9)

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

2235 , Element.centerX

2251 , Element.centerX

2236 , Element.centerY

2252 , Element.centerY

2237 , Element.moveUp 1

2253 , Element.moveUp 1

2254+ , Element.transparent (not checked)

2238 , Border.widthEach

2255 , Border.widthEach

2239 { top = 0

2256 { top = 0

2240 , left = 2

2257 , left = 2

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

2243 }

2260 }

2244 ]

2261 ]

2245 Element.none

2262 Element.none

2246−

2263+ )

2247− else

2264+ ]

2248− Element.none

2265+ Element.none

2249− )

src/Internal/Model.elm+6−2

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

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

2245 ]

2246 )

2247+ , Style

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

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

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

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

2251+ )

2248 (List.filterMap identity

2252 (List.filterMap identity

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

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

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

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

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

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

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

2653 ++ renderedProps

2657 ++ renderedProps

2654 ++ "\n}"

2658 ++ "\n}"

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

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

2656 ++ renderedProps

2660 ++ renderedProps

2657 ++ "\n}"

2661 ++ "\n}"

2658 ]

2662 ]