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

applied Elm-format

Browse Source
This commit is contained in:
Lucas Payr 2021-01-20 19:02:46 +01:00
parent 643a68595f
commit 5dd61965b3
26 changed files with 218 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
example/src/Data/Example.elm
View File

@ -3,7 +3,6 @@ module Data.Example exposing (Example, Model, Msg, asList, fromString, init, sub
import Data.Style exposing (Style)
import Element exposing (Element)
import Example.Button as Button
import Example.Switch as Switch
import Example.Dialog as Dialog
import Example.ExpansionPanel as ExpansionPanel
import Example.List as List
@ -12,6 +11,7 @@ import Example.MultiSelect as MultiSelect
import Example.ProgressIndicator as ProgressIndicator
import Example.Select as Select
import Example.SortTable as SortTable
import Example.Switch as Switch
import Example.Tab as Tab
import Example.TextInput as TextInput
import Framework.Grid as Grid
@ -56,7 +56,7 @@ toString example =
case example of
ButtonExample ->
"Button"
SwitchExample ->
"Switch"
@ -96,7 +96,7 @@ fromString string =
case string of
"Button" ->
Just ButtonExample
"Switch" ->
Just SwitchExample
@ -139,7 +139,7 @@ get example =
case example of
ButtonExample ->
.button
SwitchExample ->
.switch
@ -179,7 +179,7 @@ toTests example =
case example of
ButtonExample ->
Test.button
SwitchExample ->
Test.switch
@ -291,7 +291,7 @@ init =
let
( buttonModel, buttonMsg ) =
Button.init
( switchModel, switchMsg ) =
Switch.init
@ -449,7 +449,7 @@ update msg model =
(case msg of
Button m ->
updateField .button m
Switch m ->
updateField .switch m
@ -547,7 +547,7 @@ toCardList :
, style : Style msg
, model : Model
}
-> List ( String, Element msg, List (Element msg ) )
-> List ( String, Element msg, List (Element msg) )
toCardList { idle, msgMapper, style, model } =
asList
|> List.map

2
example/src/Data/Style.elm
View File

@ -10,9 +10,9 @@ import Widget.Style
, ProgressIndicatorStyle
, RowStyle
, SortTableStyle
, SwitchStyle
, TabStyle
, TextInputStyle
, SwitchStyle
)

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

@ -333,6 +333,7 @@ layout =
Color.light ++ Group.center
}
style =
{ sortTable = sortTable
, row = row

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

@ -277,4 +277,4 @@ style =
, progressIndicator = progressIndicator
, layout = Template.layout "layout"
, switch = button
}
}

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

@ -3,9 +3,10 @@ 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
import Data.Style.SemanticUI
type Theme
= Template

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

@ -1,11 +1,12 @@
module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget
import Widget.Style exposing (ButtonStyle, RowStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -14,11 +15,12 @@ type alias Style style msg =
, row : RowStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ primaryButton = Material.containedButton Material.defaultPalette
, button = Material.outlinedButton Material.defaultPalette
, row = Material.row
, row = Material.row
}
@ -50,8 +52,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (IsButtonEnabled isButtonEnabled) =
[ Widget.button style.primaryButton
@ -87,6 +92,7 @@ view msgMapper style (IsButtonEnabled isButtonEnabled) =
]
|> Widget.row style.row
main : Program () Model Msg
main =
Browser.element
@ -94,4 +100,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,11 +1,12 @@
module Example.Dialog exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget
import Widget.Style exposing (ButtonStyle, DialogStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -13,12 +14,14 @@ type alias Style style msg =
, primaryButton : ButtonStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ dialog = Material.alertDialog Material.defaultPalette
, primaryButton = Material.containedButton Material.defaultPalette
}
type Model
= IsOpen Bool
@ -47,8 +50,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (IsOpen isOpen) =
Widget.button style.primaryButton
@ -95,6 +101,7 @@ view msgMapper style (IsOpen isOpen) =
)
)
main : Program () Model Msg
main =
Browser.element
@ -102,4 +109,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,21 +1,24 @@
module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget.Style exposing (ExpansionPanelStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
| expansionPanel : ExpansionPanelStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ expansionPanel = Material.expansionPanel Material.defaultPalette
}
type Model
= IsExpanded Bool
@ -44,8 +47,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (IsExpanded isExpanded) =
{ onToggle = ToggleCollapsable >> msgMapper
@ -56,6 +62,7 @@ view msgMapper style (IsExpanded isExpanded) =
}
|> Widget.expansionPanel style.expansionPanel
main : Program () Model Msg
main =
Browser.element
@ -63,4 +70,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,21 +1,24 @@
module Example.List exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget.Style exposing (ColumnStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
| cardColumn : ColumnStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ cardColumn = Material.cardColumn Material.defaultPalette
}
type alias Model =
()
@ -42,8 +45,11 @@ subscriptions : Model -> Sub Msg
subscriptions () =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view _ style () =
[ Element.text <| "A"
@ -52,6 +58,7 @@ view _ style () =
]
|> Widget.column style.cardColumn
main : Program () Model Msg
main =
Browser.element
@ -59,4 +66,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,11 +1,12 @@
module Example.Modal exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget
import Widget.Style exposing (ButtonStyle, ColumnStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -13,12 +14,14 @@ type alias Style style msg =
, primaryButton : ButtonStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ cardColumn = Material.cardColumn Material.defaultPalette
, primaryButton = Material.containedButton Material.defaultPalette
}
type Model
= IsEnabled Bool
@ -47,8 +50,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (IsEnabled isEnabled) =
Widget.button style.primaryButton
@ -94,6 +100,7 @@ view msgMapper style (IsEnabled isEnabled) =
)
)
main : Program () Model Msg
main =
Browser.element
@ -101,4 +108,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,11 +1,12 @@
module Example.MultiSelect exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Set exposing (Set)
import Widget
import Widget.Style exposing (ButtonStyle, RowStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -13,12 +14,14 @@ type alias Style style msg =
, selectButton : ButtonStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ buttonRow = Material.buttonRow
, selectButton = Material.toggleButton Material.defaultPalette
}
type Model
= Selected (Set Int)
@ -54,8 +57,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (Selected selected) =
{ selected = selected
@ -75,6 +81,7 @@ view msgMapper style (Selected selected) =
, button = style.selectButton
}
main : Program () Model Msg
main =
Browser.element
@ -82,4 +89,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,10 +1,11 @@
module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget.Style exposing (ButtonStyle, RowStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -12,12 +13,14 @@ type alias Style style msg =
, selectButton : ButtonStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ buttonRow = Material.buttonRow
, selectButton = Material.toggleButton Material.defaultPalette
}
type Model
= Selected (Maybe Int)
@ -46,8 +49,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (Selected selected) =
{ selected = selected
@ -67,6 +73,7 @@ view msgMapper style (Selected selected) =
, button = style.selectButton
}
main : Program () Model Msg
main =
Browser.element
@ -74,4 +81,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -64,8 +64,6 @@ subscriptions _ =
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style model =

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

