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

.

Browse Source
This commit is contained in:
Lucas Payr 2021-01-21 00:02:46 +01:00
parent 86f5b39bc6
commit da1907142d
34 changed files with 368 additions and 1502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -6,6 +6,8 @@ It also supports custom themes and has a material design theme already ready to
[Examples of all widgets can be found here](https://orasund.github.io/elm-ui-widgets/2.0.0/).
Feel free to start an [issue on the repository](https://github.com/Orasund/elm-ui-widgets/issues) if you have any questions.
![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
## Concept

353
example/src/Data/Style/ElmUiFramework.elm
View File

@ -1,353 +0,0 @@
module Data.Style.ElmUiFramework exposing (style)
import Data.Style exposing (Style)
import Element
import Element.Border as Border
import Element.Font as Font
import Framework
import Framework.Button as Button
import Framework.Card as Card
import Framework.Color as Color
import Framework.Grid as Grid
import Framework.Group as Group
import Framework.Heading as Heading
import Framework.Tag as Tag
import Icons
import Widget.Style
exposing
( ButtonStyle
, ColumnStyle
, DialogStyle
, ExpansionPanelStyle
, LayoutStyle
, ProgressIndicatorStyle
, RowStyle
, SnackbarStyle
, SortTableStyle
, TabStyle
, TextInputStyle
)
textButton : ButtonStyle msg
textButton =
{ container = Button.simple
, labelRow = Grid.simple
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
simpleButton : ButtonStyle msg
simpleButton =
{ container = Button.simple ++ Color.success
, labelRow = Grid.simple
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
menuTabButton : ButtonStyle msg
menuTabButton =
{ container =
[ Element.height <| Element.px <| 42
, Border.widthEach
{ top = 0
, left = 0
, right = 0
, bottom = 4
}
, Element.paddingEach
{ top = 12
, left = 8
, right = 8
, bottom = 4
}
, Border.color Color.black
]
, labelRow = Grid.simple
, text = []
, ifDisabled = Color.disabled
, ifActive = [ Border.color Color.turquoise ]
, otherwise = []
}
menuButton : ButtonStyle msg
menuButton =
{ labelRow = Grid.simple
, container = Button.simple ++ Group.center ++ Color.dark
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
sheetButton : ButtonStyle msg
sheetButton =
{ container =
Button.fill
++ Group.center
++ Color.light
++ [ Font.alignLeft ]
, labelRow = Grid.simple
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
buttonStyle : ButtonStyle msg
buttonStyle =
{ labelRow = [ Element.spacing 8 ]
, container = Button.simple
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
snackbarButton : ButtonStyle msg
snackbarButton =
{ labelRow = Grid.simple
, container = Button.simple ++ Color.dark
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
tabButtonStyle : ButtonStyle msg
tabButtonStyle =
{ labelRow = [ Element.spacing 8 ]
, container = Button.simple ++ Group.top
, text = []
, ifDisabled = Color.disabled
, ifActive = Color.primary
, otherwise = []
}
textInputStyle : TextInputStyle msg
textInputStyle =
{ chipButton = chipButtonStyle
, chipsRow =
[ Element.width <| Element.shrink
, Element.spacing <| 4
, Element.paddingEach
{ top = 8
, left = 0
, right = 0
, bottom = 8
}
]
, containerRow =
Button.simple
++ Color.light
++ [ Border.color <| Element.rgb255 186 189 182
, Font.alignLeft
, Element.paddingXY 8 0
, Element.height <| Element.px <| 42
]
++ Grid.simple
, input =
Color.light
++ [ Element.padding 8
]
}
chipButtonStyle : ButtonStyle msg
chipButtonStyle =
{ container = Tag.simple
, text = []
, ifDisabled = []
, labelRow = Grid.simple
, ifActive = Color.primary
, otherwise = []
}
expansionPanelStyle : ExpansionPanelStyle msg
expansionPanelStyle =
{ containerColumn = Card.simple ++ Grid.simple ++ [ Element.height <| Element.shrink ]
, panelRow = Grid.spacedEvenly ++ [ Element.height <| Element.shrink ]
, labelRow = Grid.simple ++ [ Element.height <| Element.shrink ]
, content = []
, expandIcon = Icons.chevronDown |> Element.html |> Element.el []
, collapseIcon = Icons.chevronUp |> Element.html |> Element.el []
}
dialog : DialogStyle msg
dialog =
{ containerColumn =
Card.simple
++ Grid.simple
++ [ Element.centerY
, Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill
]
, title = Heading.h3
, text = []
, buttonRow =
Grid.simple
++ [ Element.paddingEach
{ top = 28
, bottom = 0
, left = 0
, right = 0
}
]
, acceptButton = simpleButton
, dismissButton = textButton
}
snackbar : SnackbarStyle msg
snackbar =
{ containerRow =
Card.simple
++ Color.dark
++ Grid.simple
++ [ Element.paddingXY 8 6
, Element.height <| Element.px <| 54
]
, button = snackbarButton
, text = [ Element.paddingXY 8 0 ]
}
tab : TabStyle msg
tab =
{ button = tabButtonStyle
, optionRow = Grid.simple
, containerColumn = Grid.compact
, content = Card.small ++ Group.bottom
}
row : RowStyle msg
row =
{ containerRow = Grid.simple
, element = []
, ifFirst = Group.left
, ifLast = Group.right
, otherwise = Group.center
}
buttonRow : RowStyle msg
buttonRow =
{ containerRow = Grid.compact
, element = []
, ifFirst = Group.left
, ifLast = Group.right
, otherwise = Group.center
}
cardColumn : ColumnStyle msg
cardColumn =
{ containerColumn = Grid.compact ++ [ Element.height <| Element.fill ]
, element = Card.large ++ [ Element.height <| Element.fill ]
, ifFirst = Group.top
, ifLast = Group.bottom
, otherwise = Group.center
}
column : ColumnStyle msg
column =
{ containerColumn = Grid.compact
, element = []
, ifFirst = Group.top
, ifLast = Group.bottom
, otherwise = Group.center
}
sortTable : SortTableStyle msg
sortTable =
{ containerTable = Grid.simple
, headerButton = tabButtonStyle
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
, descIcon = Icons.chevronDown |> Element.html |> Element.el []
, defaultIcon = Element.none
}
progressIndicatorStyle : ProgressIndicatorStyle msg
progressIndicatorStyle =
{ containerFunction =
\maybeProgress ->
case maybeProgress of
Nothing ->
Element.text "Indeterminate progress indicator"
Just progress ->
Element.text ("Determinate progress indicator, " ++ String.fromFloat progress ++ "completeness")
}
layout : LayoutStyle msg
layout =
{ container = []
, snackbar = snackbar
, layout = Framework.responsiveLayout
, header =
Framework.container
++ Color.dark
++ [ Element.padding <| 0
, Element.height <| Element.px <| 42
]
, menuButton = menuButton
, sheetButton = sheetButton
, menuTabButton = menuTabButton
, sheet =
Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill ]
, menuIcon =
Icons.menu |> Element.html |> Element.el []
, moreVerticalIcon =
Icons.moreVertical |> Element.html |> Element.el []
, spacing = 8
, title = Heading.h2
, searchIcon =
Icons.search |> Element.html |> Element.el []
, search =
Color.simple
++ Card.large
++ [ Font.color <| Element.rgb255 0 0 0
, Element.padding 6
, Element.centerY
, Element.alignRight
]
, searchFill =
Color.light ++ Group.center
}
style =
{ sortTable = sortTable
, row = row
, buttonRow = buttonRow
, cardColumn = cardColumn
, column = column
, button = buttonStyle
, primaryButton = simpleButton
, tab = tab
, textInput = textInputStyle
, chipButton = chipButtonStyle
, expansionPanel = expansionPanelStyle
, dialog = dialog
, selectButton = buttonStyle
, progressIndicator = progressIndicatorStyle
, layout = layout
}

12
example/src/Data/Style/Material.elm
View File

@ -24,16 +24,18 @@ import Widget.Style
, TextInputStyle
)
import Widget.Style.Material as Material exposing (Palette)
import Widget.Style.Template as Template
sortTable : Palette -> SortTableStyle msg
sortTable palette =
{ containerTable = []
, headerButton = Material.textButton palette
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
, descIcon = Icons.chevronDown |> Element.html |> Element.el []
, defaultIcon = Element.none
, content =
{ header = Material.textButton palette
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
, descIcon = Icons.chevronDown |> Element.html |> Element.el []
, defaultIcon = Element.none
}
}

280
example/src/Data/Style/SemanticUI.elm
View File

@ -1,280 +0,0 @@
module Data.Style.SemanticUI exposing (style)
import Data.Style exposing (Style)
import Element exposing (Attribute, Element)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Html
import Html.Attributes as Attributes
import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, ProgressIndicatorStyle, RowStyle, SortTableStyle, TabStyle, TextInputStyle)
import Widget.Style.Template as Template
sortTable : SortTableStyle msg
sortTable =
{ containerTable = [ Attributes.class "ui celled table" |> Element.htmlAttribute ]
, headerButton = button
, ascIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, descIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, defaultIcon = Element.none
}
button : ButtonStyle msg
button =
{ container =
[ Attributes.class "ui basic button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
selectButton : ButtonStyle msg
selectButton =
{ container =
[ Attributes.class "ui button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
primaryButton : ButtonStyle msg
primaryButton =
{ container =
[ Attributes.class "ui primary button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
chipButton : ButtonStyle msg
chipButton =
{ container =
[ Attributes.class "ui label" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
row : RowStyle msg
row =
{ containerRow = [ Element.spacing 4 ]
, element = []
, ifFirst = []
, ifLast = []
, otherwise = []
}
column : ColumnStyle msg
column =
{ containerColumn = [ Element.spacing 4 ]
, element = []
, ifFirst = []
, ifLast = []
, otherwise = []
}
buttonRow : RowStyle msg
buttonRow =
{ containerRow =
[ Attributes.class "ui buttons" |> Element.htmlAttribute
]
, element = []
, ifFirst = []
, ifLast = []
, otherwise = []
}
cardColumn : ColumnStyle msg
cardColumn =
{ containerColumn =
[ Attributes.class "ui card" |> Element.htmlAttribute
]
, element =
[ Element.width <| Element.fill
, Attributes.class "content" |> Element.htmlAttribute
]
, ifFirst = []
, ifLast = []
, otherwise = []
}
expansionPanel : ExpansionPanelStyle msg
expansionPanel =
{ containerColumn = [ Attributes.class "ui accordion" |> Element.htmlAttribute ]
, panelRow = [ Attributes.class "title" |> Element.htmlAttribute ]
, labelRow = []
, content = [ Attributes.class "content active" |> Element.htmlAttribute ]
, expandIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, collapseIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
}
dialog : DialogStyle msg
dialog =
{ containerColumn = [ Attributes.class "ui active modal" |> Element.htmlAttribute ]
, title = [ Attributes.class "header" |> Element.htmlAttribute ]
, buttonRow = [ Attributes.class "actions" |> Element.htmlAttribute ]
, acceptButton =
{ container =
[ Attributes.class "ui positive button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
, dismissButton =
{ container =
[ Attributes.class "ui basic button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
, text = [ Attributes.class "description" |> Element.htmlAttribute ]
}
tab : TabStyle msg
tab =
{ button =
{ container =
[ Attributes.class "item" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
, optionRow =
[ Attributes.class "ui top attached tabular menu" |> Element.htmlAttribute
]
, containerColumn = []
, content =
[ Attributes.class "ui bottom active attached tab segment" |> Element.htmlAttribute
]
}
progressIndicator : ProgressIndicatorStyle msg
progressIndicator =
{ containerFunction =
\maybeProgress ->
"progressbar is not supported in Semantic UI"
|> Element.text
|> List.singleton
|> Element.paragraph []
}
textInput : TextInputStyle msg
textInput =
{ chipButton = chipButton
, containerRow = [ Element.spacing 4 ]
, chipsRow =
[ Element.spacing 2
]
, input = []
}
layout : LayoutStyle msg
layout =
{ container = []
, snackbar = Template.snackbar <| ":snackbar"
, layout = Element.layout
, header = []
, sheet = []
, sheetButton = Template.button <| ":sheetButton"
, menuButton = Template.button <| ":menuButton"
, menuTabButton = Template.button <| ":menuTabButton"
, menuIcon = Template.icon <| "menuIcon"
, moreVerticalIcon = Template.icon <| "moreVerticalIcon"
, spacing = 4
, title = []
, searchIcon = Template.icon <| "searchIcon"
, search = []
, searchFill = []
}
style =
{ sortTable = sortTable
, row = row
, buttonRow = buttonRow
, cardColumn = cardColumn
, column = column
, button = button
, primaryButton = primaryButton
, tab = tab
, textInput = textInput
, chipButton = chipButton
, expansionPanel = expansionPanel
, selectButton = selectButton
, dialog = dialog
, progressIndicator = progressIndicator
, layout = Template.layout "layout"
, switch = button
}

29
example/src/Data/Style/Template.elm
View File

@ -1,29 +0,0 @@
module Data.Style.Template exposing (style)
import Data.Style exposing (Style)
import Element exposing (Attribute, Element)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Widget.Style.Template as Template
style : Style msg
style =
{ sortTable = Template.sortTable <| "sortTable"
, row = Template.row <| "row"
, buttonRow = Template.row <| "buttonRow"
, cardColumn = Template.column <| "cardRow"
, column = Template.column <| "column"
, button = Template.button <| "button"
, primaryButton = Template.button <| "primaryButton"
, tab = Template.tab <| "tab"
, textInput = Template.textInput <| "textInput"
, chipButton = Template.button <| "chipButton"
, expansionPanel = Template.expansionPanel "expansionPanel"
, selectButton = Template.button "selectButton"
, dialog = Template.dialog "dialog"
, progressIndicator = Template.progressIndicator "progressIndicator"
, layout = Template.layout "layout"
, switch = Template.switch <| "switch"
}

9
example/src/Data/Theme.elm
View File

@ -1,25 +1,18 @@
module Data.Theme exposing (Theme(..), toStyle)
import Data.Style exposing (Style)
import Data.Style.ElmUiFramework
import Data.Style.Material
import Data.Style.SemanticUI
import Data.Style.Template
import Widget.Style.Material
type Theme
= Template
| Material
= Material
| DarkMaterial
toStyle : Theme -> Style msg
toStyle theme =
case theme of
Template ->
Data.Style.Template.style
Material ->
Data.Style.Material.style Widget.Style.Material.defaultPalette

2
example/src/Example/Button.elm
View File

@ -97,7 +97,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Dialog.elm
View File

@ -106,7 +106,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/ExpansionPanel.elm
View File

@ -67,7 +67,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/List.elm
View File

@ -63,7 +63,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Modal.elm
View File

@ -105,7 +105,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/MultiSelect.elm
View File

@ -86,7 +86,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/ProgressIndicator.elm
View File

@ -59,7 +59,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Select.elm
View File

@ -78,7 +78,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Snackbar.elm
View File

@ -129,7 +129,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

26
example/src/Example/SortTable.elm
View File

@ -17,14 +17,22 @@ materialStyle : Style {} msg
materialStyle =
{ sortTable =
{ containerTable = []
, headerButton = Material.textButton Material.defaultPalette
, ascIcon =
Material.expansionPanel Material.defaultPalette
|> .collapseIcon
, descIcon =
Material.expansionPanel Material.defaultPalette
|> .expandIcon
, defaultIcon = Element.none
, content =
{ header = Material.textButton Material.defaultPalette
, ascIcon =
Material.expansionPanel Material.defaultPalette
|> .content
|> .panel
|> .content
|> .collapseIcon
, descIcon =
Material.expansionPanel Material.defaultPalette
|> .content
|> .panel
|> .content
|> .expandIcon
, defaultIcon = Element.none
}
}
}
@ -115,7 +123,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Switch.elm
View File

@ -69,7 +69,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

2
example/src/Example/Tab.elm
View File

@ -90,7 +90,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

4
example/src/Example/TextInput.elm
View File

@ -98,7 +98,7 @@ view msgMapper style model =
|> Set.toList
|> List.map
(\string ->
Widget.button style.textInput.chipButton
Widget.button style.textInput.content.chips.content
{ onPress =
string
|> ToggleTextInputChip
@ -117,7 +117,7 @@ main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view identity materialStyle >> Element.layout []
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}

9
example/src/Main.elm
View File

@ -345,15 +345,6 @@ view model =
, text = "Dark Material Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= Template then
Just <| SetTheme <| Template
else
Nothing
, text = "Template Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
]
, onChangedSidebar = ChangedSidebar
, title =

10
src/Internal/Button.elm
View File

@ -28,7 +28,7 @@ type alias TextButton msg =
iconButton : ButtonStyle msg -> Button msg -> Element msg
iconButton style { onPress, text, icon } =
Input.button
(style.container
(style.containerButton
++ (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.labelRow
, label = icon |> Element.map never |> Element.el style.content.containerRow
}
@ -57,7 +57,7 @@ button :
-> Element msg
button style { onPress, text, icon } =
Input.button
(style.container
(style.containerButton
++ (if onPress == Nothing then
style.ifDisabled
@ -67,8 +67,8 @@ button style { onPress, text, icon } =
)
{ onPress = onPress
, label =
Element.row style.labelRow
Element.row style.content.containerRow
[ icon |> Element.map never
, Element.text text |> Element.el style.text
, Element.text text |> Element.el style.content.contentText
]
}

12
src/Internal/Dialog.elm
View File

@ -59,30 +59,30 @@ dialog style { title, text, accept, dismiss } =
[ title
|> Maybe.map
(Element.text
>> Element.el style.title
>> Element.el style.content.title.contentText
)
|> Maybe.withDefault Element.none
, text
|> Element.text
|> List.singleton
|> Element.paragraph style.text
|> Element.paragraph style.content.text.contentText
, Element.row
([ Element.alignRight
, Element.width <| Element.shrink
]
++ style.buttonRow
++ style.content.buttons.containerRow
)
(case ( accept, dismiss ) of
( Just acceptButton, Nothing ) ->
acceptButton
|> Button.textButton style.acceptButton
|> Button.textButton style.content.buttons.content.accept
|> List.singleton
( Just acceptButton, Just dismissButton ) ->
[ dismissButton
|> Button.textButton style.dismissButton
|> Button.textButton style.content.buttons.content.dismiss
, acceptButton
|> Button.textButton style.acceptButton
|> Button.textButton style.content.buttons.content.accept
]
_ ->

10
src/Internal/ExpansionPanel.elm
View File

@ -25,21 +25,21 @@ expansionPanel style model =
Element.column style.containerColumn <|
[ Element.row
((Events.onClick <| model.onToggle <| not model.isExpanded)
:: style.panelRow
:: style.content.panel.containerRow
)
[ Element.row style.labelRow
[ Element.row style.content.panel.content.label.containerRow
[ model.icon |> Element.map never
, model.text |> Element.text
]
, Element.map never <|
if model.isExpanded then
style.collapseIcon
style.content.panel.content.collapseIcon
else
style.expandIcon
style.content.panel.content.expandIcon
]
, if model.isExpanded then
Element.el style.content <| model.content
Element.el style.content.content.container <| model.content
else
Element.none

28
src/Internal/List.elm
View File

@ -4,11 +4,11 @@ import Element exposing (Attribute, Element)
import Internal.Button exposing (Button)
import Internal.Select as Select
import Widget.Style exposing (ButtonStyle, ColumnStyle, RowStyle)
import Widget.Style.Customize as Customize
internal :
{ list
| element : List (Attribute msg)
| content : List (Attribute msg)
, ifFirst : List (Attribute msg)
, ifLast : List (Attribute msg)
, otherwise : List (Attribute msg)
@ -20,7 +20,7 @@ internal style list =
|> List.indexedMap
(\i ->
Element.el <|
style.element
style.content
++ (if List.length list == 1 then
[]
@ -49,7 +49,7 @@ column style =
internalButton :
{ list :
{ list
| element : List (Attribute msg)
| content : List (Attribute msg)
, ifFirst : List (Attribute msg)
, ifLast : List (Attribute msg)
, otherwise : List (Attribute msg)
@ -63,9 +63,9 @@ internalButton style list =
|> List.indexedMap
(\i ->
Select.selectButton
{ container =
style.button.container
++ style.list.element
(style.button
|> Customize.containerButton
(style.list.content
++ (if List.length list == 1 then
[]
@ -77,18 +77,8 @@ internalButton style list =
else
style.list.otherwise
)
, labelRow =
style.button.labelRow
, text =
style.button.text
, ifDisabled =
style.button.ifDisabled
, ifActive =
style.button.ifActive
, otherwise =
style.button.otherwise
}
))
)
)

6
src/Internal/Select.elm
View File

@ -35,7 +35,7 @@ selectButton :
-> Element msg
selectButton style ( selected, b ) =
Input.button
(style.container
(style.containerButton
++ (if b.onPress == Nothing then
style.ifDisabled
@ -48,9 +48,9 @@ selectButton style ( selected, b ) =
)
{ onPress = b.onPress
, label =
Element.row style.labelRow
Element.row style.content.containerRow
[ b.icon |> Element.map never
, Element.text b.text |> Element.el style.text
, Element.text b.text |> Element.el style.content.contentText
]
}

8
src/Internal/SortTable.elm
View File

@ -138,18 +138,18 @@ sortTable style model =
|> List.map
(\(Column column) ->
{ header =
Button.button style.headerButton
Button.button style.content.header
{ text = column.title
, icon =
if column.title == model.sortBy then
if model.asc then
style.ascIcon
style.content.ascIcon
else
style.descIcon
style.content.descIcon
else
style.defaultIcon
style.content.defaultIcon
, onPress =
case column.content of
UnsortableColumn _ ->

8
src/Internal/Tab.elm
View File

@ -15,10 +15,10 @@ tab : TabStyle msg -> Tab msg -> Element msg
tab style { tabs, content } =
[ tabs
|> Select.select
|> List.map (Select.selectButton style.button)
|> Element.row style.optionRow
|> List.map (Select.selectButton style.content.tabs.content)
|> Element.row style.content.tabs.containerRow
, tabs.selected
|> content
|> Element.el style.content
|> Element.el style.content.content
]
|> Element.column style.containerColumn
|> Element.column style.containerColumn

6
src/Internal/TextInput.elm
View File

@ -24,9 +24,9 @@ textInput style { chips, placeholder, label, text, onChange } =
else
chips
|> List.map
(Button.button style.chipButton)
|> Element.row style.chipsRow
, Input.text style.input
(Button.button style.content.chips.content)
|> Element.row style.content.chips.containerRow
, Input.text style.content.text.containerTextInput
{ onChange = onChange
, text = text
, placeholder = placeholder

93
src/Internal/Upgrade.elm
View File

@ -1,93 +0,0 @@
module Internal.Upgrade exposing (upgradeButton,upgradeDialog,upgradeSortTable,upgradeTextInput,upgradeExpansionPanel,upgradeSnackbar)
import Widget.Style exposing ( ButtonStyleV2,SnackbarStyleV2, DialogStyleV2, SortTableStyleV2,TextInputStyleV2,ExpansionPanelStyleV2, ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle)
upgradeButton : ButtonStyle msg -> ButtonStyleV2 msg
upgradeButton style =
{ containerButton = style.container
, ifDisabled = style.ifDisabled
, ifActive = style.ifActive
, otherwise = style.otherwise
, content =
{ containerRow = style.labelRow
, contentText = style.text
}
}
upgradeDialog : DialogStyle msg -> DialogStyleV2 msg
upgradeDialog style =
{ containerColumn = style.containerColumn
, content =
{ title =
{ contentText = style.title
}
, text =
{ contentText = style.text
}
, buttons =
{ containerRow = style.buttonRow
, content =
{ accept = upgradeButton style.acceptButton
, dismiss = upgradeButton style.dismissButton
}
}
}
}
upgradeSortTable : SortTableStyle msg -> SortTableStyleV2 msg
upgradeSortTable style =
{ containerTable = style.containerTable
, content =
{ header = upgradeButton style.headerButton
, ascIcon = style.ascIcon
, descIcon = style.descIcon
, defaultIcon = style.defaultIcon
}
}
upgradeTextInput : TextInputStyle msg -> TextInputStyleV2 msg
upgradeTextInput style =
{ containerRow = style.containerRow
, content =
{ chips =
{ containerRow = style.chipsRow
, content = upgradeButton style.chipButton
}
, text =
{ containerTextInput = style.input
}
}
}
upgradeExpansionPanel : ExpansionPanelStyle msg -> ExpansionPanelStyleV2 msg
upgradeExpansionPanel style =
{ containerColumn = style.containerColumn
, content =
{ panel =
{ containerRow = style.panelRow
, content =
{ label =
{ containerRow = style.labelRow
}
, expandIcon = style.expandIcon
, collapseIcon = style.collapseIcon
}
}
, content =
{ container = style.content
}
}
}
upgradeSnackbar : SnackbarStyle msg -> SnackbarStyleV2 msg
upgradeSnackbar style =
{ containerRow = style.containerRow
, content =
{ text =
{ containerText = style.text
}
, button = upgradeButton style.button
}
}

55
src/Widget.elm
View File

@ -3,14 +3,13 @@ module Widget exposing
, Switch, switch
, Select, selectButton, select
, MultiSelect, multiSelect
, DialogV2, modal, dialog
, ExpansionPanelV2, expansionPanel
, Dialog, modal, dialog
, ExpansionPanel, expansionPanel
, row, column, buttonRow, buttonColumn
, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
, TextInput, textInput
, Tab, tab
, ProgressIndicator, circularProgressIndicator
, Dialog, ExpansionPanel
)
{-| This module contains different stateless view functions. No wiring required.
@ -73,7 +72,7 @@ You can create you own widgets by sticking widgets types together.
[Open in Ellie](https://ellie-app.com/9p5Rdz625TZa1)
@docs DialogV2, modal, dialog
@docs Dialog, modal, dialog
# Expansion Panel
@ -82,7 +81,7 @@ You can create you own widgets by sticking widgets types together.
[Open in Ellie](https://ellie-app.com/9p5Rv5jfVdFa1)
@docs ExpansionPanelV2, expansionPanel
@docs ExpansionPanel, expansionPanel
# List
@ -129,11 +128,6 @@ You can create you own widgets by sticking widgets types together.
@docs ProgressIndicator, circularProgressIndicator
# DEPRECATED
@docs Dialog, ExpansionPanel
-}
import Element exposing (Attribute, Element, Length)
@ -345,22 +339,9 @@ multiSelect =
----------------------------------------------------------}
{-| DEPRECATED
Use `DialogV2` instead
-}
type alias Dialog msg =
{ title : Maybe String
, body : Element msg
, accept : Maybe (TextButton msg)
, dismiss : Maybe (TextButton msg)
}
{-| Dialog widget type
-}
type alias DialogV2 msg =
type alias Dialog msg =
{ title : Maybe String
, text : String
, accept : Maybe (TextButton msg)
@ -393,8 +374,9 @@ dialog :
-> List (Attribute msg)
dialog =
let
fun : DialogStyle msg -> DialogV2 msg -> List (Attribute msg)
fun =
fun : DialogStyle msg -> Dialog msg -> List (Attribute msg)
fun =
Dialog.dialog
in
fun
@ -406,25 +388,12 @@ dialog =
----------------------------------------------------------}
{-| DEPRECATED
Use `ExpansionPanelV2` instead
-}
type alias ExpansionPanel msg =
{ onToggle : Bool -> msg
, icon : Element Never
, text : String
, expandIcon : Element Never
, collapseIcon : Element Never
, content : Element msg
, isExpanded : Bool
}
{-| Expansion Panel widget type
-}
type alias ExpansionPanelV2 msg =
type alias ExpansionPanel msg =
{ onToggle : Bool -> msg
, icon : Element Never
, text : String
@ -447,7 +416,7 @@ expansionPanel :
-> Element msg
expansionPanel =
let
fun : ExpansionPanelStyle msg -> ExpansionPanelV2 msg -> Element msg
fun : ExpansionPanelStyle msg -> ExpansionPanel msg -> Element msg
fun =
ExpansionPanel.expansionPanel
in
@ -617,7 +586,7 @@ stringColumn =
SortTable.stringColumn
{-| The View
{-| A Table where the rows can be sorted by columns
-}
sortTable :
SortTableStyle msg
@ -693,4 +662,4 @@ circularProgressIndicator :
-> Maybe Float
-> Element msg
circularProgressIndicator =
ProgressIndicator.circularProgressIndicator
ProgressIndicator.circularProgressIndicator

8
src/Widget/Snackbar.elm
View File

@ -19,6 +19,7 @@ A [snackbar](https://material.io/components/snackbars/) shows notification, one
@docs insert, insertFor, dismiss
-}
import Element exposing (Element)
@ -26,7 +27,6 @@ import Queue exposing (Queue)
import Widget exposing (TextButton)
import Widget.Style exposing (SnackbarStyle)
{-| A message with maybe some action button
-}
type alias Message msg =
@ -108,7 +108,6 @@ current : Snackbar a -> Maybe a
current model =
model.current |> Maybe.map Tuple.first
{-| Views the current Message. (only one at a time)
-}
view :
@ -125,12 +124,13 @@ view style toMessage model =
[ text
|> Element.text
|> List.singleton
|> Element.paragraph style.text
|> Element.paragraph style.content.text.containerText
, button
|> Maybe.map
(Widget.textButton style.button)
(Widget.textButton style.content.button)
|> Maybe.withDefault Element.none
]
|> Element.row style.containerRow
)
)

103
src/Widget/Style.elm
View File

@ -1,4 +1,4 @@
module Widget.Style exposing (ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle)
module Widget.Style exposing ( ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle)
{-| This module contains style types for every widget.
@ -33,29 +33,43 @@ type alias SwitchStyle msg =
}
}
{-| -}
type alias ButtonStyle msg =
{ container : List (Attribute msg)
, labelRow : List (Attribute msg)
, text : List (Attribute msg)
{ containerButton : List (Attribute msg)
, ifDisabled : List (Attribute msg)
, ifActive : List (Attribute msg)
, otherwise : List (Attribute msg)
, content :
{ containerRow : List (Attribute msg)
, contentText : List (Attribute msg)
}
}
{-| -}
type alias DialogStyle msg =
{ containerColumn : List (Attribute msg)
, title : List (Attribute msg)
, buttonRow : List (Attribute msg)
, acceptButton : ButtonStyle msg
, dismissButton : ButtonStyle msg
, text : List (Attribute msg)
, content :
{ title :
{ contentText : List (Attribute msg)
}
, text :
{ contentText : List (Attribute msg)
}
, buttons :
{ containerRow : List (Attribute msg)
, content :
{ accept : ButtonStyle msg
, dismiss : ButtonStyle msg
}
}
}
}
{-| Technical Remark:
- If icons are defined in Svg, they might not display correctly.
@ -64,57 +78,81 @@ type alias DialogStyle msg =
-}
type alias ExpansionPanelStyle msg =
{ containerColumn : List (Attribute msg)
, panelRow : List (Attribute msg)
, labelRow : List (Attribute msg)
, content : List (Attribute msg)
, expandIcon : Element Never
, collapseIcon : Element Never
, content :
{ panel :
{ containerRow : List (Attribute msg)
, content :
{ label :
{ containerRow : List (Attribute msg)
}
, expandIcon : Element Never
, collapseIcon : Element Never
}
}
, content :
{ container : List (Attribute msg)
}
}
}
{-| -}
type alias SnackbarStyle msg =
{ containerRow : List (Attribute msg)
, text : List (Attribute msg)
, button : ButtonStyle msg
, content :
{ text :
{ containerText : List (Attribute msg)
}
, button : ButtonStyle msg
}
}
{-| -}
type alias TextInputStyle msg =
{ chipButton : ButtonStyle msg
, containerRow : List (Attribute msg)
, chipsRow : List (Attribute msg)
, input : List (Attribute msg)
{ containerRow : List (Attribute msg)
, content :
{ chips :
{ containerRow : List (Attribute msg)
, content : ButtonStyle msg
}
, text :
{ containerTextInput : List (Attribute msg)
}
}
}
{-| -}
type alias TabStyle msg =
{ button : ButtonStyle msg
, optionRow : List (Attribute msg)
, containerColumn : List (Attribute msg)
, content : List (Attribute msg)
{ containerColumn : List (Attribute msg)
, content :
{ tabs :
{ containerRow : List (Attribute msg)
, content : ButtonStyle msg
}
, content : List (Attribute msg)
}
}
{-| -}
type alias RowStyle msg =
{ containerRow : List (Attribute msg)
, element : List (Attribute msg)
, ifFirst : List (Attribute msg)
, ifLast : List (Attribute msg)
, otherwise : List (Attribute msg)
, content : List (Attribute msg)
}
{-| -}
type alias ColumnStyle msg =
{ containerColumn : List (Attribute msg)
, element : List (Attribute msg)
, ifFirst : List (Attribute msg)
, ifLast : List (Attribute msg)
, otherwise : List (Attribute msg)
, content : List (Attribute msg)
}
@ -126,10 +164,12 @@ type alias ColumnStyle msg =
-}
type alias SortTableStyle msg =
{ containerTable : List (Attribute msg)
, headerButton : ButtonStyle msg
, ascIcon : Element Never
, descIcon : Element Never
, defaultIcon : Element Never
, content :
{ header : ButtonStyle msg
, ascIcon : Element Never
, descIcon : Element Never
, defaultIcon : Element Never
}
}
@ -162,3 +202,4 @@ type alias LayoutStyle msg =
type alias ProgressIndicatorStyle msg =
{ containerFunction : Maybe Float -> Element msg
}

350
src/Widget/Style/Material.elm
View File

@ -184,6 +184,7 @@ import Widget.Style
, TabStyle
, TextInputStyle
)
import Widget.Style.Customize as Customize
import Widget.Style.Material.Color as MaterialColor
import Widget.Style.Material.Typography as Typography
@ -290,23 +291,25 @@ textAndBackground color =
baseButton : Palette -> ButtonStyle msg
baseButton _ =
{ container =
{ containerButton =
Typography.button
++ [ Element.height <| Element.px 36
, Element.paddingXY 8 8
, Border.rounded <| 4
]
, labelRow =
[ Element.spacing <| 8
, Element.width <| Element.minimum 32 <| Element.shrink
, Element.centerY
]
, text = [ Element.centerX ]
, ifDisabled =
[ Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
]
, ifActive = []
, otherwise = []
, content =
{ containerRow =
[ Element.spacing <| 8
, Element.width <| Element.minimum 32 <| Element.shrink
, Element.centerY
]
, contentText = [ Element.centerX ]
}
}
@ -314,8 +317,8 @@ baseButton _ =
-}
containedButton : Palette -> ButtonStyle msg
containedButton palette =
{ container =
(baseButton palette |> .container)
{ containerButton =
(baseButton palette |> .containerButton)
++ [ Border.shadow <| MaterialColor.shadow 2
, Element.mouseDown <|
[ palette.primary
@ -339,11 +342,6 @@ containedButton palette =
, Border.shadow <| MaterialColor.shadow 6
]
]
, labelRow =
(baseButton palette |> .labelRow)
++ [ Element.paddingXY 8 0
]
, text = baseButton palette |> .text
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -375,6 +373,12 @@ containedButton palette =
|> fromColor
|> Font.color
]
, content =
{ containerRow =
(baseButton palette |> .content |> .containerRow)
++ [ Element.paddingXY 8 0 ]
, contentText = baseButton palette |> .content |> .contentText
}
}
@ -382,8 +386,8 @@ containedButton palette =
-}
outlinedButton : Palette -> ButtonStyle msg
outlinedButton palette =
{ container =
(baseButton palette |> .container)
{ containerButton =
(baseButton palette |> .containerButton)
++ [ Border.width <| 1
, Font.color <| fromColor <| palette.primary
, palette.on.surface
@ -410,11 +414,6 @@ outlinedButton palette =
|> Background.color
]
]
, labelRow =
(baseButton palette |> .labelRow)
++ [ Element.paddingXY 8 0
]
, text = baseButton palette |> .text
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -432,6 +431,18 @@ outlinedButton palette =
]
, otherwise =
[]
, content =
{ containerRow =
(baseButton palette
|> .content
|> .containerRow
)
++ [ Element.paddingXY 8 0 ]
, contentText =
baseButton palette
|> .content
|> .contentText
}
}
@ -439,8 +450,8 @@ outlinedButton palette =
-}
textButton : Palette -> ButtonStyle msg
textButton palette =
{ container =
(baseButton palette |> .container)
{ containerButton =
(baseButton palette |> .containerButton)
++ [ Font.color <| fromColor <| palette.primary
, Element.mouseDown
[ palette.primary
@ -461,8 +472,6 @@ textButton palette =
|> Background.color
]
]
, labelRow = baseButton palette |> .labelRow
, text = baseButton palette |> .text
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -480,6 +489,10 @@ textButton palette =
]
, otherwise =
[]
, content =
{ containerRow = baseButton palette |> .content |> .containerRow
, contentText = baseButton palette |> .content |> .contentText
}
}
@ -496,7 +509,7 @@ Technical Remark:
-}
toggleButton : Palette -> ButtonStyle msg
toggleButton palette =
{ container =
{ containerButton =
Typography.button
++ [ Element.width <| Element.px 48
, Element.height <| Element.px 48
@ -526,19 +539,6 @@ toggleButton palette =
|> Border.color
]
]
, labelRow =
[ Element.spacing <| 8
, Element.height Element.fill
, Element.width Element.fill
, Border.rounded 24
, Element.padding 8
, Element.focused <|
(palette.surface
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonFocusOpacity
|> textAndBackground
)
]
, text = [ Element.centerX ]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ palette.surface
@ -583,6 +583,21 @@ toggleButton palette =
|> fromColor
|> Border.color
]
, content =
{ containerRow =
[ Element.spacing <| 8
, Element.height Element.fill
, Element.width Element.fill
, Border.rounded 24
, Element.padding 8
, Element.focused <|
(palette.surface
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonFocusOpacity
|> textAndBackground
)
]
, contentText = [ Element.centerX ]
}
}
@ -595,8 +610,8 @@ Technical Remark:
-}
iconButton : Palette -> ButtonStyle msg
iconButton palette =
{ container =
(baseButton palette |> .container)
{ containerButton =
(baseButton palette |> .containerButton)
++ [ Element.height <| Element.px 48
, Border.rounded 24
, Element.mouseDown
@ -618,13 +633,6 @@ iconButton palette =
|> Background.color
]
]
, labelRow =
[ Element.spacing 8
, Element.width <| Element.shrink
, Element.centerY
, Element.centerX
]
, text = baseButton palette |> .text
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -642,6 +650,15 @@ iconButton palette =
]
, otherwise =
[]
, content =
{ containerRow =
[ Element.spacing 8
, Element.width <| Element.shrink
, Element.centerY
, Element.centerX
]
, contentText = baseButton palette |> .content |> .contentText
}
}
@ -799,7 +816,7 @@ Technical Remark:
-}
chip : Palette -> ButtonStyle msg
chip palette =
{ container =
{ containerButton =
[ Element.height <| Element.px 32
, Element.paddingEach
{ top = 0
@ -830,15 +847,6 @@ chip palette =
|> Background.color
]
]
, labelRow = [ Element.spacing 0, Element.centerY ]
, text =
[ Element.paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ (palette.on.surface
@ -874,6 +882,17 @@ chip palette =
|> fromColor
|> Font.color
]
, content =
{ containerRow = [ Element.spacing 0, Element.centerY ]
, contentText =
[ Element.paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
]
}
}
@ -891,7 +910,7 @@ row =
[ Element.paddingXY 0 8
, Element.spacing 8
]
, element = []
, content = []
, ifFirst = []
, ifLast = []
, otherwise = []
@ -906,7 +925,7 @@ column =
[ Element.paddingXY 0 8
, Element.spacing 8
]
, element = []
, content = []
, ifFirst = []
, ifLast = []
, otherwise = []
@ -921,7 +940,7 @@ Only use in combination with `toggleButton`
buttonRow : RowStyle msg
buttonRow =
{ containerRow = []
, element =
, content =
[ Border.rounded 2
]
, ifFirst =
@ -963,7 +982,7 @@ cardColumn palette =
, Element.alignTop
, Border.rounded 4
]
, element =
, content =
[ Element.padding 16
, Border.rounded 4
, Border.width 1
@ -1033,16 +1052,26 @@ alertDialog palette =
, Element.height <| Element.minimum 182 <| Element.shrink
, Background.color <| fromColor <| palette.surface
]
, title = Typography.h6 ++ [ Element.paddingXY 24 20 ]
, text = [ Element.paddingXY 24 0 ]
, buttonRow =
[ Element.paddingXY 8 8
, Element.spacing 8
, Element.alignRight
, Element.alignBottom
]
, acceptButton = containedButton palette
, dismissButton = textButton palette
, content =
{ title =
{ contentText = Typography.h6 ++ [ Element.paddingXY 24 20 ]
}
, text =
{ contentText = [ Element.paddingXY 24 0 ]
}
, buttons =
{ containerRow =
[ Element.paddingXY 8 8
, Element.spacing 8
, Element.alignRight
, Element.alignBottom
]
, content =
{ accept = containedButton palette
, dismiss = textButton palette
}
}
}
}
@ -1096,31 +1125,39 @@ expansionPanel palette =
[ Background.color <| fromColor <| palette.surface
, Element.width <| Element.fill
]
, panelRow =
[ Element.height <| Element.px 48
, Element.spaceEvenly
, Element.padding 14
, Element.width <| Element.fill
]
, labelRow =
[ Element.spacing 32
]
, content =
[ Element.padding 14 ]
, expandIcon =
expand_more
|> Element.el
[ MaterialColor.gray
|> fromColor
|> Font.color
]
, collapseIcon =
expand_less
|> Element.el
[ MaterialColor.gray
|> fromColor
|> Font.color
{ panel =
{ containerRow =
[ Element.height <| Element.px 48
, Element.spaceEvenly
, Element.padding 14
, Element.width <| Element.fill
]
, content =
{ label =
{ containerRow =
[ Element.spacing 32 ]
}
, expandIcon =
expand_more
|> Element.el
[ MaterialColor.gray
|> fromColor
|> Font.color
]
, collapseIcon =
expand_less
|> Element.el
[ MaterialColor.gray
|> fromColor
|> Font.color
]
}
}
, content =
{ container = [ Element.padding 14 ]
}
}
}
@ -1272,23 +1309,22 @@ snackbar palette =
, Element.spacing 8
, Border.shadow <| MaterialColor.shadow 2
]
, text =
[ Element.centerX
, Element.paddingXY 10 8
]
, button =
textButton palette
|> (\b ->
{ b
| container =
b.container
++ [ MaterialColor.dark
|> MaterialColor.accessibleWithTextColor palette.primary
|> fromColor
|> Font.color
]
}
)
, content =
{ text =
{ containerText =
[ Element.centerX
, Element.paddingXY 10 8
]
}
, button =
textButton palette
|> Customize.containerButton
[ MaterialColor.dark
|> MaterialColor.accessibleWithTextColor palette.primary
|> fromColor
|> Font.color
]
}
}
@ -1307,9 +1343,7 @@ Technical Remark:
-}
textInput : Palette -> TextInputStyle msg
textInput palette =
{ chipButton = chip palette
, chipsRow = [ Element.spacing 8 ]
, containerRow =
{ containerRow =
(palette.surface
|> textAndBackground
)
@ -1329,14 +1363,22 @@ textInput palette =
]
, Element.mouseOver [ Border.shadow <| MaterialColor.shadow 2 ]
]
, input =
(palette.surface
|> textAndBackground
)
++ [ Border.width 0
, Element.mouseOver []
, Element.focused []
]
, content =
{ chips =
{ containerRow = [ Element.spacing 8 ]
, content = chip palette
}
, text =
{ containerTextInput =
(palette.surface
|> textAndBackground
)
++ [ Border.width 0
, Element.mouseOver []
, Element.focused []
]
}
}
}
@ -1357,7 +1399,7 @@ Technical Remark:
-}
tabButton : Palette -> ButtonStyle msg
tabButton palette =
{ container =
{ containerButton =
Typography.button
++ [ Element.height <| Element.px 48
, Element.fill
@ -1385,12 +1427,6 @@ tabButton palette =
|> Background.color
]
]
, labelRow =
[ Element.spacing <| 8
, Element.centerY
, Element.centerX
]
, text = []
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -1411,6 +1447,14 @@ tabButton palette =
]
, otherwise =
[]
, content =
{ containerRow =
[ Element.spacing <| 8
, Element.centerY
, Element.centerX
]
, contentText = []
}
}
@ -1418,15 +1462,19 @@ tabButton palette =
-}
tab : Palette -> TabStyle msg
tab palette =
{ button = tabButton palette
, optionRow =
[ Element.spaceEvenly
, Border.shadow <| MaterialColor.shadow 4
, Element.spacing 8
, Element.width <| Element.fill
]
, containerColumn = [ Element.spacing 8, Element.width <| Element.fill ]
, content = [ Element.width <| Element.fill ]
{ containerColumn = [ Element.spacing 8, Element.width <| Element.fill ]
, content =
{ tabs =
{ containerRow =
[ Element.spaceEvenly
, Border.shadow <| MaterialColor.shadow 4
, Element.spacing 8
, Element.width <| Element.fill
]
, content = tabButton palette
}
, content = [ Element.width <| Element.fill ]
}
}
@ -1453,7 +1501,7 @@ menu =
menuTabButton : Palette -> ButtonStyle msg
menuTabButton palette =
{ container =
{ containerButton =
Typography.button
++ [ Element.height <| Element.px 56
, Element.fill
@ -1485,12 +1533,6 @@ menuTabButton palette =
|> Background.color
]
]
, labelRow =
[ Element.spacing <| 8
, Element.centerY
, Element.centerX
]
, text = []
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -1510,12 +1552,20 @@ menuTabButton palette =
]
, otherwise =
[]
, content =
{ containerRow =
[ Element.spacing <| 8
, Element.centerY
, Element.centerX
]
, contentText = []
}
}
drawerButton : Palette -> ButtonStyle msg
drawerButton palette =
{ container =
{ containerButton =
[ Font.size 14
, Font.semiBold
, Font.letterSpacing 0.25
@ -1546,8 +1596,6 @@ drawerButton palette =
|> Background.color
]
]
, labelRow = baseButton palette |> .labelRow
, text = baseButton palette |> .text
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
@ -1568,6 +1616,10 @@ drawerButton palette =
]
, otherwise =
[]
, content =
{ containerRow = baseButton palette |> .content |> .containerRow
, contentText = baseButton palette |> .content |> .contentText
}
}

427
src/Widget/Style/Template.elm
View File

@ -1,427 +0,0 @@
module Widget.Style.Template exposing
( box, decoration, icon
, button, switch, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput, progressIndicator
)
{-| ![Example using the Template style](https://orasund.github.io/elm-ui-widgets/assets/template-style.png)
This package contains mockups designed for writing your own style.
Start by copying the following code and then replace the fields one by one.
```
type alias Style msg =
{ dialog : DialogStyle msg
, expansionPanel : ExpansionPanelStyle msg
, button : ButtonStyle msg
, primaryButton : ButtonStyle msg
, tab : TabStyle msg
, textInput : TextInputStyle msg
, chipButton : ButtonStyle msg
, row : RowStyle msg
, buttonRow : RowStyle msg
, column : ColumnStyle msg
, cardColumn : ColumnStyle msg
, sortTable : SortTableStyle msg
, selectButton : ButtonStyle msg
, layout : LayoutStyle msg
}
style : Style msg
style =
{ sortTable = Template.sortTable <| "sortTable"
, row = Template.row <| "row"
, buttonRow = Template.row <| "buttonRow"
, cardColumn = Template.column <| "cardRow"
, column = Template.column <| "column"
, button = Template.button <| "button"
, primaryButton = Template.button <| "primaryButton"
, tab = Template.tab <| "tab"
, textInput = Template.textInput <| "textInput"
, chipButton = Template.button <| "chipButton"
, expansionPanel = Template.expansionPanel "expansionPanel"
, selectButton = Template.button "selectButton"
, dialog = Template.dialog "dialog"
, layout = Template.layout "layout"
}
```
# Base Elements
@docs box, decoration, icon
# Mockups
@docs button, switch, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput, progressIndicator
-}
import Element exposing (Attribute, Element)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Widget.Style
exposing
( ButtonStyle
, ColumnStyle
, DialogStyle
, ExpansionPanelStyle
, LayoutStyle
, ProgressIndicatorStyle
, RowStyle
, SnackbarStyle
, SortTableStyle
, SwitchStyle
, TabStyle
, TextInputStyle
)
fontSize : Int
fontSize =
10
{-| A box representing an element
-}
box : String -> List (Attribute msg)
box string =
[ Border.width 1
, Background.color <| Element.rgba 1 1 1 0.5
, Element.padding 10
, Element.spacing 10
, Element.above <|
Element.el [ Font.size <| fontSize ] <|
Element.text string
]
{-| An additional attribute representing a state change.
-}
decoration : String -> List (Attribute msg)
decoration string =
[ Element.below <|
Element.el [ Font.size <| fontSize ] <|
Element.text string
, Background.color <| Element.rgb 0.66 0.66 0.66
]
{-| A circle representing an icon
-}
icon : String -> Element msg
icon string =
Element.none
|> Element.el
[ Element.width <| Element.px 12
, Element.height <| Element.px 12
, Border.rounded 6
, Border.width 1
, Element.above <|
Element.el [ Font.size <| fontSize ] <|
Element.text string
]
{-| A boolean switch
-}
switch : String -> SwitchStyle msg
switch string =
{ containerButton = box <| string ++ ":containerButton"
, content =
{ container = box <| string ++ ":content:container"
, ifDisabled = decoration <| string ++ ":content:ifDisabled"
, ifActive = decoration <| string ++ ":content:ifActive"
, otherwise = decoration <| string ++ ":content:otherwise"
}
, contentInFront =
{ container = box <| string ++ ":contentInFront:container"
, ifDisabled = decoration <| string ++ ":contentInFront:ifDisabled"
, ifActive = decoration <| string ++ ":contentInFront:ifActive"
, otherwise = decoration <| string ++ ":contentInFront:otherwise"
, content =
{ container = box <| string ++ ":contentInFront:content:container"
, ifDisabled = decoration <| string ++ ":contentInFront:content:ifDisabled"
, ifActive = decoration <| string ++ ":contentInFront:content:ifActive"
, otherwise = decoration <| string ++ ":contentInFront:content:otherwise"
}
}
}
{-|
```
button : String -> ButtonStyle msg
button string =
{ container = box <| string ++ ":container"
, labelRow = box <| string ++ ":labelRow"
, text = box <| string ++ ":text"
, ifDisabled = decoration <| string ++ ":ifDisabled"
, ifActive = decoration <| string ++ ":ifActive"
, otherwise = decoration <| string ++ ":otherwise"
}
```
-}
button : String -> ButtonStyle msg
button string =
{ container = box <| string ++ ":container"
, labelRow = box <| string ++ ":labelRow"
, text = box <| string ++ ":text"
, ifDisabled = decoration <| string ++ ":ifDisabled"
, ifActive = decoration <| string ++ ":ifActive"
, otherwise = decoration <| string ++ ":otherwise"
}
{-|
```
snackbar : String -> SnackbarStyle msg
snackbar string =
{ containerRow = box <| string ++ ":containerRow"
, button = button <| string ++ ":button"
, text = box <| string ++ ":text"
}
```
-}
snackbar : String -> SnackbarStyle msg
snackbar string =
{ containerRow = box <| string ++ ":containerRow"
, button = button <| string ++ ":button"
, text = box <| string ++ ":text"
}
{-|
```
dialog : String -> DialogStyle msg
dialog string =
{ containerColumn = box <| string ++ ":containerColumn"
, title = box <| string ++ ":title"
, text = box <| string ++ ":text"
, buttonRow = box <| string ++ ":buttonRow"
, acceptButton = button <| string ++ ":acceptButton"
, dismissButton = button <| string ++ ":dismissButton"
}
```
-}
dialog : String -> DialogStyle msg
dialog string =
{ containerColumn = box <| string ++ ":containerColumn"
, title = box <| string ++ ":title"
, text = box <| string ++ ":text"
, buttonRow = box <| string ++ ":buttonRow"
, acceptButton = button <| string ++ ":acceptButton"
, dismissButton = button <| string ++ ":dismissButton"
}
{-|
```
expansionPanel : String -> ExpansionPanelStyle msg
expansionPanel string =
{ containerColumn = box <| string ++ ":containerColumn"
, panelRow = box <| string ++ ":panelRow"
, labelRow = box <| string ++ ":labelRow"
, content = box <| string ++ ":content"
, expandIcon = icon <| string ++ ":expandIcon"
, collapseIcon = icon <| string ++ ":collapseIcon"
}
```
-}
expansionPanel : String -> ExpansionPanelStyle msg
expansionPanel string =
{ containerColumn = box <| string ++ ":containerColumn"
, panelRow = box <| string ++ ":panelRow"
, labelRow = box <| string ++ ":labelRow"
, content = box <| string ++ ":content"
, expandIcon = icon <| string ++ ":expandIcon"
, collapseIcon = icon <| string ++ ":collapseIcon"
}
{-|
```
textInput : String -> TextInputStyle msg
textInput string =
{ chipButton = button <| string ++ ":chipButton"
, chipsRow = box <| string ++ ":chipsRow"
, containerRow = box <| string ++ ":containerRow"
, input = box <| string ++ ":input"
}
```
-}
textInput : String -> TextInputStyle msg
textInput string =
{ chipButton = button <| string ++ ":chipButton"
, chipsRow = box <| string ++ ":chipsRow"
, containerRow = box <| string ++ ":containerRow"
, input = box <| string ++ ":input"
}
{-|
```
tab : String -> TabStyle msg
tab string =
{ button = button <| string ++ ":button"
, optionRow = box <| string ++ ":optionRow"
, containerColumn = box <| string ++ ":containerColumn"
, content = box <| string ++ ":content"
}
```
-}
tab : String -> TabStyle msg
tab string =
{ button = button <| string ++ ":button"
, optionRow = box <| string ++ ":optionRow"
, containerColumn = box <| string ++ ":containerColumn"
, content = box <| string ++ ":content"
}
{-|
```
row : String -> RowStyle msg
row string =
{ containerRow = box <| string ++ ":containerRow"
, element = box <| string ++ ":element"
, ifFirst = decoration <| string ++ ":ifFirst"
, ifLast = decoration <| string ++ ":ifLast"
, otherwise = decoration <| string ++ ":otherwise"
}
```
-}
row : String -> RowStyle msg
row string =
{ containerRow = box <| string ++ ":containerRow"
, element = box <| string ++ ":element"
, ifFirst = decoration <| string ++ ":ifFirst"
, ifLast = decoration <| string ++ ":ifLast"
, otherwise = decoration <| string ++ ":otherwise"
}
{-|
```
column : String -> ColumnStyle msg
column string =
{ containerColumn = box <| string ++ ":containerColumn"
, element = box <| string ++ ":element"
, ifFirst = decoration <| string ++ ":ifFirst"
, ifLast = decoration <| string ++ ":ifLast"
, otherwise = decoration <| string ++ ":otherwise"
}
```
-}
column : String -> ColumnStyle msg
column string =
{ containerColumn = box <| string ++ ":containerColumn"
, element = box <| string ++ ":element"
, ifFirst = decoration <| string ++ ":ifFirst"
, ifLast = decoration <| string ++ ":ifLast"
, otherwise = decoration <| string ++ ":otherwise"
}
{-|
```
sortTable : String -> SortTableStyle msg
sortTable string =
{ containerTable = box <| string ++ ":containerTable"
, headerButton = button <| string ++ ":headerButton"
, ascIcon = icon <| string ++ ":ascIcon"
, descIcon = icon <| string ++ ":descIcon"
, defaultIcon = icon <| string ++ ":defaultIcon"
}
```
-}
sortTable : String -> SortTableStyle msg
sortTable string =
{ containerTable = box <| string ++ ":containerTable"
, headerButton = button <| string ++ ":headerButton"
, ascIcon = icon <| string ++ ":ascIcon"
, descIcon = icon <| string ++ ":descIcon"
, defaultIcon = icon <| string ++ ":defaultIcon"
}
{-|
```
progressIndicator : String -> ProgressIndicatorStyle msg
progressIndicator string =
{ icon = (\_ -> icon <| string ++ ":icon")
}
```
-}
progressIndicator : String -> ProgressIndicatorStyle msg
progressIndicator string =
{ containerFunction = \_ -> icon <| string ++ ":icon"
}
{-|
```
layout : String -> LayoutStyle msg
layout string =
{ container = box <| string ++ ":container"
, snackbar = snackbar <| string ++ ":snackbar"
, layout = Element.layout
, header = box <| string ++ ":header"
, menuButton = button <| string ++ ":menuButton"
, sheetButton = button <| string ++ ":sheetButton"
, menuTabButton = button <| string ++ ":menuTabButton"
, sheet = box <| string ++ ":sheet"
, menuIcon = icon <| string ++ ":menuIcon"
, moreVerticalIcon = icon <| string ++ ":moreVerticalIcon"
, spacing = 8
, title = box <| string ++ ":title"
, searchIcon = icon <| string ++ ":searchIcon"
, search = box <| string ++ ":search"
, searchFill = box <| string ++ ":searchFill"
}
```
-}
layout : String -> LayoutStyle msg
layout string =
{ container = box <| string ++ ":container"
, snackbar = snackbar <| string ++ ":snackbar"
, layout = Element.layout
, header = box <| string ++ ":header"
, menuButton = button <| string ++ ":menuButton"
, sheetButton = button <| string ++ ":sheetButton"
, menuTabButton = button <| string ++ ":menuTabButton"
, sheet = box <| string ++ ":sheet"
, menuIcon = icon <| string ++ ":menuIcon"
, moreVerticalIcon = icon <| string ++ ":moreVerticalIcon"
, spacing = 8
, title = box <| string ++ ":title"
, searchIcon = icon <| string ++ ":searchIcon"
, search = box <| string ++ ":search"
, searchFill = box <| string ++ ":searchFill"
}