git.iko.soy/typeable/elm-ui
on master help sign in
resolves #64 - padding on Input.text is now translated to line height so that chrome doesn't clip the input.
ec1f303Matthew Griffith
src/Element/Input.elm+41−19
compare with master
unifiedsplit
@@ -801,10 +801,9 @@ textHelper textInput attrs textOptions =
801 defaultTextBoxStyle ++ attrs
801 defaultTextBoxStyle ++ attrs
802
802
803 redistributed =
803 redistributed =
804+ redistribute (textInput.type_ == TextArea)
804− redistribute (isStacked textOptions.label) withDefaults
805+ (isStacked textOptions.label)
805−
806− moveUpToCompensateForPadding =
807− calcMoveToCompensateForPadding withDefaults
806+ withDefaults
808
807
809 onlySpacing attr =
808 onlySpacing attr =
810 case attr of
809 case attr of
@@ -864,15 +863,16 @@ textHelper textInput attrs textOptions =
864 ++ (case textInput.type_ of
863 ++ (case textInput.type_ of
865 TextInputNode inputType ->
864 TextInputNode inputType ->
866 [ Internal.Attr (Html.Attributes.type_ inputType)
865 [ Internal.Attr (Html.Attributes.type_ inputType)
867− , Internal.htmlClass classes.inputText
866+ , Internal.htmlClass (classes.inputText ++ " " ++ classes.inputMultiline)
867+
868− , Internal.htmlClass "focusable"
868+ -- , Internal.htmlClass "focusable"
869 ]
869 ]
870
870
871 TextArea ->
871 TextArea ->
872 [ Element.clip
872 [ Element.clip
873 , Element.height Element.fill
873 , Element.height Element.fill
874 , Internal.htmlClass classes.inputMultiline
874 , Internal.htmlClass classes.inputMultiline
875− , moveUpToCompensateForPadding
875+ , calcMoveToCompensateForPadding withDefaults
876 ]
876 ]
877 )
877 )
878 ++ redistributed.input
878 ++ redistributed.input
@@ -919,7 +919,6 @@ textHelper textInput attrs textOptions =
919
919
920 Just place ->
920 Just place ->
921 [ renderPlaceholder place
921 [ renderPlaceholder place
922− -- redistributed.cover
923 []
922 []
924 (textOptions.text == "")
923 (textOptions.text == "")
925 ]
924 ]
@@ -943,7 +942,8 @@ textHelper textInput attrs textOptions =
943 []
942 []
944
943
945 Just place ->
944 Just place ->
945+ [ Element.behindContent
946− [ Element.inFront (renderPlaceholder place redistributed.cover (textOptions.text == ""))
946+ (renderPlaceholder place redistributed.cover (textOptions.text == ""))
947 ]
947 ]
948 ]
948 ]
949 )
949 )
@@ -1028,6 +1028,7 @@ redistribute them to the parent, the input, or the cover.
1028-}
1028-}
1029redistribute :
1029redistribute :
1030 Bool
1030 Bool
1031+ -> Bool
1031 -> List (Attribute msg)
1032 -> List (Attribute msg)
1032 ->
1033 ->
1033 { fullParent : List (Attribute msg)
1034 { fullParent : List (Attribute msg)
@@ -1036,8 +1037,8 @@ redistribute :
1036 , input : List (Attribute msg)
1037 , input : List (Attribute msg)
1037 , cover : List (Attribute msg)
1038 , cover : List (Attribute msg)
1038 }
1039 }
1039−redistribute stacked attrs =
1040+redistribute isMultiline stacked attrs =
1040− List.foldl (redistributeOver stacked)
1041+ List.foldl (redistributeOver isMultiline stacked)
1041 { fullParent = []
1042 { fullParent = []
1042 , parent = []
1043 , parent = []
1043 , input = []
1044 , input = []
@@ -1111,7 +1112,7 @@ isPixel len =
1111
1112
1112{-| isStacked means that the label is above or below
1113{-| isStacked means that the label is above or below
1113-}
1114-}
1114−redistributeOver stacked attr els =
1115+redistributeOver isMultiline stacked attr els =
1115 case attr of
1116 case attr of
1116 Internal.Nearby _ _ ->
1117 Internal.Nearby _ _ ->
1117 { els | parent = attr :: els.parent }
1118 { els | parent = attr :: els.parent }
@@ -1169,14 +1170,35 @@ redistributeOver stacked attr els =
1169 , wrapper = attr :: els.wrapper
1170 , wrapper = attr :: els.wrapper
1170 }
1171 }
1171
1172
1172− Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
1173+ Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->
1174+ if isMultiline then
1173− { els
1175+ { els
1174− | parent = attr :: els.parent
1176+ | parent = attr :: els.parent
1177+ , cover = attr :: els.cover
1178+ }
1175
1179
1176− -- input = attr :: els.input
1180+ else
1177− -- , wrapper = attr :: els.wrapper
1181+ let
1178− , cover = attr :: els.cover
1182+ newLineHeight =
1183+ Element.htmlAttribute
1184+ (Html.Attributes.style
1185+ "line-height"
1186+ ("calc(1.05em + " ++ String.fromInt (2 * min t b) ++ "px)")
1187+ )
1188+
1189+ reducedVerticalPadding =
1190+ Element.paddingEach
1191+ { top = t - min t b
1192+ , right = r
1193+ , bottom = b - min t b
1194+ , left = l
1195+ }
1196+ in
1197+ { els
1198+ | parent = reducedVerticalPadding :: els.parent
1199+ , input = newLineHeight :: els.input
1200+ , cover = attr :: els.cover
1179− }
1201+ }
1180
1202
1181 Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
1203 Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
1182 { els
1204 { els