Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-11-22 13:14:10 +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) module Main exposing (main)
import Element import Element
import Page.AppBar
import Page.Button import Page.Button
import Page.Dialog
import Page.Icon
import Page.Item import Page.Item
import Page.Layout
import Page.Modal import Page.Modal
import Page.MultiSelect import Page.MultiSelect
import Page.PasswordInput import Page.PasswordInput
@ -14,7 +16,6 @@ import Page.SortTable
import Page.Switch import Page.Switch
import Page.Tab import Page.Tab
import Page.TextInput import Page.TextInput
import Page.Icon
import UIExplorer import UIExplorer
@ -31,8 +32,9 @@ pages =
|> UIExplorer.nextPage "Item" Page.Item.page |> UIExplorer.nextPage "Item" Page.Item.page
|> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page |> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page
|> UIExplorer.nextPage "Modal" Page.Modal.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 "Icon" Page.Icon.page
|> UIExplorer.nextPage "Dialog" Page.Dialog.page
main = main =

4
explorer/src/Page.elm
View File

@ -19,7 +19,7 @@ create :
, book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) () , book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
, demo : Tile model msg () , 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 = create config =
Tile.static [] Tile.static []
(\_ _ -> (\_ _ ->
@ -29,8 +29,8 @@ create config =
|> Element.column [ Element.spacing 32 ] |> Element.column [ Element.spacing 32 ]
) )
|> Tile.first |> Tile.first
|> Tile.nextGroup config.book
|> Tile.next config.demo |> Tile.next config.demo
|> Tile.nextGroup config.book
|> Tile.page |> 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. {-| 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 Browser.Events as Events
import Element exposing (Attribute, DeviceClass(..), Element) import Element exposing (DeviceClass(..), Element)
import Element.Background as Background
import Element.Border as Border import Element.Border as Border
import Element.Font as Font import Element.Font as Font
import Material.Icons as MaterialIcons import Material.Icons as MaterialIcons
@ -15,39 +13,27 @@ import Page
import Time import Time
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
import Widget import Widget exposing (Modal, TextInput)
exposing import Widget.Icon as Icon
( AppBarStyle
, ButtonStyle
, ColumnStyle
, DialogStyle
, InsetItemStyle
, ItemStyle
, Modal
, TextInput
, TextInputStyle
)
import Widget.Customize as Customize
import Widget.Icon as Icon exposing (Icon)
import Widget.Layout as Layout import Widget.Layout as Layout
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography 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 {-| The title of this page
-} -}
title : String title : String
title = title =
"Button" "App Bar"
{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons) {-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
-} -}
description : String description : String
description = 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. {-| 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 ) [ ( "Outlined", Material.outlinedButton )
, ( "Text", Material.textButton ) , ( "Text", Material.textButton )
, ( "Chip", Material.chip ) , ( "Chip", Material.chip )
, ( "IconButton", Material.iconButton) , ( "IconButton", Material.iconButton )
] ]
) )
--Changing the text of the label --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 Ant.Icons.Svg
import Browser
import Element exposing (Element) import Element exposing (Element)
import Element.Background as Background
import FeatherIcons import FeatherIcons
import FontAwesome.Solid import FontAwesome.Solid
import FontAwesome.Svg import FontAwesome.Svg
@ -17,13 +15,10 @@ import Material.Icons.Action
import Material.Icons.Types exposing (Coloring(..)) import Material.Icons.Types exposing (Coloring(..))
import Octicons import Octicons
import Page import Page
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import Widget
import Widget exposing (ButtonStyle, RowStyle)
import Widget.Customize as Customize
import Widget.Icon import Widget.Icon
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography import Widget.Material.Typography as Typography
import Zondicons import Zondicons
@ -43,8 +38,6 @@ description =
{- This next section is essentially just a normal Elm program. -} {- This next section is essentially just a normal Elm program. -}
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
-- Interactive Demonstration -- Interactive Demonstration
@ -86,51 +79,51 @@ view : Context -> Model -> Element Msg
view { palette } () = view { palette } () =
[ ( Material.Icons.done [ ( Material.Icons.done
|> Widget.Icon.elmMaterialIcons Color |> Widget.Icon.elmMaterialIcons Color
, "elm-material-icons" , "elm-material-icons"
) )
, ( Material.Icons.Action.done , ( Material.Icons.Action.done
|> Widget.Icon.materialIcons |> Widget.Icon.materialIcons
, "material-icons" , "material-icons"
) )
, ( FeatherIcons.check , ( FeatherIcons.check
|> Widget.Icon.elmFeather FeatherIcons.toHtml |> Widget.Icon.elmFeather FeatherIcons.toHtml
, "elm-feather" , "elm-feather"
) )
, ( FontAwesome.Solid.check , ( FontAwesome.Solid.check
|> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
, "elm-fontawesome" , "elm-fontawesome"
) )
, ( Ionicon.checkmark , ( Ionicon.checkmark
|> Widget.Icon.elmIonicons |> Widget.Icon.elmIonicons
, "elm-ionicons" , "elm-ionicons"
) )
, ( Octicons.check , ( Octicons.check
|> Widget.Icon.elmOcticons |> Widget.Icon.elmOcticons
{ withSize = Octicons.size { withSize = Octicons.size
, withColor = Octicons.color , withColor = Octicons.color
, defaultOptions = Octicons.defaultOptions , defaultOptions = Octicons.defaultOptions
} }
, "elm-octicons" , "elm-octicons"
) )
, ( Heroicons.Solid.check , ( Heroicons.Solid.check
|> Widget.Icon.elmHeroicons |> Widget.Icon.elmHeroicons
, "elm-heroicons" , "elm-heroicons"
) )
, ( Ant.Icons.Svg.checkOutlined , ( Ant.Icons.Svg.checkOutlined
|> Widget.Icon.antDesignIconsElm |> Widget.Icon.antDesignIconsElm
, "ant-design-icons-elm" , "ant-design-icons-elm"
) )
, ( Zondicons.checkmark , ( Zondicons.checkmark
|> Widget.Icon.elmZondicons |> Widget.Icon.elmZondicons
, "elm-zondicons" , "elm-zondicons"
) )
] ]
|> List.map |> List.map
(\( icon, text ) -> (\( icon, text ) ->
Widget.button (Material.containedButton palette) Widget.button (Material.containedButton palette)
{ text = text { text = text
, icon = icon , icon = icon
, onPress = Just () , onPress = Just ()
} }
) )
|> Element.wrappedRow [ Element.spacing 10 ] |> 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. {-| 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 exposing (Element)
import Element.Background as Background import Element.Font as Font
import Material.Icons as MaterialIcons import Material.Icons as MaterialIcons
import Material.Icons.Types exposing (Coloring(..)) import Material.Icons.Types exposing (Coloring(..))
import Page import Page
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle) import Widget
import Widget.Customize as Customize
import Widget.Icon as Icon import Widget.Icon as Icon
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor import Widget.Material.Color as MaterialColor
@ -540,26 +538,36 @@ selectItemBook =
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
type Model type alias Model =
= IsEnabled Bool { isEnabled : Bool
, isExpanded : Bool
}
type Msg type Msg
= ToggleModal Bool = ToggleModal Bool
| ToogleExpand Bool
init : ( Model, Cmd Msg ) init : ( Model, Cmd Msg )
init = init =
( IsEnabled True ( { isEnabled = True
, isExpanded = False
}
, Cmd.none , Cmd.none
) )
update : Msg -> Model -> ( Model, Cmd Msg ) update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ = update msg model =
case msg of case msg of
ToggleModal bool -> ToggleModal bool ->
( IsEnabled bool ( { model | isEnabled = bool }
, Cmd.none
)
ToogleExpand bool ->
( { model | isExpanded = bool }
, Cmd.none , 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. {-| 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 : Context -> Model -> Element Msg
view { palette } (IsEnabled isEnabled) = view { palette } model =
Widget.button (Material.containedButton palette) Widget.button (Material.containedButton palette)
{ text = "Show Sheet" { text = "Show Sheet"
, icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color , icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
, onPress = ToggleModal True |> Just , onPress = ToggleModal True |> Just
} }
|> Element.el |> Element.el
([ Element.height <| Element.minimum 200 <| Element.fill ([ Element.height <| Element.minimum 800 <| Element.fill
, Element.width <| Element.minimum 400 <| Element.fill , Element.width <| Element.minimum 400 <| Element.fill
] ]
++ (if isEnabled then ++ (if model.isEnabled then
{ content = { content =
[ "Menu" [ [ "Section 1"
|> Element.text |> Widget.headerItem (Material.fullBleedHeader palette)
|> Element.el Typography.h6 , Widget.asItem <| Element.text <| "Custom Item"
|> Widget.asItem , Widget.divider (Material.middleDivider palette)
, Widget.insetItem (Material.insetItem palette) , Widget.fullBleedItem (Material.fullBleedItem palette)
{ onPress = Just <| ToggleModal False { onPress = Nothing
, icon = , icon =
MaterialIcons.change_history \_ ->
|> Icon.elmMaterialIcons Color Element.none
, text = "Home" , 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 = , content =
\_ -> [ "Section 3"
Element.none |> Widget.headerItem (Material.insetHeader palette)
} , Widget.insetItem (Material.insetItem palette)
, Widget.insetItem (Material.insetItem palette) { onPress = Nothing
{ onPress = Just <| ToggleModal False , icon = always Element.none
, icon = , text = "Item"
MaterialIcons.change_history , content =
|> Icon.elmMaterialIcons Color \{ size, color } ->
, text = "About" "3."
, content = |> Element.text
\_ -> |> Element.el
Element.none [ 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) |> Widget.itemList (Material.sideSheet palette)
, onDismiss = Just <| ToggleModal False , onDismiss = Just <| ToggleModal False
} }
@ -645,6 +758,7 @@ page =
|> Element.column [ Element.spacing 32 ] |> Element.column [ Element.spacing 32 ]
) )
|> Tile.first |> Tile.first
|> Tile.next demo
|> Tile.nextGroup dividerBook |> Tile.nextGroup dividerBook
|> Tile.nextGroup headerBook |> Tile.nextGroup headerBook
|> Tile.nextGroup fullBleedItemBook |> Tile.nextGroup fullBleedItemBook
@ -652,5 +766,4 @@ page =
|> Tile.nextGroup multiLineItemBook |> Tile.nextGroup multiLineItemBook
|> Tile.nextGroup expansionItemBook |> Tile.nextGroup expansionItemBook
|> Tile.nextGroup selectItemBook |> Tile.nextGroup selectItemBook
|> Tile.next demo
|> Tile.page |> 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. {-| 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 exposing (Element)
import Element.Background as Background
import Material.Icons as MaterialIcons import Material.Icons as MaterialIcons
import Material.Icons.Types exposing (Coloring(..)) import Material.Icons.Types exposing (Coloring(..))
import Page import Page
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
import Widget exposing (ButtonStyle, ColumnStyle) import Widget
import Widget.Customize as Customize
import Widget.Icon as Icon import Widget.Icon as Icon
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
{-| The title of this page {-| The title of this page

54
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. {-| 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 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 as MaterialIcons
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 exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
import Widget import Widget
import Widget.Customize as Customize
import Widget.Icon as Icon import Widget.Icon as Icon
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
{-| The title of this page {-| The title of this page
-} -}
@ -42,8 +36,9 @@ viewFunctions =
viewSelectRow style selected1 selected2 selected3 options onSelect { palette } () = viewSelectRow style selected1 selected2 selected3 options onSelect { palette } () =
Widget.multiSelect Widget.multiSelect
{ selected = { selected =
[ selected1, selected2, selected3] |> List.filterMap identity [ selected1, selected2, selected3 ]
|> Set.fromList |> List.filterMap identity
|> Set.fromList
, options = options , options = options
, onSelect = onSelect , onSelect = onSelect
} }
@ -54,10 +49,12 @@ viewFunctions =
--Don't forget to change the title --Don't forget to change the title
|> Page.viewTile "Widget.buttonRow " |> Page.viewTile "Widget.buttonRow "
viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () = viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () =
Widget.multiSelect Widget.multiSelect
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity { selected =
|> Set.fromList [ selected1, selected2, selected3 ]
|> List.filterMap identity
|> Set.fromList
, options = options , options = options
, onSelect = onSelect , onSelect = onSelect
} }
@ -68,10 +65,12 @@ viewFunctions =
--Don't forget to change the title --Don't forget to change the title
|> Page.viewTile "Widget.toggleRow" |> Page.viewTile "Widget.toggleRow"
viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () = viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () =
Widget.multiSelect Widget.multiSelect
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity { selected =
|> Set.fromList [ selected1, selected2, selected3 ]
|> List.filterMap identity
|> Set.fromList
, options = options , options = options
, onSelect = onSelect , onSelect = onSelect
} }
@ -82,10 +81,12 @@ viewFunctions =
--Don't forget to change the title --Don't forget to change the title
|> Page.viewTile "Widget.wrappedButtonRow" |> Page.viewTile "Widget.wrappedButtonRow"
viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () = viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () =
Widget.multiSelect Widget.multiSelect
{ selected = [ selected1, selected2, selected3] |> List.filterMap identity { selected =
|> Set.fromList [ selected1, selected2, selected3 ]
|> List.filterMap identity
|> Set.fromList
, options = options , options = options
, onSelect = onSelect , onSelect = onSelect
} }
@ -122,17 +123,17 @@ book =
--Changing the text of the label --Changing the text of the label
|> Story.addStory |> Story.addStory
(Story.boolStory "Selected First" (Story.boolStory "Selected First"
(Just 0,Nothing) ( Just 0, Nothing )
False False
) )
|> Story.addStory |> Story.addStory
(Story.boolStory "Selected Second" (Story.boolStory "Selected Second"
(Just 1,Nothing) ( Just 1, Nothing )
True True
) )
|> Story.addStory |> Story.addStory
(Story.boolStory "Selected Third" (Story.boolStory "Selected Third"
(Just 2,Nothing) ( Just 2, Nothing )
True True
) )
--Change the Icon --Change the Icon
@ -161,6 +162,7 @@ book =
|> Story.build |> Story.build
{- This next section is essentially just a normal Elm program. -} {- This next section is essentially just a normal Elm program. -}
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
-- Interactive Demonstration -- 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. {-| 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 : Context -> Model -> Element Msg
view {palette} (Selected selected) = view { palette } (Selected selected) =
{ selected = selected { selected = selected
, options = , options =
[ 1, 2, 42 ] [ 1, 2, 42 ]
@ -225,6 +227,7 @@ view {palette} (Selected selected) =
} }
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
-- DO NOT MODIFY ANYTHING AFTER THIS LINE -- DO NOT MODIFY ANYTHING AFTER THIS LINE
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
@ -246,4 +249,3 @@ page =
, book = book , book = book
, demo = demo , demo = demo
} }

23
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. {-| 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 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 Material.Icons.Types exposing (Coloring(..))
import Page import Page
import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
import Widget import Widget
import Widget.Customize as Customize
import Widget.Icon as Icon
import Widget.Material as Material import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
{-| The title of this page {-| The title of this page
@ -41,10 +32,9 @@ viewFunctions =
let let
viewIndicator style progress indeterminate { palette } () = viewIndicator style progress indeterminate { palette } () =
Widget.circularProgressIndicator (style palette) Widget.circularProgressIndicator (style palette)
(indeterminate (toFloat progress/ 100 )) (indeterminate (toFloat progress / 100))
--Don't forget to change the title --Don't forget to change the title
|> Page.viewTile "Widget.circularProgressIndicator" |> Page.viewTile "Widget.circularProgressIndicator"
in in
[ viewIndicator ] [ viewIndicator ]
|> List.foldl Story.addTile |> List.foldl Story.addTile
@ -62,13 +52,12 @@ book =
|> Story.addStory |> Story.addStory
(Story.optionListStory "Style" (Story.optionListStory "Style"
( "ProgressIndicator", Material.progressIndicator ) ( "ProgressIndicator", Material.progressIndicator )
[ ] []
) )
--Changing the text of the label --Changing the text of the label
|> Story.addStory |> Story.addStory
(Story.rangeStory "Progress" (Story.rangeStory "Progress"
{ unit = "%", min = 0, max = 100, default = 50 } { unit = "%", min = 0, max = 100, default = 50 }
) )
--Should an event be triggered when pressing the button? --Should an event be triggered when pressing the button?
|> Story.addStory |> 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. {-| 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 : Context -> Model -> Element Msg
view {palette} (MaybeProgress maybeProgress) = view { palette } (MaybeProgress maybeProgress) =
Widget.circularProgressIndicator (Material.progressIndicator palette) Widget.circularProgressIndicator (Material.progressIndicator palette)
maybeProgress maybeProgress
@ -145,5 +134,3 @@ page =
, book = book , book = book
, demo = demo , demo = demo
} }

219
explorer/src/UIExplorer.elm
View File

@ -34,7 +34,7 @@ import Browser
import Browser.Dom import Browser.Dom
import Browser.Events import Browser.Events
import Browser.Navigation import Browser.Navigation
import Element exposing (Element) import Element exposing (DeviceClass(..), Element)
import Element.Background import Element.Background
import Element.Font import Element.Font
import Element.Input import Element.Input
@ -303,33 +303,37 @@ type PageSizeOption
| Native | Native
allPageSizeOptions : List PageSizeOption
allPageSizeOptions = {- }
[ Iphone5 allPageSizeOptions : List PageSizeOption
, Iphone6 allPageSizeOptions =
, IpadVertical [ Iphone5
, IpadHorizontal , Iphone6
, Native , IpadVertical
] , IpadHorizontal
, Native
]
pageSizeOptionToString : PageSizeOption -> String pageSizeOptionToString : PageSizeOption -> String
pageSizeOptionToString pageSizeOption = pageSizeOptionToString pageSizeOption =
case pageSizeOption of case pageSizeOption of
Iphone5 -> Iphone5 ->
"iPhone 5/SE" "iPhone 5/SE"
Iphone6 -> Iphone6 ->
"iPhone 6/7/8" "iPhone 6/7/8"
IpadVertical -> IpadVertical ->
"iPad (vertical)" "iPad (vertical)"
IpadHorizontal -> IpadHorizontal ->
"iPad (horizontal)" "iPad (horizontal)"
Native -> Native ->
"Native width" "Native width"
-
-}
pageSizeOptionWidth : PageSizeOption -> Maybe (Quantity Int Pixels) pageSizeOptionWidth : PageSizeOption -> Maybe (Quantity Int Pixels)
@ -449,7 +453,7 @@ init config (PageBuilder pages) flagsJson url key =
, pageSizeOption = Native , pageSizeOption = Native
, expandColorBlindOptions = False , expandColorBlindOptions = False
, colorBlindOption = Nothing , colorBlindOption = Nothing
, darkThemeEnabled = True , darkThemeEnabled = False
} }
, Cmd.batch , Cmd.batch
[ navigationCmd [ navigationCmd
@ -687,38 +691,60 @@ viewSuccess :
-> Browser.Document (Msg pageMsg) -> Browser.Document (Msg pageMsg)
viewSuccess config ((PageBuilder pages) as pages_) model = viewSuccess config ((PageBuilder pages) as pages_) model =
let let
actualSidebarWidth = {--actualSidebarWidth =
if model.minimizeSidebar then if model.minimizeSidebar then
sidebarMinimizedWidth sidebarMinimizedWidth
else else
sidebarWidth sidebarWidth--}
palette =
if model.darkThemeEnabled then
Material.darkPalette
else
Material.defaultPalette
in in
{ title = "UI Explorer" { title = "UI Explorer"
, body = , body =
[ Element.layoutWith { options = config.layoutOptions } [ Element.layoutWith { options = config.layoutOptions }
(Element.width Element.fill (Element.width Element.fill
:: Element.inFront :: (Element.Background.color <|
(Element.el if model.darkThemeEnabled then
[ Element.height <| Element.px (Pixels.inPixels model.windowSize.height) black
, Element.scrollbarY
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 , Element.Font.size 16
] ]
(viewSidebar pages_ config model) (viewSidebar pages_ config model)
) , Element.el
:: Element.behindContent (Element.html colorblindnessSvg) ([ Element.alignTop
:: Element.behindContent (Element.html colorblindnessCss) , Element.width
:: 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
(case pageSizeOptionWidth model.pageSizeOption of (case pageSizeOptionWidth model.pageSizeOption of
Just width -> Just width ->
Element.px (Pixels.inPixels width) Element.px (Pixels.inPixels width)
@ -726,40 +752,31 @@ viewSuccess config ((PageBuilder pages) as pages_) model =
Nothing -> Nothing ->
Element.fillPortion 999999999 Element.fillPortion 999999999
) )
:: Element.height Element.fill , Element.centerX
:: Element.Region.mainContent , Element.paddingXY 0 56
:: (if model.darkThemeEnabled then , Element.height Element.fill
Element.Background.color <| Element.rgb255 30 30 30 , Element.Region.mainContent
, if model.darkThemeEnabled then
Element.Background.color <| Element.rgb255 30 30 30
else else
Element.Background.color <| Element.rgb255 225 225 225 Element.Background.color <| Element.rgb255 225 225 225
) ]
:: (case model.colorBlindOption of ++ (case model.colorBlindOption of
Nothing -> Nothing ->
[] []
Just colorBlindOption -> Just colorBlindOption ->
colorBlindOptionToCssClass colorBlindOption colorBlindOptionToCssClass colorBlindOption
|> Html.Attributes.class |> Html.Attributes.class
|> Element.htmlAttribute |> Element.htmlAttribute
|> List.singleton |> List.singleton
) )
) )
(pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel (pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel
|> Element.map PageMsg |> 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
] ]
Element.none
] ]
) )
] ]
@ -783,13 +800,12 @@ viewSidebar :
-> Element (Msg pageMsg) -> Element (Msg pageMsg)
viewSidebar pages config model = viewSidebar pages config model =
let let
bgColor = {--bgColor =
if model.darkThemeEnabled then if model.darkThemeEnabled then
darkerGray darkerGray
else else
lightGray lightGray--}
palette = palette =
if model.darkThemeEnabled then if model.darkThemeEnabled then
Material.darkPalette Material.darkPalette
@ -798,7 +814,8 @@ viewSidebar pages config model =
Material.defaultPalette Material.defaultPalette
in in
if model.minimizeSidebar then if model.minimizeSidebar then
Element.el Element.none
{--Element.el
[ Element.height Element.fill ] [ Element.height Element.fill ]
(Element.Input.button (Element.Input.button
[ Element.width (Element.px (Pixels.inPixels sidebarMinimizedWidth)) [ Element.width (Element.px (Pixels.inPixels sidebarMinimizedWidth))
@ -808,33 +825,29 @@ viewSidebar pages config model =
{ onPress = Just PressedToggleSidebar { onPress = Just PressedToggleSidebar
, label = Element.el [ Element.moveRight 3 ] (Element.text "❯") , label = Element.el [ Element.moveRight 3 ] (Element.text "❯")
} }
) )--}
else else
[ [ Widget.insetItem (Material.insetItem palette) [ [ Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar"
{ text = "" , Widget.insetItem (Material.insetItem palette)
, 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)
{ text = "Dark Theme" { text = "Dark Theme"
, onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
, icon = , content =
\_ -> \_ ->
Widget.switch (Material.switch palette) Widget.switch (Material.switch palette)
{ description = "Toggle Theme" { description = "Toggle Theme"
, onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
, active = 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) , Widget.textInput (Material.textInput palette)
{ chips = [] { chips = []
, text = model.searchText , text = model.searchText
@ -842,15 +855,9 @@ viewSidebar pages config model =
, label = "Search pages" , label = "Search pages"
, onChange = TypingSearchText , 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 ] |> Element.el [ Element.height <| Element.px 70, Element.width <| Element.fill ]
|> Widget.asItem |> 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 <| , Widget.asItem <|
if showSearchResults model.searchText then if showSearchResults model.searchText then
Element.Lazy.lazy5 viewSearchResults model.darkThemeEnabled pages config model.page model.searchText 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) |> Widget.itemList (Material.sideSheet palette)
--|> Element.el [ Element.scrollbarY ]
colorblindnessCss : Html msg colorblindnessCss : Html msg
colorblindnessCss = colorblindnessCss =
Html.node "style" Html.node "style"
@ -1052,6 +1063,8 @@ colorblindnessSvg =
] ]
{--
pageSizeOptionView : Bool -> Bool -> PageSizeOption -> List (Item (Msg pageMsg)) pageSizeOptionView : Bool -> Bool -> PageSizeOption -> List (Item (Msg pageMsg))
pageSizeOptionView dark isExpanded selectedPageSize = pageSizeOptionView dark isExpanded selectedPageSize =
optionGroupView dark optionGroupView dark
@ -1061,6 +1074,7 @@ pageSizeOptionView dark isExpanded selectedPageSize =
pageSizeOptionToString pageSizeOptionToString
PressedPageSizeOption PressedPageSizeOption
ToggledPageSizeGroup ToggledPageSizeGroup
--}
colorBlindOptionView : Bool -> Bool -> Maybe ColorBlindOption -> List (Item (Msg pageMsg)) colorBlindOptionView : Bool -> Bool -> Maybe ColorBlindOption -> List (Item (Msg pageMsg))
@ -1255,9 +1269,12 @@ lightBlue =
Element.rgb255 176 208 225 Element.rgb255 176 208 225
{--
lightGray : Element.Color lightGray : Element.Color
lightGray = lightGray =
Element.rgb255 228 234 241 Element.rgb255 228 234 241
--}
gray : Element.Color 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 , view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem
] ]
|> Widget.itemList (Material.cardColumn palette) |> Widget.itemList (Material.cardColumn palette)
|> Element.el [ Element.height Element.shrink ]
Nothing -> Nothing ->
view.body view.body
@ -319,7 +320,8 @@ layoutRowView palette row =
] ]
<| <|
List.map List.map
(layoutView palette [ Element.height Element.fill ]) (layoutView palette [])
--[ Element.height Element.fill ])
<| <|
List.reverse right List.reverse right
] ]
@ -350,6 +352,7 @@ page (Builder config) =
|> List.concatMap (layoutRowView palette) |> List.concatMap (layoutRowView palette)
|> Element.column |> Element.column
([ Element.padding 16 ([ Element.padding 16
, Element.height Element.fill
, Element.spacing 32 , Element.spacing 32
, Element.px 800 |> Element.width , Element.px 800 |> Element.width
, Element.centerX , Element.centerX

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

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