mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-10-26 15:44:00 +03:00
Added Select Page
This commit is contained in:
parent
4d40ecbe5d
commit
1ac6a0ac2e
@ -15794,6 +15794,8 @@ var $author$project$Internal$Material$TextInput$textInput = function (palette) {
|
|||||||
$mdgriffith$elm_ui$Element$Border$color(
|
$mdgriffith$elm_ui$Element$Border$color(
|
||||||
$author$project$Widget$Material$Color$fromColor(palette.primary))
|
$author$project$Widget$Material$Color$fromColor(palette.primary))
|
||||||
])),
|
])),
|
||||||
|
$mdgriffith$elm_ui$Element$width(
|
||||||
|
$mdgriffith$elm_ui$Element$px(280)),
|
||||||
$mdgriffith$elm_ui$Element$mouseOver(
|
$mdgriffith$elm_ui$Element$mouseOver(
|
||||||
_List_fromArray(
|
_List_fromArray(
|
||||||
[
|
[
|
||||||
@ -19675,7 +19677,9 @@ var $author$project$Internal$Material$PasswordInput$passwordInput = function (pa
|
|||||||
[
|
[
|
||||||
$mdgriffith$elm_ui$Element$Border$shadow(
|
$mdgriffith$elm_ui$Element$Border$shadow(
|
||||||
$author$project$Widget$Material$Color$shadow(2))
|
$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(
|
var $author$project$Page$PasswordInput$view = F2(
|
||||||
function (_v0, model) {
|
function (_v0, model) {
|
||||||
|
var palette = _v0.palette;
|
||||||
return {
|
return {
|
||||||
attributes: _List_Nil,
|
attributes: _List_Nil,
|
||||||
body: A2(
|
body: A2(
|
||||||
$mdgriffith$elm_ui$Element$column,
|
$mdgriffith$elm_ui$Element$column,
|
||||||
_List_fromArray(
|
_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(
|
_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(
|
A2(
|
||||||
$mdgriffith$elm_ui$Element$row,
|
$mdgriffith$elm_ui$Element$row,
|
||||||
_List_fromArray(
|
_List_fromArray(
|
||||||
@ -19819,21 +19825,9 @@ var $author$project$Page$PasswordInput$view = F2(
|
|||||||
]),
|
]),
|
||||||
$mdgriffith$elm_ui$Element$text('Current Password')),
|
$mdgriffith$elm_ui$Element$text('Current Password')),
|
||||||
A2(
|
A2(
|
||||||
$mdgriffith$elm_ui$Element$el,
|
$author$project$Widget$currentPasswordInput,
|
||||||
_List_fromArray(
|
$author$project$Widget$Material$passwordInput(palette),
|
||||||
[
|
{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
|
||||||
$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})))
|
|
||||||
])),
|
])),
|
||||||
A2(
|
A2(
|
||||||
$mdgriffith$elm_ui$Element$row,
|
$mdgriffith$elm_ui$Element$row,
|
||||||
@ -19852,21 +19846,9 @@ var $author$project$Page$PasswordInput$view = F2(
|
|||||||
]),
|
]),
|
||||||
$mdgriffith$elm_ui$Element$text('New Password')),
|
$mdgriffith$elm_ui$Element$text('New Password')),
|
||||||
A2(
|
A2(
|
||||||
$mdgriffith$elm_ui$Element$el,
|
$author$project$Widget$newPasswordInput,
|
||||||
_List_fromArray(
|
$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$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})))
|
|
||||||
])),
|
])),
|
||||||
$mdgriffith$elm_ui$Element$text(
|
$mdgriffith$elm_ui$Element$text(
|
||||||
((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
|
((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
|
||||||
|
@ -3,11 +3,13 @@ module Main exposing (main)
|
|||||||
import Element
|
import Element
|
||||||
import Page.Button
|
import Page.Button
|
||||||
import Page.PasswordInput
|
import Page.PasswordInput
|
||||||
|
import Page.Select
|
||||||
import UIExplorer
|
import UIExplorer
|
||||||
|
|
||||||
|
|
||||||
pages =
|
pages =
|
||||||
UIExplorer.firstPage "Button" Page.Button.page
|
UIExplorer.firstPage "Button" Page.Button.page
|
||||||
|
|> UIExplorer.nextPage "Select" Page.Select.page
|
||||||
|> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
|
|> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
module Page exposing (create, viewTile)
|
module Page exposing (create, demo, viewTile)
|
||||||
|
|
||||||
import Element exposing (Element)
|
import Element exposing (Element)
|
||||||
import UIExplorer exposing (Page)
|
import UIExplorer exposing (Page)
|
||||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
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 as Material exposing (Palette)
|
||||||
import Widget.Material.Typography as Typography
|
import Widget.Material.Typography as Typography
|
||||||
|
|
||||||
@ -21,17 +21,17 @@ create :
|
|||||||
, demo : Tile model msg ()
|
, demo : Tile model msg ()
|
||||||
}
|
}
|
||||||
-> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
|
-> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
|
||||||
create { title, description, book, demo } =
|
create config =
|
||||||
Tile.static []
|
Tile.static []
|
||||||
(\_ _ ->
|
(\_ _ ->
|
||||||
[ title |> Element.text |> Element.el Typography.h3
|
[ config.title |> Element.text |> Element.el Typography.h3
|
||||||
, description |> Element.text |> List.singleton |> Element.paragraph []
|
, config.description |> Element.text |> List.singleton |> Element.paragraph []
|
||||||
]
|
]
|
||||||
|> Element.column [ Element.spacing 32 ]
|
|> Element.column [ Element.spacing 32 ]
|
||||||
)
|
)
|
||||||
|> Tile.first
|
|> Tile.first
|
||||||
|> Tile.nextGroup book
|
|> Tile.nextGroup config.book
|
||||||
|> Tile.next demo
|
|> Tile.next config.demo
|
||||||
|> Tile.page
|
|> Tile.page
|
||||||
|
|
||||||
|
|
||||||
@ -59,3 +59,21 @@ viewTile title content =
|
|||||||
, 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
|
||||||
|
}
|
||||||
|
)
|
||||||
|
@ -5,22 +5,17 @@ module Page.Button exposing (page)
|
|||||||
|
|
||||||
import Element exposing (Element)
|
import Element exposing (Element)
|
||||||
import Element.Background as Background
|
import Element.Background as Background
|
||||||
import Element.Font
|
import Material.Icons as MaterialIcons
|
||||||
import Material.Icons as MaterialIcons exposing (offline_bolt)
|
|
||||||
import Material.Icons.Types exposing (Coloring(..))
|
import Material.Icons.Types exposing (Coloring(..))
|
||||||
import Page
|
import Page
|
||||||
import UIExplorer
|
|
||||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||||
import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg)
|
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||||
import Widget exposing (ButtonStyle)
|
import Widget
|
||||||
import Widget.Customize as Customize
|
import Widget.Customize as Customize
|
||||||
import Widget.Icon as Icon exposing (Icon)
|
import Widget.Icon as Icon
|
||||||
import Widget.Material as Material
|
import Widget.Material as Material
|
||||||
exposing
|
exposing
|
||||||
( Palette
|
( containedButton
|
||||||
, containedButton
|
|
||||||
, darkPalette
|
|
||||||
, defaultPalette
|
|
||||||
, outlinedButton
|
, outlinedButton
|
||||||
, textButton
|
, textButton
|
||||||
)
|
)
|
||||||
@ -55,7 +50,7 @@ viewFunctions =
|
|||||||
--Don't forget to change the title
|
--Don't forget to change the title
|
||||||
|> Page.viewTile "Widget.button"
|
|> Page.viewTile "Widget.button"
|
||||||
|
|
||||||
viewTextButton button text icon onPress { palette } () =
|
viewTextButton button text _ onPress { palette } () =
|
||||||
Widget.textButton
|
Widget.textButton
|
||||||
(button palette
|
(button palette
|
||||||
|> Customize.elementButton
|
|> Customize.elementButton
|
||||||
@ -98,10 +93,9 @@ book =
|
|||||||
--Adding a option for different styles.
|
--Adding a option for different styles.
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
(Story.optionListStory "Style"
|
(Story.optionListStory "Style"
|
||||||
containedButton
|
( "Contained", containedButton )
|
||||||
[ ( "contained", containedButton )
|
[ ( "Outlined", outlinedButton )
|
||||||
, ( "outlined", outlinedButton )
|
, ( "Text", textButton )
|
||||||
, ( "text", textButton )
|
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
--Changing the text of the label
|
--Changing the text of the label
|
||||||
@ -111,15 +105,12 @@ book =
|
|||||||
)
|
)
|
||||||
--Change the Icon
|
--Change the Icon
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
(Story.optionListStory "Icon"
|
(Story.boolStory "With Icon"
|
||||||
(MaterialIcons.done
|
( MaterialIcons.done
|
||||||
|> Icon.elmMaterialIcons Color
|
|> Icon.elmMaterialIcons Color
|
||||||
|
, always Element.none
|
||||||
)
|
)
|
||||||
[ ( "done"
|
True
|
||||||
, MaterialIcons.done
|
|
||||||
|> Icon.elmMaterialIcons Color
|
|
||||||
)
|
|
||||||
]
|
|
||||||
)
|
)
|
||||||
--Should an event be triggered when pressing the button?
|
--Should an event be triggered when pressing the button?
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
@ -188,7 +179,7 @@ subscriptions _ =
|
|||||||
Sub.none
|
Sub.none
|
||||||
|
|
||||||
|
|
||||||
view : Context -> Int -> { title : Maybe String, position : Position, attributes : List b, body : Element Msg }
|
view : Context -> Model -> Element Msg
|
||||||
view { palette } model =
|
view { palette } model =
|
||||||
let
|
let
|
||||||
style =
|
style =
|
||||||
@ -201,98 +192,93 @@ view { palette } model =
|
|||||||
, cardColumn = Material.cardColumn palette
|
, cardColumn = Material.cardColumn palette
|
||||||
}
|
}
|
||||||
in
|
in
|
||||||
{ title = Just "Interactive Demo"
|
[ model
|
||||||
, position = Tile.FullWidthTile
|
|> String.fromInt
|
||||||
, attributes = []
|
|> Element.text
|
||||||
, body =
|
|> Element.el
|
||||||
[ model
|
(Typography.h4
|
||||||
|> String.fromInt
|
++ [ Element.centerX, Element.centerY ]
|
||||||
|> Element.text
|
)
|
||||||
|> Element.el
|
|> List.singleton
|
||||||
(Typography.h4
|
|> Widget.column
|
||||||
++ [ Element.centerX, Element.centerY ]
|
(style.cardColumn
|
||||||
)
|
|> Customize.elementColumn
|
||||||
|> List.singleton
|
[ Element.centerX
|
||||||
|> Widget.column
|
, Element.width <| Element.px 128
|
||||||
(style.cardColumn
|
, Element.height <| Element.px 128
|
||||||
|> Customize.elementColumn
|
, Widget.iconButton style.iconButton
|
||||||
[ Element.centerX
|
{ text = "+2"
|
||||||
, Element.width <| Element.px 128
|
, 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
|
, Element.height <| Element.px 128
|
||||||
, Widget.iconButton style.iconButton
|
, Material.defaultPalette.secondary
|
||||||
{ text = "+2"
|
|> MaterialColor.fromColor
|
||||||
, icon =
|
|> Background.color
|
||||||
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
|
, [ [ Widget.textButton style.textButton
|
||||||
, Element.height <| Element.px 128
|
{ text = "Reset"
|
||||||
, Material.defaultPalette.secondary
|
, onPress =
|
||||||
|> MaterialColor.fromColor
|
Reset
|
||||||
|> Background.color
|
|> Just
|
||||||
]
|
}
|
||||||
)
|
, Widget.button style.outlinedButton
|
||||||
)
|
{ text = "Decrease"
|
||||||
, [ [ Widget.textButton style.textButton
|
, icon =
|
||||||
{ text = "Reset"
|
MaterialIcons.remove
|
||||||
, onPress =
|
|> Icon.elmMaterialIcons Color
|
||||||
Reset
|
, onPress =
|
||||||
|
if model > 0 then
|
||||||
|
Decrease 1
|
||||||
|> Just
|
|> Just
|
||||||
}
|
|
||||||
, Widget.button style.outlinedButton
|
|
||||||
{ text = "Decrease"
|
|
||||||
, icon =
|
|
||||||
MaterialIcons.remove
|
|
||||||
|> Icon.elmMaterialIcons Color
|
|
||||||
, onPress =
|
|
||||||
if model > 0 then
|
|
||||||
Decrease 1
|
|
||||||
|> Just
|
|
||||||
|
|
||||||
else
|
else
|
||||||
Nothing
|
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 ])
|
|
||||||
)
|
|
||||||
]
|
]
|
||||||
|> Widget.column
|
|> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ])
|
||||||
(style.column
|
, [ Widget.button style.containedButton
|
||||||
|> Customize.elementColumn [ Element.width <| Element.fill ]
|
{ text = "Increase"
|
||||||
|> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
|
, 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 : Tile Model Msg ()
|
||||||
demo =
|
demo =
|
||||||
{ init = always init
|
{ init = always init
|
||||||
, update = update
|
, update = update
|
||||||
, view = view
|
, view = Page.demo view
|
||||||
, subscriptions = subscriptions
|
, subscriptions = subscriptions
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,31 +1,17 @@
|
|||||||
module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
|
module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
|
||||||
|
|
||||||
import Browser
|
|
||||||
import Element exposing (Element)
|
import Element exposing (Element)
|
||||||
import Element.Background as Background
|
|
||||||
import Element.Font
|
|
||||||
import Element.Input as Input
|
import Element.Input as Input
|
||||||
import Material.Icons as MaterialIcons exposing (offline_bolt)
|
|
||||||
import Material.Icons.Types exposing (Coloring(..))
|
import Material.Icons.Types exposing (Coloring(..))
|
||||||
import Page
|
import Page
|
||||||
import Set exposing (Set)
|
import UIExplorer.Story as Story
|
||||||
import UIExplorer exposing (Page)
|
import UIExplorer.Tile exposing (Context, Tile)
|
||||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
import Widget
|
||||||
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 Widget.Material as Material
|
import Widget.Material as Material
|
||||||
exposing
|
exposing
|
||||||
( Palette
|
( darkPalette
|
||||||
, containedButton
|
|
||||||
, darkPalette
|
|
||||||
, defaultPalette
|
, defaultPalette
|
||||||
, outlinedButton
|
|
||||||
, textButton
|
|
||||||
)
|
)
|
||||||
import Widget.Material.Color as MaterialColor
|
|
||||||
import Widget.Material.Typography as Typography
|
|
||||||
|
|
||||||
|
|
||||||
{-| The title of this page
|
{-| The title of this page
|
||||||
@ -46,7 +32,7 @@ description =
|
|||||||
-}
|
-}
|
||||||
viewFunctions =
|
viewFunctions =
|
||||||
let
|
let
|
||||||
viewCurrentPassword palette text placeholder label _ _ =
|
viewCurrentPassword text placeholder label { palette } () =
|
||||||
Widget.currentPasswordInput (Material.passwordInput palette)
|
Widget.currentPasswordInput (Material.passwordInput palette)
|
||||||
{ text = text
|
{ text = text
|
||||||
, placeholder = placeholder
|
, placeholder = placeholder
|
||||||
@ -57,7 +43,7 @@ viewFunctions =
|
|||||||
--Don't forget to change the title
|
--Don't forget to change the title
|
||||||
|> Page.viewTile "Widget.currentPasswordInput"
|
|> Page.viewTile "Widget.currentPasswordInput"
|
||||||
|
|
||||||
viewNewPassword palette text placeholder label _ _ =
|
viewNewPassword text placeholder label { palette } () =
|
||||||
Widget.newPasswordInput (Material.passwordInput palette)
|
Widget.newPasswordInput (Material.passwordInput palette)
|
||||||
{ text = text
|
{ text = text
|
||||||
, placeholder = placeholder
|
, placeholder = placeholder
|
||||||
@ -76,28 +62,19 @@ viewFunctions =
|
|||||||
book =
|
book =
|
||||||
Story.book (Just "Options")
|
Story.book (Just "Options")
|
||||||
viewFunctions
|
viewFunctions
|
||||||
|> Story.addStory
|
|
||||||
(Story.optionListStory "Palette"
|
|
||||||
darkPalette
|
|
||||||
[ ( "dark", darkPalette )
|
|
||||||
, ( "default", defaultPalette )
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
(Story.textStory "Text"
|
(Story.textStory "Text"
|
||||||
"123456789"
|
"123456789"
|
||||||
)
|
)
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
(Story.optionListStory "Placeholder"
|
(Story.boolStory "Placeholder"
|
||||||
Nothing
|
( "password"
|
||||||
[ ( "Yes"
|
|> Element.text
|
||||||
, "password"
|
|> Input.placeholder []
|
||||||
|> Element.text
|
|> Just
|
||||||
|> Input.placeholder []
|
, Nothing
|
||||||
|> Just
|
)
|
||||||
)
|
True
|
||||||
, ( "No", Nothing )
|
|
||||||
]
|
|
||||||
)
|
)
|
||||||
|> Story.addStory
|
|> Story.addStory
|
||||||
(Story.textStory "Label"
|
(Story.textStory "Label"
|
||||||
@ -148,52 +125,48 @@ subscriptions _ =
|
|||||||
Sub.none
|
Sub.none
|
||||||
|
|
||||||
|
|
||||||
|
view : Context -> Model -> Element Msg
|
||||||
view { palette } model =
|
view { palette } model =
|
||||||
{ title = Just "Interactive Demo"
|
[ "Try fill out these fields using autofill" |> Element.text
|
||||||
, position = Tile.FullWidthTile
|
, [ "Current Password"
|
||||||
, attributes = []
|
|> Element.text
|
||||||
, body =
|
|> Element.el [ Element.width <| Element.fill ]
|
||||||
[ "Try fill out these fields using autofill" |> Element.text
|
, Widget.currentPasswordInput (Material.passwordInput palette)
|
||||||
, [ "Current Password"
|
{ text = model.passwordInput
|
||||||
|> Element.text
|
, placeholder = Nothing
|
||||||
|> Element.el [ Element.width <| Element.fill ]
|
, label = "Chips"
|
||||||
, Widget.currentPasswordInput (Material.passwordInput palette)
|
, onChange = SetPasswordInput
|
||||||
{ text = model.passwordInput
|
, show = False
|
||||||
, placeholder = Nothing
|
}
|
||||||
, label = "Chips"
|
]
|
||||||
, onChange = SetPasswordInput
|
|> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
|
||||||
, show = False
|
, [ "New Password"
|
||||||
}
|
|> Element.text
|
||||||
]
|
|> Element.el [ Element.width <| Element.fill ]
|
||||||
|> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
|
, Widget.newPasswordInput (Material.passwordInput palette)
|
||||||
, [ "New Password"
|
{ text = model.newInput
|
||||||
|> Element.text
|
, placeholder = Nothing
|
||||||
|> Element.el [ Element.width <| Element.fill ]
|
, label = "Chips"
|
||||||
, Widget.newPasswordInput (Material.passwordInput palette)
|
, onChange = SetNewPasswordInput
|
||||||
{ text = model.newInput
|
, show = False
|
||||||
, placeholder = Nothing
|
}
|
||||||
, label = "Chips"
|
]
|
||||||
, onChange = SetNewPasswordInput
|
|> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
|
||||||
, show = False
|
, Element.text <|
|
||||||
}
|
if (model.newInput /= "") && (model.newInput == model.passwordInput) then
|
||||||
]
|
"Yeay, the two passwords match!"
|
||||||
|> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
|
|
||||||
, Element.text <|
|
|
||||||
if (model.newInput /= "") && (model.newInput == model.passwordInput) then
|
|
||||||
"Yeay, the two passwords match!"
|
|
||||||
|
|
||||||
else
|
else
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
|> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
|
|> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
demo : Tile Model Msg ()
|
demo : Tile Model Msg ()
|
||||||
demo =
|
demo =
|
||||||
{ init = always init
|
{ init = always init
|
||||||
, update = update
|
, update = update
|
||||||
, view = view
|
, view = Page.demo view
|
||||||
, subscriptions = subscriptions
|
, subscriptions = subscriptions
|
||||||
}
|
}
|
||||||
|
|
||||||
|
220
explorer/src/Page/Select.elm
Normal file
220
explorer/src/Page/Select.elm
Normal file
@ -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
|
||||||
|
}
|
@ -23,12 +23,12 @@ type alias Story a =
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
optionListStory : String -> a -> List ( String, a ) -> Story a
|
optionListStory : String -> ( String, a ) -> List ( String, a ) -> Story a
|
||||||
optionListStory label default options =
|
optionListStory label first options =
|
||||||
{ info = OptionListStory label <| List.map Tuple.first options
|
{ info = OptionListStory label <| List.map Tuple.first (first :: options)
|
||||||
, toValue =
|
, toValue =
|
||||||
\optLabel ->
|
\optLabel ->
|
||||||
options
|
(first :: options)
|
||||||
|> List.foldl
|
|> List.foldl
|
||||||
(\( key, optvalue ) res ->
|
(\( key, optvalue ) res ->
|
||||||
case ( res, optLabel == key ) of
|
case ( res, optLabel == key ) of
|
||||||
@ -42,7 +42,7 @@ optionListStory label default options =
|
|||||||
Nothing
|
Nothing
|
||||||
)
|
)
|
||||||
Nothing
|
Nothing
|
||||||
|> Maybe.withDefault default
|
|> Maybe.withDefault (first |> Tuple.second)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -319,7 +319,7 @@ storyView : Context -> StoryModel -> Element StorySelectorMsg
|
|||||||
storyView context model =
|
storyView context model =
|
||||||
case model of
|
case model of
|
||||||
RangeStoryModel label { unit, min, max, value } ->
|
RangeStoryModel label { unit, min, max, value } ->
|
||||||
Element.column [ Element.spacing 8 ]
|
Element.column [ Element.spacing 8, Element.width Element.fill ]
|
||||||
[ label
|
[ label
|
||||||
++ " ("
|
++ " ("
|
||||||
++ String.fromInt value
|
++ String.fromInt value
|
||||||
@ -339,7 +339,7 @@ storyView context model =
|
|||||||
]
|
]
|
||||||
|
|
||||||
TextStoryModel label value ->
|
TextStoryModel label value ->
|
||||||
Element.column [ Element.spacing 8 ]
|
Element.column [ Element.spacing 8, Element.width Element.fill ]
|
||||||
[ Element.text label |> Element.el Typography.caption
|
[ Element.text label |> Element.el Typography.caption
|
||||||
, Widget.textInput (Material.textInput context.palette)
|
, Widget.textInput (Material.textInput context.palette)
|
||||||
{ chips = []
|
{ chips = []
|
||||||
@ -351,7 +351,7 @@ storyView context model =
|
|||||||
]
|
]
|
||||||
|
|
||||||
OptionListStoryModel label options ->
|
OptionListStoryModel label options ->
|
||||||
Element.column [ Element.spacing 8 ]
|
Element.column [ Element.spacing 8, Element.width Element.fill ]
|
||||||
[ Element.text label |> Element.el Typography.caption
|
[ Element.text label |> Element.el Typography.caption
|
||||||
, { selected =
|
, { selected =
|
||||||
Just <| SelectList.index options
|
Just <| SelectList.index options
|
||||||
@ -421,7 +421,7 @@ storyTile title stories storiesToValue =
|
|||||||
, body =
|
, body =
|
||||||
model
|
model
|
||||||
|> List.map (storyView context)
|
|> List.map (storyView context)
|
||||||
|> Element.column [ Element.spacing 8 ]
|
|> Element.column [ Element.spacing 8, Element.width Element.fill ]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -283,7 +283,7 @@ layoutView palette _ view =
|
|||||||
Just string ->
|
Just string ->
|
||||||
[ string
|
[ string
|
||||||
|> Widget.headerItem (Material.fullBleedHeader palette)
|
|> Widget.headerItem (Material.fullBleedHeader palette)
|
||||||
, view.body |> Widget.asItem
|
, view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem
|
||||||
]
|
]
|
||||||
|> Widget.itemList (Material.cardColumn palette)
|
|> Widget.itemList (Material.cardColumn palette)
|
||||||
|
|
||||||
@ -323,9 +323,7 @@ layoutRowView palette row =
|
|||||||
]
|
]
|
||||||
<|
|
<|
|
||||||
List.map
|
List.map
|
||||||
(layoutView palette
|
(layoutView palette [ Element.height Element.fill ])
|
||||||
[ Element.height Element.fill ]
|
|
||||||
)
|
|
||||||
<|
|
<|
|
||||||
List.reverse right
|
List.reverse right
|
||||||
]
|
]
|
||||||
|
Loading…
Reference in New Issue
Block a user