From 3f9a6669e72ab2a261a950b18481f5ccf61c2574 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:15:06 -0700 Subject: [PATCH] Show the premium icon as opacified when the checkbox is disabled --- src/Nri/Ui/Checkbox/V3.elm | 95 +++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 7da7a22e..1641aa66 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -142,10 +142,6 @@ premium assets config = [ "PremiumClass" ] else [] - , if config.disabled then - [ "Opacified" ] - else - [] ] theme = @@ -203,13 +199,13 @@ buildCheckbox assets modifierClasses model labelContent = , display inlineBlock , case model.selected of Selected -> - backgroundImage assets CheckboxChecked + backgroundImageDeprecated assets CheckboxChecked NotSelected -> - backgroundImage assets CheckboxUnchecked + backgroundImageDeprecated assets CheckboxUnchecked PartiallySelected -> - backgroundImage assets CheckboxCheckedPartially + backgroundImageDeprecated assets CheckboxCheckedPartially , Css.batch <| case colorTheme of Gray -> @@ -226,7 +222,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css - [ backgroundImage assets PremiumLocked + [ backgroundImageDeprecated assets PremiumLocked , backgroundRepeat noRepeat , color Colors.gray20 , display inlineBlock @@ -247,7 +243,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css - [ backgroundImage assets CheckboxLockOnInside + [ backgroundImageDeprecated assets CheckboxLockOnInside , backgroundRepeat noRepeat , backgroundSize (px 24) , color Colors.gray20 @@ -273,7 +269,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , labelStyles = css - [ backgroundImage assets PremiumKey + [ backgroundImageDeprecated assets PremiumKey , backgroundRepeat noRepeat , color Colors.gray20 , if model.disabled then @@ -294,37 +290,14 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Disabled -> - { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) - , labelStyles = - css - [ cursor pointer - , opacity (num 0.4) - , outline none - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - + --disabledStyles = + -- [ cursor pointer + -- , opacity (num 0.4) + -- , outline none + -- ] Premium -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) - , labelStyles = - css - [ alignItems center - , cursor pointer - , displayFlex - , outline none - , after - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumFlag - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - ] + , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -418,6 +391,45 @@ viewLabel model content class theme = [ content ] +premiumLabelStyles : + Asset + -> { a | disabled : Bool } + -> Html.Styled.Attribute msg +premiumLabelStyles image model = + let + baseStyles = + [ -- Positioning + alignItems center + , displayFlex + + -- Focus & Hover + , cursor pointer + , outline none + + -- Icon + , icon + ] + + icon = + after + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage ((url << Nri.Ui.AssetPath.Css.url) image) + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + in + css + (if model.disabled then + opacity (num 0.4) :: baseStyles + else + baseStyles + ) + + indeterminateAttr : RootHtml.Attribute msg indeterminateAttr = RootAttributes.property "indeterminate" (Json.Encode.bool True) @@ -429,7 +441,6 @@ type Theme | Locked | LockOnInside | Unlockable - | Disabled | Premium @@ -443,8 +454,8 @@ type ColorTheme -- ICONS used instead of default browser implementations -backgroundImage : Assets r -> CheckboxImage -> Css.Style -backgroundImage assets checkboxImage = +backgroundImageDeprecated : Assets r -> CheckboxImage -> Css.Style +backgroundImageDeprecated assets checkboxImage = property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage)