Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-09-17 17:28:03 +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 exposing (Attribute, Element)
import Element.Input as Input exposing (Label, Option, labelAbove, option, radio) import Element.Input as Input exposing (Label, Option, labelAbove, option, radio)
import SelectList exposing (SelectList) import SelectList exposing (SelectList)
import UIExplorer exposing (PageSize) import UIExplorer.Tile as Tile exposing (Context)
import UIExplorer.Tile as Tile import Widget
import Widget.Material as Material
type StoryInfo type StoryInfo
@ -313,57 +314,81 @@ storyHelp info =
Just <| BoolStoryModel label default Just <| BoolStoryModel label default
storyView : StoryModel -> Element StorySelectorMsg storyView : Context -> StoryModel -> Element StorySelectorMsg
storyView model = storyView context model =
case model of case model of
RangeStoryModel label { unit, min, max, value } -> RangeStoryModel label { unit, min, max, value } ->
Input.slider [] Element.column [ Element.spacing 8 ]
{ onChange = round >> String.fromInt >> StorySelect label [ Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")"
, label = Input.labelAbove [] <| Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")" , Input.slider []
, min = toFloat min { onChange = round >> String.fromInt >> StorySelect label
, max = toFloat max , label = Input.labelHidden label
, value = toFloat value , min = toFloat min
, thumb = Input.defaultThumb , max = toFloat max
, step = Just 1.0 , value = toFloat value
} , thumb = Input.defaultThumb
, step = Just 1.0
}
]
TextStoryModel label value -> TextStoryModel label value ->
Input.text [] Element.column [ Element.spacing 8 ]
{ onChange = StorySelect label [ Element.text label
, label = Input.labelAbove [] <| Element.text label , Widget.textInput (Material.textInput context.palette)
, placeholder = Nothing { chips = []
, text = value , onChange = StorySelect label
} , label = label
, placeholder = Nothing
, text = value
}
]
OptionListStoryModel label options -> OptionListStoryModel label options ->
radio [] Element.column [ Element.spacing 8 ]
{ label = labelAbove [] <| Element.text label [ Element.text label
, onChange = StorySelect label , { selected =
, options = Just <| SelectList.index options
options , options =
|> SelectList.toList options
|> List.map |> SelectList.toList
(\value -> |> List.map
option value <| Element.text value (\opt ->
) { text = opt
, selected = Just <| SelectList.selected options , 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 -> BoolStoryModel label value ->
Input.checkbox [] Element.row [ Element.spacing 8 ]
{ label = Input.labelRight [] <| Element.text label [ Widget.switch (Material.switch context.palette)
, onChange = { description = label
\v -> , onPress =
StorySelect label Just <|
(if v then StorySelect label <|
"t" if value then
"f"
else else
"f" "t"
) , active = value
, icon = Input.defaultCheckbox }
, checked = value , Element.text label
} ]
storyTile : Maybe String -> List StoryInfo -> (List String -> a) -> Tile.Group StorySelectorModel StorySelectorMsg flags 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 ) ( selectStory story value model, Cmd.none )
, subscriptions = always Sub.none , subscriptions = always Sub.none
, views = , views =
\_ model -> \context model ->
[ { title = title [ { title = title
, position = Tile.NewRightColumnTile , position = Tile.NewRightColumnTile
, attributes = [] , attributes = []
, body = , body =
model model
|> List.map storyView |> List.map (storyView context)
|> Element.column [] |> Element.column [ Element.spacing 8 ]
} }
] ]
} }
build : 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 -> Tile.Group ( StorySelectorModel, model ) (Tile.TileMsg StorySelectorMsg msg) flags
build builder = build builder =
storyTile builder.title builder.stories builder.storiesToValue storyTile builder.title builder.stories builder.storiesToValue
@ -407,7 +432,7 @@ build builder =
builder.tilelist.update msg model builder.tilelist.update msg model
, subscriptions = Tuple.second >> builder.tilelist.subscriptions , subscriptions = Tuple.second >> builder.tilelist.subscriptions
, views = , views =
\pagesize ( selectorModel, model ) -> \context ( selectorModel, model ) ->
selectorModel selectorModel
|> selectedStories |> selectedStories
|> List.reverse |> List.reverse
@ -415,6 +440,6 @@ build builder =
|> builder.tilelist.views |> builder.tilelist.views
|> List.map |> List.map
(\view -> (\view ->
view pagesize model view context model
) )
} }

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

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