mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-10-26 07:30:37 +03:00
Clean Up before merge
This commit is contained in:
Lucas Payr
parent
5982c7b81e
commit
e8b8990519
@ -1,11 +1,11 @@
|
||||
module Main exposing (main)
|
||||
|
||||
import Element
|
||||
import Page.AppBar
|
||||
import Page.Button
|
||||
import Page.Dialog
|
||||
import Page.Icon
|
||||
import Page.Item
|
||||
import Page.Layout
|
||||
import Page.Modal
|
||||
import Page.MultiSelect
|
||||
import Page.PasswordInput
|
||||
@ -32,7 +32,7 @@ pages =
|
||||
|> UIExplorer.nextPage "Item" Page.Item.page
|
||||
|> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page
|
||||
|> UIExplorer.nextPage "Modal" Page.Modal.page
|
||||
|> UIExplorer.nextPage "Layout" Page.Layout.page
|
||||
|> UIExplorer.nextPage "App Bar" Page.AppBar.page
|
||||
|> UIExplorer.nextPage "Icon" Page.Icon.page
|
||||
|> UIExplorer.nextPage "Dialog" Page.Dialog.page
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ create :
|
||||
, book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
|
||||
, demo : Tile model msg ()
|
||||
}
|
||||
-> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
|
||||
-> Page ( ( ( (), () ), model ), ( StorySelectorModel, () ) ) (TileMsg (TileMsg (TileMsg () msg1) msg) (TileMsg StorySelectorMsg ())) ()
|
||||
create config =
|
||||
Tile.static []
|
||||
(\_ _ ->
|
||||
@ -29,8 +29,8 @@ create config =
|
||||
|> Element.column [ Element.spacing 32 ]
|
||||
)
|
||||
|> Tile.first
|
||||
|> Tile.nextGroup config.book
|
||||
|> Tile.next config.demo
|
||||
|> Tile.nextGroup config.book
|
||||
|> Tile.page
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
module Page.Layout exposing (page)
|
||||
module Page.AppBar exposing (page)
|
||||
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
|
||||
import Browser
|
||||
import Browser.Events as Events
|
||||
import Element exposing (Attribute, DeviceClass(..), Element)
|
||||
import Element.Background as Background
|
||||
import Element exposing (DeviceClass(..), Element)
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Material.Icons as MaterialIcons
|
||||
@ -15,39 +13,27 @@ import Page
|
||||
import Time
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget
|
||||
exposing
|
||||
( AppBarStyle
|
||||
, ButtonStyle
|
||||
, ColumnStyle
|
||||
, DialogStyle
|
||||
, InsetItemStyle
|
||||
, ItemStyle
|
||||
, Modal
|
||||
, TextInput
|
||||
, TextInputStyle
|
||||
)
|
||||
import Widget.Customize as Customize
|
||||
import Widget.Icon as Icon exposing (Icon)
|
||||
import Widget exposing (Modal, TextInput)
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Layout as Layout
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle)
|
||||
import Widget.Snackbar as Snackbar exposing (Snackbar)
|
||||
|
||||
|
||||
{-| The title of this page
|
||||
-}
|
||||
title : String
|
||||
title =
|
||||
"Button"
|
||||
"App Bar"
|
||||
|
||||
|
||||
{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
|
||||
-}
|
||||
description : String
|
||||
description =
|
||||
"Buttons allow users to take actions, and make choices, with a single tap."
|
||||
"The top app bar displays information and actions relating to the current screen."
|
||||
|
||||
|
||||
{-| List of view functions. Essentially, anything that takes a Button as input.
|
||||
@ -92,7 +92,7 @@ book =
|
||||
[ ( "Outlined", Material.outlinedButton )
|
||||
, ( "Text", Material.textButton )
|
||||
, ( "Chip", Material.chip )
|
||||
, ( "IconButton", Material.iconButton)
|
||||
, ( "IconButton", Material.iconButton )
|
||||
]
|
||||
)
|
||||
--Changing the text of the label
|
||||
|
||||
@ -3,21 +3,15 @@ module Page.Dialog exposing (page)
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import FeatherIcons
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Page
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget exposing (ButtonStyle, DialogStyle)
|
||||
import Widget.Customize as Customize
|
||||
import Widget
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
|
||||
|
||||
{-| The title of this page
|
||||
|
||||
@ -4,9 +4,7 @@ module Page.Icon exposing (page)
|
||||
-}
|
||||
|
||||
import Ant.Icons.Svg
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import FeatherIcons
|
||||
import FontAwesome.Solid
|
||||
import FontAwesome.Svg
|
||||
@ -17,13 +15,10 @@ import Material.Icons.Action
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Octicons
|
||||
import Page
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Customize as Customize
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile)
|
||||
import Widget
|
||||
import Widget.Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
import Zondicons
|
||||
|
||||
@ -43,8 +38,6 @@ description =
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{- This next section is essentially just a normal Elm program. -}
|
||||
--------------------------------------------------------------------------------
|
||||
-- Interactive Demonstration
|
||||
@ -86,51 +79,51 @@ view : Context -> Model -> Element Msg
|
||||
view { palette } () =
|
||||
[ ( Material.Icons.done
|
||||
|> Widget.Icon.elmMaterialIcons Color
|
||||
, "elm-material-icons"
|
||||
)
|
||||
, ( Material.Icons.Action.done
|
||||
, "elm-material-icons"
|
||||
)
|
||||
, ( Material.Icons.Action.done
|
||||
|> Widget.Icon.materialIcons
|
||||
, "material-icons"
|
||||
)
|
||||
, ( FeatherIcons.check
|
||||
, "material-icons"
|
||||
)
|
||||
, ( FeatherIcons.check
|
||||
|> Widget.Icon.elmFeather FeatherIcons.toHtml
|
||||
, "elm-feather"
|
||||
)
|
||||
, ( FontAwesome.Solid.check
|
||||
, "elm-feather"
|
||||
)
|
||||
, ( FontAwesome.Solid.check
|
||||
|> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
|
||||
, "elm-fontawesome"
|
||||
)
|
||||
, ( Ionicon.checkmark
|
||||
, "elm-fontawesome"
|
||||
)
|
||||
, ( Ionicon.checkmark
|
||||
|> Widget.Icon.elmIonicons
|
||||
, "elm-ionicons"
|
||||
)
|
||||
, ( Octicons.check
|
||||
, "elm-ionicons"
|
||||
)
|
||||
, ( Octicons.check
|
||||
|> Widget.Icon.elmOcticons
|
||||
{ withSize = Octicons.size
|
||||
, withColor = Octicons.color
|
||||
, defaultOptions = Octicons.defaultOptions
|
||||
}
|
||||
, "elm-octicons"
|
||||
)
|
||||
, ( Heroicons.Solid.check
|
||||
, "elm-octicons"
|
||||
)
|
||||
, ( Heroicons.Solid.check
|
||||
|> Widget.Icon.elmHeroicons
|
||||
, "elm-heroicons"
|
||||
)
|
||||
, ( Ant.Icons.Svg.checkOutlined
|
||||
, "elm-heroicons"
|
||||
)
|
||||
, ( Ant.Icons.Svg.checkOutlined
|
||||
|> Widget.Icon.antDesignIconsElm
|
||||
, "ant-design-icons-elm"
|
||||
)
|
||||
, ( Zondicons.checkmark
|
||||
, "ant-design-icons-elm"
|
||||
)
|
||||
, ( Zondicons.checkmark
|
||||
|> Widget.Icon.elmZondicons
|
||||
, "elm-zondicons"
|
||||
)
|
||||
]
|
||||
, "elm-zondicons"
|
||||
)
|
||||
]
|
||||
|> List.map
|
||||
(\( icon, text ) ->
|
||||
Widget.button (Material.containedButton palette)
|
||||
{ text = text
|
||||
, icon = icon
|
||||
, onPress = Just ()
|
||||
, onPress = Just ()
|
||||
}
|
||||
)
|
||||
|> Element.wrappedRow [ Element.spacing 10 ]
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
module Page.Item exposing (page)
|
||||
module Page.Item exposing (page, update)
|
||||
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import Element.Font as Font
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Page
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle)
|
||||
import Widget.Customize as Customize
|
||||
import Widget
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
@ -540,26 +538,36 @@ selectItemBook =
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
|
||||
type Model
|
||||
= IsEnabled Bool
|
||||
type alias Model =
|
||||
{ isEnabled : Bool
|
||||
, isExpanded : Bool
|
||||
}
|
||||
|
||||
|
||||
type Msg
|
||||
= ToggleModal Bool
|
||||
| ToogleExpand Bool
|
||||
|
||||
|
||||
init : ( Model, Cmd Msg )
|
||||
init =
|
||||
( IsEnabled True
|
||||
( { isEnabled = True
|
||||
, isExpanded = False
|
||||
}
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg _ =
|
||||
update msg model =
|
||||
case msg of
|
||||
ToggleModal bool ->
|
||||
( IsEnabled bool
|
||||
( { model | isEnabled = bool }
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
ToogleExpand bool ->
|
||||
( { model | isExpanded = bool }
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
@ -572,43 +580,148 @@ subscriptions _ =
|
||||
{-| 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 } (IsEnabled isEnabled) =
|
||||
view { palette } model =
|
||||
Widget.button (Material.containedButton palette)
|
||||
{ text = "Show Sheet"
|
||||
, icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
|
||||
, onPress = ToggleModal True |> Just
|
||||
}
|
||||
|> Element.el
|
||||
([ Element.height <| Element.minimum 200 <| Element.fill
|
||||
([ Element.height <| Element.minimum 800 <| Element.fill
|
||||
, Element.width <| Element.minimum 400 <| Element.fill
|
||||
]
|
||||
++ (if isEnabled then
|
||||
++ (if model.isEnabled then
|
||||
{ content =
|
||||
[ "Menu"
|
||||
|> Element.text
|
||||
|> Element.el Typography.h6
|
||||
|> Widget.asItem
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ onPress = Just <| ToggleModal False
|
||||
, icon =
|
||||
MaterialIcons.change_history
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, text = "Home"
|
||||
[ [ "Section 1"
|
||||
|> Widget.headerItem (Material.fullBleedHeader palette)
|
||||
, Widget.asItem <| Element.text <| "Custom Item"
|
||||
, Widget.divider (Material.middleDivider palette)
|
||||
, Widget.fullBleedItem (Material.fullBleedItem palette)
|
||||
{ onPress = Nothing
|
||||
, icon =
|
||||
\_ ->
|
||||
Element.none
|
||||
, text = "Full Bleed Item"
|
||||
}
|
||||
, "Section 2"
|
||||
|> Widget.headerItem (Material.fullBleedHeader palette)
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ onPress = Nothing
|
||||
, icon =
|
||||
MaterialIcons.change_history
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, text = "Item with Icon"
|
||||
, content =
|
||||
\_ ->
|
||||
Element.none
|
||||
}
|
||||
, Widget.imageItem (Material.imageItem palette)
|
||||
{ onPress = Nothing
|
||||
, image =
|
||||
Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]
|
||||
{ src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
|
||||
, description = "Elm logo"
|
||||
}
|
||||
, text = "Item with Image"
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
"1."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
, Widget.divider (Material.insetDivider palette)
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ onPress = not model.isExpanded |> ToogleExpand |> Just
|
||||
, icon = always Element.none
|
||||
, text = "Click Me"
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
"2."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
, Widget.multiLineItem (Material.multiLineItem palette)
|
||||
{ title = "Item"
|
||||
, text = "Description. Description. Description. Description. Description. Description. Description. Description. Description. Description."
|
||||
, onPress = Nothing
|
||||
, icon = always Element.none
|
||||
, content = always Element.none
|
||||
}
|
||||
, Widget.imageItem (Material.imageItem palette)
|
||||
{ onPress = not model.isExpanded |> ToogleExpand |> Just
|
||||
, image = Element.none
|
||||
, text = "Clickable Item with Switch"
|
||||
, content =
|
||||
\_ ->
|
||||
Widget.switch (Material.switch palette)
|
||||
{ description = "Click Me"
|
||||
, active = model.isExpanded
|
||||
, onPress =
|
||||
not model.isExpanded
|
||||
|> ToogleExpand
|
||||
|> Just
|
||||
}
|
||||
}
|
||||
, Widget.divider (Material.fullBleedDivider palette)
|
||||
]
|
||||
, Widget.expansionItem (Material.expansionItem palette)
|
||||
{ onToggle = ToogleExpand
|
||||
, isExpanded = model.isExpanded
|
||||
, icon = always Element.none
|
||||
, text = "Expandable Item"
|
||||
, content =
|
||||
\_ ->
|
||||
Element.none
|
||||
}
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ onPress = Just <| ToggleModal False
|
||||
, icon =
|
||||
MaterialIcons.change_history
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, text = "About"
|
||||
, content =
|
||||
\_ ->
|
||||
Element.none
|
||||
[ "Section 3"
|
||||
|> Widget.headerItem (Material.insetHeader palette)
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ onPress = Nothing
|
||||
, icon = always Element.none
|
||||
, text = "Item"
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
"3."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
, [ "Menu" |> Widget.headerItem (Material.fullBleedHeader palette) ]
|
||||
, { selected =
|
||||
if model.isExpanded then
|
||||
Just 1
|
||||
|
||||
else
|
||||
Just 0
|
||||
, options =
|
||||
[ True, False ]
|
||||
|> List.map
|
||||
(\bool ->
|
||||
{ text =
|
||||
if bool then
|
||||
"Expanded"
|
||||
|
||||
else
|
||||
"Collapsed"
|
||||
, icon = always Element.none
|
||||
}
|
||||
)
|
||||
, onSelect =
|
||||
\int ->
|
||||
(int == 1)
|
||||
|> ToogleExpand
|
||||
|> Just
|
||||
}
|
||||
|> Widget.selectItem (Material.selectItem palette)
|
||||
]
|
||||
|> List.concat
|
||||
|> Widget.itemList (Material.sideSheet palette)
|
||||
, onDismiss = Just <| ToggleModal False
|
||||
}
|
||||
@ -645,6 +758,7 @@ page =
|
||||
|> Element.column [ Element.spacing 32 ]
|
||||
)
|
||||
|> Tile.first
|
||||
|> Tile.next demo
|
||||
|> Tile.nextGroup dividerBook
|
||||
|> Tile.nextGroup headerBook
|
||||
|> Tile.nextGroup fullBleedItemBook
|
||||
@ -652,5 +766,4 @@ page =
|
||||
|> Tile.nextGroup multiLineItemBook
|
||||
|> Tile.nextGroup expansionItemBook
|
||||
|> Tile.nextGroup selectItemBook
|
||||
|> Tile.next demo
|
||||
|> Tile.page
|
||||
|
||||
@ -3,20 +3,15 @@ module Page.Modal exposing (page)
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Page
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget exposing (ButtonStyle, ColumnStyle)
|
||||
import Widget.Customize as Customize
|
||||
import Widget
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
|
||||
|
||||
{-| The title of this page
|
||||
|
||||
@ -2,24 +2,18 @@ module Page.MultiSelect exposing (page)
|
||||
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
import Browser
|
||||
|
||||
import Element exposing (Element)
|
||||
import Set exposing (Set)
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Material as Material
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Page
|
||||
import Set exposing (Set)
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget
|
||||
import Widget.Customize as Customize
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
|
||||
|
||||
{-| The title of this page
|
||||
-}
|
||||
@ -41,9 +35,10 @@ viewFunctions =
|
||||
let
|
||||
viewSelectRow style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
Widget.multiSelect
|
||||
{ selected =
|
||||
[ selected1, selected2, selected3] |> List.filterMap identity
|
||||
|> Set.fromList
|
||||
{ selected =
|
||||
[ selected1, selected2, selected3 ]
|
||||
|> List.filterMap identity
|
||||
|> Set.fromList
|
||||
, options = options
|
||||
, onSelect = onSelect
|
||||
}
|
||||
@ -54,10 +49,12 @@ viewFunctions =
|
||||
--Don't forget to change the title
|
||||
|> Page.viewTile "Widget.buttonRow "
|
||||
|
||||
viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
Widget.multiSelect
|
||||
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity
|
||||
|> Set.fromList
|
||||
{ selected =
|
||||
[ selected1, selected2, selected3 ]
|
||||
|> List.filterMap identity
|
||||
|> Set.fromList
|
||||
, options = options
|
||||
, onSelect = onSelect
|
||||
}
|
||||
@ -68,10 +65,12 @@ viewFunctions =
|
||||
--Don't forget to change the title
|
||||
|> Page.viewTile "Widget.toggleRow"
|
||||
|
||||
viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
Widget.multiSelect
|
||||
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity
|
||||
|> Set.fromList
|
||||
{ selected =
|
||||
[ selected1, selected2, selected3 ]
|
||||
|> List.filterMap identity
|
||||
|> Set.fromList
|
||||
, options = options
|
||||
, onSelect = onSelect
|
||||
}
|
||||
@ -82,10 +81,12 @@ viewFunctions =
|
||||
--Don't forget to change the title
|
||||
|> Page.viewTile "Widget.wrappedButtonRow"
|
||||
|
||||
viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () =
|
||||
Widget.multiSelect
|
||||
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity
|
||||
|> Set.fromList
|
||||
{ selected =
|
||||
[ selected1, selected2, selected3 ]
|
||||
|> List.filterMap identity
|
||||
|> Set.fromList
|
||||
, options = options
|
||||
, onSelect = onSelect
|
||||
}
|
||||
@ -122,17 +123,17 @@ book =
|
||||
--Changing the text of the label
|
||||
|> Story.addStory
|
||||
(Story.boolStory "Selected First"
|
||||
(Just 0,Nothing)
|
||||
( Just 0, Nothing )
|
||||
False
|
||||
)
|
||||
|> Story.addStory
|
||||
(Story.boolStory "Selected Second"
|
||||
(Just 1,Nothing)
|
||||
( Just 1, Nothing )
|
||||
True
|
||||
)
|
||||
|> Story.addStory
|
||||
|> Story.addStory
|
||||
(Story.boolStory "Selected Third"
|
||||
(Just 2,Nothing)
|
||||
( Just 2, Nothing )
|
||||
True
|
||||
)
|
||||
--Change the Icon
|
||||
@ -161,6 +162,7 @@ book =
|
||||
|> Story.build
|
||||
|
||||
|
||||
|
||||
{- This next section is essentially just a normal Elm program. -}
|
||||
--------------------------------------------------------------------------------
|
||||
-- Interactive Demonstration
|
||||
@ -206,7 +208,7 @@ subscriptions _ =
|
||||
{-| 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) =
|
||||
view { palette } (Selected selected) =
|
||||
{ selected = selected
|
||||
, options =
|
||||
[ 1, 2, 42 ]
|
||||
@ -225,6 +227,7 @@ view {palette} (Selected selected) =
|
||||
}
|
||||
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
-- DO NOT MODIFY ANYTHING AFTER THIS LINE
|
||||
--------------------------------------------------------------------------------
|
||||
@ -246,4 +249,3 @@ page =
|
||||
, book = book
|
||||
, demo = demo
|
||||
}
|
||||
|
||||
|
||||
@ -2,23 +2,14 @@ module Page.ProgressIndicator exposing (page)
|
||||
|
||||
{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
|
||||
-}
|
||||
import Browser
|
||||
|
||||
import Element exposing (Element)
|
||||
import Widget exposing (ProgressIndicatorStyle)
|
||||
import Widget.Material as Material
|
||||
import Element exposing (Element)
|
||||
import Element.Background as Background
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Page
|
||||
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
|
||||
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
|
||||
import Widget
|
||||
import Widget.Customize as Customize
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Material as Material
|
||||
import Widget.Material.Color as MaterialColor
|
||||
import Widget.Material.Typography as Typography
|
||||
|
||||
|
||||
{-| The title of this page
|
||||
@ -41,10 +32,9 @@ viewFunctions =
|
||||
let
|
||||
viewIndicator style progress indeterminate { palette } () =
|
||||
Widget.circularProgressIndicator (style palette)
|
||||
(indeterminate (toFloat progress/ 100 ))
|
||||
(indeterminate (toFloat progress / 100))
|
||||
--Don't forget to change the title
|
||||
|> Page.viewTile "Widget.circularProgressIndicator"
|
||||
|
||||
in
|
||||
[ viewIndicator ]
|
||||
|> List.foldl Story.addTile
|
||||
@ -62,13 +52,12 @@ book =
|
||||
|> Story.addStory
|
||||
(Story.optionListStory "Style"
|
||||
( "ProgressIndicator", Material.progressIndicator )
|
||||
[ ]
|
||||
[]
|
||||
)
|
||||
--Changing the text of the label
|
||||
|> Story.addStory
|
||||
(Story.rangeStory "Progress"
|
||||
{ unit = "%", min = 0, max = 100, default = 50 }
|
||||
|
||||
)
|
||||
--Should an event be triggered when pressing the button?
|
||||
|> Story.addStory
|
||||
@ -118,9 +107,9 @@ subscriptions _ =
|
||||
{-| 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} (MaybeProgress maybeProgress) =
|
||||
Widget.circularProgressIndicator (Material.progressIndicator palette)
|
||||
maybeProgress
|
||||
view { palette } (MaybeProgress maybeProgress) =
|
||||
Widget.circularProgressIndicator (Material.progressIndicator palette)
|
||||
maybeProgress
|
||||
|
||||
|
||||
|
||||
@ -145,5 +134,3 @@ page =
|
||||
, book = book
|
||||
, demo = demo
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ import Browser
|
||||
import Browser.Dom
|
||||
import Browser.Events
|
||||
import Browser.Navigation
|
||||
import Element exposing (Element)
|
||||
import Element exposing (DeviceClass(..), Element)
|
||||
import Element.Background
|
||||
import Element.Font
|
||||
import Element.Input
|
||||
@ -303,33 +303,37 @@ type PageSizeOption
|
||||
| Native
|
||||
|
||||
|
||||
allPageSizeOptions : List PageSizeOption
|
||||
allPageSizeOptions =
|
||||
[ Iphone5
|
||||
, Iphone6
|
||||
, IpadVertical
|
||||
, IpadHorizontal
|
||||
, Native
|
||||
]
|
||||
|
||||
{- }
|
||||
allPageSizeOptions : List PageSizeOption
|
||||
allPageSizeOptions =
|
||||
[ Iphone5
|
||||
, Iphone6
|
||||
, IpadVertical
|
||||
, IpadHorizontal
|
||||
, Native
|
||||
]
|
||||
|
||||
|
||||
pageSizeOptionToString : PageSizeOption -> String
|
||||
pageSizeOptionToString pageSizeOption =
|
||||
case pageSizeOption of
|
||||
Iphone5 ->
|
||||
"iPhone 5/SE"
|
||||
pageSizeOptionToString : PageSizeOption -> String
|
||||
pageSizeOptionToString pageSizeOption =
|
||||
case pageSizeOption of
|
||||
Iphone5 ->
|
||||
"iPhone 5/SE"
|
||||
|
||||
Iphone6 ->
|
||||
"iPhone 6/7/8"
|
||||
Iphone6 ->
|
||||
"iPhone 6/7/8"
|
||||
|
||||
IpadVertical ->
|
||||
"iPad (vertical)"
|
||||
IpadVertical ->
|
||||
"iPad (vertical)"
|
||||
|
||||
IpadHorizontal ->
|
||||
"iPad (horizontal)"
|
||||
IpadHorizontal ->
|
||||
"iPad (horizontal)"
|
||||
|
||||
Native ->
|
||||
"Native width"
|
||||
Native ->
|
||||
"Native width"
|
||||
-
|
||||
-}
|
||||
|
||||
|
||||
pageSizeOptionWidth : PageSizeOption -> Maybe (Quantity Int Pixels)
|
||||
@ -449,7 +453,7 @@ init config (PageBuilder pages) flagsJson url key =
|
||||
, pageSizeOption = Native
|
||||
, expandColorBlindOptions = False
|
||||
, colorBlindOption = Nothing
|
||||
, darkThemeEnabled = True
|
||||
, darkThemeEnabled = False
|
||||
}
|
||||
, Cmd.batch
|
||||
[ navigationCmd
|
||||
@ -687,38 +691,60 @@ viewSuccess :
|
||||
-> Browser.Document (Msg pageMsg)
|
||||
viewSuccess config ((PageBuilder pages) as pages_) model =
|
||||
let
|
||||
actualSidebarWidth =
|
||||
{--actualSidebarWidth =
|
||||
if model.minimizeSidebar then
|
||||
sidebarMinimizedWidth
|
||||
|
||||
else
|
||||
sidebarWidth
|
||||
sidebarWidth--}
|
||||
palette =
|
||||
if model.darkThemeEnabled then
|
||||
Material.darkPalette
|
||||
|
||||
else
|
||||
Material.defaultPalette
|
||||
in
|
||||
{ title = "UI Explorer"
|
||||
, body =
|
||||
[ Element.layoutWith { options = config.layoutOptions }
|
||||
(Element.width Element.fill
|
||||
:: Element.inFront
|
||||
(Element.el
|
||||
[ Element.height <| Element.px (Pixels.inPixels model.windowSize.height)
|
||||
, Element.scrollbarY
|
||||
:: (Element.Background.color <|
|
||||
if model.darkThemeEnabled then
|
||||
black
|
||||
|
||||
else
|
||||
gray
|
||||
)
|
||||
:: config.layoutAttributes
|
||||
)
|
||||
(Element.column [ Element.width Element.fill, Element.height Element.fill ]
|
||||
[ Widget.menuBar (Material.menuBar palette)
|
||||
{ title =
|
||||
config.sidebarTitle
|
||||
|> Element.el Typography.h6
|
||||
, deviceClass = Desktop
|
||||
, openLeftSheet = Just PressedToggleSidebar
|
||||
, openRightSheet = Nothing
|
||||
, openTopSheet = Nothing
|
||||
, primaryActions = []
|
||||
, search = Nothing
|
||||
}
|
||||
, Element.row
|
||||
[ Element.width Element.fill
|
||||
, Element.height Element.fill
|
||||
, Element.behindContent (Element.html colorblindnessSvg)
|
||||
, Element.behindContent (Element.html colorblindnessCss)
|
||||
, Element.Font.color (textColor model.darkThemeEnabled)
|
||||
]
|
||||
[ -- Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none
|
||||
Element.el
|
||||
[ Element.height <| Element.fill --Element.px (Pixels.inPixels model.windowSize.height)
|
||||
, Element.Font.size 16
|
||||
]
|
||||
(viewSidebar pages_ config model)
|
||||
)
|
||||
:: Element.behindContent (Element.html colorblindnessSvg)
|
||||
:: Element.behindContent (Element.html colorblindnessCss)
|
||||
:: Element.Font.color (textColor model.darkThemeEnabled)
|
||||
:: config.layoutAttributes
|
||||
)
|
||||
(Element.row
|
||||
[ Element.width Element.fill
|
||||
, Element.height Element.fill
|
||||
]
|
||||
[ Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none
|
||||
, Element.el
|
||||
(Element.alignTop
|
||||
:: Element.width
|
||||
, Element.el
|
||||
([ Element.alignTop
|
||||
, Element.width
|
||||
(case pageSizeOptionWidth model.pageSizeOption of
|
||||
Just width ->
|
||||
Element.px (Pixels.inPixels width)
|
||||
@ -726,40 +752,31 @@ viewSuccess config ((PageBuilder pages) as pages_) model =
|
||||
Nothing ->
|
||||
Element.fillPortion 999999999
|
||||
)
|
||||
:: Element.height Element.fill
|
||||
:: Element.Region.mainContent
|
||||
:: (if model.darkThemeEnabled then
|
||||
Element.Background.color <| Element.rgb255 30 30 30
|
||||
, Element.centerX
|
||||
, Element.paddingXY 0 56
|
||||
, Element.height Element.fill
|
||||
, Element.Region.mainContent
|
||||
, if model.darkThemeEnabled then
|
||||
Element.Background.color <| Element.rgb255 30 30 30
|
||||
|
||||
else
|
||||
Element.Background.color <| Element.rgb255 225 225 225
|
||||
)
|
||||
:: (case model.colorBlindOption of
|
||||
Nothing ->
|
||||
[]
|
||||
else
|
||||
Element.Background.color <| Element.rgb255 225 225 225
|
||||
]
|
||||
++ (case model.colorBlindOption of
|
||||
Nothing ->
|
||||
[]
|
||||
|
||||
Just colorBlindOption ->
|
||||
colorBlindOptionToCssClass colorBlindOption
|
||||
|> Html.Attributes.class
|
||||
|> Element.htmlAttribute
|
||||
|> List.singleton
|
||||
)
|
||||
)
|
||||
(pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel
|
||||
|> Element.map PageMsg
|
||||
)
|
||||
, Element.el
|
||||
[ Element.Background.color <|
|
||||
if model.darkThemeEnabled then
|
||||
black
|
||||
|
||||
else
|
||||
gray
|
||||
, Element.alpha 0.9
|
||||
, Element.width Element.fill
|
||||
, Element.height Element.fill
|
||||
Just colorBlindOption ->
|
||||
colorBlindOptionToCssClass colorBlindOption
|
||||
|> Html.Attributes.class
|
||||
|> Element.htmlAttribute
|
||||
|> List.singleton
|
||||
)
|
||||
)
|
||||
(pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel
|
||||
|> Element.map PageMsg
|
||||
)
|
||||
]
|
||||
Element.none
|
||||
]
|
||||
)
|
||||
]
|
||||
@ -783,13 +800,12 @@ viewSidebar :
|
||||
-> Element (Msg pageMsg)
|
||||
viewSidebar pages config model =
|
||||
let
|
||||
bgColor =
|
||||
{--bgColor =
|
||||
if model.darkThemeEnabled then
|
||||
darkerGray
|
||||
|
||||
else
|
||||
lightGray
|
||||
|
||||
lightGray--}
|
||||
palette =
|
||||
if model.darkThemeEnabled then
|
||||
Material.darkPalette
|
||||
@ -798,7 +814,8 @@ viewSidebar pages config model =
|
||||
Material.defaultPalette
|
||||
in
|
||||
if model.minimizeSidebar then
|
||||
Element.el
|
||||
Element.none
|
||||
{--Element.el
|
||||
[ Element.height Element.fill ]
|
||||
(Element.Input.button
|
||||
[ Element.width (Element.px (Pixels.inPixels sidebarMinimizedWidth))
|
||||
@ -808,33 +825,29 @@ viewSidebar pages config model =
|
||||
{ onPress = Just PressedToggleSidebar
|
||||
, label = Element.el [ Element.moveRight 3 ] (Element.text "❯")
|
||||
}
|
||||
)
|
||||
)--}
|
||||
|
||||
else
|
||||
[ [ Widget.insetItem (Material.insetItem palette)
|
||||
{ text = ""
|
||||
, onPress = Just PressedToggleSidebar
|
||||
, icon =
|
||||
\_ ->
|
||||
config.sidebarTitle
|
||||
|> Element.el Typography.h6
|
||||
, content =
|
||||
\{ size } ->
|
||||
Element.text "❮"
|
||||
|> Element.el [ Element.Font.size size ]
|
||||
}
|
||||
, Widget.divider (Material.fullBleedDivider palette)
|
||||
, Widget.fullBleedItem (Material.fullBleedItem palette)
|
||||
[ [ Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar"
|
||||
, Widget.insetItem (Material.insetItem palette)
|
||||
{ text = "Dark Theme"
|
||||
, onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
|
||||
, icon =
|
||||
, content =
|
||||
\_ ->
|
||||
Widget.switch (Material.switch palette)
|
||||
{ description = "Toggle Theme"
|
||||
, onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
|
||||
, active = model.darkThemeEnabled
|
||||
}
|
||||
, icon = always Element.none
|
||||
}
|
||||
]
|
||||
|
||||
--Having different screen sized is nice, but not very useful in the current implementation.
|
||||
--, pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption
|
||||
--, [ Widget.divider (Material.insetDivider palette) ]
|
||||
, colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption
|
||||
, [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets"
|
||||
, Widget.textInput (Material.textInput palette)
|
||||
{ chips = []
|
||||
, text = model.searchText
|
||||
@ -842,15 +855,9 @@ viewSidebar pages config model =
|
||||
, label = "Search pages"
|
||||
, onChange = TypingSearchText
|
||||
}
|
||||
|> Element.el [ Element.centerX, Element.centerY ]
|
||||
|> Element.el [ Element.paddingXY 8 0 ]
|
||||
|> Element.el [ Element.height <| Element.px 70, Element.width <| Element.fill ]
|
||||
|> Widget.asItem
|
||||
, Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar"
|
||||
]
|
||||
, pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption
|
||||
, [ Widget.divider (Material.insetDivider palette) ]
|
||||
, colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption
|
||||
, [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets"
|
||||
, Widget.asItem <|
|
||||
if showSearchResults model.searchText then
|
||||
Element.Lazy.lazy5 viewSearchResults model.darkThemeEnabled pages config model.page model.searchText
|
||||
@ -863,6 +870,10 @@ viewSidebar pages config model =
|
||||
|> Widget.itemList (Material.sideSheet palette)
|
||||
|
||||
|
||||
|
||||
--|> Element.el [ Element.scrollbarY ]
|
||||
|
||||
|
||||
colorblindnessCss : Html msg
|
||||
colorblindnessCss =
|
||||
Html.node "style"
|
||||
@ -1052,6 +1063,8 @@ colorblindnessSvg =
|
||||
]
|
||||
|
||||
|
||||
|
||||
{--
|
||||
pageSizeOptionView : Bool -> Bool -> PageSizeOption -> List (Item (Msg pageMsg))
|
||||
pageSizeOptionView dark isExpanded selectedPageSize =
|
||||
optionGroupView dark
|
||||
@ -1061,6 +1074,7 @@ pageSizeOptionView dark isExpanded selectedPageSize =
|
||||
pageSizeOptionToString
|
||||
PressedPageSizeOption
|
||||
ToggledPageSizeGroup
|
||||
--}
|
||||
|
||||
|
||||
colorBlindOptionView : Bool -> Bool -> Maybe ColorBlindOption -> List (Item (Msg pageMsg))
|
||||
@ -1255,9 +1269,12 @@ lightBlue =
|
||||
Element.rgb255 176 208 225
|
||||
|
||||
|
||||
|
||||
{--
|
||||
lightGray : Element.Color
|
||||
lightGray =
|
||||
Element.rgb255 228 234 241
|
||||
--}
|
||||
|
||||
|
||||
gray : Element.Color
|
||||
|
||||
@ -282,6 +282,7 @@ layoutView palette _ view =
|
||||
, view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem
|
||||
]
|
||||
|> Widget.itemList (Material.cardColumn palette)
|
||||
|> Element.el [ Element.height Element.shrink ]
|
||||
|
||||
Nothing ->
|
||||
view.body
|
||||
@ -319,7 +320,8 @@ layoutRowView palette row =
|
||||
]
|
||||
<|
|
||||
List.map
|
||||
(layoutView palette [ Element.height Element.fill ])
|
||||
(layoutView palette [])
|
||||
--[ Element.height Element.fill ])
|
||||
<|
|
||||
List.reverse right
|
||||
]
|
||||
@ -350,6 +352,7 @@ page (Builder config) =
|
||||
|> List.concatMap (layoutRowView palette)
|
||||
|> Element.column
|
||||
([ Element.padding 16
|
||||
, Element.height Element.fill
|
||||
, Element.spacing 32
|
||||
, Element.px 800 |> Element.width
|
||||
, Element.centerX
|
||||
|
||||
Loading…
Reference in New Issue
Block a user