Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-11-22 04:58:49 +03:00
Code Issues Projects Releases Wiki Activity

explorer: use widgets for story views

Browse Source
This commit is contained in:
Christophe de Vienne 2021-06-01 17:18:52 +02:00
parent 0b637b2cf4
commit 36560580e8
2 changed files with 92 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
explorer/src/UIExplorer/Story.elm
View File

@ -4,8 +4,9 @@ import Dict exposing (Dict)
import Element exposing (Attribute, Element)
import Element.Input as Input exposing (Label, Option, labelAbove, option, radio)
import SelectList exposing (SelectList)
import UIExplorer exposing (PageSize)
import UIExplorer.Tile as Tile
import UIExplorer.Tile as Tile exposing (Context)
import Widget
import Widget.Material as Material
type StoryInfo
@ -313,57 +314,81 @@ storyHelp info =
Just <| BoolStoryModel label default
storyView : StoryModel -> Element StorySelectorMsg
storyView model =
storyView : Context -> StoryModel -> Element StorySelectorMsg
storyView context model =
case model of
RangeStoryModel label { unit, min, max, value } ->
Input.slider []
{ onChange = round >> String.fromInt >> StorySelect label
, label = Input.labelAbove [] <| Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")"
, min = toFloat min
, max = toFloat max
, value = toFloat value
, thumb = Input.defaultThumb
, step = Just 1.0
}
Element.column [ Element.spacing 8 ]
[ Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")"
, Input.slider []
{ onChange = round >> String.fromInt >> StorySelect label
, label = Input.labelHidden label
, min = toFloat min
, max = toFloat max
, value = toFloat value
, thumb = Input.defaultThumb
, step = Just 1.0
}
]
TextStoryModel label value ->
Input.text []
{ onChange = StorySelect label
, label = Input.labelAbove [] <| Element.text label
, placeholder = Nothing
, text = value
}
Element.column [ Element.spacing 8 ]
[ Element.text label
, Widget.textInput (Material.textInput context.palette)
{ chips = []
, onChange = StorySelect label
, label = label
, placeholder = Nothing
, text = value
}
]
OptionListStoryModel label options ->
radio []
{ label = labelAbove [] <| Element.text label
, onChange = StorySelect label
, options =
options
|> SelectList.toList
|> List.map
(\value ->
option value <| Element.text value
)
, selected = Just <| SelectList.selected options
}
Element.column [ Element.spacing 8 ]
[ Element.text label
, { selected =
Just <| SelectList.index options
, options =
options
|> SelectList.toList
|> List.map
(\opt ->
{ text = opt
, icon = always Element.none
}
)
, onSelect =
\selected ->
options
|> SelectList.toList
|> List.indexedMap (\i opt -> ( i, opt ))
|> List.filter (\( i, opt ) -> selected == i)
|> List.head
|> Maybe.map (Tuple.second >> StorySelect label)
}
|> Widget.select
|> Widget.buttonColumn
{ elementColumn = Material.column
, content = Material.textButton context.palette
}
]
BoolStoryModel label value ->
Input.checkbox []
{ label = Input.labelRight [] <| Element.text label
, onChange =
\v ->
StorySelect label
(if v then
"t"
Element.row [ Element.spacing 8 ]
[ Widget.switch (Material.switch context.palette)
{ description = label
, onPress =
Just <|
StorySelect label <|
if value then
"f"
else
"f"
)
, icon = Input.defaultCheckbox
, checked = value
}
else
"t"
, active = value
}
, Element.text label
]
storyTile : Maybe String -> List StoryInfo -> (List String -> a) -> Tile.Group StorySelectorModel StorySelectorMsg flags
@ -382,21 +407,21 @@ storyTile title stories storiesToValue =
( selectStory story value model, Cmd.none )
, subscriptions = always Sub.none
, views =
\_ model ->
\context model ->
[ { title = title
, position = Tile.NewRightColumnTile
, attributes = []
, body =
model
|> List.map storyView
|> Element.column []
|> List.map (storyView context)
|> Element.column [ Element.spacing 8 ]
}
]
}
build :
BookBuilder (PageSize -> model -> Tile.View msg) model msg flags a
BookBuilder (Context -> model -> Tile.View msg) model msg flags a
-> Tile.Group ( StorySelectorModel, model ) (Tile.TileMsg StorySelectorMsg msg) flags
build builder =
storyTile builder.title builder.stories builder.storiesToValue
@ -407,7 +432,7 @@ build builder =
builder.tilelist.update msg model
, subscriptions = Tuple.second >> builder.tilelist.subscriptions
, views =
\pagesize ( selectorModel, model ) ->
\context ( selectorModel, model ) ->
selectorModel
|> selectedStories
|> List.reverse
@ -415,6 +440,6 @@ build builder =
|> builder.tilelist.views
|> List.map
(\view ->
view pagesize model
view context model
)
}

24
explorer/src/UIExplorer/Tile.elm
View File

@ -22,6 +22,12 @@ type Position
| NewLeftColumnTile
type alias Context =
{ pagesize : PageSize
, palette : Material.Palette
}
type alias View msg =
{ title : Maybe String
, position : Position
@ -47,7 +53,7 @@ mapViewList map =
type alias Tile model msg flags =
{ init : flags -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, view : PageSize -> model -> View msg
, view : Context -> model -> View msg
, subscriptions : model -> Sub msg
}
@ -55,7 +61,7 @@ type alias Tile model msg flags =
type alias Group model msg flags =
{ init : flags -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, views : PageSize -> model -> List (View msg)
, views : Context -> model -> List (View msg)
, subscriptions : model -> Sub msg
}
@ -63,7 +69,7 @@ type alias Group model msg flags =
type alias LinkedGroup sharedModel model msg flags =
{ init : flags -> ( model, Cmd msg )
, update : msg -> ( sharedModel, model ) -> ( model, Cmd msg )
, views : PageSize -> ( sharedModel, model ) -> List (View msg)
, views : Context -> ( sharedModel, model ) -> List (View msg)
, subscriptions : ( sharedModel, model ) -> Sub msg
}
@ -135,7 +141,7 @@ type Builder model msg flags
= Builder
{ init : flags -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, views : PageSize -> model -> List (View msg)
, views : Context -> model -> List (View msg)
, subscriptions : model -> Sub msg
}
@ -208,7 +214,7 @@ nextGroup config (Builder previous) =
in
( ( previousModel, newModel ), Cmd.map Current cmds )
views_ : PageSize -> ( modelPrevious, model ) -> List (View (TileMsg msgPrevious msg))
views_ : Context -> ( modelPrevious, model ) -> List (View (TileMsg msgPrevious msg))
views_ windowSize ( previousModel, model ) =
List.append
(previous.views windowSize previousModel |> mapViewList Previous)
@ -342,7 +348,11 @@ page (Builder config) =
else
Material.defaultPalette
in
config.views pagesize model
config.views
{ pagesize = pagesize
, palette = palette
}
model
|> List.foldl layoutAddTile []
|> List.reverse
|> List.concatMap (layoutRowView palette)
@ -375,7 +385,7 @@ markdown attributes text =
)
static : List (Attribute msg) -> (PageSize -> flags -> Element msg) -> Tile flags msg flags
static : List (Attribute msg) -> (Context -> flags -> Element msg) -> Tile flags msg flags
static attributes tileView =
{ init = \flags -> ( flags, Cmd.none )
, update = \_ m -> ( m, Cmd.none )