mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-24 06:02:36 +03:00
Fix icon alignment
This commit is contained in:
parent
99ee395e10
commit
5dd8a5f154
@ -513,7 +513,7 @@ renderButton ((ButtonOrLink config) as button_) =
|
|||||||
:: Attributes.type_ "button"
|
:: Attributes.type_ "button"
|
||||||
:: config.customAttributes
|
:: config.customAttributes
|
||||||
)
|
)
|
||||||
[ viewLabel config.icon config.label ]
|
[ viewLabel config.size config.icon config.label ]
|
||||||
|
|
||||||
|
|
||||||
renderLink : ButtonOrLink msg -> Html msg
|
renderLink : ButtonOrLink msg -> Html msg
|
||||||
@ -529,7 +529,7 @@ renderLink ((ButtonOrLink config) as link_) =
|
|||||||
(styledName linkFunctionName)
|
(styledName linkFunctionName)
|
||||||
[ buttonStyles config.size config.width colorPalette config.customStyles ]
|
[ buttonStyles config.size config.width colorPalette config.customStyles ]
|
||||||
(attributes ++ config.customAttributes)
|
(attributes ++ config.customAttributes)
|
||||||
[ viewLabel config.icon config.label ]
|
[ viewLabel config.size config.icon config.label ]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -624,7 +624,7 @@ toggleButton config =
|
|||||||
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name
|
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name
|
||||||
, Attributes.type_ "button"
|
, Attributes.type_ "button"
|
||||||
]
|
]
|
||||||
[ viewLabel Nothing config.label ]
|
[ viewLabel Medium Nothing config.label ]
|
||||||
|
|
||||||
|
|
||||||
buttonStyles : ButtonSize -> ButtonWidth -> ColorPalette -> List Style -> Style
|
buttonStyles : ButtonSize -> ButtonWidth -> ColorPalette -> List Style -> Style
|
||||||
@ -637,8 +637,12 @@ buttonStyles size width colors customStyles =
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
viewLabel : Maybe Svg -> String -> Html msg
|
viewLabel : ButtonSize -> Maybe Svg -> String -> Html msg
|
||||||
viewLabel maybeSvg label_ =
|
viewLabel size maybeSvg label_ =
|
||||||
|
let
|
||||||
|
{ imageHeight } =
|
||||||
|
sizeConfig size
|
||||||
|
in
|
||||||
Nri.Ui.styled Html.span
|
Nri.Ui.styled Html.span
|
||||||
"button-label-span"
|
"button-label-span"
|
||||||
[ Css.overflow Css.hidden -- Keep scrollbars out of our button
|
[ Css.overflow Css.hidden -- Keep scrollbars out of our button
|
||||||
@ -653,7 +657,16 @@ viewLabel maybeSvg label_ =
|
|||||||
renderMarkdown label_
|
renderMarkdown label_
|
||||||
|
|
||||||
Just svg ->
|
Just svg ->
|
||||||
NriSvg.toHtml svg :: renderMarkdown label_
|
(svg
|
||||||
|
|> NriSvg.withHeight (Css.px imageHeight)
|
||||||
|
|> NriSvg.withCss
|
||||||
|
[ Css.width Css.auto
|
||||||
|
, Css.flexShrink Css.zero
|
||||||
|
, Css.marginRight (Css.px 5)
|
||||||
|
]
|
||||||
|
|> NriSvg.toHtml
|
||||||
|
)
|
||||||
|
:: renderMarkdown label_
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
@ -803,34 +816,39 @@ colorStyle colorPalette =
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
sizeConfig : ButtonSize -> { fontSize : number, height : number, imageHeight : number, shadowHeight : number, minWidth : number }
|
||||||
|
sizeConfig size =
|
||||||
|
case size of
|
||||||
|
Small ->
|
||||||
|
{ fontSize = 15
|
||||||
|
, height = 36
|
||||||
|
, imageHeight = 12
|
||||||
|
, shadowHeight = 2
|
||||||
|
, minWidth = 75
|
||||||
|
}
|
||||||
|
|
||||||
|
Medium ->
|
||||||
|
{ fontSize = 15
|
||||||
|
, height = 45
|
||||||
|
, imageHeight = 14
|
||||||
|
, shadowHeight = 3
|
||||||
|
, minWidth = 100
|
||||||
|
}
|
||||||
|
|
||||||
|
Large ->
|
||||||
|
{ fontSize = 20
|
||||||
|
, height = 56
|
||||||
|
, imageHeight = 16
|
||||||
|
, shadowHeight = 4
|
||||||
|
, minWidth = 200
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
sizeStyle : ButtonSize -> ButtonWidth -> Style
|
sizeStyle : ButtonSize -> ButtonWidth -> Style
|
||||||
sizeStyle size width =
|
sizeStyle size width =
|
||||||
let
|
let
|
||||||
config =
|
config =
|
||||||
case size of
|
sizeConfig size
|
||||||
Small ->
|
|
||||||
{ fontSize = 15
|
|
||||||
, height = 36
|
|
||||||
, imageHeight = 12
|
|
||||||
, shadowHeight = 2
|
|
||||||
, minWidth = 75
|
|
||||||
}
|
|
||||||
|
|
||||||
Medium ->
|
|
||||||
{ fontSize = 15
|
|
||||||
, height = 45
|
|
||||||
, imageHeight = 14
|
|
||||||
, shadowHeight = 3
|
|
||||||
, minWidth = 100
|
|
||||||
}
|
|
||||||
|
|
||||||
Large ->
|
|
||||||
{ fontSize = 20
|
|
||||||
, height = 56
|
|
||||||
, imageHeight = 16
|
|
||||||
, shadowHeight = 4
|
|
||||||
, minWidth = 200
|
|
||||||
}
|
|
||||||
|
|
||||||
sizingAttributes =
|
sizingAttributes =
|
||||||
let
|
let
|
||||||
@ -891,18 +909,4 @@ sizeStyle size width =
|
|||||||
, Css.borderBottomWidth (Css.px config.shadowHeight)
|
, Css.borderBottomWidth (Css.px config.shadowHeight)
|
||||||
, Css.batch sizingAttributes
|
, Css.batch sizingAttributes
|
||||||
, Css.batch widthAttributes
|
, Css.batch widthAttributes
|
||||||
, Css.Global.descendants
|
|
||||||
[ Css.Global.img
|
|
||||||
[ Css.height (Css.px config.imageHeight)
|
|
||||||
, Css.width Css.auto
|
|
||||||
, Css.marginRight (Css.px 5)
|
|
||||||
, Css.flexShrink Css.zero
|
|
||||||
]
|
|
||||||
, Css.Global.svg
|
|
||||||
[ Css.height (Css.px config.imageHeight)
|
|
||||||
, Css.width Css.auto
|
|
||||||
, Css.marginRight (Css.px 5)
|
|
||||||
, Css.flexShrink Css.zero
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
Loading…
Reference in New Issue
Block a user