git.iko.soy/typeable/elm-ui
on master help sign in
Merge remote-tracking branch 'mdgriffith/master'
b060765Tom Stejskal
cases/elm.jsonnew file+25
compare with master
unifiedsplit
@@ -0,0 +1,25 @@
1+{
2+ "type": "application",
3+ "source-directories": [
4+ "open",
5+ "../src/"
6+ ],
7+ "elm-version": "0.19.0",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.0",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
15+ },
16+ "indirect": {
17+ "elm/time": "1.0.0",
18+ "elm/url": "1.0.0"
19+ }
20+ },
21+ "test-dependencies": {
22+ "direct": {},
23+ "indirect": {}
24+ }
25+}
cases/open/MultilineInput.elmnew file+89
@@ -0,0 +1,89 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (..)
5+import Element.Input exposing (labelLeft, multiline)
6+import Html exposing (Html)
7+import Html.Events exposing (onClick)
8+
9+
10+type alias Model =
11+ { count : Int }
12+
13+
14+initialModel : Model
15+initialModel =
16+ { count = 0 }
17+
18+
19+type Msg
20+ = Increment
21+ | Decrement
22+ | MLChanged String
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+ MLChanged s ->
35+ model
36+
37+
38+testtxt =
39+ "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"
40+
41+
42+testtxtnewlines =
43+ """orem Ipsum is simply dummy text of the printing
44+and typesetting industry. Lorem Ipsum has been the industry's
45+standard dummy text ever since the 1500s, when an unknown
46+printer took a galley of type and scrambled it to make a type specimen book.
47+It has survived not only five centuries, but also the leap into electronic
48+typesetting
49+, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"""
50+
51+
52+view : Model -> Html Msg
53+view model =
54+ layout [] <|
55+ column
56+ [ width (px 500)
57+ , spacing 50
58+ ]
59+ [ multiline []
60+ { onChange = MLChanged
61+ , text = testtxt
62+ , placeholder = Nothing
63+ , spellcheck = False
64+ , label = labelLeft [ width (px 200) ] <| text "Default height"
65+ }
66+ , multiline [ height shrink ]
67+ { onChange = MLChanged
68+ , text = testtxt
69+ , placeholder = Nothing
70+ , spellcheck = False
71+ , label = labelLeft [ width (px 200) ] <| text "Shrink - no nl"
72+ }
73+ , multiline [ height shrink ]
74+ { onChange = MLChanged
75+ , text = testtxtnewlines
76+ , placeholder = Nothing
77+ , spellcheck = False
78+ , label = labelLeft [ width (px 200) ] <| text "Shrink - w/nl"
79+ }
80+ ]
81+
82+
83+main : Program () Model Msg
84+main =
85+ Browser.sandbox
86+ { init = initialModel
87+ , view = view
88+ , update = update
89+ }
src/Element.elm+21−7
@@ -1226,28 +1226,42 @@ downloadAs attrs { url, filename, label } =
1226 (Internal.Unkeyed [ label ])
1226 (Internal.Unkeyed [ label ])
1227
1227
1228
1228
1229+
1230+{- NEARBYS -}
1231+
1232+
1233+createNearby : Internal.Location -> Element msg -> Attribute msg
1234+createNearby loc element =
1235+ case element of
1236+ Internal.Empty ->
1237+ Internal.NoAttribute
1238+
1239+ _ ->
1240+ Internal.Nearby loc element
1241+
1242+
1229{-| -}
1243{-| -}
1230below : Element msg -> Attribute msg
1244below : Element msg -> Attribute msg
1231below element =
1245below element =
1232− Internal.Nearby Internal.Below element
1246+ createNearby Internal.Below element
1233
1247
1234
1248
1235{-| -}
1249{-| -}
1236above : Element msg -> Attribute msg
1250above : Element msg -> Attribute msg
1237above element =
1251above element =
1238− Internal.Nearby Internal.Above element
1252+ createNearby Internal.Above element
1239
1253
1240
1254
1241{-| -}
1255{-| -}
1242onRight : Element msg -> Attribute msg
1256onRight : Element msg -> Attribute msg
1243onRight element =
1257onRight element =
1244− Internal.Nearby Internal.OnRight element
1258+ createNearby Internal.OnRight element
1245
1259
1246
1260
1247{-| -}
1261{-| -}
1248onLeft : Element msg -> Attribute msg
1262onLeft : Element msg -> Attribute msg
1249onLeft element =
1263onLeft element =
1250− Internal.Nearby Internal.OnLeft element
1264+ createNearby Internal.OnLeft element
1251
1265
1252
1266
1253{-| This will place an element in front of another.
1267{-| This will place an element in front of another.
@@ -1257,14 +1271,14 @@ onLeft element =
1257-}
1271-}
1258inFront : Element msg -> Attribute msg
1272inFront : Element msg -> Attribute msg
1259inFront element =
1273inFront element =
1260− Internal.Nearby Internal.InFront element
1274+ createNearby Internal.InFront element
1261
1275
1262
1276
1263{-| This will place an element between the background and the content of an element.
1277{-| This will place an element between the background and the content of an element.
1264-}
1278-}
1265behindContent : Element msg -> Attribute msg
1279behindContent : Element msg -> Attribute msg
1266behindContent element =
1280behindContent element =
1267− Internal.Nearby Internal.Behind element
1281+ createNearby Internal.Behind element
1268
1282
1269
1283
1270{-| -}
1284{-| -}
@@ -1285,7 +1299,7 @@ scale n =
1285 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))
1299 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))
1286
1300
1287
1301
1288−{-| Angle is given in radians. [Here are some conversion functions if you want another unit.](https://package.elm-lang.org/packages/elm/core/latest/Basics#degrees)
1302+{-| Angle is given in radians. [Here are some conversion functions if you want to use another unit.](https://package.elm-lang.org/packages/elm/core/latest/Basics#degrees)
1289-}
1303-}
1290rotate : Float -> Attr decorative msg
1304rotate : Float -> Attr decorative msg
1291rotate angle =
1305rotate angle =
src/Element/Input.elm+316−301
@@ -669,304 +669,157 @@ type alias Text msg =
669 }
669 }
670
670
671
671
672−type Padding
673− = Padding Int Int Int Int
674−
675−
676−inheritablePlaceholderAttributes attr =
677− case attr of
678− Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
679− True
680−
681− Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
682− True
683−
684− Internal.StyleClass _ (Internal.Transform _) ->
685− True
686−
687− _ ->
688− False
689−
690−
691−{-|
672+{-| -}
692−
693− attributes
694−
695− <parent>
696− attribute::width/height fill
697− attribtue::alignment
698− attribute::spacing
699− attribute::fontsize/family/lineheight
700− <el-wrapper>
701− attribute::nearby(placeholder)
702− attribute::width/height fill
703− inFront ->
704− placeholder
705− attribute::padding
706−
707−
708− <input>
709− textarea ->
710− special height for height-content
711− attribtue::padding
712− attribute::lineHeight
713− attributes
714− <label>
715−
716−-}
717textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg
673textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg
718textHelper textInput attrs textOptions =
674textHelper textInput attrs textOptions =
719 let
675 let
720− attributes =
676+ withDefaults =
721 defaultTextBoxStyle ++ attrs
677 defaultTextBoxStyle ++ attrs
722
678
723− behavior =
679+ redistributed =
724− [ Internal.Attr (Html.Events.onInput textOptions.onChange) ]
680+ redistribute withDefaults
725
681
726− forPlaceholder =
682+ moveUpToCompensateForPadding =
727− List.filter inheritablePlaceholderAttributes attributes
683+ calcMoveToCompensateForPadding withDefaults
728
684
729− noNearbys =
685+ onlySpacing attr =
730− List.filter (not << forNearby) attributes
731−
732− forNearby attr =
733 case attr of
686 case attr of
734− Internal.Nearby _ _ ->
687+ Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->
735 True
688 True
736
689
737 _ ->
690 _ ->
738 False
691 False
739
692
740− ( inputNode, inputAttrs, inputChildren ) =
693+ isHeightContent attr =
741− case textInput.type_ of
742− TextInputNode inputType ->
743− ( "input"
744− , [ Internal.Attr (Html.Attributes.type_ inputType)
745− , value textOptions.text
746− , spellcheck textInput.spellchecked
747− , Internal.htmlClass classes.inputText
748− , case textInput.autofill of
749− Nothing ->
750− Internal.NoAttribute
751−
752− Just fill ->
753− autofill fill
754− ]
755− ++ noNearbys
756− , []
757− )
758−
759− TextArea ->
760− let
761− { maybePadding, heightContent, maybeSpacing, adjustedAttributes, maybeBorder } =
762− (value textOptions.text :: attributes)
763− |> List.foldr
764− (\attr found ->
765− case attr of
694+ case attr of
766− Internal.Describe _ ->
767− found
768−
769− Internal.Height len ->
770− case found.heightContent of
771− Nothing ->
772− { found
773− | heightContent = Just (Internal.isContent len)
774− , adjustedAttributes = attr :: found.adjustedAttributes
775− }
776−
777− _ ->
778− found
779−
780− Internal.StyleClass _ (Internal.BorderWidth _ t r b l) ->
781− case found.maybeBorder of
782− Nothing ->
783− { found
784− | maybeBorder = Just (Padding t r b l)
785− , adjustedAttributes = attr :: found.adjustedAttributes
786− }
787−
788− _ ->
789− found
790−
791− Internal.StyleClass _ (Internal.PaddingStyle _ t r b l) ->
792− case found.maybePadding of
793− Nothing ->
794− { found
795− | maybePadding = Just (Padding t r b l)
796−
797− -- Skip storing padding because it's being customized later
798− , adjustedAttributes = found.adjustedAttributes
799− }
800−
801− _ ->
802− found
803−
804− Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->
805− case found.maybeSpacing of
806− Nothing ->
807− { found
808− | maybeSpacing = Just y
809− , adjustedAttributes = attr :: found.adjustedAttributes
810− }
811−
812− _ ->
813− found
814−
815− _ ->
816− { found | adjustedAttributes = attr :: found.adjustedAttributes }
817− )
818− { maybePadding = Nothing
819− , heightContent = Nothing
820− , maybeBorder = Nothing
821− , maybeSpacing = Nothing
822− , adjustedAttributes = []
823− }
824−
825− -- NOTE: This is where default text spacing is set
826− spacing =
827− Maybe.withDefault 5 maybeSpacing
828− in
829− ( "textarea"
830− , [ spellcheck textInput.spellchecked
831− , Internal.htmlClass classes.inputMultiline
832− , Maybe.map autofill textInput.autofill
833− |> Maybe.withDefault Internal.NoAttribute
834− , case maybePadding of
835− Nothing ->
836− Internal.NoAttribute
837−
838− Just (Padding t r b l) ->
839− Element.paddingEach
840− { top = max 0 (t - (spacing // 2))
841− , bottom = max 0 (b - (spacing // 2))
842− , left = l
843− , right = r
844− }
845− , case heightContent of
846− Nothing ->
847− Internal.NoAttribute
848−
849− Just True ->
850− textHeightContent textOptions.text spacing maybePadding maybeBorder
851−
852− Just False ->
853− Internal.NoAttribute
854− ]
855− ++ adjustedAttributes
856− , []
857− )
858−
859− heightFillFromChild =
860− Internal.get attributes <|
861− \attr ->
862− case attr of
863− Internal.Height (Internal.Fill _) ->
695+ Internal.Height Internal.Content ->
864− True
865−
866− _ ->
867− False
868−
869− attributesFromChild =
870− Internal.get attributes <|
871− \attr ->
872− case attr of
873− Internal.Width (Internal.Fill _) ->
874− True
875−
876− Internal.Height (Internal.Fill _) ->
877− True
878−
879− Internal.AlignX _ ->
880− True
881−
882− Internal.AlignY _ ->
883− True
884−
885− Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->
886− True
887−
888− Internal.StyleClass _ (Internal.FontSize _) ->
889− True
890−
891− Internal.StyleClass _ (Internal.FontFamily _ _) ->
892− True
696+ True
893
697
894− _ ->
698+ _ ->
895− False
699+ False
896
700
897− nearbys =
701+ bottomPadding attr =
898− Internal.get attributes <|
702+ case attr of
899− \attr ->
703+ Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->
900− case attr of
704+ Just <|
901− Internal.Nearby _ _ ->
705+ Element.paddingEach
902− True
706+ { top = 0
707+ , right = 0
708+ , bottom = b
709+ , left = 0
710+ }
903
711
904− _ ->
712+ _ ->
905− False
713+ Nothing
906
714
907− inputPadding =
715+ heightContent =
908− Internal.get attributes <|
716+ case textInput.type_ of
909− \attr ->
717+ TextInputNode inputType ->
910− case attr of
718+ False
911− Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
912− True
913
719
914− _ ->
720+ TextArea ->
915− False
721+ List.any isHeightContent withDefaults
916
722
917 inputElement =
723 inputElement =
918 Internal.element
724 Internal.element
919 Internal.asEl
725 Internal.asEl
920− Internal.div
726+ (case textInput.type_ of
921− (Element.width Element.fill
727+ TextInputNode inputType ->
922− :: List.concat
728+ Internal.NodeName "input"
923− [ nearbys
729+
924− , heightFillFromChild
730+ TextArea ->
925− , case textOptions.placeholder of
731+ Internal.NodeName "textarea"
926− Nothing ->
732+ )
927− []
733+ ([ value textOptions.text
928−
734+ , Internal.Attr (Html.Events.onInput textOptions.onChange)
929− Just (Placeholder placeholderAttrs placeholderEl) ->
735+ , hiddenLabelAttribute textOptions.label
930− [ Element.inFront
736+ , spellcheck textInput.spellchecked
931− (Element.el
737+ , Maybe.map autofill textInput.autofill
932− (defaultTextPadding
738+ |> Maybe.withDefault Internal.NoAttribute
933− :: forPlaceholder
739+ ]
934− ++ [ Font.color charcoal
740+ ++ (case textInput.type_ of
935− , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)
741+ TextInputNode inputType ->
936− , Border.color (Element.rgba 0 0 0 0)
742+ [ Internal.Attr (Html.Attributes.type_ inputType)
937− , Background.color (Element.rgba 0 0 0 0)
743+ , Internal.htmlClass classes.inputText
744+ , Internal.htmlClass "focusable"
745+ ]
746+
747+ TextArea ->
748+ [ Element.clip
938− , Element.height Element.fill
749+ , Element.height Element.fill
939− , Element.width Element.fill
750+ , Internal.htmlClass classes.inputMultiline
940− , Element.alpha
751+ , Element.alpha 0.3
941− (if textOptions.text == "" then
752+ , moveUpToCompensateForPadding
942− 1
943−
944− else
945− 0
946− )
947− ]
948− ++ placeholderAttrs
949− )
950− placeholderEl
951− )
952 ]
753 ]
953− ]
754+ )
755+ ++ redistributed.input
954 )
756 )
955− (Internal.Unkeyed
757+ (Internal.Unkeyed [])
758+
759+ wrappedInput =
760+ -- if heightContent then
761+ case textInput.type_ of
762+ TextArea ->
763+ -- textarea with height-content means that
764+ -- the input element is rendered `inFront` and transparently.
765+ -- Then the input text is rendered as the actual element.
956− [ Internal.element
766+ Internal.element
957 Internal.asEl
767 Internal.asEl
958− (Internal.NodeName inputNode)
768+ Internal.div
769+ ([ Element.width Element.fill
770+ , Element.height (Element.px 100)
771+ , Element.scrollbarY
772+ , Internal.htmlClass classes.focusedWithin
773+ ]
774+ ++ redistributed.parent
775+ )
776+ (Internal.Unkeyed
777+ [ Internal.element
778+ Internal.asParagraph
779+ Internal.div
780+ (Element.width Element.fill
781+ :: Element.height Element.fill
782+ :: Element.inFront inputElement
783+ :: Internal.htmlClass classes.inputMultiline
959− (List.concat
784+ :: List.concat
960− [ [ focusDefault attrs
785+ [ if heightContent then
961− , hiddenLabelAttribute textOptions.label
786+ redistributed.wrapper
787+
788+ else
789+ redistributed.wrapper
790+ ++ List.filterMap bottomPadding redistributed.parent
791+ , case textOptions.placeholder of
792+ Nothing ->
962− ]
793+ []
963− , inputAttrs
794+
964− , behavior
795+ Just place ->
796+ [ renderPlaceholder place redistributed.cover (textOptions.text == "")
797+ ]
798+ ]
799+ )
800+ (Internal.Unkeyed
801+ [ Internal.unstyled (Html.text textOptions.text) ]
802+ )
965 ]
803 ]
966 )
804 )
805+
806+ TextInputNode inputType ->
807+ Internal.element
808+ Internal.asEl
809+ Internal.div
810+ (Element.width Element.fill
811+ :: List.concat
812+ [ redistributed.parent
813+ , case textOptions.placeholder of
814+ Nothing ->
815+ []
816+
817+ Just place ->
818+ [ renderPlaceholder place redistributed.cover (textOptions.text == "")
819+ ]
820+ ]
821+ )
967− (Internal.Unkeyed inputChildren)
822+ (Internal.Unkeyed [ inputElement ])
968− ]
969− )
970 in
823 in
971 applyLabel
824 applyLabel
972 (Internal.Class Flag.cursor classes.cursorText
825 (Internal.Class Flag.cursor classes.cursorText
@@ -978,45 +831,207 @@ textHelper textInput attrs textOptions =
978 5
831 5
979 )
832 )
980 :: Region.announce
833 :: Region.announce
981− :: attributesFromChild
834+ :: redistributed.fullParent
982 )
835 )
983 textOptions.label
836 textOptions.label
984− inputElement
837+ wrappedInput
838+
839+
840+renderPlaceholder (Placeholder placeholderAttrs placeholderEl) forPlaceholder on =
841+ Element.inFront
842+ (Element.el
843+ (defaultTextPadding
844+ :: forPlaceholder
845+ ++ [ Font.color charcoal
846+ , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)
847+ , Border.color (Element.rgba 0 0 0 0)
848+ , Background.color (Element.rgba 0 0 0 0)
849+ , Element.height Element.fill
850+ , Element.width Element.fill
851+ , Element.alpha
852+ (if on then
853+ 1
854+
855+ else
856+ 0
857+ )
858+ ]
859+ ++ placeholderAttrs
860+ )
861+ placeholderEl
862+ )
985
863
986
864
987−textHeightContent textValue spacing maybePadding maybeBorder =
865+{-| Because textareas are now shadowed, where they're rendered twice,
866+we to move the literal text area up because spacing is based on line height.
867+-}
868+calcMoveToCompensateForPadding : List (Attribute msg) -> Attribute msg
869+calcMoveToCompensateForPadding attrs =
988 let
870 let
989− newlineCount =
871+ gatherSpacing attr found =
990− String.lines textValue
872+ case attr of
991− |> List.length
873+ Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->
992− |> (\x ->
874+ case found of
993− if x < 1 then
875+ Nothing ->
994− 1
876+ Just y
995
877
996− else
878+ _ ->
997− x
879+ found
998− )
999
880
1000− topBottom (Padding t _ b _) =
881+ _ ->
1001− t + b
882+ found
883+ in
884+ case List.foldr gatherSpacing Nothing attrs of
885+ Nothing ->
886+ Internal.NoAttribute
1002
887
1003− additionalSpacing =
888+ Just vSpace ->
1004− ((newlineCount - 1) * spacing)
889+ Element.moveUp (toFloat vSpace / 2)
1005− + Maybe.withDefault 0 (Maybe.map topBottom maybePadding)
1006− + Maybe.withDefault 0 (Maybe.map topBottom maybeBorder)
1007
890
1008− heightValue count =
891+
1009− "calc("
892+{-| Given the list of attributes provided to `Input.multiline` or `Input.text`,
1010− ++ String.fromInt count
893+
1011− ++ "em + "
894+redistribute them to the parent, the input, or the cover.
1012− ++ String.fromInt additionalSpacing
895+
1013− ++ "px) !important"
896+ - fullParent -> Wrapper around label and input
1014− in
897+ - parent -> parent of wrapper
898+ - wrapper -> the element that is here to take up space.
899+ - cover -> things like placeholders or text areas which are layered on top of input.
900+ - input -> actual input element
901+
902+-}
903+redistribute :
904+ List (Attribute msg)
905+ ->
906+ { fullParent : List (Attribute msg)
907+ , parent : List (Attribute msg)
908+ , wrapper : List (Attribute msg)
909+ , input : List (Attribute msg)
910+ , cover : List (Attribute msg)
911+ }
912+redistribute attrs =
913+ List.foldl redistributeOver
914+ { fullParent = []
915+ , parent = []
916+ , input = []
917+ , cover = []
918+ , wrapper = []
919+ }
920+ attrs
921+ |> (\redist ->
922+ { parent = List.reverse redist.parent
923+ , fullParent = List.reverse redist.fullParent
924+ , wrapper = List.reverse redist.wrapper
925+ , input = List.reverse redist.input
926+ , cover = List.reverse redist.cover
927+ }
928+ )
929+
930+
931+redistributeOver attr els =
932+ case attr of
933+ Internal.Nearby _ _ ->
934+ { els | parent = attr :: els.parent }
935+
936+ Internal.Width (Internal.Fill _) ->
937+ { els | fullParent = attr :: els.fullParent }
938+
939+ Internal.Width _ ->
940+ { els | parent = attr :: els.parent }
941+
942+ Internal.Height (Internal.Fill _) ->
943+ { els
944+ | fullParent = attr :: els.fullParent
945+ , parent = attr :: els.parent
946+ }
947+
948+ Internal.Height h ->
949+ { els
950+ | parent = attr :: els.parent
951+ }
952+
953+ Internal.AlignX _ ->
954+ { els | fullParent = attr :: els.fullParent }
955+
956+ Internal.AlignY _ ->
957+ { els | fullParent = attr :: els.fullParent }
958+
959+ Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->
960+ { els
961+ | fullParent = attr :: els.fullParent
962+ , parent = attr :: els.parent
963+ , input = attr :: els.input
964+ , wrapper = attr :: els.wrapper
965+ }
966+
967+ Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
968+ { els
969+ | parent = attr :: els.parent
970+
971+ -- input = attr :: els.input
972+ -- , wrapper = attr :: els.wrapper
973+ , cover = attr :: els.cover
974+ }
975+
976+ Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
977+ { els
978+ | parent = attr :: els.parent
979+ , cover = attr :: els.cover
980+ }
981+
982+ Internal.StyleClass _ (Internal.Transform _) ->
983+ { els
984+ | parent = attr :: els.parent
985+ , cover = attr :: els.cover
986+ }
987+
988+ Internal.StyleClass _ (Internal.FontSize _) ->
989+ { els | fullParent = attr :: els.fullParent }
990+
991+ Internal.StyleClass _ (Internal.FontFamily _ _) ->
992+ { els | fullParent = attr :: els.fullParent }
993+
994+ Internal.StyleClass _ _ ->
995+ { els | parent = attr :: els.parent }
996+
997+ Internal.NoAttribute ->
998+ els
999+
1000+ Internal.Attr a ->
1001+ { els | input = attr :: els.input }
1002+
1003+ Internal.Describe _ ->
1004+ { els | input = attr :: els.input }
1005+
1006+ Internal.Class _ _ ->
1007+ { els | parent = attr :: els.parent }
1008+
1009+ Internal.TransformComponent _ _ ->
1010+ { els | input = attr :: els.input }
1011+
1012+
1013+orElse thing maybe =
1014+ case maybe of
1015+ Nothing ->
1016+ Just thing
1017+
1018+ _ ->
1019+ maybe
1020+
1021+
1022+inheritablePlaceholderAttributes attr =
1023+ case attr of
1015− Internal.StyleClass Flag.heightTextAreaContent
1024+ Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
1016− (Internal.Single ("textarea-height-" ++ String.fromInt newlineCount)
1025+ True
1017− "height"
1026+
1018− (heightValue newlineCount)
1027+ Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
1019− )
1028+ True
1029+
1030+ Internal.StyleClass _ (Internal.Transform _) ->
1031+ True
1032+
1033+ _ ->
1034+ False
1020
1035
1021
1036
1022{-| -}
1037{-| -}
src/Internal/Model.elm+34−9
@@ -83,8 +83,7 @@ module Internal.Model exposing
83 , reduceRecursive
83 , reduceRecursive
84 , reduceStyles
84 , reduceStyles
85 , reduceStylesRecursive
85 , reduceStylesRecursive
86− , removeNever
86+ , removeNever
87− , renderFocusStyle
88 -- , renderFont
87 -- , renderFont
89
88
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,34 @@ 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 =
2225+ toFloat shadow.blur
2226+ , size =
2227+ toFloat shadow.size
2228+ }
2229+ )
2230+ )
2231+ focus.shadow
2232+ , Just <| Property "outline" "none"
2233+ ]
2234+ )
2211− Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2235+ , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2212 (List.filterMap identity
2236 (List.filterMap identity
2213 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2237 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2214 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
2238 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -2231,6 +2255,7 @@ renderFocusStyle focus =
2231 , Just <| Property "outline" "none"
2255 , Just <| Property "outline" "none"
2232 ]
2256 ]
2233 )
2257 )
2258+ ]
2234
2259
2235
2260
2236focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }
2261focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }
@@ -2242,7 +2267,7 @@ focusDefaultStyle =
2242 { color =
2267 { color =
2243 Rgba (155 / 255) (203 / 255) 1 1
2268 Rgba (155 / 255) (203 / 255) 1 1
2244 , offset = ( 0, 0 )
2269 , offset = ( 0, 0 )
2245− , blur = 3
2270+ , blur = 0
2246 , size = 3
2271 , size = 3
2247 }
2272 }
2248 }
2273 }
src/Internal/Style.elm+4
@@ -204,6 +204,7 @@ classes =
204
204
205 -- , hoverOpaque = "hover-opaque"
205 -- , hoverOpaque = "hover-opaque"
206 , focus = "fcs"
206 , focus = "fcs"
207+ , focusedWithin = "focus-within"
207
208
208 -- , focusOpaque = "focus-opaque"
209 -- , focusOpaque = "focus-opaque"
209 , active = "atv"
210 , active = "atv"
@@ -1522,6 +1523,9 @@ baseSheet =
1522 ]
1523 ]
1523 , Descriptor (dot classes.inputMultiline)
1524 , Descriptor (dot classes.inputMultiline)
1524 [ Prop "white-space" "pre-wrap"
1525 [ Prop "white-space" "pre-wrap"
1526+ , Descriptor (dot classes.paragraph)
1527+ [ Prop "white-space" "pre-wrap"
1528+ ]
1525 ]
1529 ]
1526 , Descriptor (dot classes.paragraph)
1530 , Descriptor (dot classes.paragraph)
1527 [ Prop "display" "block"
1531 [ Prop "display" "block"