From 1ac6a0ac2ec36d6362f45fee5d418156b321bbea Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Fri, 4 Jun 2021 08:47:59 +0200 Subject: [PATCH] Added Select Page --- explorer/index.html | 48 ++---- explorer/src/Main.elm | 2 + explorer/src/Page.elm | 32 +++- explorer/src/Page/Button.elm | 194 ++++++++++++------------ explorer/src/Page/PasswordInput.elm | 123 ++++++---------- explorer/src/Page/Select.elm | 220 ++++++++++++++++++++++++++++ explorer/src/UIExplorer/Story.elm | 18 +-- explorer/src/UIExplorer/Tile.elm | 6 +- 8 files changed, 411 insertions(+), 232 deletions(-) create mode 100644 explorer/src/Page/Select.elm diff --git a/explorer/index.html b/explorer/index.html index ef1a6be..7a29240 100644 --- a/explorer/index.html +++ b/explorer/index.html @@ -15794,6 +15794,8 @@ var $author$project$Internal$Material$TextInput$textInput = function (palette) { $mdgriffith$elm_ui$Element$Border$color( $author$project$Widget$Material$Color$fromColor(palette.primary)) ])), + $mdgriffith$elm_ui$Element$width( + $mdgriffith$elm_ui$Element$px(280)), $mdgriffith$elm_ui$Element$mouseOver( _List_fromArray( [ @@ -19675,7 +19677,9 @@ var $author$project$Internal$Material$PasswordInput$passwordInput = function (pa [ $mdgriffith$elm_ui$Element$Border$shadow( $author$project$Widget$Material$Color$shadow(2)) - ])) + ])), + $mdgriffith$elm_ui$Element$width( + $mdgriffith$elm_ui$Element$px(280)) ])) }; }; @@ -19791,17 +19795,19 @@ var $author$project$Page$PasswordInput$SetPasswordInput = function (a) { }; var $author$project$Page$PasswordInput$view = F2( function (_v0, model) { + var palette = _v0.palette; return { attributes: _List_Nil, body: A2( $mdgriffith$elm_ui$Element$column, _List_fromArray( [ - $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill) + $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill), + $mdgriffith$elm_ui$Element$spacing(8) ]), _List_fromArray( [ - $mdgriffith$elm_ui$Element$text('Try autofill to fill out this field'), + $mdgriffith$elm_ui$Element$text('Try fill out these fields using autofill'), A2( $mdgriffith$elm_ui$Element$row, _List_fromArray( @@ -19819,21 +19825,9 @@ var $author$project$Page$PasswordInput$view = F2( ]), $mdgriffith$elm_ui$Element$text('Current Password')), A2( - $mdgriffith$elm_ui$Element$el, - _List_fromArray( - [ - $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink) - ]), - A2( - $mdgriffith$elm_ui$Element$el, - _List_fromArray( - [ - $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill) - ]), - A2( - $author$project$Widget$currentPasswordInput, - $author$project$Widget$Material$passwordInput($author$project$Widget$Material$defaultPalette), - {label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput}))) + $author$project$Widget$currentPasswordInput, + $author$project$Widget$Material$passwordInput(palette), + {label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput}) ])), A2( $mdgriffith$elm_ui$Element$row, @@ -19852,21 +19846,9 @@ var $author$project$Page$PasswordInput$view = F2( ]), $mdgriffith$elm_ui$Element$text('New Password')), A2( - $mdgriffith$elm_ui$Element$el, - _List_fromArray( - [ - $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink) - ]), - A2( - $mdgriffith$elm_ui$Element$el, - _List_fromArray( - [ - $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill) - ]), - A2( - $author$project$Widget$newPasswordInput, - $author$project$Widget$Material$passwordInput($author$project$Widget$Material$defaultPalette), - {label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput}))) + $author$project$Widget$newPasswordInput, + $author$project$Widget$Material$passwordInput(palette), + {label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput}) ])), $mdgriffith$elm_ui$Element$text( ((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '') diff --git a/explorer/src/Main.elm b/explorer/src/Main.elm index f7c0d54..a9e9e13 100644 --- a/explorer/src/Main.elm +++ b/explorer/src/Main.elm @@ -3,11 +3,13 @@ module Main exposing (main) import Element import Page.Button import Page.PasswordInput +import Page.Select import UIExplorer pages = UIExplorer.firstPage "Button" Page.Button.page + |> UIExplorer.nextPage "Select" Page.Select.page |> UIExplorer.nextPage "Password Input" Page.PasswordInput.page diff --git a/explorer/src/Page.elm b/explorer/src/Page.elm index 4ad89aa..0295f89 100644 --- a/explorer/src/Page.elm +++ b/explorer/src/Page.elm @@ -1,9 +1,9 @@ -module Page exposing (create, viewTile) +module Page exposing (create, demo, viewTile) import Element exposing (Element) import UIExplorer exposing (Page) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) -import UIExplorer.Tile as Tile exposing (Group, Tile, TileMsg) +import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg) import Widget.Material as Material exposing (Palette) import Widget.Material.Typography as Typography @@ -21,17 +21,17 @@ create : , demo : Tile model msg () } -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) () -create { title, description, book, demo } = +create config = Tile.static [] (\_ _ -> - [ title |> Element.text |> Element.el Typography.h3 - , description |> Element.text |> List.singleton |> Element.paragraph [] + [ config.title |> Element.text |> Element.el Typography.h3 + , config.description |> Element.text |> List.singleton |> Element.paragraph [] ] |> Element.column [ Element.spacing 32 ] ) |> Tile.first - |> Tile.nextGroup book - |> Tile.next demo + |> Tile.nextGroup config.book + |> Tile.next config.demo |> Tile.page @@ -59,3 +59,21 @@ viewTile title content = , content ] } + + +demo : + (Context -> model -> Element msg) + -> + (Context + -> model + -> { title : Maybe String, position : Position, attributes : List b, body : Element msg } + ) +demo fun context model = + fun context model + |> (\body -> + { title = Just "Interactive Demo" + , position = Tile.FullWidthTile + , attributes = [] + , body = body + } + ) diff --git a/explorer/src/Page/Button.elm b/explorer/src/Page/Button.elm index e4289c2..efbba02 100644 --- a/explorer/src/Page/Button.elm +++ b/explorer/src/Page/Button.elm @@ -5,22 +5,17 @@ module Page.Button exposing (page) import Element exposing (Element) import Element.Background as Background -import Element.Font -import Material.Icons as MaterialIcons exposing (offline_bolt) +import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page -import UIExplorer import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) -import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg) -import Widget exposing (ButtonStyle) +import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) +import Widget import Widget.Customize as Customize -import Widget.Icon as Icon exposing (Icon) +import Widget.Icon as Icon import Widget.Material as Material exposing - ( Palette - , containedButton - , darkPalette - , defaultPalette + ( containedButton , outlinedButton , textButton ) @@ -55,7 +50,7 @@ viewFunctions = --Don't forget to change the title |> Page.viewTile "Widget.button" - viewTextButton button text icon onPress { palette } () = + viewTextButton button text _ onPress { palette } () = Widget.textButton (button palette |> Customize.elementButton @@ -98,10 +93,9 @@ book = --Adding a option for different styles. |> Story.addStory (Story.optionListStory "Style" - containedButton - [ ( "contained", containedButton ) - , ( "outlined", outlinedButton ) - , ( "text", textButton ) + ( "Contained", containedButton ) + [ ( "Outlined", outlinedButton ) + , ( "Text", textButton ) ] ) --Changing the text of the label @@ -111,15 +105,12 @@ book = ) --Change the Icon |> Story.addStory - (Story.optionListStory "Icon" - (MaterialIcons.done + (Story.boolStory "With Icon" + ( MaterialIcons.done |> Icon.elmMaterialIcons Color + , always Element.none ) - [ ( "done" - , MaterialIcons.done - |> Icon.elmMaterialIcons Color - ) - ] + True ) --Should an event be triggered when pressing the button? |> Story.addStory @@ -188,7 +179,7 @@ subscriptions _ = Sub.none -view : Context -> Int -> { title : Maybe String, position : Position, attributes : List b, body : Element Msg } +view : Context -> Model -> Element Msg view { palette } model = let style = @@ -201,98 +192,93 @@ view { palette } model = , cardColumn = Material.cardColumn palette } in - { title = Just "Interactive Demo" - , position = Tile.FullWidthTile - , attributes = [] - , body = - [ model - |> String.fromInt - |> Element.text - |> Element.el - (Typography.h4 - ++ [ Element.centerX, Element.centerY ] - ) - |> List.singleton - |> Widget.column - (style.cardColumn - |> Customize.elementColumn - [ Element.centerX - , Element.width <| Element.px 128 + [ model + |> String.fromInt + |> Element.text + |> Element.el + (Typography.h4 + ++ [ Element.centerX, Element.centerY ] + ) + |> List.singleton + |> Widget.column + (style.cardColumn + |> Customize.elementColumn + [ Element.centerX + , Element.width <| Element.px 128 + , Element.height <| Element.px 128 + , Widget.iconButton style.iconButton + { text = "+2" + , icon = + MaterialIcons.exposure_plus_2 + |> Icon.elmMaterialIcons Color + , onPress = + Increase 2 + |> Just + } + |> Element.el [ Element.alignRight ] + |> Element.inFront + ] + |> Customize.mapContent + (Customize.element + [ Element.width <| Element.px 128 , Element.height <| Element.px 128 - , Widget.iconButton style.iconButton - { text = "+2" - , icon = - MaterialIcons.exposure_plus_2 - |> Icon.elmMaterialIcons Color - , onPress = - Increase 2 - |> Just - } - |> Element.el [ Element.alignRight ] - |> Element.inFront + , Material.defaultPalette.secondary + |> MaterialColor.fromColor + |> Background.color ] - |> Customize.mapContent - (Customize.element - [ Element.width <| Element.px 128 - , Element.height <| Element.px 128 - , Material.defaultPalette.secondary - |> MaterialColor.fromColor - |> Background.color - ] - ) - ) - , [ [ Widget.textButton style.textButton - { text = "Reset" - , onPress = - Reset + ) + ) + , [ [ Widget.textButton style.textButton + { text = "Reset" + , onPress = + Reset + |> Just + } + , Widget.button style.outlinedButton + { text = "Decrease" + , icon = + MaterialIcons.remove + |> Icon.elmMaterialIcons Color + , onPress = + if model > 0 then + Decrease 1 |> Just - } - , Widget.button style.outlinedButton - { text = "Decrease" - , icon = - MaterialIcons.remove - |> Icon.elmMaterialIcons Color - , onPress = - if model > 0 then - Decrease 1 - |> Just - else - Nothing - } - ] - |> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ]) - , [ Widget.button style.containedButton - { text = "Increase" - , icon = - MaterialIcons.add - |> Icon.elmMaterialIcons Color - , onPress = - Increase 1 - |> Just - } - ] - |> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ]) - ] - |> Widget.row - (style.row - |> Customize.elementRow [ Element.width <| Element.fill ] - |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ]) - ) + else + Nothing + } ] - |> Widget.column - (style.column - |> Customize.elementColumn [ Element.width <| Element.fill ] - |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ]) - ) - } + |> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ]) + , [ Widget.button style.containedButton + { text = "Increase" + , icon = + MaterialIcons.add + |> Icon.elmMaterialIcons Color + , onPress = + Increase 1 + |> Just + } + ] + |> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ]) + ] + |> Widget.row + (style.row + |> Customize.elementRow [ Element.width <| Element.fill ] + |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ]) + ) + ] + |> Widget.column + (style.column + |> Customize.elementColumn [ Element.width <| Element.fill ] + |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ]) + ) demo : Tile Model Msg () demo = { init = always init , update = update - , view = view + , view = Page.demo view , subscriptions = subscriptions } diff --git a/explorer/src/Page/PasswordInput.elm b/explorer/src/Page/PasswordInput.elm index cf9db36..a3c4db2 100644 --- a/explorer/src/Page/PasswordInput.elm +++ b/explorer/src/Page/PasswordInput.elm @@ -1,31 +1,17 @@ module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view) -import Browser import Element exposing (Element) -import Element.Background as Background -import Element.Font import Element.Input as Input -import Material.Icons as MaterialIcons exposing (offline_bolt) import Material.Icons.Types exposing (Coloring(..)) import Page -import Set exposing (Set) -import UIExplorer exposing (Page) -import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) -import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg) -import Widget exposing (ButtonStyle, ColumnStyle, PasswordInputStyle) -import Widget.Customize as Customize -import Widget.Icon as Icon exposing (Icon) +import UIExplorer.Story as Story +import UIExplorer.Tile exposing (Context, Tile) +import Widget import Widget.Material as Material exposing - ( Palette - , containedButton - , darkPalette + ( darkPalette , defaultPalette - , outlinedButton - , textButton ) -import Widget.Material.Color as MaterialColor -import Widget.Material.Typography as Typography {-| The title of this page @@ -46,7 +32,7 @@ description = -} viewFunctions = let - viewCurrentPassword palette text placeholder label _ _ = + viewCurrentPassword text placeholder label { palette } () = Widget.currentPasswordInput (Material.passwordInput palette) { text = text , placeholder = placeholder @@ -57,7 +43,7 @@ viewFunctions = --Don't forget to change the title |> Page.viewTile "Widget.currentPasswordInput" - viewNewPassword palette text placeholder label _ _ = + viewNewPassword text placeholder label { palette } () = Widget.newPasswordInput (Material.passwordInput palette) { text = text , placeholder = placeholder @@ -76,28 +62,19 @@ viewFunctions = book = Story.book (Just "Options") viewFunctions - |> Story.addStory - (Story.optionListStory "Palette" - darkPalette - [ ( "dark", darkPalette ) - , ( "default", defaultPalette ) - ] - ) |> Story.addStory (Story.textStory "Text" "123456789" ) |> Story.addStory - (Story.optionListStory "Placeholder" - Nothing - [ ( "Yes" - , "password" - |> Element.text - |> Input.placeholder [] - |> Just - ) - , ( "No", Nothing ) - ] + (Story.boolStory "Placeholder" + ( "password" + |> Element.text + |> Input.placeholder [] + |> Just + , Nothing + ) + True ) |> Story.addStory (Story.textStory "Label" @@ -148,52 +125,48 @@ subscriptions _ = Sub.none +view : Context -> Model -> Element Msg view { palette } model = - { title = Just "Interactive Demo" - , position = Tile.FullWidthTile - , attributes = [] - , body = - [ "Try fill out these fields using autofill" |> Element.text - , [ "Current Password" - |> Element.text - |> Element.el [ Element.width <| Element.fill ] - , Widget.currentPasswordInput (Material.passwordInput palette) - { text = model.passwordInput - , placeholder = Nothing - , label = "Chips" - , onChange = SetPasswordInput - , show = False - } - ] - |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ] - , [ "New Password" - |> Element.text - |> Element.el [ Element.width <| Element.fill ] - , Widget.newPasswordInput (Material.passwordInput palette) - { text = model.newInput - , placeholder = Nothing - , label = "Chips" - , onChange = SetNewPasswordInput - , show = False - } - ] - |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ] - , Element.text <| - if (model.newInput /= "") && (model.newInput == model.passwordInput) then - "Yeay, the two passwords match!" + [ "Try fill out these fields using autofill" |> Element.text + , [ "Current Password" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , Widget.currentPasswordInput (Material.passwordInput palette) + { text = model.passwordInput + , placeholder = Nothing + , label = "Chips" + , onChange = SetPasswordInput + , show = False + } + ] + |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ] + , [ "New Password" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , Widget.newPasswordInput (Material.passwordInput palette) + { text = model.newInput + , placeholder = Nothing + , label = "Chips" + , onChange = SetNewPasswordInput + , show = False + } + ] + |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ] + , Element.text <| + if (model.newInput /= "") && (model.newInput == model.passwordInput) then + "Yeay, the two passwords match!" - else - "" - ] - |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ] - } + else + "" + ] + |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ] demo : Tile Model Msg () demo = { init = always init , update = update - , view = view + , view = Page.demo view , subscriptions = subscriptions } diff --git a/explorer/src/Page/Select.elm b/explorer/src/Page/Select.elm new file mode 100644 index 0000000..3e91186 --- /dev/null +++ b/explorer/src/Page/Select.elm @@ -0,0 +1,220 @@ +module Page.Select exposing (page) + +{-| This is an example Page. If you want to add your own pages, simple copy and modify this one. +-} + +import Element exposing (Element) +import Element.Background as Background +import Element.Font +import Material.Icons as MaterialIcons exposing (offline_bolt) +import Material.Icons.Types exposing (Coloring(..)) +import Page +import UIExplorer +import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) +import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg) +import Widget exposing (ButtonStyle) +import Widget.Customize as Customize +import Widget.Icon as Icon exposing (Icon) +import Widget.Material as Material exposing (Palette) +import Widget.Material.Color as MaterialColor +import Widget.Material.Typography as Typography + + +{-| The title of this page +-} +title : String +title = + "Select" + + +{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons) +-} +description : String +description = + "Select buttons group a set of actions using layout and spacing." + + +{-| List of view functions. Essentially, anything that takes a Button as input. +-} +viewFunctions = + let + viewSelectButtonRow style selected options onSelect { palette } () = + Widget.select + { selected = selected + , options = options + , onSelect = onSelect + } + |> Widget.buttonRow + { elementRow = Material.buttonRow + , content = style palette + } + --Don't forget to change the title + |> Page.viewTile "Widget.buttonRow with Material.buttonRow" + + viewSelectRow style selected options onSelect { palette } () = + Widget.select + { selected = selected + , options = options + , onSelect = onSelect + } + |> Widget.buttonRow + { elementRow = Material.row + , content = style palette + } + --Don't forget to change the title + |> Page.viewTile "Widget.buttonRow with Material.row" + + viewSelectColumn style selected options onSelect { palette } () = + Widget.select + { selected = selected + , options = options + , onSelect = onSelect + } + |> Widget.buttonColumn + { elementColumn = Material.column + , content = style palette + } + --Don't forget to change the title + |> Page.viewTile "Widget.buttonColumn" + in + [ viewSelectButtonRow, viewSelectRow, viewSelectColumn ] + |> List.foldl Story.addTile + Story.initStaticTiles + + +{-| Let's you play around with the options. +Note that the order of these stories must follow the order of the arguments from the view functions. +-} +book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) () +book = + Story.book (Just "Options") + viewFunctions + --Adding a option for different styles. + |> Story.addStory + (Story.optionListStory "Style" + ( "Contained", Material.containedButton ) + [ ( "Outlined", Material.outlinedButton ) + , ( "Text", Material.textButton ) + , ( "Toggle", Material.toggleButton ) + ] + ) + --Changing the text of the label + |> Story.addStory + (Story.optionListStory "Selected" + ( "Third", Just 2 ) + [ ( "Second", Just 1 ) + , ( "First", Just 0 ) + , ( "Nothing or Invalid", Nothing ) + ] + ) + --Change the Icon + |> Story.addStory + (let + default = + [ { icon = always Element.none, text = "42" } + , { icon = + MaterialIcons.done + |> Icon.elmMaterialIcons Color + , text = "" + } + ] + in + Story.optionListStory "Options" + ( "3 Option" + , [ { icon = always Element.none, text = "42" } + , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" } + , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "42" } + ] + ) + [ ( "2 Option", default ) + , ( "1 Option", [ { icon = always Element.none, text = "Apples" } ] ) + ] + ) + --Should an event be triggered when pressing the button? + |> Story.addStory + (Story.boolStory "with event handler" + ( always <| Just (), always Nothing ) + True + ) + |> Story.build + + + +-------------------------------------------------------------------------------- +-- Interactive Demonstration +-------------------------------------------------------------------------------- +{- This section here is essentially just a normal Elm program. -} + + +type Model + = Selected (Maybe Int) + + +type Msg + = ChangedSelected Int + + +init : ( Model, Cmd Msg ) +init = + ( Selected Nothing + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg _ = + case msg of + ChangedSelected int -> + ( Selected <| Just int + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. +-} +view : Context -> Model -> Element Msg +view { palette } (Selected selected) = + { selected = selected + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = always Element.none + } + ) + , onSelect = ChangedSelected >> Just + } + |> Widget.select + |> Widget.buttonRow + { elementRow = Material.buttonRow + , content = Material.toggleButton palette + } + + +demo = + { init = always init + , view = Page.demo view + , update = update + , subscriptions = subscriptions + } + + + +-------------------------------------------------------------------------------- +-- DO NOT MODIFY ANTHING AFTER THIS LINE +-------------------------------------------------------------------------------- + + +page = + Page.create + { title = title + , description = description + , book = book + , demo = demo + } diff --git a/explorer/src/UIExplorer/Story.elm b/explorer/src/UIExplorer/Story.elm index 60aa3f0..507c016 100644 --- a/explorer/src/UIExplorer/Story.elm +++ b/explorer/src/UIExplorer/Story.elm @@ -23,12 +23,12 @@ type alias Story a = } -optionListStory : String -> a -> List ( String, a ) -> Story a -optionListStory label default options = - { info = OptionListStory label <| List.map Tuple.first options +optionListStory : String -> ( String, a ) -> List ( String, a ) -> Story a +optionListStory label first options = + { info = OptionListStory label <| List.map Tuple.first (first :: options) , toValue = \optLabel -> - options + (first :: options) |> List.foldl (\( key, optvalue ) res -> case ( res, optLabel == key ) of @@ -42,7 +42,7 @@ optionListStory label default options = Nothing ) Nothing - |> Maybe.withDefault default + |> Maybe.withDefault (first |> Tuple.second) } @@ -319,7 +319,7 @@ storyView : Context -> StoryModel -> Element StorySelectorMsg storyView context model = case model of RangeStoryModel label { unit, min, max, value } -> - Element.column [ Element.spacing 8 ] + Element.column [ Element.spacing 8, Element.width Element.fill ] [ label ++ " (" ++ String.fromInt value @@ -339,7 +339,7 @@ storyView context model = ] TextStoryModel label value -> - Element.column [ Element.spacing 8 ] + Element.column [ Element.spacing 8, Element.width Element.fill ] [ Element.text label |> Element.el Typography.caption , Widget.textInput (Material.textInput context.palette) { chips = [] @@ -351,7 +351,7 @@ storyView context model = ] OptionListStoryModel label options -> - Element.column [ Element.spacing 8 ] + Element.column [ Element.spacing 8, Element.width Element.fill ] [ Element.text label |> Element.el Typography.caption , { selected = Just <| SelectList.index options @@ -421,7 +421,7 @@ storyTile title stories storiesToValue = , body = model |> List.map (storyView context) - |> Element.column [ Element.spacing 8 ] + |> Element.column [ Element.spacing 8, Element.width Element.fill ] } ] } diff --git a/explorer/src/UIExplorer/Tile.elm b/explorer/src/UIExplorer/Tile.elm index 52bc88a..b4e746a 100644 --- a/explorer/src/UIExplorer/Tile.elm +++ b/explorer/src/UIExplorer/Tile.elm @@ -283,7 +283,7 @@ layoutView palette _ view = Just string -> [ string |> Widget.headerItem (Material.fullBleedHeader palette) - , view.body |> Widget.asItem + , view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem ] |> Widget.itemList (Material.cardColumn palette) @@ -323,9 +323,7 @@ layoutRowView palette row = ] <| List.map - (layoutView palette - [ Element.height Element.fill ] - ) + (layoutView palette [ Element.height Element.fill ]) <| List.reverse right ]