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

Add a border setting to svg example

Browse Source
This commit is contained in:
Tessa Kelly 2022-07-08 18:36:45 -07:00
parent 3697b756dd
commit 92bbd369e0
1 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
styleguide-app/Examples/Svg.elm
View File

@ -13,6 +13,7 @@ import Examples.UiIcon as UiIcons
import Html.Styled as Html import Html.Styled as Html
import Html.Styled.Attributes as Attributes import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events import Html.Styled.Events as Events
import Nri.Ui.Checkbox.V5 as Checkbox
import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor) import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Select.V8 as Select import Nri.Ui.Select.V8 as Select
@ -47,6 +48,8 @@ viewSettings state =
[ Attributes.css [ Attributes.css
[ Css.displayFlex [ Css.displayFlex
, Css.justifyContent Css.spaceBetween , Css.justifyContent Css.spaceBetween
, Css.alignItems Css.center
, Css.flexWrap Css.wrap
] ]
] ]
[ TextInput.view "Title" [ TextInput.view "Title"
@ -58,6 +61,14 @@ viewSettings state =
, Select.value (Just state.icon) , Select.value (Just state.icon)
] ]
|> Html.map SetIcon |> Html.map SetIcon
, Checkbox.viewWithLabel
{ identifier = "show-border"
, label = "Show border"
, setterMsg = SetBorder
, selected = Checkbox.selectedFromBool state.showBorder
, disabled = False
, theme = Checkbox.Square
}
, Html.label [] , Html.label []
[ Html.text "Color: " [ Html.text "Color: "
, Html.input , Html.input
@ -123,6 +134,11 @@ viewResults state =
, " |> Svg.withColor color\n" , " |> Svg.withColor color\n"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n" , " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n" , " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n"
, if state.showBorder then
" |> Svg.withCss [ Css.border3 (Css.px 1) Css.solid Colors.gray20 ]\n"
else
""
, if String.isEmpty state.label then , if String.isEmpty state.label then
"" ""
@ -133,25 +149,25 @@ viewResults state =
|> String.join "" |> String.join ""
|> Html.text |> Html.text
] ]
, Html.div , Tuple.second state.icon
[ Attributes.css |> Svg.withColor (toCssColor state.color)
[ Css.backgroundColor Colors.gray92 |> Svg.withWidth (Css.px state.width)
, Css.flexGrow (Css.int 2) |> Svg.withHeight (Css.px state.height)
] |> (\svg ->
] if state.showBorder then
[ Tuple.second state.icon Svg.withCss [ Css.border3 (Css.px 1) Css.solid Colors.gray20 ] svg
|> Svg.withColor (toCssColor state.color)
|> Svg.withWidth (Css.px state.width)
|> Svg.withHeight (Css.px state.height)
|> (\svg ->
if String.isEmpty state.label then
svg
else else
Svg.withLabel state.label svg svg
) )
|> Svg.toHtml |> (\svg ->
] if String.isEmpty state.label then
svg
else
Svg.withLabel state.label svg
)
|> Svg.toHtml
] ]
@ -163,6 +179,7 @@ type alias State =
, width : Float , width : Float
, height : Float , height : Float
, label : String , label : String
, showBorder : Bool
} }
@ -172,9 +189,10 @@ init =
{ iconSelectorExpanded = False { iconSelectorExpanded = False
, icon = ( "starFilled", UiIcon.starFilled ) , icon = ( "starFilled", UiIcon.starFilled )
, color = fromCssColor Colors.greenDark , color = fromCssColor Colors.greenDark
, width = 30 , width = 100
, height = 30 , height = 100
, label = "Mastered" , label = "Mastered"
, showBorder = False
} }
@ -185,6 +203,7 @@ type Msg
| SetWidth (Maybe Float) | SetWidth (Maybe Float)
| SetHeight (Maybe Float) | SetHeight (Maybe Float)
| SetLabel String | SetLabel String
| SetBorder Bool
{-| -} {-| -}
@ -218,3 +237,6 @@ update msg state =
SetLabel label -> SetLabel label ->
( { state | label = label }, Cmd.none ) ( { state | label = label }, Cmd.none )
SetBorder showBorder ->
( { state | showBorder = showBorder }, Cmd.none )