NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-18 19:21:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #81 from NoRedInk/ink__checkbox-opacity

Browse Source 
Ink  checkbox opacity
This commit is contained in:
Tessa 2018-06-27 10:12:14 -07:00 committed by GitHub
commit 469d72df59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/Nri/Ui/Checkbox/V3.elm
View File

@ -61,7 +61,7 @@ type IsSelected
{-| -} {-| -}
type Theme type Theme
= Square = Square
| LockOnInside | Locked
selectedToMaybe : IsSelected -> Maybe Bool selectedToMaybe : IsSelected -> Maybe Bool
@ -119,7 +119,7 @@ buildCheckbox assets modifierClasses model labelContent =
, labelContent = labelContent , labelContent = labelContent
} }
LockOnInside -> Locked ->
{ containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
, labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg , labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg
, labelClasses = labelClass model.selected , labelClasses = labelClass model.selected
@ -138,10 +138,12 @@ squareLabelStyles model image =
] ]
in in
css css
(if model.disabled then (baseStyles
[ cursor auto, opacity (num 0.4) ] ++ baseStyles ++ (if model.disabled then
else [ cursor auto, checkboxImageSelector [ opacity (num 0.4) ] ]
[ cursor pointer ] ++ baseStyles else
[ cursor pointer ]
)
) )
@ -156,10 +158,14 @@ lockLabelStyles model image =
] ]
in in
css css
(if model.disabled then (baseStyles
[ cursor auto, opacity (num 0.4) ] ++ baseStyles ++ (if model.disabled then
else [ cursor auto
[ cursor pointer ] ++ baseStyles , checkboxImageSelector [ opacity (num 0.4) ]
]
else
[ cursor pointer ]
)
) )
@ -168,7 +174,6 @@ positioning =
batch batch
[ display inlineBlock [ display inlineBlock
, padding4 (px 13) zero (px 13) (px 35) , padding4 (px 13) zero (px 13) (px 35)
, verticalAlign middle
] ]
@ -183,13 +188,26 @@ textStyle =
addIcon : Asset -> Style addIcon : Asset -> Style
addIcon icon = addIcon icon =
batch batch
[ backgroundImage icon [ position relative
, backgroundRepeat noRepeat , checkboxImageSelector
, backgroundSize (px 24) [ backgroundImage icon
, property "background-position" "left center" , backgroundRepeat noRepeat
, backgroundSize (px 24)
, property "content" "''"
, position absolute
, left zero
, top (px 10)
, width (px 24)
, height (px 24)
]
] ]
checkboxImageSelector : List Style -> Style
checkboxImageSelector =
before
labelClass : IsSelected -> Html.Styled.Attribute msg labelClass : IsSelected -> Html.Styled.Attribute msg
labelClass isSelected = labelClass isSelected =
case isSelected of case isSelected of

2
src/Nri/Ui/PremiumCheckbox/V1.elm
View File

@ -68,7 +68,7 @@ premium assets config =
, disabled = config.disabled , disabled = config.disabled
, theme = , theme =
if isLocked then if isLocked then
Checkbox.LockOnInside Checkbox.Locked
else else
Checkbox.Square Checkbox.Square
, noOpMsg = config.noOpMsg , noOpMsg = config.noOpMsg

4
styleguide-app/Examples/Checkbox.elm
View File

@ -132,11 +132,11 @@ viewLockedOnInsideCheckbox id state =
Checkbox.viewWithLabel Checkbox.viewWithLabel
assets assets
{ identifier = id { identifier = id
, label = "I'm a locked Checkbox on the inside" , label = "I'm a locked Checkbox"
, setterMsg = ToggleCheck id , setterMsg = ToggleCheck id
, selected = Checkbox.NotSelected , selected = Checkbox.NotSelected
, disabled = True , disabled = True
, theme = Checkbox.LockOnInside , theme = Checkbox.Locked
, noOpMsg = NoOp , noOpMsg = NoOp
} }