NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-25 22:53:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Show all the themes at once

Browse Source
This commit is contained in:
Tessa Kelly 2020-09-28 14:45:03 -07:00
parent 3b4b83482e
commit e7c1e2fa1c
1 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
styleguide-app/Examples/ClickableSvg.elm
View File

@ -163,36 +163,50 @@ Tooltip.view
viewExampleTable : Svg -> List (ClickableSvg.Attribute Msg) -> Html Msg viewExampleTable : Svg -> List (ClickableSvg.Attribute Msg) -> Html Msg
viewExampleTable icon attributes = viewExampleTable icon attributes =
let let
cell = viewExampleRow index ( themeName, theme ) =
Html.tr []
[ cell index [ Html.text themeName ]
, cell index
[ ClickableSvg.button "Button example"
icon
(ClickableSvg.onClick (ShowItWorked "You clicked the back button!")
:: theme
:: attributes
)
]
, cell index
[ ClickableSvg.link "Link example"
icon
(ClickableSvg.linkSpa "some_link" :: theme :: attributes)
]
]
cell index =
Html.td Html.td
[ Attributes.css [ Attributes.css
[ Css.backgroundColor Colors.gray96 [ if modBy 2 index == 0 then
, Css.padding (Css.px 30) Css.backgroundColor Colors.gray96
else
Css.backgroundColor Colors.white
, Css.padding (Css.px 10)
] ]
] ]
in in
Html.table [] Html.table []
[ Html.thead [] [ Html.thead []
[ Html.tr [] [ Html.tr []
[ Html.th [] [ Html.text "button" ] [ Html.th [] [ Html.text "theme" ]
, Html.th [] [ Html.text "button" ]
, Html.th [] [ Html.text "link" ] , Html.th [] [ Html.text "link" ]
] ]
] ]
, Html.tbody [] , Html.tbody [] <|
[ Html.tr [] List.indexedMap viewExampleRow
[ cell [ ( "primary", ClickableSvg.primary )
[ ClickableSvg.button "Button example" , ( "secondary", ClickableSvg.secondary )
icon , ( "danger", ClickableSvg.danger )
(ClickableSvg.onClick (ShowItWorked "You clicked the back button!") , ( "dangerSecondary", ClickableSvg.dangerSecondary )
:: attributes
)
]
, cell
[ ClickableSvg.link "Link example"
icon
(ClickableSvg.linkSpa "some_link" :: attributes)
]
]
] ]
] ]
@ -267,7 +281,6 @@ type alias Settings msg =
{ icon : Svg { icon : Svg
, disabled : ClickableSvg.Attribute msg , disabled : ClickableSvg.Attribute msg
, withBorder : ClickableSvg.Attribute msg , withBorder : ClickableSvg.Attribute msg
, theme : ClickableSvg.Attribute msg
, width : ClickableSvg.Attribute msg , width : ClickableSvg.Attribute msg
, height : ClickableSvg.Attribute msg , height : ClickableSvg.Attribute msg
} }
@ -276,10 +289,10 @@ type alias Settings msg =
applySettings : Control (Settings msg) -> ( Svg, List (ClickableSvg.Attribute msg) ) applySettings : Control (Settings msg) -> ( Svg, List (ClickableSvg.Attribute msg) )
applySettings settings = applySettings settings =
let let
{ icon, disabled, withBorder, theme, width, height } = { icon, disabled, withBorder, width, height } =
Control.currentValue settings Control.currentValue settings
in in
( icon, [ disabled, withBorder, theme, width, height ] ) ( icon, [ disabled, withBorder, width, height ] )
initSettings : Control (Settings msg) initSettings : Control (Settings msg)
@ -312,14 +325,6 @@ initSettings =
) )
(Control.bool False) (Control.bool False)
) )
|> Control.field "theme"
(Control.choice
[ ( "primary", Control.value ClickableSvg.primary )
, ( "secondary", Control.value ClickableSvg.secondary )
, ( "danger", Control.value ClickableSvg.danger )
, ( "dangerSecondary", Control.value ClickableSvg.dangerSecondary )
]
)
|> Control.field "width" |> Control.field "width"
(Control.map (Css.px >> ClickableSvg.width) (controlNumber 30)) (Control.map (Css.px >> ClickableSvg.width) (controlNumber 30))
|> Control.field "height" |> Control.field "height"