86cedfe · typeable/elm-ui

git.iko.soy/typeable/elm-ui

on master help sign in

use focus-within for text areas

86cedfeMatthew Griffith7 years ago

src/Element/Input.elm+2−1

compare with master

unifiedsplit

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

732 )

733 ([ value textOptions.text

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

735− , Internal.htmlClass "focusable"

736 , hiddenLabelAttribute textOptions.label

735 , hiddenLabelAttribute textOptions.label

737 , spellcheck textInput.spellchecked

736 , spellcheck textInput.spellchecked

738 , Maybe.map autofill textInput.autofill

737 , Maybe.map autofill textInput.autofill

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

742 TextInputNode inputType ->

741 TextInputNode inputType ->

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

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

744 , Internal.htmlClass classes.inputText

743 , Internal.htmlClass classes.inputText

744+ , Internal.htmlClass "focusable"

745 ]

746

747 TextArea ->

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

769 ([ Element.width Element.fill

770 , Element.height (Element.px 100)

771 , Element.scrollbarY

772+ , Internal.htmlClass classes.focusedWithin

772 ]

773 ]

773 ++ redistributed.parent

774 ++ redistributed.parent

774 )

775 )

src/Internal/Model.elm+31−8

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

83 , reduceRecursive

84 , reduceStyles

85 , reduceStylesRecursive

86− , removeNever

86+ , removeNever

87− , renderFocusStyle

88 -- , renderFont

87 -- , renderFont

90 , renderFontClassName

89 , renderFontClassName

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

537 if static then

536 if static then

538 staticRoot

537 staticRoot

539 :: (styles

538 :: (styles

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

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

541 |> Tuple.second

540 |> Tuple.second

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

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

543 -- |> sortedReduce

542 -- |> sortedReduce

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

547

546

548 else

547 else

549 (styles

548 (styles

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

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

551 |> Tuple.second

550 |> Tuple.second

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

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

553 -- |> sortedReduce

552 -- |> sortedReduce

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

561 ( "static-stylesheet", staticRoot )

560 ( "static-stylesheet", staticRoot )

562 :: ( "dynamic-stylesheet"

561 :: ( "dynamic-stylesheet"

563 , styles

562 , styles

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

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

565 |> Tuple.second

564 |> Tuple.second

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

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

567 -- |> sortedReduce

566 -- |> sortedReduce

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

572 else

571 else

573 ( "dynamic-stylesheet"

572 ( "dynamic-stylesheet"

574 , styles

573 , styles

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

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

576 |> Tuple.second

575 |> Tuple.second

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

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

578 -- |> sortedReduce

577 -- |> sortedReduce

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

2206

2205

2207renderFocusStyle :

2206renderFocusStyle :

2208 FocusStyle

2207 FocusStyle

2209− -> Style

2208+ -> List Style

2210renderFocusStyle focus =

2209renderFocusStyle 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+ )

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

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

2212 (List.filterMap identity

2234 (List.filterMap identity

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

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

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

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

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

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

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

2232 ]

2254 ]

2233 )

2255 )

2256+ ]

2234

2257

2235

2258

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

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

src/Internal/Style.elm+1

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

204

205 -- , hoverOpaque = "hover-opaque"

206 , focus = "fcs"

207+ , focusedWithin = "focus-within"

207

208

208 -- , focusOpaque = "focus-opaque"

209 -- , focusOpaque = "focus-opaque"

209 , active = "atv"

210 , active = "atv"