@ -1,22 +1,24 @@
module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget.Style exposing (SortTableStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
| sortTable : SortTableStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ sortTable =
{ sortTable =
{ containerTable = []
, headerButton = Material.textButton Material.defaultPalette
, ascIcon =
, ascIcon =
Material.expansionPanel Material.defaultPalette
|> .collapseIcon
, descIcon =
@ -64,8 +66,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style model =
Widget.sortTable style.sortTable
@ -105,6 +110,7 @@ view msgMapper style model =
, onChange = ChangedSorting >> msgMapper
}
main : Program () Model Msg
main =
Browser.element
@ -112,4 +118,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,17 +1,19 @@
module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget
import Widget.Style exposing (SwitchStyle, RowStyle)
import Widget.Style exposing (RowStyle, SwitchStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
| switch : SwitchStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ switch = Material.switch Material.defaultPalette
@ -46,19 +48,23 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (IsButtonEnabled isButtonEnabled) =
Widget.switch style.switch
Widget.switch style.switch
{ description = "click me"
, active = isButtonEnabled
, onPress =
ToggledButtonStatus
|> msgMapper
|> Just
|> msgMapper
|> Just
}
main : Program () Model Msg
main =
Browser.element
@ -66,4 +72,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,21 +1,24 @@
module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget.Style exposing (TabStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
| tab : TabStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ tab = Material.tab Material.defaultPalette
}
type Model
= Selected (Maybe Int)
@ -44,8 +47,11 @@ subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
--}
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style (Selected selected) =
Widget.tab style.tab
@ -79,6 +85,7 @@ view msgMapper style (Selected selected) =
|> Element.text
}
main : Program () Model Msg
main =
Browser.element
@ -86,4 +93,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

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

@ -1,11 +1,12 @@
module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Set exposing (Set)
import Widget
import Widget.Style exposing (ColumnStyle, TextInputStyle)
import Widget.Style.Material as Material
import Browser
type alias Style style msg =
{ style
@ -13,6 +14,7 @@ type alias Style style msg =
, column : ColumnStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ textInput = Material.textInput Material.defaultPalette
@ -110,6 +112,7 @@ view msgMapper style model =
]
|> Widget.column style.column
main : Program () Model Msg
main =
Browser.element
@ -117,4 +120,4 @@ main =
, view = view identity materialStyle >> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

4
example/src/Reusable.elm
View File

@ -32,7 +32,7 @@ snackbar style addSnackbar =
}
]
|> Element.column Grid.simple
,[]
, []
)
@ -46,7 +46,7 @@ scrollingNavCard _ =
)
layout : Style msg -> ( String, Element msg, List(Element msg) )
layout : Style msg -> ( String, Element msg, List (Element msg) )
layout _ =
( "Layout"
, Element.text "The layout combines the menu bar, both side bar, the dialog window and the snackbar. Try using all of them and also try resizing the window to see how they interact with each other."

2
example/src/Stateless.elm
View File

@ -54,7 +54,7 @@ view :
->
{ title : String
, description : String
, items : List ( String, Element msg, List (Element msg ) )
, items : List ( String, Element msg, List (Element msg) )
}
view { theme, msgMapper, model } =
let

50
example/src/View/Test.elm
View File

@ -1,4 +1,4 @@
module View.Test exposing (button,switch, dialog, expansionPanel, list, modal, multiSelect, progressIndicator, select, sortTable, tab, textInput)
module View.Test exposing (button, dialog, expansionPanel, list, modal, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)
import Data.Style exposing (Style)
import Element exposing (Element)
@ -57,30 +57,32 @@ button idle style =
)
]
switch : msg -> Style msg -> List ( String, Element msg )
switch idle style =
[ ( "Disabled switch"
, Widget.switch style.switch
{ description = "Disabled switch"
, onPress = Nothing
, active = False
}
)
, ( "Inactive Select switch"
, Widget.switch style.switch
{ description = "Inactive Select switch"
, onPress = Just idle
, active = False
}
)
, ( "Active Select switch"
, Widget.switch style.switch
{ description = "Active Select switch"
, onPress = Just idle
, active = True
}
)
]
[ ( "Disabled switch"
, Widget.switch style.switch
{ description = "Disabled switch"
, onPress = Nothing
, active = False
}
)
, ( "Inactive Select switch"
, Widget.switch style.switch
{ description = "Inactive Select switch"
, onPress = Just idle
, active = False
}
)
, ( "Active Select switch"
, Widget.switch style.switch
{ description = "Active Select switch"
, onPress = Just idle
, active = True
}
)
]
select : msg -> Style msg -> List ( String, Element msg )
select idle style =
@ -541,7 +543,7 @@ progressIndicator : msg -> Style msg -> List ( String, Element msg )
progressIndicator _ style =
let
determinateIndicators =
[ 0, 0.25, 0.50, 0.75, 1 ]
[ 0, 0.25, 0.5, 0.75, 1 ]
|> List.map
(\completeness ->
( "Completeness " ++ String.fromFloat completeness

53
src/Internal/Switch.elm
View File

@ -18,48 +18,47 @@ switch style { onPress, description, active } =
Input.button
(style.containerButton
++ [ Region.description description
, Element.none
, Element.none
|> Element.el
(style.contentInFront.content.container
++ (
if active then
style.contentInFront.content.ifActive
++ (if active then
style.contentInFront.content.ifActive
else if onPress == Nothing then
style.contentInFront.content.ifDisabled
else if onPress == Nothing then
style.contentInFront.content.ifDisabled
else
style.contentInFront.content.otherwise
))
else
style.contentInFront.content.otherwise
)
)
|> Element.el
(style.contentInFront.container
++ (
if active then
style.contentInFront.ifActive
++ (if active then
style.contentInFront.ifActive
else if onPress == Nothing then
style.contentInFront.ifDisabled
else if onPress == Nothing then
style.contentInFront.ifDisabled
else
style.contentInFront.otherwise
))
else
style.contentInFront.otherwise
)
)
|> Element.inFront
]
]
)
{ onPress = onPress
, label =
Element.none
|> Element.el
( style.content.container
++ (
if active then
style.content.ifActive
(style.content.container
++ (if active then
style.content.ifActive
else if onPress == Nothing then
style.content.ifDisabled
else if onPress == Nothing then
style.content.ifDisabled
else
style.content.otherwise
)
else
style.content.otherwise
)
)
}

3
src/Widget.elm
View File

@ -1,5 +1,6 @@
module Widget exposing
( Button, TextButton, iconButton, textButton, button
, Switch, switch
, Select, selectButton, select
, MultiSelect, multiSelect
, DialogV2, modal, dialog
@ -10,7 +11,6 @@ module Widget exposing
, Tab, tab
, ProgressIndicator, circularProgressIndicator
, Dialog, ExpansionPanel
, Switch, switch
)
{-| This module contains different stateless view functions. No wiring required.
@ -249,6 +249,7 @@ type alias Switch msg =
, active : Bool
}
{-| A boolean switch
-}
switch :

25
src/Widget/Layout.elm
View File

@ -1,24 +1,28 @@
module Widget.Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)
module Widget.Layout exposing
( Layout, Part(..), init, timePassed, view
, activate, queueMessage
)
{-| Combines multiple concepts from the [material design specification](https://material.io/components/), namely:
* Top App Bar
* Navigation Draw
* Side Panel
* Dialog
* Snackbar
- Top App Bar
- Navigation Draw
- Side Panel
- Dialog
- Snackbar
It is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).
# Basics
@docs Layout, Part, init, timePassed, view
# Actions
@docs activate, queueMessage
-}
import Array
@ -29,6 +33,7 @@ import Widget exposing (Button, Select)
import Widget.Snackbar as Snackbar exposing (Message)
import Widget.Style exposing (LayoutStyle)
{-| The currently visible part: either the left sheet, right sheet or the search bar
-}
type Part
@ -36,6 +41,7 @@ type Part
| RightSheet
| Search
{-| The model of the layout containing the snackbar and the currently active side sheet (or search bar)
-}
type alias Layout msg =
@ -43,6 +49,7 @@ type alias Layout msg =
, active : Maybe Part
}
{-| The initial state of the layout
-}
init : Layout msg
@ -51,6 +58,7 @@ init =
, active = Nothing
}
{-| Queues a message and displayes it as a snackbar once no other snackbar is visible.
-}
queueMessage : Message msg -> Layout msg -> Layout msg
@ -59,6 +67,7 @@ queueMessage message layout =
| snackbar = layout.snackbar |> Snackbar.insert message
}
{-| Open either a side sheet or the search bar.
-}
activate : Maybe Part -> Layout msg -> Layout msg
@ -67,6 +76,7 @@ activate part layout =
| active = part
}
{-| Update the model, put this function into your subscription.
The first argument is the seconds that have passed sice the function was called last.
-}
@ -84,6 +94,7 @@ timePassed sec layout =
| snackbar = layout.snackbar |> Snackbar.timePassed sec
}
{-| View the layout. Replacement of `Element.layout`.
-}
view :

