mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
renamed container to element
This commit is contained in:
Lucas Payr
parent
ef6519a839
commit
79402ce9eb
@ -35,10 +35,15 @@ button: ButtonStyle msg
|
||||
In comparison to Elm-Ui's button, we see that `List (Attribute msg)` has changed into a _Style Type_.
|
||||
```
|
||||
type alias ButtonStyle msg =
|
||||
{ container : List (Attribute msg)
|
||||
, labelRow : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
, content :
|
||||
{ elementRow : List (Attribute msg)
|
||||
, contentText : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, ifActive : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ import Widget.Style.Material as Material exposing (Palette)
|
||||
|
||||
sortTable : Palette -> SortTableStyle msg
|
||||
sortTable palette =
|
||||
{ containerTable = []
|
||||
{ elementTable = []
|
||||
, content =
|
||||
{ header = Material.textButton palette
|
||||
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
|
||||
|
||||
@ -16,7 +16,7 @@ type alias Style style msg =
|
||||
materialStyle : Style {} msg
|
||||
materialStyle =
|
||||
{ sortTable =
|
||||
{ containerTable = []
|
||||
{ elementTable = []
|
||||
, content =
|
||||
{ header = Material.textButton Material.defaultPalette
|
||||
, ascIcon =
|
||||
|
||||
@ -28,7 +28,7 @@ type alias TextButton msg =
|
||||
iconButton : ButtonStyle msg -> Button msg -> Element msg
|
||||
iconButton style { onPress, text, icon } =
|
||||
Input.button
|
||||
(style.containerButton
|
||||
(style.elementButton
|
||||
++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
@ -38,7 +38,7 @@ iconButton style { onPress, text, icon } =
|
||||
++ [ Region.description text ]
|
||||
)
|
||||
{ onPress = onPress
|
||||
, label = icon |> Element.map never |> Element.el style.content.containerRow
|
||||
, label = icon |> Element.map never |> Element.el style.content.elementRow
|
||||
}
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ button :
|
||||
-> Element msg
|
||||
button style { onPress, text, icon } =
|
||||
Input.button
|
||||
(style.containerButton
|
||||
(style.elementButton
|
||||
++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
@ -67,7 +67,7 @@ button style { onPress, text, icon } =
|
||||
)
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
Element.row style.content.containerRow
|
||||
Element.row style.content.elementRow
|
||||
[ icon |> Element.map never
|
||||
, Element.text text |> Element.el style.content.contentText
|
||||
]
|
||||
|
||||
@ -54,7 +54,7 @@ dialog style { title, text, accept, dismiss } =
|
||||
([ Element.centerX
|
||||
, Element.centerY
|
||||
]
|
||||
++ style.containerColumn
|
||||
++ style.elementColumn
|
||||
)
|
||||
[ title
|
||||
|> Maybe.map
|
||||
@ -70,7 +70,7 @@ dialog style { title, text, accept, dismiss } =
|
||||
([ Element.alignRight
|
||||
, Element.width <| Element.shrink
|
||||
]
|
||||
++ style.content.buttons.containerRow
|
||||
++ style.content.buttons.elementRow
|
||||
)
|
||||
(case ( accept, dismiss ) of
|
||||
( Just acceptButton, Nothing ) ->
|
||||
|
||||
@ -22,12 +22,12 @@ expansionPanel :
|
||||
-> ExpansionPanel msg
|
||||
-> Element msg
|
||||
expansionPanel style model =
|
||||
Element.column style.containerColumn <|
|
||||
Element.column style.elementColumn <|
|
||||
[ Element.row
|
||||
((Events.onClick <| model.onToggle <| not model.isExpanded)
|
||||
:: style.content.panel.containerRow
|
||||
:: style.content.panel.elementRow
|
||||
)
|
||||
[ Element.row style.content.panel.content.label.containerRow
|
||||
[ Element.row style.content.panel.content.label.elementRow
|
||||
[ model.icon |> Element.map never
|
||||
, model.text |> Element.text
|
||||
]
|
||||
@ -39,7 +39,7 @@ expansionPanel style model =
|
||||
style.content.panel.content.expandIcon
|
||||
]
|
||||
, if model.isExpanded then
|
||||
Element.el style.content.content.container <| model.content
|
||||
Element.el style.content.content.element <| model.content
|
||||
|
||||
else
|
||||
Element.none
|
||||
|
||||
@ -39,12 +39,12 @@ internal style list =
|
||||
|
||||
row : RowStyle msg -> List (Element msg) -> Element msg
|
||||
row style =
|
||||
internal style >> Element.row style.containerRow
|
||||
internal style >> Element.row style.elementRow
|
||||
|
||||
|
||||
column : ColumnStyle msg -> List (Element msg) -> Element msg
|
||||
column style =
|
||||
internal style >> Element.column style.containerColumn
|
||||
internal style >> Element.column style.elementColumn
|
||||
|
||||
|
||||
internalButton :
|
||||
@ -65,7 +65,7 @@ internalButton style list =
|
||||
(\i ->
|
||||
Select.selectButton
|
||||
(style.button
|
||||
|> Customize.containerButton
|
||||
|> Customize.elementButton
|
||||
(style.list.content
|
||||
++ (if List.length list == 1 then
|
||||
[]
|
||||
@ -91,7 +91,7 @@ buttonRow :
|
||||
-> List ( Bool, Button msg )
|
||||
-> Element msg
|
||||
buttonRow style =
|
||||
internalButton style >> Element.row style.list.containerRow
|
||||
internalButton style >> Element.row style.list.elementRow
|
||||
|
||||
|
||||
buttonColumn :
|
||||
@ -101,4 +101,4 @@ buttonColumn :
|
||||
-> List ( Bool, Button msg )
|
||||
-> Element msg
|
||||
buttonColumn style =
|
||||
internalButton style >> Element.column style.list.containerColumn
|
||||
internalButton style >> Element.column style.list.elementColumn
|
||||
|
||||
@ -9,4 +9,4 @@ circularProgressIndicator :
|
||||
-> Maybe Float
|
||||
-> Element msg
|
||||
circularProgressIndicator style maybeProgress =
|
||||
style.containerFunction maybeProgress
|
||||
style.elementFunction maybeProgress
|
||||
|
||||
@ -35,7 +35,7 @@ selectButton :
|
||||
-> Element msg
|
||||
selectButton style ( selected, b ) =
|
||||
Input.button
|
||||
(style.containerButton
|
||||
(style.elementButton
|
||||
++ (if b.onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
@ -48,7 +48,7 @@ selectButton style ( selected, b ) =
|
||||
)
|
||||
{ onPress = b.onPress
|
||||
, label =
|
||||
Element.row style.content.containerRow
|
||||
Element.row style.content.elementRow
|
||||
[ b.icon |> Element.map never
|
||||
, Element.text b.text |> Element.el style.content.contentText
|
||||
]
|
||||
|
||||
@ -105,7 +105,7 @@ sortTable style model =
|
||||
else
|
||||
findTitle tail
|
||||
in
|
||||
Element.table style.containerTable
|
||||
Element.table style.elementTable
|
||||
{ data =
|
||||
model.content
|
||||
|> (model.columns
|
||||
|
||||
@ -16,11 +16,11 @@ type alias Switch msg =
|
||||
switch : SwitchStyle msg -> Switch msg -> Element msg
|
||||
switch style { onPress, description, active } =
|
||||
Input.button
|
||||
(style.containerButton
|
||||
(style.elementButton
|
||||
++ [ Region.description description
|
||||
, Element.none
|
||||
|> Element.el
|
||||
(style.contentInFront.content.container
|
||||
(style.contentInFront.content.element
|
||||
++ (if active then
|
||||
style.contentInFront.content.ifActive
|
||||
|
||||
@ -32,7 +32,7 @@ switch style { onPress, description, active } =
|
||||
)
|
||||
)
|
||||
|> Element.el
|
||||
(style.contentInFront.container
|
||||
(style.contentInFront.element
|
||||
++ (if active then
|
||||
style.contentInFront.ifActive
|
||||
|
||||
@ -50,7 +50,7 @@ switch style { onPress, description, active } =
|
||||
, label =
|
||||
Element.none
|
||||
|> Element.el
|
||||
(style.content.container
|
||||
(style.content.element
|
||||
++ (if active then
|
||||
style.content.ifActive
|
||||
|
||||
|
||||
@ -16,9 +16,9 @@ tab style { tabs, content } =
|
||||
[ tabs
|
||||
|> Select.select
|
||||
|> List.map (Select.selectButton style.content.tabs.content)
|
||||
|> Element.row style.content.tabs.containerRow
|
||||
|> Element.row style.content.tabs.elementRow
|
||||
, tabs.selected
|
||||
|> content
|
||||
|> Element.el style.content.content
|
||||
]
|
||||
|> Element.column style.containerColumn
|
||||
|> Element.column style.elementColumn
|
||||
|
||||
@ -17,7 +17,7 @@ type alias TextInput msg =
|
||||
|
||||
textInput : TextInputStyle msg -> TextInput msg -> Element msg
|
||||
textInput style { chips, placeholder, label, text, onChange } =
|
||||
Element.row style.containerRow
|
||||
Element.row style.elementRow
|
||||
[ if chips |> List.isEmpty then
|
||||
Element.none
|
||||
|
||||
@ -25,8 +25,8 @@ textInput style { chips, placeholder, label, text, onChange } =
|
||||
chips
|
||||
|> List.map
|
||||
(Button.button style.content.chips.content)
|
||||
|> Element.row style.content.chips.containerRow
|
||||
, Input.text style.content.text.containerTextInput
|
||||
|> Element.row style.content.chips.elementRow
|
||||
, Input.text style.content.text.elementTextInput
|
||||
{ onChange = onChange
|
||||
, text = text
|
||||
, placeholder = placeholder
|
||||
|
||||
0
src/Widget/Icon.elm
Normal file
0
src/Widget/Icon.elm
Normal file
@ -334,7 +334,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
|
||||
content
|
||||
|> style.layout
|
||||
(List.concat
|
||||
[ style.container
|
||||
[ style.element
|
||||
, [ Element.inFront nav
|
||||
, Element.inFront snackbar
|
||||
]
|
||||
|
||||
@ -125,12 +125,12 @@ view style toMessage model =
|
||||
[ text
|
||||
|> Element.text
|
||||
|> List.singleton
|
||||
|> Element.paragraph style.content.text.containerText
|
||||
|> Element.paragraph style.content.text.elementText
|
||||
, button
|
||||
|> Maybe.map
|
||||
(Widget.textButton style.content.button)
|
||||
|> Maybe.withDefault Element.none
|
||||
]
|
||||
|> Element.row style.containerRow
|
||||
|> Element.row style.elementRow
|
||||
)
|
||||
)
|
||||
|
||||
@ -12,20 +12,20 @@ import Html exposing (Html)
|
||||
|
||||
{-| -}
|
||||
type alias SwitchStyle msg =
|
||||
{ containerButton : List (Attribute msg)
|
||||
{ elementButton : List (Attribute msg)
|
||||
, content :
|
||||
{ container : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, ifActive : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
, contentInFront :
|
||||
{ container : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, ifActive : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
, content :
|
||||
{ container : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, ifActive : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
@ -36,12 +36,12 @@ type alias SwitchStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias ButtonStyle msg =
|
||||
{ containerButton : List (Attribute msg)
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, ifActive : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
, content :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, contentText : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
@ -49,7 +49,7 @@ type alias ButtonStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias DialogStyle msg =
|
||||
{ containerColumn : List (Attribute msg)
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ title :
|
||||
{ contentText : List (Attribute msg)
|
||||
@ -58,7 +58,7 @@ type alias DialogStyle msg =
|
||||
{ contentText : List (Attribute msg)
|
||||
}
|
||||
, buttons :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ accept : ButtonStyle msg
|
||||
, dismiss : ButtonStyle msg
|
||||
@ -75,20 +75,20 @@ type alias DialogStyle msg =
|
||||
|
||||
-}
|
||||
type alias ExpansionPanelStyle msg =
|
||||
{ containerColumn : List (Attribute msg)
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ panel :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ label :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
}
|
||||
, expandIcon : Element Never
|
||||
, collapseIcon : Element Never
|
||||
}
|
||||
}
|
||||
, content :
|
||||
{ container : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -96,10 +96,10 @@ type alias ExpansionPanelStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias SnackbarStyle msg =
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ text :
|
||||
{ containerText : List (Attribute msg)
|
||||
{ elementText : List (Attribute msg)
|
||||
}
|
||||
, button : ButtonStyle msg
|
||||
}
|
||||
@ -108,14 +108,14 @@ type alias SnackbarStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias TextInputStyle msg =
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ chips :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content : ButtonStyle msg
|
||||
}
|
||||
, text :
|
||||
{ containerTextInput : List (Attribute msg)
|
||||
{ elementTextInput : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,10 +123,10 @@ type alias TextInputStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias TabStyle msg =
|
||||
{ containerColumn : List (Attribute msg)
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ tabs :
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content : ButtonStyle msg
|
||||
}
|
||||
, content : List (Attribute msg)
|
||||
@ -136,7 +136,7 @@ type alias TabStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias RowStyle msg =
|
||||
{ containerRow : List (Attribute msg)
|
||||
{ elementRow : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
@ -146,7 +146,7 @@ type alias RowStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias ColumnStyle msg =
|
||||
{ containerColumn : List (Attribute msg)
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
@ -161,7 +161,7 @@ type alias ColumnStyle msg =
|
||||
|
||||
-}
|
||||
type alias SortTableStyle msg =
|
||||
{ containerTable : List (Attribute msg)
|
||||
{ elementTable : List (Attribute msg)
|
||||
, content :
|
||||
{ header : ButtonStyle msg
|
||||
, ascIcon : Element Never
|
||||
@ -178,7 +178,7 @@ type alias SortTableStyle msg =
|
||||
|
||||
-}
|
||||
type alias LayoutStyle msg =
|
||||
{ container : List (Attribute msg)
|
||||
{ element : List (Attribute msg)
|
||||
, snackbar : SnackbarStyle msg
|
||||
, layout : List (Attribute msg) -> Element msg -> Html msg
|
||||
, header : List (Attribute msg)
|
||||
@ -198,5 +198,5 @@ type alias LayoutStyle msg =
|
||||
|
||||
{-| -}
|
||||
type alias ProgressIndicatorStyle msg =
|
||||
{ containerFunction : Maybe Float -> Element msg
|
||||
{ elementFunction : Maybe Float -> Element msg
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
module Widget.Style.Customize exposing
|
||||
( container, mapContainer
|
||||
, containerButton, mapContainerButton
|
||||
, containerColumn, mapContainerColumn
|
||||
, containerRow, mapContainerRow
|
||||
, containerTable, mapContainerTable
|
||||
( element, mapElement
|
||||
, elementButton, mapElementButton
|
||||
, elementColumn, mapElementColumn
|
||||
, elementRow, mapElementRow
|
||||
, elementTable, mapElementTable
|
||||
, content, mapContent
|
||||
, contentText, mapContentText
|
||||
, contentInFront, mapContentInFront
|
||||
@ -11,48 +11,44 @@ module Widget.Style.Customize exposing
|
||||
|
||||
{-| Each and every widget can be customized by modifing the Style Type.
|
||||
|
||||
```
|
||||
{- Make a button fill the full width -}
|
||||
Widget.textButton
|
||||
( Material.containedButton
|
||||
|> (\record ->
|
||||
{ record
|
||||
| container = record.container ++ [Element.width Element.fill]
|
||||
}
|
||||
)
|
||||
)
|
||||
{ onPress = Just PressedButton
|
||||
, text = "Press Button"
|
||||
}
|
||||
```
|
||||
{- Make a button fill the full width -}
|
||||
Widget.textButton
|
||||
( Material.containedButton
|
||||
|> (\record ->
|
||||
{ record
|
||||
| element = record.element ++ [Element.width Element.fill]
|
||||
}
|
||||
)
|
||||
)
|
||||
{ onPress = Just PressedButton
|
||||
, text = "Press Button"
|
||||
}
|
||||
|
||||
This module will contain helpfull functions to make customization easier.
|
||||
|
||||
```
|
||||
{- Make a button fill the full width -}
|
||||
Widget.textButton
|
||||
( Material.containedButton
|
||||
|> Customize.container [Element.width Element.fill]
|
||||
)
|
||||
{ onPress = Just PressedButton
|
||||
, text = "Press Button"
|
||||
}
|
||||
```
|
||||
{- Make a button fill the full width -}
|
||||
Widget.textButton
|
||||
( Material.containedButton
|
||||
|> Customize.element [Element.width Element.fill]
|
||||
)
|
||||
{ onPress = Just PressedButton
|
||||
, text = "Press Button"
|
||||
}
|
||||
|
||||
|
||||
# Container
|
||||
# Element
|
||||
|
||||
@docs container, mapContainer
|
||||
@docs element, mapElement
|
||||
|
||||
@docs containerButton, mapContainerButton
|
||||
@docs elementButton, mapElementButton
|
||||
|
||||
@docs containerColumn, mapContainerColumn
|
||||
@docs elementColumn, mapElementColumn
|
||||
|
||||
@docs containerRow, mapContainerRow
|
||||
@docs elementRow, mapElementRow
|
||||
|
||||
@docs containerTable, mapContainerTable
|
||||
@docs elementTable, mapElementTable
|
||||
|
||||
@docs containerTextInput, mapContainerTextInput
|
||||
@docs elementTextInput, mapElementTextInput
|
||||
|
||||
|
||||
# Content
|
||||
@ -79,85 +75,85 @@ Widget.textButton
|
||||
-}
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
-- Container
|
||||
-- Element
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
|
||||
container : List b -> { a | container : List b } -> { a | container : List b }
|
||||
container list a =
|
||||
element : List b -> { a | element : List b } -> { a | element : List b }
|
||||
element list a =
|
||||
a
|
||||
|> mapContainer (\b -> b ++ list)
|
||||
|> mapElement (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainer : (b -> b) -> { a | container : b } -> { a | container : b }
|
||||
mapContainer fun a =
|
||||
mapElement : (b -> b) -> { a | element : b } -> { a | element : b }
|
||||
mapElement fun a =
|
||||
{ a
|
||||
| container = fun a.container
|
||||
| element = fun a.element
|
||||
}
|
||||
|
||||
|
||||
containerButton : List b -> { a | containerButton : List b } -> { a | containerButton : List b }
|
||||
containerButton list a =
|
||||
elementButton : List b -> { a | elementButton : List b } -> { a | elementButton : List b }
|
||||
elementButton list a =
|
||||
a
|
||||
|> mapContainerButton (\b -> b ++ list)
|
||||
|> mapElementButton (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainerButton : (b -> b) -> { a | containerButton : b } -> { a | containerButton : b }
|
||||
mapContainerButton fun a =
|
||||
mapElementButton : (b -> b) -> { a | elementButton : b } -> { a | elementButton : b }
|
||||
mapElementButton fun a =
|
||||
{ a
|
||||
| containerButton = fun a.containerButton
|
||||
| elementButton = fun a.elementButton
|
||||
}
|
||||
|
||||
|
||||
containerColumn : List b -> { a | containerColumn : List b } -> { a | containerColumn : List b }
|
||||
containerColumn list a =
|
||||
elementColumn : List b -> { a | elementColumn : List b } -> { a | elementColumn : List b }
|
||||
elementColumn list a =
|
||||
a
|
||||
|> mapContainerColumn (\b -> b ++ list)
|
||||
|> mapElementColumn (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainerColumn : (b -> b) -> { a | containerColumn : b } -> { a | containerColumn : b }
|
||||
mapContainerColumn fun a =
|
||||
mapElementColumn : (b -> b) -> { a | elementColumn : b } -> { a | elementColumn : b }
|
||||
mapElementColumn fun a =
|
||||
{ a
|
||||
| containerColumn = fun a.containerColumn
|
||||
| elementColumn = fun a.elementColumn
|
||||
}
|
||||
|
||||
|
||||
containerRow : List b -> { a | containerRow : List b } -> { a | containerRow : List b }
|
||||
containerRow list a =
|
||||
elementRow : List b -> { a | elementRow : List b } -> { a | elementRow : List b }
|
||||
elementRow list a =
|
||||
a
|
||||
|> mapContainerRow (\b -> b ++ list)
|
||||
|> mapElementRow (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainerRow : (b -> b) -> { a | containerRow : b } -> { a | containerRow : b }
|
||||
mapContainerRow fun a =
|
||||
mapElementRow : (b -> b) -> { a | elementRow : b } -> { a | elementRow : b }
|
||||
mapElementRow fun a =
|
||||
{ a
|
||||
| containerRow = fun a.containerRow
|
||||
| elementRow = fun a.elementRow
|
||||
}
|
||||
|
||||
|
||||
containerTable : List b -> { a | containerTable : List b } -> { a | containerTable : List b }
|
||||
containerTable list a =
|
||||
elementTable : List b -> { a | elementTable : List b } -> { a | elementTable : List b }
|
||||
elementTable list a =
|
||||
a
|
||||
|> mapContainerTable (\b -> b ++ list)
|
||||
|> mapElementTable (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainerTable : (b -> b) -> { a | containerTable : b } -> { a | containerTable : b }
|
||||
mapContainerTable fun a =
|
||||
mapElementTable : (b -> b) -> { a | elementTable : b } -> { a | elementTable : b }
|
||||
mapElementTable fun a =
|
||||
{ a
|
||||
| containerTable = fun a.containerTable
|
||||
| elementTable = fun a.elementTable
|
||||
}
|
||||
|
||||
|
||||
containerTextInput : List b -> { a | containerTextInput : List b } -> { a | containerTextInput : List b }
|
||||
containerTextInput list a =
|
||||
elementTextInput : List b -> { a | elementTextInput : List b } -> { a | elementTextInput : List b }
|
||||
elementTextInput list a =
|
||||
a
|
||||
|> mapContainerTextInput (\b -> b ++ list)
|
||||
|> mapElementTextInput (\b -> b ++ list)
|
||||
|
||||
|
||||
mapContainerTextInput : (b -> b) -> { a | containerTextInput : b } -> { a | containerTextInput : b }
|
||||
mapContainerTextInput fun a =
|
||||
mapElementTextInput : (b -> b) -> { a | elementTextInput : b } -> { a | elementTextInput : b }
|
||||
mapElementTextInput fun a =
|
||||
{ a
|
||||
| containerTextInput = fun a.containerTextInput
|
||||
| elementTextInput = fun a.elementTextInput
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ You can use the theme by copying the following code:
|
||||
|
||||
sortTable : Palette -> SortTableStyle msg
|
||||
sortTable palette =
|
||||
{ containerTable = []
|
||||
{ elementTable = []
|
||||
, headerButton = Material.textButton palette
|
||||
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
|
||||
, descIcon = Icons.chevronDown |> Element.html |> Element.el []
|
||||
@ -291,7 +291,7 @@ textAndBackground color =
|
||||
|
||||
baseButton : Palette -> ButtonStyle msg
|
||||
baseButton _ =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
Typography.button
|
||||
++ [ Element.height <| Element.px 36
|
||||
, Element.paddingXY 8 8
|
||||
@ -303,7 +303,7 @@ baseButton _ =
|
||||
, ifActive = []
|
||||
, otherwise = []
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.width <| Element.minimum 32 <| Element.shrink
|
||||
, Element.centerY
|
||||
@ -317,8 +317,8 @@ baseButton _ =
|
||||
-}
|
||||
containedButton : Palette -> ButtonStyle msg
|
||||
containedButton palette =
|
||||
{ containerButton =
|
||||
(baseButton palette |> .containerButton)
|
||||
{ elementButton =
|
||||
(baseButton palette |> .elementButton)
|
||||
++ [ Border.shadow <| MaterialColor.shadow 2
|
||||
, Element.mouseDown <|
|
||||
[ palette.primary
|
||||
@ -374,8 +374,8 @@ containedButton palette =
|
||||
|> Font.color
|
||||
]
|
||||
, content =
|
||||
{ containerRow =
|
||||
(baseButton palette |> .content |> .containerRow)
|
||||
{ elementRow =
|
||||
(baseButton palette |> .content |> .elementRow)
|
||||
++ [ Element.paddingXY 8 0 ]
|
||||
, contentText = baseButton palette |> .content |> .contentText
|
||||
}
|
||||
@ -386,8 +386,8 @@ containedButton palette =
|
||||
-}
|
||||
outlinedButton : Palette -> ButtonStyle msg
|
||||
outlinedButton palette =
|
||||
{ containerButton =
|
||||
(baseButton palette |> .containerButton)
|
||||
{ elementButton =
|
||||
(baseButton palette |> .elementButton)
|
||||
++ [ Border.width <| 1
|
||||
, Font.color <| fromColor <| palette.primary
|
||||
, palette.on.surface
|
||||
@ -432,10 +432,10 @@ outlinedButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
(baseButton palette
|
||||
|> .content
|
||||
|> .containerRow
|
||||
|> .elementRow
|
||||
)
|
||||
++ [ Element.paddingXY 8 0 ]
|
||||
, contentText =
|
||||
@ -450,8 +450,8 @@ outlinedButton palette =
|
||||
-}
|
||||
textButton : Palette -> ButtonStyle msg
|
||||
textButton palette =
|
||||
{ containerButton =
|
||||
(baseButton palette |> .containerButton)
|
||||
{ elementButton =
|
||||
(baseButton palette |> .elementButton)
|
||||
++ [ Font.color <| fromColor <| palette.primary
|
||||
, Element.mouseDown
|
||||
[ palette.primary
|
||||
@ -490,7 +490,7 @@ textButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow = baseButton palette |> .content |> .containerRow
|
||||
{ elementRow = baseButton palette |> .content |> .elementRow
|
||||
, contentText = baseButton palette |> .content |> .contentText
|
||||
}
|
||||
}
|
||||
@ -509,7 +509,7 @@ Technical Remark:
|
||||
-}
|
||||
toggleButton : Palette -> ButtonStyle msg
|
||||
toggleButton palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
Typography.button
|
||||
++ [ Element.width <| Element.px 48
|
||||
, Element.height <| Element.px 48
|
||||
@ -584,7 +584,7 @@ toggleButton palette =
|
||||
|> Border.color
|
||||
]
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.height Element.fill
|
||||
, Element.width Element.fill
|
||||
@ -610,8 +610,8 @@ Technical Remark:
|
||||
-}
|
||||
iconButton : Palette -> ButtonStyle msg
|
||||
iconButton palette =
|
||||
{ containerButton =
|
||||
(baseButton palette |> .containerButton)
|
||||
{ elementButton =
|
||||
(baseButton palette |> .elementButton)
|
||||
++ [ Element.height <| Element.px 48
|
||||
, Border.rounded 24
|
||||
, Element.mouseDown
|
||||
@ -651,7 +651,7 @@ iconButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing 8
|
||||
, Element.width <| Element.shrink
|
||||
, Element.centerY
|
||||
@ -671,7 +671,7 @@ Technical Remark:
|
||||
-}
|
||||
switch : Palette -> SwitchStyle msg
|
||||
switch palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
[ Element.height <| Element.px 38
|
||||
, Element.width <| Element.px 58
|
||||
, Element.mouseDown []
|
||||
@ -679,7 +679,7 @@ switch palette =
|
||||
, Element.mouseOver []
|
||||
]
|
||||
, content =
|
||||
{ container =
|
||||
{ element =
|
||||
[ Element.height <| Element.px 14
|
||||
, Element.width <| Element.px 34
|
||||
, Border.rounded <| 10
|
||||
@ -705,7 +705,7 @@ switch palette =
|
||||
]
|
||||
}
|
||||
, contentInFront =
|
||||
{ container =
|
||||
{ element =
|
||||
[ Element.height <| Element.px 38
|
||||
, Element.width <| Element.px 38
|
||||
, Border.rounded <| 19
|
||||
@ -755,7 +755,7 @@ switch palette =
|
||||
, Element.alignLeft
|
||||
]
|
||||
, content =
|
||||
{ container =
|
||||
{ element =
|
||||
[ Element.height <| Element.px 20
|
||||
, Element.width <| Element.px 20
|
||||
, Element.centerY
|
||||
@ -816,7 +816,7 @@ Technical Remark:
|
||||
-}
|
||||
chip : Palette -> ButtonStyle msg
|
||||
chip palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
[ Element.height <| Element.px 32
|
||||
, Element.paddingEach
|
||||
{ top = 0
|
||||
@ -883,7 +883,7 @@ chip palette =
|
||||
|> Font.color
|
||||
]
|
||||
, content =
|
||||
{ containerRow = [ Element.spacing 0, Element.centerY ]
|
||||
{ elementRow = [ Element.spacing 0, Element.centerY ]
|
||||
, contentText =
|
||||
[ Element.paddingEach
|
||||
{ top = 0
|
||||
@ -906,7 +906,7 @@ chip palette =
|
||||
-}
|
||||
row : RowStyle msg
|
||||
row =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.paddingXY 0 8
|
||||
, Element.spacing 8
|
||||
]
|
||||
@ -921,7 +921,7 @@ row =
|
||||
-}
|
||||
column : ColumnStyle msg
|
||||
column =
|
||||
{ containerColumn =
|
||||
{ elementColumn =
|
||||
[ Element.paddingXY 0 8
|
||||
, Element.spacing 8
|
||||
]
|
||||
@ -939,7 +939,7 @@ Only use in combination with `toggleButton`
|
||||
-}
|
||||
buttonRow : RowStyle msg
|
||||
buttonRow =
|
||||
{ containerRow = []
|
||||
{ elementRow = []
|
||||
, content =
|
||||
[ Border.rounded 2
|
||||
]
|
||||
@ -975,7 +975,7 @@ This is a simplification of the [Material Design Card
|
||||
-}
|
||||
cardColumn : Palette -> ColumnStyle msg
|
||||
cardColumn palette =
|
||||
{ containerColumn =
|
||||
{ elementColumn =
|
||||
[ Element.width <| Element.fill
|
||||
, Element.mouseOver <|
|
||||
[ Border.shadow <| MaterialColor.shadow 4 ]
|
||||
@ -1043,7 +1043,7 @@ cardColumn palette =
|
||||
-}
|
||||
alertDialog : Palette -> DialogStyle msg
|
||||
alertDialog palette =
|
||||
{ containerColumn =
|
||||
{ elementColumn =
|
||||
[ Border.rounded 4
|
||||
, Element.fill
|
||||
|> Element.maximum 560
|
||||
@ -1060,7 +1060,7 @@ alertDialog palette =
|
||||
{ contentText = [ Element.paddingXY 24 0 ]
|
||||
}
|
||||
, buttons =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.paddingXY 8 8
|
||||
, Element.spacing 8
|
||||
, Element.alignRight
|
||||
@ -1121,13 +1121,13 @@ Technical Remarks:
|
||||
-}
|
||||
expansionPanel : Palette -> ExpansionPanelStyle msg
|
||||
expansionPanel palette =
|
||||
{ containerColumn =
|
||||
{ elementColumn =
|
||||
[ Background.color <| fromColor <| palette.surface
|
||||
, Element.width <| Element.fill
|
||||
]
|
||||
, content =
|
||||
{ panel =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.height <| Element.px 48
|
||||
, Element.spaceEvenly
|
||||
, Element.padding 14
|
||||
@ -1135,7 +1135,7 @@ expansionPanel palette =
|
||||
]
|
||||
, content =
|
||||
{ label =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing 32 ]
|
||||
}
|
||||
, expandIcon =
|
||||
@ -1155,7 +1155,7 @@ expansionPanel palette =
|
||||
}
|
||||
}
|
||||
, content =
|
||||
{ container = [ Element.padding 14 ]
|
||||
{ element = [ Element.padding 14 ]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1268,7 +1268,7 @@ determinateCircularIcon color attribs progress =
|
||||
-}
|
||||
progressIndicator : Palette -> ProgressIndicatorStyle msg
|
||||
progressIndicator palette =
|
||||
{ containerFunction =
|
||||
{ elementFunction =
|
||||
\maybeProgress ->
|
||||
case maybeProgress of
|
||||
Nothing ->
|
||||
@ -1295,7 +1295,7 @@ Technical Remark:
|
||||
-}
|
||||
snackbar : Palette -> SnackbarStyle msg
|
||||
snackbar palette =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ MaterialColor.dark
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
@ -1311,14 +1311,14 @@ snackbar palette =
|
||||
]
|
||||
, content =
|
||||
{ text =
|
||||
{ containerText =
|
||||
{ elementText =
|
||||
[ Element.centerX
|
||||
, Element.paddingXY 10 8
|
||||
]
|
||||
}
|
||||
, button =
|
||||
textButton palette
|
||||
|> Customize.containerButton
|
||||
|> Customize.elementButton
|
||||
[ MaterialColor.dark
|
||||
|> MaterialColor.accessibleWithTextColor palette.primary
|
||||
|> fromColor
|
||||
@ -1343,7 +1343,7 @@ Technical Remark:
|
||||
-}
|
||||
textInput : Palette -> TextInputStyle msg
|
||||
textInput palette =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
(palette.surface
|
||||
|> textAndBackground
|
||||
)
|
||||
@ -1365,11 +1365,11 @@ textInput palette =
|
||||
]
|
||||
, content =
|
||||
{ chips =
|
||||
{ containerRow = [ Element.spacing 8 ]
|
||||
{ elementRow = [ Element.spacing 8 ]
|
||||
, content = chip palette
|
||||
}
|
||||
, text =
|
||||
{ containerTextInput =
|
||||
{ elementTextInput =
|
||||
(palette.surface
|
||||
|> textAndBackground
|
||||
)
|
||||
@ -1399,7 +1399,7 @@ Technical Remark:
|
||||
-}
|
||||
tabButton : Palette -> ButtonStyle msg
|
||||
tabButton palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
Typography.button
|
||||
++ [ Element.height <| Element.px 48
|
||||
, Element.fill
|
||||
@ -1448,7 +1448,7 @@ tabButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
@ -1462,10 +1462,10 @@ tabButton palette =
|
||||
-}
|
||||
tab : Palette -> TabStyle msg
|
||||
tab palette =
|
||||
{ containerColumn = [ Element.spacing 8, Element.width <| Element.fill ]
|
||||
{ elementColumn = [ Element.spacing 8, Element.width <| Element.fill ]
|
||||
, content =
|
||||
{ tabs =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spaceEvenly
|
||||
, Border.shadow <| MaterialColor.shadow 4
|
||||
, Element.spacing 8
|
||||
@ -1501,7 +1501,7 @@ menu =
|
||||
|
||||
menuTabButton : Palette -> ButtonStyle msg
|
||||
menuTabButton palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
Typography.button
|
||||
++ [ Element.height <| Element.px 56
|
||||
, Element.fill
|
||||
@ -1553,7 +1553,7 @@ menuTabButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow =
|
||||
{ elementRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
@ -1565,7 +1565,7 @@ menuTabButton palette =
|
||||
|
||||
drawerButton : Palette -> ButtonStyle msg
|
||||
drawerButton palette =
|
||||
{ containerButton =
|
||||
{ elementButton =
|
||||
[ Font.size 14
|
||||
, Font.semiBold
|
||||
, Font.letterSpacing 0.25
|
||||
@ -1617,7 +1617,7 @@ drawerButton palette =
|
||||
, otherwise =
|
||||
[]
|
||||
, content =
|
||||
{ containerRow = baseButton palette |> .content |> .containerRow
|
||||
{ elementRow = baseButton palette |> .content |> .elementRow
|
||||
, contentText = baseButton palette |> .content |> .contentText
|
||||
}
|
||||
}
|
||||
@ -1642,7 +1642,7 @@ Technical Remark:
|
||||
-}
|
||||
layout : Palette -> LayoutStyle msg
|
||||
layout palette =
|
||||
{ container =
|
||||
{ element =
|
||||
(palette.background |> textAndBackground)
|
||||
++ [ Font.family
|
||||
[ Font.typeface "Roboto"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user