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

Merge pull request #74 from Orasund/unstable

Browse Source 
Update Website to Explorer
This commit is contained in:
Orasund 2021-06-09 15:48:46 +02:00 committed by GitHub
commit 7ff7365809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 36735 additions and 23040 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23423
docs/3.0.0/index.html
View File

File diff suppressed because it is too large Load Diff

43
docs/404.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script takes the current url and converts the path and query
// string into just a query string, and then redirects the browser
// to the new url with only a query string and hash fragment,
// e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
// Note: this 404.html file must be at least 512 bytes for it to work
// with Internet Explorer (it is currently > 512 bytes)
// If you're creating a Project Pages site and NOT using a custom domain,
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
// This way the code will only replace the route part of the path, and not
// the real directory in which the app resides, for example:
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
// Otherwise, leave pathSegmentsToKeep as 0.
var pathSegmentsToKeep = 0;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>

23423
docs/index.html
View File

File diff suppressed because it is too large Load Diff

12053
explorer/index.html
View File

File diff suppressed because it is too large Load Diff

8
explorer/src/Main.elm
View File

@ -1,9 +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
@ -14,7 +16,6 @@ import Page.SortTable
import Page.Switch
import Page.Tab
import Page.TextInput
import Page.Icon
import UIExplorer
@ -31,8 +32,9 @@ 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
main =

4
explorer/src/Page.elm
View File

@ -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

28
explorer/src/Page/Layout.elm → explorer/src/Page/AppBar.elm
View File

@ -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.

2
explorer/src/Page/Button.elm
View File

@ -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

208
explorer/src/Page/Dialog.elm Normal file
View File

@ -0,0 +1,208 @@
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 Element exposing (Element)
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.Icon as Icon
import Widget.Material as Material
{-| The title of this page
-}
title : String
title =
"Dialog"
{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
-}
description : String
description =
"Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks."
{-| List of view functions. Essentially, anything that takes a Button as input.
-}
viewFunctions =
let
viewDialog style text titleString accept dismiss { palette } () =
"Placeholder Text"
|> Element.text
|> Element.el
([ Element.height <| Element.px 200
, Element.width <| Element.fill
]
++ (Widget.dialog (style palette)
{ text = text
, title = titleString
, accept = accept
, dismiss = dismiss
}
|> List.singleton
|> Widget.singleModal
)
)
|> Page.viewTile "Widget.dialog"
in
[ viewDialog ]
|> 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"
( "Alert Dialog", Material.alertDialog )
[]
)
--Changing the text of the label
|> Story.addStory
(Story.textStory "Text"
"If an accept button is given then the window can only be closed manually. Else it can be closed by pressing somewhere outside of it."
)
|> Story.addStory
(Story.boolStory "With title"
( Just "Title"
, Nothing
)
True
)
--Should an event be triggered when pressing the button?
|> Story.addStory
(Story.boolStory "With accept button"
( Just
{ text = "Ok"
, onPress = Just ()
}
, Nothing
)
True
)
|> Story.addStory
(Story.boolStory "Dismissible"
( Just
{ text = "Dismiss"
, onPress = Just ()
}
, Nothing
)
True
)
|> Story.build
{- This next section is essentially just a normal Elm program. -}
--------------------------------------------------------------------------------
-- Interactive Demonstration
--------------------------------------------------------------------------------
type Model
= IsOpen Bool
type Msg
= OpenDialog Bool
init : ( Model, Cmd Msg )
init =
( IsOpen True
, Cmd.none
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
case msg of
OpenDialog bool ->
( IsOpen bool
, 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 } (IsOpen isOpen) =
Widget.button (Material.containedButton palette)
{ text = "Show Dialog"
, icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
, onPress =
OpenDialog True
|> Just
}
|> Element.el
([ Element.height <| Element.minimum 200 <| Element.fill
, Element.width <| Element.minimum 400 <| Element.fill
]
++ (if isOpen then
{ text = "This is a dialog window"
, title = Just "Dialog"
, accept =
Just
{ text = "Ok"
, onPress =
Just <|
OpenDialog False
}
, dismiss =
Just
{ text = "Dismiss"
, onPress =
Just <|
OpenDialog False
}
}
|> Widget.dialog (Material.alertDialog palette)
|> List.singleton
|> Widget.singleModal
else
[]
)
)
--------------------------------------------------------------------------------
-- DO NOT MODIFY ANYTHING AFTER THIS LINE
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo =
{ init = always init
, update = update
, view = Page.demo view
, subscriptions = subscriptions
}
page =
Page.create
{ title = title
, description = description
, book = book
, demo = demo
}

67
explorer/src/Page/Icon.elm
View File

@ -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 ]

185
explorer/src/Page/Item.elm
View File

@ -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

7
explorer/src/Page/Modal.elm
View File

@ -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

56
explorer/src/Page/MultiSelect.elm
View File

@ -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
}

25
explorer/src/Page/ProgressIndicator.elm
View File

@ -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
}

219
explorer/src/UIExplorer.elm
View File

@ -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

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

@ -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

19
src/Internal/Material/Dialog.elm
View File

@ -23,10 +23,25 @@ alertDialog palette =
]
, content =
{ title =
{ contentText = Typography.h6 ++ [ Element.paddingXY 24 20 ]
{ contentText =
Typography.h6
++ [ Element.paddingEach
{ top = 20
, right = 24
, bottom = 0
, left = 24
}
]
}
, text =
{ contentText = [ Element.paddingXY 24 0 ]
{ contentText =
[ Element.paddingEach
{ top = 20
, right = 24
, bottom = 0
, left = 24
}
]
}
, buttons =
{ elementRow =