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

Adds more example code

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-24 15:54:46 -07:00
parent 05e8f89df4
commit 92876cd6f6
1 changed files with 103 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
styleguide-app/Examples/SegmentedControl.elm
View File

@ -46,13 +46,27 @@ example =
let let
options = options =
Control.currentValue state.optionsControl Control.currentValue state.optionsControl
pageOptions =
List.take options.count (buildOptions options state.pageTooltip)
in in
[ ControlView.view [ ControlView.view
{ update = ChangeOptions { update = ChangeOptions
, settings = state.optionsControl , settings = state.optionsControl
, toExampleCode = , toExampleCode =
\settings -> \settings ->
[ { sectionName = "view", code = "TODO" } [ { sectionName = "view"
, code =
[ "view "
, " { focusAndSelect = FocusAndSelectPage"
, " , options = " ++ ControlView.codeFromList pageOptions
, " , selected = \"" ++ Debug.toString state.page ++ "\""
, " , positioning = " ++ Tuple.first options.positioning
, " , toUrl = Nothing"
, " }"
]
|> String.join "\n"
}
, { sectionName = "viewRadioGroup", code = "TODO" } , { sectionName = "viewRadioGroup", code = "TODO" }
] ]
} }
@ -63,9 +77,9 @@ example =
, SegmentedControl.view , SegmentedControl.view
{ focusAndSelect = FocusAndSelectPage { focusAndSelect = FocusAndSelectPage
, selected = state.page , selected = state.page
, positioning = options.positioning , positioning = Tuple.second options.positioning
, toUrl = Nothing , toUrl = Nothing
, options = List.take options.count (buildOptions options state.pageTooltip) , options = List.map Tuple.second pageOptions
} }
, Html.h3 [ css [ Css.marginBottom Css.zero ] ] , Html.h3 [ css [ Css.marginBottom Css.zero ] ]
[ Html.code [] [ Html.text "viewRadioGroup" ] ] [ Html.code [] [ Html.text "viewRadioGroup" ] ]
@ -76,7 +90,7 @@ example =
, onSelect = SelectRadio , onSelect = SelectRadio
, options = List.take options.count (buildRadioOptions options state.radioTooltip options.content) , options = List.take options.count (buildRadioOptions options state.radioTooltip options.content)
, selected = state.optionallySelected , selected = state.optionallySelected
, positioning = options.positioning , positioning = Tuple.second options.positioning
} }
] ]
, categories = [ Layout, Inputs ] , categories = [ Layout, Inputs ]
@ -144,54 +158,77 @@ type Page
| Activity | Activity
buildOptions : { options | content : Content, longContent : Bool, tooltips : Bool } -> Maybe Page -> List (SegmentedControl.Option Page Msg) buildOptions : { options | content : Content, longContent : Bool, tooltips : Bool } -> Maybe Page -> List ( String, SegmentedControl.Option Page Msg )
buildOptions { content, longContent, tooltips } openTooltip = buildOptions { content, longContent, tooltips } openTooltip =
let let
buildOption value icon_ = buildOption value icon_ =
let let
( icon, label ) = ( maybeIcon, label ) =
getIconAndLabel content icon_ (Html.text (Debug.toString value)) getIconAndLabel content icon_ (Debug.toString value)
valueStr =
"\"" ++ Debug.toString value ++ "\""
in in
{ icon = icon ( [ "{ icon = " ++ Debug.toString (Maybe.map Tuple.first maybeIcon)
, label = label , ", label = text " ++ valueStr
, value = value , ", value = " ++ valueStr
, idString = toLower (Debug.toString value) , ", idString = toLower " ++ valueStr
, attributes = [] , ", attributes = []"
, tabTooltip = , ", tabTooltip = "
if tooltips then ++ (if tooltips then
[ Tooltip.plaintext (Debug.toString value) ("\n\t\t[ Tooltip.plaintext " ++ valueStr)
, Tooltip.onHover (PageTooltip value) ++ ("\n\t\t, Tooltip.onHover (OpenTooltip " ++ valueStr ++ ")")
, Tooltip.open (openTooltip == Just value) ++ ("\n\t\t, Tooltip.open (openTooltip == Just " ++ valueStr ++ ")")
] ++ "\n\t\t]"
else else
[] "[]"
, content = )
if longContent then , ", content = Html.text \"...\""
Html.div , "}"
[ css ]
[ Css.maxHeight (Css.px 100) |> String.join "\n\t "
, Css.overflowY Css.auto , { icon = Maybe.map Tuple.second maybeIcon
, label = Html.text label
, value = value
, idString = toLower (Debug.toString value)
, attributes = []
, tabTooltip =
if tooltips then
[ Tooltip.plaintext (Debug.toString value)
, Tooltip.onHover (PageTooltip value)
, Tooltip.open (openTooltip == Just value)
]
else
[]
, content =
if longContent then
Html.div
[ css
[ Css.maxHeight (Css.px 100)
, Css.overflowY Css.auto
]
]
[ Html.p [] [ Html.text <| "Content for " ++ Debug.toString value ]
, Html.ol [] <|
List.map (\i -> Html.li [] [ Html.text (Debug.toString value) ])
(List.range 1 20)
] ]
]
[ Html.p [] [ Html.text <| "Content for " ++ Debug.toString value ]
, Html.ol [] <|
List.map (\i -> Html.li [] [ Html.text (Debug.toString value) ])
(List.range 1 20)
]
else else
Html.text <| "Content for " ++ Debug.toString value Html.text <| "Content for " ++ Debug.toString value
} }
)
in in
[ buildOption Flag UiIcon.flag [ buildOption Flag ( "UiIcon.flag", UiIcon.flag )
, buildOption Sprout UiIcon.sprout , buildOption Sprout ( "UiIcon.sprout", UiIcon.sprout )
, buildOption Star UiIcon.star , buildOption Star ( "UiIcon.star", UiIcon.star )
, buildOption Sapling UiIcon.sapling , buildOption Sapling ( "UiIcon.sapling", UiIcon.sapling )
, buildOption Attention <| Svg.withColor Colors.greenDark UiIcon.attention , buildOption Attention ( "UiIcon.attention", Svg.withColor Colors.greenDark UiIcon.attention )
, buildOption Tree UiIcon.tree , buildOption Tree ( "UiIcon.tree", UiIcon.tree )
, buildOption Premium UiIcon.premiumLock , buildOption Premium ( "UiIcon.premiumLock", UiIcon.premiumLock )
, buildOption Activity <| Svg.withColor Colors.purple UiIcon.activity , buildOption Activity ( "UiIcon.activity", Svg.withColor Colors.purple UiIcon.activity )
] ]
@ -204,10 +241,10 @@ buildRadioOptions options currentlyHovered content =
( icon_, label ) = ( icon_, label ) =
getIconAndLabel content getIconAndLabel content
icon icon
(Html.text ("Source " ++ Debug.toString (value + 1))) ("Source " ++ Debug.toString (value + 1))
in in
{ icon = icon_ { icon = icon_
, label = label , label = Html.text label
, value = value , value = value
, idString = String.fromInt value , idString = String.fromInt value
, tooltip = , tooltip =
@ -266,7 +303,7 @@ init =
type alias Options = type alias Options =
{ positioning : SegmentedControl.Positioning { positioning : ( String, SegmentedControl.Positioning )
, content : Content , content : Content
, count : Int , count : Int
, longContent : Bool , longContent : Bool
@ -279,9 +316,24 @@ optionsControl =
Control.record Options Control.record Options
|> Control.field "positioning" |> Control.field "positioning"
(Control.choice (Control.choice
[ ( "Left (FitContent)", Control.value (SegmentedControl.Left SegmentedControl.FitContent) ) [ ( "Left (FitContent)"
, ( "Left (FillContainer)", Control.value (SegmentedControl.Left SegmentedControl.FillContainer) ) , Control.value
, ( "Center", Control.value SegmentedControl.Center ) ( "SegmentedControl.Left SegmentedControl.FitContent"
, SegmentedControl.Left SegmentedControl.FitContent
)
)
, ( "Left (FillContainer)"
, Control.value
( "SegmentedControl.Left SegmentedControl.FillContainer"
, SegmentedControl.Left SegmentedControl.FillContainer
)
)
, ( "Center"
, Control.value
( "SegmentedControl.Center"
, SegmentedControl.Center
)
)
] ]
) )
|> Control.field "content" controlContent |> Control.field "content" controlContent
@ -308,14 +360,14 @@ controlContent =
] ]
getIconAndLabel : Content -> svg -> Html msg -> ( Maybe svg, Html msg ) getIconAndLabel : Content -> icon -> String -> ( Maybe icon, String )
getIconAndLabel content icon_ value = getIconAndLabel content icon_ value =
case content of case content of
TextAndIcon -> TextAndIcon ->
( Just icon_, value ) ( Just icon_, value )
Icon -> Icon ->
( Just icon_, Html.text "" ) ( Just icon_, "" )
Text -> Text ->
( Nothing, value ) ( Nothing, value )