86cedfe · typeable/elm-ui

git.iko.soy/typeable/elm-ui

use focus-within for text areas

commit86cedfede6fa3ec94fa7c199a026f041d34d761a authorMatthew Griffith <mdg.griffith@gmail.com> dateFri 21 Jun 2019, 18:31 (7 years ago) parentdf6faef

3 files changed+34−9

compare with master

unifiedsplit

src/Element/Input.elm+2−1 src/Internal/Model.elm+31−8 src/Internal/Style.elm+1

src/Element/Input.elm+2−1

@@ -732,7 +732,6 @@ textHelper textInput attrs textOptions =

732732 )

733733 ([ value textOptions.text

734734 , Internal.Attr (Html.Events.onInput textOptions.onChange)

735− , Internal.htmlClass "focusable"

736735 , hiddenLabelAttribute textOptions.label

737736 , spellcheck textInput.spellchecked

738737 , Maybe.map autofill textInput.autofill

@@ -742,6 +741,7 @@ textHelper textInput attrs textOptions =

742741 TextInputNode inputType ->

743742 [ Internal.Attr (Html.Attributes.type_ inputType)

744743 , Internal.htmlClass classes.inputText

744+ , Internal.htmlClass "focusable"

745745 ]

746746

747747 TextArea ->

@@ -769,6 +769,7 @@ textHelper textInput attrs textOptions =

769769 ([ Element.width Element.fill

770770 , Element.height (Element.px 100)

771771 , Element.scrollbarY

772+ , Internal.htmlClass classes.focusedWithin

772773 ]

773774 ++ redistributed.parent

774775 )

src/Internal/Model.elm+31−8

@@ -83,8 +83,7 @@ module Internal.Model exposing

8383 , reduceRecursive

8484 , reduceStyles

8585 , reduceStylesRecursive

86− , removeNever

87− , renderFocusStyle

86+ , removeNever

8887 -- , renderFont

8988

9089 , renderFontClassName

@@ -537,7 +536,7 @@ embedWith static opts styles children =

537536 if static then

538537 staticRoot

539538 :: (styles

540− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

539+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

541540 |> Tuple.second

542541 -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

543542 -- |> sortedReduce

@@ -547,7 +546,7 @@ embedWith static opts styles children =

547546

548547 else

549548 (styles

550− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

549+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

551550 |> Tuple.second

552551 -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

553552 -- |> sortedReduce

@@ -561,7 +560,7 @@ embedKeyed static opts styles children =

561560 ( "static-stylesheet", staticRoot )

562561 :: ( "dynamic-stylesheet"

563562 , styles

564− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

563+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

565564 |> Tuple.second

566565 -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

567566 -- |> sortedReduce

@@ -572,7 +571,7 @@ embedKeyed static opts styles children =

572571 else

573572 ( "dynamic-stylesheet"

574573 , styles

575− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

574+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

576575 |> Tuple.second

577576 -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

578577 -- |> sortedReduce

@@ -2206,9 +2205,32 @@ renderFontClassName font current =

22062205

22072206renderFocusStyle :

22082207 FocusStyle

2209− -> Style

2208+ -> List Style

22102209renderFocusStyle focus =

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

2210+ [ Style (Internal.Style.dot classes.focusedWithin ++ ":focus-within")

2211+ (List.filterMap identity

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

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

2214+ , Maybe.map

2215+ (\shadow ->

2216+ Property "box-shadow"

2217+ (formatBoxShadow

2218+ { color = shadow.color

2219+ , offset =

2220+ shadow.offset

2221+ |> Tuple.mapFirst toFloat

2222+ |> Tuple.mapSecond toFloat

2223+ , inset = False

2224+ , blur = toFloat shadow.blur

2225+ , size = toFloat shadow.size

2226+ }

2227+ )

2228+ )

2229+ focus.shadow

2230+ , Just <| Property "outline" "none"

2231+ ]

2232+ )

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

22122234 (List.filterMap identity

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

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

@@ -2231,6 +2253,7 @@ renderFocusStyle focus =

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

22322254 ]

22332255 )

2256+ ]

22342257

22352258

22362259focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }

src/Internal/Style.elm+1

@@ -204,6 +204,7 @@ classes =

204204

205205 -- , hoverOpaque = "hover-opaque"

206206 , focus = "fcs"

207+ , focusedWithin = "focus-within"

207208

208209 -- , focusOpaque = "focus-opaque"

209210 , active = "atv"