mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-12 01:33:25 +03:00
Pass through a list of styles rather than html attribute
This commit is contained in:
parent
fc355d991d
commit
5eff08304a
@ -119,9 +119,8 @@ buildCheckbox model labelContent =
|
|||||||
viewCheckbox model <|
|
viewCheckbox model <|
|
||||||
case model.theme of
|
case model.theme of
|
||||||
Square ->
|
Square ->
|
||||||
{ containerClasses = toClassList [ "SquareClass" ]
|
let
|
||||||
, labelStyles =
|
squareIcon =
|
||||||
squareLabelStyles model <|
|
|
||||||
case model.selected of
|
case model.selected of
|
||||||
Selected ->
|
Selected ->
|
||||||
checkboxChecked
|
checkboxChecked
|
||||||
@ -131,60 +130,71 @@ buildCheckbox model labelContent =
|
|||||||
|
|
||||||
PartiallySelected ->
|
PartiallySelected ->
|
||||||
checkboxCheckedPartially
|
checkboxCheckedPartially
|
||||||
|
in
|
||||||
|
{ containerClasses = toClassList [ "SquareClass" ]
|
||||||
|
, labelStyles =
|
||||||
|
if model.disabled then
|
||||||
|
disabledSquareLabel squareIcon
|
||||||
|
|
||||||
|
else
|
||||||
|
enabledSquareLabel squareIcon
|
||||||
, labelClasses = labelClass model.selected
|
, labelClasses = labelClass model.selected
|
||||||
, labelContent = labelContent
|
, labelContent = labelContent
|
||||||
}
|
}
|
||||||
|
|
||||||
Locked ->
|
Locked ->
|
||||||
{ containerClasses = toClassList [ "Locked" ]
|
{ containerClasses = toClassList [ "Locked" ]
|
||||||
, labelStyles = lockLabelStyles model checkboxLockOnInside
|
, labelStyles =
|
||||||
|
if model.disabled then
|
||||||
|
disabledLockStyles checkboxLockOnInside
|
||||||
|
|
||||||
|
else
|
||||||
|
enabledLockLabelStyles checkboxLockOnInside
|
||||||
, labelClasses = labelClass model.selected
|
, labelClasses = labelClass model.selected
|
||||||
, labelContent = labelContent
|
, labelContent = labelContent
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
squareLabelStyles : { b | disabled : Bool } -> Icon -> Html.Styled.Attribute msg
|
disabledSquareLabel : Icon -> List Style
|
||||||
squareLabelStyles model image =
|
disabledSquareLabel image =
|
||||||
let
|
[ positioning
|
||||||
baseStyles =
|
, textStyle
|
||||||
[ positioning
|
, outline none
|
||||||
, textStyle
|
, iconStyle image
|
||||||
, outline none
|
, cursor auto
|
||||||
, addIcon image
|
, checkboxImageSelector [ opacity (num 0.4) ]
|
||||||
]
|
]
|
||||||
in
|
|
||||||
css
|
|
||||||
(baseStyles
|
|
||||||
++ (if model.disabled then
|
|
||||||
[ cursor auto, checkboxImageSelector [ opacity (num 0.4) ] ]
|
|
||||||
|
|
||||||
else
|
|
||||||
[ cursor pointer ]
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
lockLabelStyles : { b | disabled : Bool } -> Icon -> Html.Styled.Attribute msg
|
enabledSquareLabel : Icon -> List Style
|
||||||
lockLabelStyles model image =
|
enabledSquareLabel image =
|
||||||
let
|
[ positioning
|
||||||
baseStyles =
|
, textStyle
|
||||||
[ positioning
|
, outline none
|
||||||
, textStyle
|
, iconStyle image
|
||||||
, outline none
|
, cursor pointer
|
||||||
, addIcon image
|
]
|
||||||
]
|
|
||||||
in
|
|
||||||
css
|
|
||||||
(baseStyles
|
|
||||||
++ (if model.disabled then
|
|
||||||
[ cursor auto
|
|
||||||
, checkboxImageSelector [ opacity (num 0.4) ]
|
|
||||||
]
|
|
||||||
|
|
||||||
else
|
|
||||||
[ cursor pointer ]
|
disabledLockStyles : Icon -> List Style
|
||||||
)
|
disabledLockStyles image =
|
||||||
)
|
[ positioning
|
||||||
|
, textStyle
|
||||||
|
, outline none
|
||||||
|
, iconStyle image
|
||||||
|
, cursor auto
|
||||||
|
, checkboxImageSelector [ opacity (num 0.4) ]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
enabledLockLabelStyles : Icon -> List Style
|
||||||
|
enabledLockLabelStyles image =
|
||||||
|
[ positioning
|
||||||
|
, textStyle
|
||||||
|
, outline none
|
||||||
|
, iconStyle image
|
||||||
|
, cursor pointer
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
positioning : Style
|
positioning : Style
|
||||||
@ -205,12 +215,12 @@ textStyle =
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
addIcon : Icon -> Style
|
iconStyle : Icon -> Style
|
||||||
addIcon icon =
|
iconStyle icon =
|
||||||
batch
|
batch
|
||||||
[ position relative
|
[ position relative
|
||||||
, checkboxImageSelector
|
, checkboxImageSelector
|
||||||
[ backgroundImage icon
|
[ property "background-image" "url(todo)"
|
||||||
, backgroundRepeat noRepeat
|
, backgroundRepeat noRepeat
|
||||||
, backgroundSize (px 24)
|
, backgroundSize (px 24)
|
||||||
, property "content" "''"
|
, property "content" "''"
|
||||||
@ -250,7 +260,7 @@ viewCheckbox :
|
|||||||
Model msg
|
Model msg
|
||||||
->
|
->
|
||||||
{ containerClasses : Html.Attribute msg
|
{ containerClasses : Html.Attribute msg
|
||||||
, labelStyles : Html.Attribute msg
|
, labelStyles : List Style
|
||||||
, labelClasses : Html.Attribute msg
|
, labelClasses : Html.Attribute msg
|
||||||
, labelContent : Html.Html msg
|
, labelContent : Html.Html msg
|
||||||
}
|
}
|
||||||
@ -284,7 +294,7 @@ viewCheckbox model config =
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> Html.Attribute msg -> Html.Html msg
|
viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> List Style -> Html.Html msg
|
||||||
viewLabel model content class theme =
|
viewLabel model content class theme =
|
||||||
Html.Styled.label
|
Html.Styled.label
|
||||||
[ Attributes.for model.identifier
|
[ Attributes.for model.identifier
|
||||||
@ -312,18 +322,11 @@ viewLabel model content class theme =
|
|||||||
else
|
else
|
||||||
ExtraAttributes.none
|
ExtraAttributes.none
|
||||||
, class
|
, class
|
||||||
, theme
|
, css theme
|
||||||
]
|
]
|
||||||
[ content ]
|
[ content ]
|
||||||
|
|
||||||
|
|
||||||
backgroundImage : Icon -> Style
|
|
||||||
backgroundImage (Icon icon) =
|
|
||||||
-- Nri.Ui.AssetPath.Css.url
|
|
||||||
-- >> property "background-image"
|
|
||||||
property "background-image" "url(todo)"
|
|
||||||
|
|
||||||
|
|
||||||
type Icon
|
type Icon
|
||||||
= Icon (Html.Html Never)
|
= Icon (Html.Html Never)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user