9
src/Widget/Style.elm
View File

@ -1,11 +1,8 @@
module Widget.Style exposing
( ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle
, SwitchStyle
)
module Widget.Style exposing (ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle)
{-| This module contains style types for every widget.
@docs ButtonStyle,SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle
@docs ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle
-}
@ -27,7 +24,7 @@ type alias SwitchStyle msg =
, ifDisabled : List (Attribute msg)
, ifActive : List (Attribute msg)
, otherwise : List (Attribute msg)
, content :
, content :
{ container : List (Attribute msg)
, ifDisabled : List (Attribute msg)
, ifActive : List (Attribute msg)

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

@ -1,7 +1,8 @@
module Widget.Style.Material exposing
( Palette, defaultPalette, darkPalette
, containedButton, outlinedButton, textButton
, iconButton, toggleButton, buttonRow, switch
, iconButton, toggleButton, buttonRow
, switch
, cardColumn
, chip, textInput
, alertDialog
@ -94,6 +95,7 @@ Different styles for buttons have different meanings.
@docs iconButton, toggleButton, buttonRow
# Switch
@docs switch
@ -648,6 +650,7 @@ iconButton palette =
Technical Remark:
- The specification states that the disabled switch should have a color dependend on its activness. This is not implemented.
-}
switch : Palette -> SwitchStyle msg
switch palette =
@ -659,33 +662,33 @@ switch palette =
, Element.mouseOver []
]
, content =
{ container =
{ container =
[ Element.height <| Element.px 14
, Element.width <| Element.px 34
, Border.rounded <| 10
]
, ifDisabled =
, ifDisabled =
[ Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
, palette.surface
|> MaterialColor.withShade MaterialColor.gray (0.5 * MaterialColor.buttonDisabledOpacity)
|> fromColor
|> Background.color
]
, ifActive = [
palette.primary
, ifActive =
[ palette.primary
|> MaterialColor.scaleOpacity 0.5
|> fromColor
|> Background.color
]
, otherwise = [
MaterialColor.gray
, otherwise =
[ MaterialColor.gray
|> MaterialColor.scaleOpacity 0.5
|> fromColor
|> Background.color
]
}
, contentInFront =
{ container =
, contentInFront =
{ container =
[ Element.height <| Element.px 38
, Element.width <| Element.px 38
, Border.rounded <| 19
@ -734,15 +737,15 @@ switch palette =
]
, Element.alignLeft
]
, content =
, content =
{ container =
[ Element.height <| Element.px 20
, Element.width <| Element.px 20
, Element.centerY
, Element.centerX
, Border.rounded <| 10
,Border.shadow <| MaterialColor.shadow 2
, palette.surface
, Border.shadow <| MaterialColor.shadow 2
, palette.surface
|> fromColor
|> Background.color
]

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

@ -73,9 +73,9 @@ import Widget.Style
, RowStyle
, SnackbarStyle
, SortTableStyle
, SwitchStyle
, TabStyle
, TextInputStyle
, SwitchStyle
)
@ -124,6 +124,7 @@ icon string =
Element.text string
]
{-| A boolean switch
-}
switch : String -> SwitchStyle msg
@ -149,6 +150,7 @@ switch string =
}
}
{-|
```