mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 11:11:38 +03:00
avoid exposing (..)
This commit is contained in:
Michael Glass
parent
ffee7f91f9
commit
a9ac470681
@ -62,14 +62,14 @@ There will generally be a `*Button` and `*Link` version of each button style.
|
|||||||
|
|
||||||
-- import EventExtras
|
-- import EventExtras
|
||||||
|
|
||||||
import Accessibility.Styled as Html exposing (..)
|
import Accessibility.Styled as Html exposing (Attribute, Html)
|
||||||
import Accessibility.Styled.Role as Role
|
import Accessibility.Styled.Role as Role
|
||||||
import Accessibility.Styled.Widget as Widget
|
import Accessibility.Styled.Widget as Widget
|
||||||
import Css exposing (..)
|
import Css exposing (Style)
|
||||||
import Css.Foreign
|
import Css.Foreign
|
||||||
import EventExtras
|
import EventExtras
|
||||||
import Html.Styled as Styled
|
import Html.Styled as Styled
|
||||||
import Html.Styled.Attributes as Attributes exposing (..)
|
import Html.Styled.Attributes as Attributes
|
||||||
import Html.Styled.Events as Events exposing (onClick)
|
import Html.Styled.Events as Events exposing (onClick)
|
||||||
import Json.Decode
|
import Json.Decode
|
||||||
import Markdown.Block
|
import Markdown.Block
|
||||||
@ -228,7 +228,7 @@ widthStyle width =
|
|||||||
width
|
width
|
||||||
|> Maybe.map (\w -> [ ( "width", toString w ++ "px" ) ])
|
|> Maybe.map (\w -> [ ( "width", toString w ++ "px" ) ])
|
||||||
|> Maybe.withDefault []
|
|> Maybe.withDefault []
|
||||||
|> style
|
|> Attributes.style
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -263,7 +263,7 @@ copyToClipboard assets config =
|
|||||||
(styledName "copyToClipboard")
|
(styledName "copyToClipboard")
|
||||||
(buttonStyles config.size config.width (styleToColorPalette config.style) Button)
|
(buttonStyles config.size config.width (styleToColorPalette config.style) Button)
|
||||||
[ Widget.label "Copy URL to clipboard"
|
[ Widget.label "Copy URL to clipboard"
|
||||||
, attribute "data-clipboard-text" config.copyText
|
, Attributes.attribute "data-clipboard-text" config.copyText
|
||||||
, widthStyle config.width
|
, widthStyle config.width
|
||||||
]
|
]
|
||||||
(viewLabel maybeIcon config.buttonLabel)
|
(viewLabel maybeIcon config.buttonLabel)
|
||||||
@ -285,21 +285,21 @@ delete : { r | x : String } -> DeleteButtonConfig msg -> Html msg
|
|||||||
delete assets config =
|
delete assets config =
|
||||||
Nri.Ui.styled Html.button
|
Nri.Ui.styled Html.button
|
||||||
(styledName "delete")
|
(styledName "delete")
|
||||||
[ display inlineBlock
|
[ Css.display Css.inlineBlock
|
||||||
, backgroundRepeat noRepeat
|
, Css.backgroundRepeat Css.noRepeat
|
||||||
, backgroundColor transparent
|
, Css.backgroundColor Css.transparent
|
||||||
, backgroundPosition center
|
, Css.backgroundPosition Css.center
|
||||||
, backgroundSize contain
|
, Css.backgroundSize Css.contain
|
||||||
, Css.property "border" "none"
|
, Css.property "border" "none"
|
||||||
, Css.width (px 15)
|
, Css.width (Css.px 15)
|
||||||
, Css.height (px 15)
|
, Css.height (Css.px 15)
|
||||||
, padding zero
|
, Css.padding Css.zero
|
||||||
, margin2 zero (px 6)
|
, Css.margin2 Css.zero (Css.px 6)
|
||||||
, cursor pointer
|
, Css.cursor Css.pointer
|
||||||
, color Colors.azure
|
, Css.color Colors.azure
|
||||||
]
|
]
|
||||||
[ onClick config.onClick
|
[ onClick config.onClick
|
||||||
, type_ "button"
|
, Attributes.type_ "button"
|
||||||
, -- reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Labeling_buttons
|
, -- reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Labeling_buttons
|
||||||
Widget.label config.label
|
Widget.label config.label
|
||||||
]
|
]
|
||||||
@ -330,11 +330,11 @@ toggleButton config =
|
|||||||
let
|
let
|
||||||
toggledStyles =
|
toggledStyles =
|
||||||
if config.pressed then
|
if config.pressed then
|
||||||
[ color Colors.gray20
|
[ Css.color Colors.gray20
|
||||||
, backgroundColor Colors.glacier
|
, Css.backgroundColor Colors.glacier
|
||||||
, boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20)
|
, Css.boxShadow5 Css.inset Css.zero (Css.px 3) Css.zero (withAlpha 0.2 Colors.gray20)
|
||||||
, border3 (px 1) solid Colors.azure
|
, Css.border3 (Css.px 1) Css.solid Colors.azure
|
||||||
, fontWeight bold
|
, Css.fontWeight Css.bold
|
||||||
]
|
]
|
||||||
else
|
else
|
||||||
[]
|
[]
|
||||||
@ -354,13 +354,13 @@ toggleButton config =
|
|||||||
-- Note: setting type: 'button' removes the default behavior of submit
|
-- Note: setting type: 'button' removes the default behavior of submit
|
||||||
-- equivalent to preventDefaultBehavior = false
|
-- equivalent to preventDefaultBehavior = false
|
||||||
-- 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
|
||||||
, type_ "button"
|
, Attributes.type_ "button"
|
||||||
]
|
]
|
||||||
else
|
else
|
||||||
[ onClick config.onSelect
|
[ onClick config.onSelect
|
||||||
, Widget.pressed <| Just False
|
, Widget.pressed <| Just False
|
||||||
, Role.button
|
, Role.button
|
||||||
, type_ "button"
|
, Attributes.type_ "button"
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
(viewLabel Nothing config.label)
|
(viewLabel Nothing config.label)
|
||||||
@ -455,7 +455,7 @@ some url, and it's an HTTP request (Rails includes JS to make this use the given
|
|||||||
-}
|
-}
|
||||||
linkWithMethod : String -> LinkConfig -> Html msg
|
linkWithMethod : String -> LinkConfig -> Html msg
|
||||||
linkWithMethod method =
|
linkWithMethod method =
|
||||||
linkBase "linkWithMethod" [ attribute "data-method" method ]
|
linkBase "linkWithMethod" [ Attributes.attribute "data-method" method ]
|
||||||
|
|
||||||
|
|
||||||
{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url.
|
{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url.
|
||||||
@ -494,7 +494,7 @@ linkBase linkFunctionName extraAttrs config =
|
|||||||
Nri.Ui.styled Styled.a
|
Nri.Ui.styled Styled.a
|
||||||
(styledName linkFunctionName)
|
(styledName linkFunctionName)
|
||||||
(buttonStyles config.size config.width (styleToColorPalette config.style) Anchor
|
(buttonStyles config.size config.width (styleToColorPalette config.style) Anchor
|
||||||
++ [ whiteSpace noWrap
|
++ [ Css.whiteSpace Css.noWrap
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
(Attributes.href config.url
|
(Attributes.href config.url
|
||||||
@ -554,7 +554,7 @@ viewLabel icn label =
|
|||||||
renderMarkdown label
|
renderMarkdown label
|
||||||
|
|
||||||
Just iconType ->
|
Just iconType ->
|
||||||
[ span
|
[ Html.span
|
||||||
[]
|
[]
|
||||||
(decorativeIcon iconType
|
(decorativeIcon iconType
|
||||||
:: renderMarkdown label
|
:: renderMarkdown label
|
||||||
@ -580,24 +580,24 @@ renderMarkdown markdown =
|
|||||||
|
|
||||||
buttonStyle : List Style
|
buttonStyle : List Style
|
||||||
buttonStyle =
|
buttonStyle =
|
||||||
[ cursor pointer
|
[ Css.cursor Css.pointer
|
||||||
, display inlineBlock
|
, Css.display Css.inlineBlock
|
||||||
, -- Specifying the font can and should go away after bootstrap is removed from application.css
|
, -- Specifying the font can and should go away after bootstrap is removed from application.css
|
||||||
Nri.Ui.Fonts.V1.baseFont
|
Nri.Ui.Fonts.V1.baseFont
|
||||||
, textOverflow ellipsis
|
, Css.textOverflow Css.ellipsis
|
||||||
, overflow Css.hidden
|
, Css.overflow Css.hidden
|
||||||
, textDecoration none
|
, Css.textDecoration Css.none
|
||||||
, Css.property "background-image" "none"
|
, Css.property "background-image" "none"
|
||||||
, textShadow none
|
, Css.textShadow Css.none
|
||||||
, Css.property "transition" "all 0.2s"
|
, Css.property "transition" "all 0.2s"
|
||||||
, boxShadow none
|
, Css.boxShadow Css.none
|
||||||
, border zero
|
, Css.border Css.zero
|
||||||
, marginBottom zero
|
, Css.marginBottom Css.zero
|
||||||
, Css.hover
|
, Css.hover
|
||||||
[ textDecoration none
|
[ Css.textDecoration Css.none
|
||||||
]
|
]
|
||||||
, Css.disabled
|
, Css.disabled
|
||||||
[ cursor notAllowed
|
[ Css.cursor Css.notAllowed
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -628,16 +628,16 @@ colorStyle colorPalette =
|
|||||||
)
|
)
|
||||||
|
|
||||||
BorderlessColors ->
|
BorderlessColors ->
|
||||||
( { background = rgba 0 0 0 0
|
( { background = Css.rgba 0 0 0 0
|
||||||
, hover = rgba 0 0 0 0
|
, hover = Css.rgba 0 0 0 0
|
||||||
, text = Colors.azure
|
, text = Colors.azure
|
||||||
, border = Nothing
|
, border = Nothing
|
||||||
, shadow = rgba 0 0 0 0
|
, shadow = Css.rgba 0 0 0 0
|
||||||
}
|
}
|
||||||
, [ Css.hover
|
, [ Css.hover
|
||||||
[ textDecoration underline
|
[ Css.textDecoration Css.underline
|
||||||
, Css.disabled
|
, Css.disabled
|
||||||
[ textDecoration none
|
[ Css.textDecoration Css.none
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
@ -703,32 +703,32 @@ colorStyle colorPalette =
|
|||||||
, []
|
, []
|
||||||
)
|
)
|
||||||
in
|
in
|
||||||
[ batch additionalStyles
|
[ Css.batch additionalStyles
|
||||||
, color config.text
|
, Css.color config.text
|
||||||
, backgroundColor config.background
|
, Css.backgroundColor config.background
|
||||||
, fontWeight (int 700)
|
, Css.fontWeight (Css.int 700)
|
||||||
, textAlign center
|
, Css.textAlign Css.center
|
||||||
, case config.border of
|
, case config.border of
|
||||||
Nothing ->
|
Nothing ->
|
||||||
borderStyle none
|
Css.borderStyle Css.none
|
||||||
|
|
||||||
Just color ->
|
Just color ->
|
||||||
Css.batch
|
Css.batch
|
||||||
[ borderColor color
|
[ Css.borderColor color
|
||||||
, borderStyle solid
|
, Css.borderStyle Css.solid
|
||||||
]
|
]
|
||||||
, borderBottomStyle solid
|
, Css.borderBottomStyle Css.solid
|
||||||
, borderBottomColor config.shadow
|
, Css.borderBottomColor config.shadow
|
||||||
, fontStyle normal
|
, Css.fontStyle Css.normal
|
||||||
, Css.hover
|
, Css.hover
|
||||||
[ color config.text
|
[ Css.color config.text
|
||||||
, backgroundColor config.hover
|
, Css.backgroundColor config.hover
|
||||||
, Css.disabled
|
, Css.disabled
|
||||||
[ backgroundColor config.background
|
[ Css.backgroundColor config.background
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
, Css.visited
|
, Css.visited
|
||||||
[ color config.text
|
[ Css.color config.text
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -776,15 +776,15 @@ sizeStyle size width elementType =
|
|||||||
widthAttributes =
|
widthAttributes =
|
||||||
case width of
|
case width of
|
||||||
Just pxWidth ->
|
Just pxWidth ->
|
||||||
batch
|
Css.batch
|
||||||
[ maxWidth (pct 100)
|
[ Css.maxWidth (Css.pct 100)
|
||||||
, Css.width (px <| toFloat pxWidth)
|
, Css.width (Css.px <| toFloat pxWidth)
|
||||||
]
|
]
|
||||||
|
|
||||||
Nothing ->
|
Nothing ->
|
||||||
batch
|
Css.batch
|
||||||
[ padding2 zero (px config.sidePadding)
|
[ Css.padding2 Css.zero (Css.px config.sidePadding)
|
||||||
, minWidth (px config.minWidth)
|
, Css.minWidth (Css.px config.minWidth)
|
||||||
]
|
]
|
||||||
|
|
||||||
lineHeightPx =
|
lineHeightPx =
|
||||||
@ -795,38 +795,38 @@ sizeStyle size width elementType =
|
|||||||
Button ->
|
Button ->
|
||||||
config.lineHeight
|
config.lineHeight
|
||||||
in
|
in
|
||||||
[ fontSize (px config.fontSize)
|
[ Css.fontSize (Css.px config.fontSize)
|
||||||
, borderRadius (px 8)
|
, Css.borderRadius (Css.px 8)
|
||||||
, Css.height (px config.height)
|
, Css.height (Css.px config.height)
|
||||||
, lineHeight (px lineHeightPx)
|
, Css.lineHeight (Css.px lineHeightPx)
|
||||||
, boxSizing borderBox
|
, Css.boxSizing Css.borderBox
|
||||||
, borderWidth (px 1)
|
, Css.borderWidth (Css.px 1)
|
||||||
, borderBottomWidth (px config.shadowHeight)
|
, Css.borderBottomWidth (Css.px config.shadowHeight)
|
||||||
, widthAttributes
|
, widthAttributes
|
||||||
, Css.Foreign.descendants
|
, Css.Foreign.descendants
|
||||||
[ Css.Foreign.img
|
[ Css.Foreign.img
|
||||||
[ Css.height (px config.imageHeight)
|
[ Css.height (Css.px config.imageHeight)
|
||||||
, marginRight (px <| config.imageHeight / 6)
|
, Css.marginRight (Css.px <| config.imageHeight / 6)
|
||||||
, position relative
|
, Css.position Css.relative
|
||||||
, bottom (px 2)
|
, Css.bottom (Css.px 2)
|
||||||
, verticalAlign middle
|
, Css.verticalAlign Css.middle
|
||||||
]
|
]
|
||||||
, Css.Foreign.svg
|
, Css.Foreign.svg
|
||||||
[ Css.height (px config.imageHeight) |> important
|
[ Css.height (Css.px config.imageHeight) |> Css.important
|
||||||
, Css.width (px config.imageHeight) |> important
|
, Css.width (Css.px config.imageHeight) |> Css.important
|
||||||
, marginRight (px <| config.imageHeight / 6)
|
, Css.marginRight (Css.px <| config.imageHeight / 6)
|
||||||
, position relative
|
, Css.position Css.relative
|
||||||
, bottom (px 2)
|
, Css.bottom (Css.px 2)
|
||||||
, verticalAlign middle
|
, Css.verticalAlign Css.middle
|
||||||
]
|
]
|
||||||
, Css.Foreign.svg
|
, Css.Foreign.svg
|
||||||
[ Css.important <| Css.height (px config.imageHeight)
|
[ Css.important <| Css.height (Css.px config.imageHeight)
|
||||||
, Css.important <| Css.width auto
|
, Css.important <| Css.width Css.auto
|
||||||
, maxWidth (px (config.imageHeight * 1.25))
|
, Css.maxWidth (Css.px (config.imageHeight * 1.25))
|
||||||
, paddingRight (px <| config.imageHeight / 6)
|
, Css.paddingRight (Css.px <| config.imageHeight / 6)
|
||||||
, position relative
|
, Css.position Css.relative
|
||||||
, bottom (px 2)
|
, Css.bottom (Css.px 2)
|
||||||
, verticalAlign middle
|
, Css.verticalAlign Css.middle
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user