Keep the premium flag around

This commit is contained in:
Tessa Kelly 2018-06-19 18:22:46 -07:00
parent f918183bc6
commit 74b1ec9eeb
2 changed files with 54 additions and 30 deletions

View File

@ -122,13 +122,13 @@ buildCheckbox assets modifierClasses model labelContent =
, display inlineBlock
, case model.selected of
Selected ->
backgroundImage (assetPathUrl assets.checkboxChecked_svg)
backgroundImage assets.checkboxChecked_svg
NotSelected ->
backgroundImage (assetPathUrl assets.checkboxUnchecked_svg)
backgroundImage assets.checkboxUnchecked_svg
PartiallySelected ->
backgroundImage (assetPathUrl assets.checkboxCheckedPartially_svg)
backgroundImage assets.checkboxCheckedPartially_svg
, Css.batch <|
case colorTheme of
Gray ->
@ -145,7 +145,7 @@ buildCheckbox assets modifierClasses model labelContent =
{ containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
, labelStyles =
css
[ backgroundImage (assetPathUrl assets.checkboxLockOnInside_svg)
[ backgroundImage assets.checkboxLockOnInside_svg
, backgroundRepeat noRepeat
, backgroundSize (px 24)
, color Colors.gray20
@ -168,7 +168,7 @@ buildCheckbox assets modifierClasses model labelContent =
}
Premium ->
{ containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ])
{ containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
, labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model
, labelClasses = labelClass model.selected
, labelContent = labelContent
@ -289,7 +289,7 @@ premiumLabelStyles image model =
, width (px 26)
, height (px 24)
, marginLeft (px 8)
, backgroundImage (assetPathUrl image)
, backgroundImage image
, backgroundRepeat noRepeat
, backgroundPosition Css.center
]
@ -302,16 +302,6 @@ premiumLabelStyles image model =
)
assetPathUrl : Asset -> BackgroundImage {}
assetPathUrl =
url << Nri.Ui.AssetPath.Css.url
indeterminateAttr : RootHtml.Attribute msg
indeterminateAttr =
RootAttributes.property "indeterminate" (Json.Encode.bool True)
{-| -}
type Theme
= Square ColorTheme
@ -333,7 +323,11 @@ type alias Assets r =
, checkboxChecked_svg : Asset
, checkboxCheckedPartially_svg : Asset
, iconPremiumUnlocked_png : Asset
, iconPremiumLocked_png : Asset
, checkboxLockOnInside_svg : Asset
, iconPremiumFlag_svg : Asset
}
backgroundImage =
Nri.Ui.AssetPath.Css.url
>> property "background-image"

View File

@ -7,7 +7,10 @@ module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium)
-}
import Accessibility.Styled as Html
import Css exposing (..)
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.AssetPath exposing (Asset(..))
import Nri.Ui.AssetPath.Css
import Nri.Ui.Checkbox.V3 as Checkbox
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
@ -55,7 +58,8 @@ premium assets config =
else
Checkbox.Square Checkbox.Default
in
Checkbox.viewWithLabel assets
Html.span []
[ Checkbox.viewWithLabel assets
{ identifier = config.id
, label = config.label
, setterMsg =
@ -68,6 +72,27 @@ premium assets config =
, theme = theme
, noOpMsg = config.noOpMsg
}
, if
(isLocked && config.showFlagWhenLocked)
|| (not isLocked && config.contentPremiumLevel /= Free)
then
Html.div
[ Attributes.class "checkbox-PremiumClass"
, css
[ property "content" "''"
, display inlineBlock
, width (px 26)
, height (px 24)
, marginLeft (px 8)
, backgroundImage assets.iconPremiumFlag_svg
, backgroundRepeat noRepeat
, backgroundPosition Css.center
]
]
[]
else
Html.text ""
]
{-| The assets used in this module.
@ -82,3 +107,8 @@ type alias Assets r =
, checkboxLockOnInside_svg : Asset
, iconPremiumFlag_svg : Asset
}
backgroundImage =
Nri.Ui.AssetPath.Css.url
>> property "background-image"