collecting all styles into one type

2024-11-22 22:33:33 +03:00 · 2020-04-22 20:55:02 +02:00 · 2020-04-22 20:55:02 +02:00 · be011f7acc
commit be011f7acc
parent 27dff31fb9
7 changed files with 249 additions and 222 deletions
--- a/example/src/Component.elm
+++ b/example/src/Component.elm
@ -27,6 +27,7 @@ import Widget.FilterMultiSelect as FilterMultiSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.ValidatedInput as ValidatedInput
+import Data.Style exposing (style)

 type alias Model =
    { filterSelect : FilterSelect.Model
@ -40,13 +41,7 @@ type Msg
    | FilterMultiSelectSpecific FilterMultiSelect.Msg
    | ValidatedInputSpecific ValidatedInput.Msg

-chipButton : ButtonStyle msg
-chipButton =
-    { container = Tag.simple
-    , disabled = []
-    , label = Grid.simple
-    , active = Color.primary
-    }
+

 init : Model
 init =
@ -183,24 +178,7 @@ filterMultiSelect model =
                , icon = Element.none
                }
            }
-            |> Widget.textInput
-                { chip = chipButton
-                , chipsRow = 
-                    [ Element.width <| Element.shrink
-                    , Element.spacing <| 4 ]
-                , containerRow = 
-                    Button.simple
-                    ++ Color.light
-                    ++ [ Border.color <| Element.rgb255 186 189 182
-                        , Font.alignLeft
-                        , Element.padding 8
-                        , Element.height <| Element.px <|42
-                        ]
-                    ++ Grid.simple
-                , input =
-                    Color.light
-                    ++ [Element.padding 0]
-                }
+            |> Widget.textInput style.textInput

        , model
            |> FilterMultiSelect.viewOptions
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@ -0,0 +1,222 @@
+module Data.Style exposing (style)
+
+import Widget exposing (TextInputStyle)
+import Widget.Button exposing (ButtonStyle)
+import Style exposing (Style)
+import Element exposing (Attribute)
+import Element.Input as Input
+import Element.Font as Font
+import Element.Border as Border
+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.Input as Input
+import Framework.Tag as Tag
+import Icons
+
+textButton : ButtonStyle msg
+textButton =
+    { container = Button.simple
+    , label = Grid.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+simpleButton : ButtonStyle msg
+simpleButton =
+    { container = Button.simple ++ Color.primary
+    , label = Grid.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+buttonStyle : ButtonStyle msg
+buttonStyle =
+    { label = [ Element.spacing 8]
+    , container = Button.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+tabButtonStyle :ButtonStyle msg
+tabButtonStyle=
+    { label = [ Element.spacing 8]
+    , container = Button.simple ++ Group.top
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+textInputStyle =
+    { chip = 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
+    , disabled = []
+    , label = Grid.simple
+    , active = Color.primary
+    }
+
+style : Style
+    { dialog :
+        { containerColumn : List (Attribute msg)
+        , title : List (Attribute msg)
+        , buttonRow : List (Attribute msg)
+        , accept : ButtonStyle msg
+        , dismiss : ButtonStyle msg
+        }
+    , button : ButtonStyle msg
+    , tabButton : ButtonStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    } msg
+style =
+    { button = buttonStyle
+    , tabButton = tabButtonStyle
+    , textInput = textInputStyle
+    , chipButton = chipButtonStyle
+    , dialog =
+        { containerColumn = 
+            Card.simple
+            ++ Grid.simple
+            ++ [ Element.width <| Element.minimum 280 <| Element.maximum  560 <| Element.fill ]
+        , title = Heading.h3
+        , buttonRow = 
+            Grid.simple ++
+            [ Element.paddingEach
+                { top = 28
+                , bottom = 0
+                , left = 0
+                , right = 0
+                }
+            ]
+        , accept = simpleButton
+        , dismiss = textButton
+        }
+    , snackbar = 
+        { row = 
+            Card.simple 
+            ++ Color.dark
+            ++ Grid.simple
+            ++ [ Element.paddingXY 8 6
+                , Element.height <| Element.px <|54]
+        , button = 
+            { label = Grid.simple
+            , container = Button.simple ++ Color.dark
+            , disabled = Color.disabled
+            , active = Color.primary
+            }
+        , text = [Element.paddingXY 8 0]
+        }
+    , layout = Framework.responsiveLayout
+    {--\a w ->
+        Html.div []
+        [ Html.node "meta"
+            [ Attributes.attribute "name" "viewport"
+            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
+            ]
+            []
+        , Element.layoutWith
+            {options = (Element.focusStyle
+                { borderColor = Nothing
+                , backgroundColor = Nothing
+                , shadow = Nothing
+                }
+                |> List.singleton)
+            }
+         (Framework.layoutAttributes ++ a) <| w
+        ]--}
+    , header =
+        Framework.container
+            ++ Color.dark
+            ++ [ Element.padding <| 0
+                , Element.height <| Element.px <| 42
+                ]
+    , menuButton =
+        { label = Grid.simple
+        , container = Button.simple ++ Group.center ++ Color.dark
+        , disabled = Color.disabled
+        , active = Color.primary
+        }
+    , sheetButton =
+        { container = 
+            Button.fill
+            ++ Group.center 
+            ++ Color.light
+            ++ [Font.alignLeft]
+        , label = Grid.simple
+        , disabled = Color.disabled
+        , active = Color.primary
+        }
+    , 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
+            ]
+        , label = Grid.simple
+        , disabled = Color.disabled
+        , active = [ Border.color Color.turquoise ]
+        }
+    , 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
+    }
--- a/example/src/Example.elm
+++ b/example/src/Example.elm
@ -22,7 +22,7 @@ import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
 import Layout exposing (Part, Layout)
-import Core.Style exposing (Style)
+import Data.Style exposing (style)
 import Reusable
 import Set exposing (Set)
 import Stateless
@ -78,149 +78,6 @@ type Msg
    = LoadedSpecific LoadedMsg
    | GotViewport Viewport

-textButton : ButtonStyle msg
-textButton =
-    { container = Button.simple
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-simpleButton : ButtonStyle msg
-simpleButton =
-    { container = Button.simple ++ Color.primary
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-style : Style
-    { dialog :
-        { containerColumn : List (Attribute msg)
-        , title : List (Attribute msg)
-        , buttonRow : List (Attribute msg)
-        , accept : ButtonStyle msg
-        , dismiss : ButtonStyle msg
-        }
-    } msg
-style =
-    { dialog =
-        { containerColumn = 
-            Card.simple
-            ++ Grid.simple
-            ++ [ Element.width <| Element.minimum 280 <| Element.maximum  560 <| Element.fill ]
-        , title = Heading.h3
-        , buttonRow = 
-            Grid.simple ++
-            [ Element.paddingEach
-                { top = 28
-                , bottom = 0
-                , left = 0
-                , right = 0
-                }
-            ]
-        , accept = simpleButton
-        , dismiss = textButton
-        }
-    , snackbar = 
-        { row = 
-            Card.simple 
-            ++ Color.dark
-            ++ Grid.simple
-            ++ [ Element.paddingXY 8 6
-                , Element.height <| Element.px <|54]
-        , button = 
-            { label = Grid.simple
-            , container = Button.simple ++ Color.dark
-            , disabled = Color.disabled
-            , active = Color.primary
-            }
-        , text = [Element.paddingXY 8 0]
-        }
-    , layout = Framework.responsiveLayout
-    {--\a w ->
-        Html.div []
-        [ Html.node "meta"
-            [ Attributes.attribute "name" "viewport"
-            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
-            ]
-            []
-        , Element.layoutWith
-            {options = (Element.focusStyle
-                { borderColor = Nothing
-                , backgroundColor = Nothing
-                , shadow = Nothing
-                }
-                |> List.singleton)
-            }
-         (Framework.layoutAttributes ++ a) <| w
-        ]--}
-    , header =
-        Framework.container
-            ++ Color.dark
-            ++ [ Element.padding <| 0
-                , Element.height <| Element.px <| 42
-                ]
-    , menuButton =
-        { label = Grid.simple
-        , container = Button.simple ++ Group.center ++ Color.dark
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , sheetButton =
-        { container = 
-            Button.fill
-            ++ Group.center 
-            ++ Color.light
-            ++ [Font.alignLeft]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , 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
-            ]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = [ Border.color Color.turquoise ]
-        }
-    , 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
-    }
-

 initialModel : Viewport -> ( LoadedModel, Cmd LoadedMsg )
 initialModel { viewport } =
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@ -22,30 +22,7 @@ import Layout exposing (Part(..))
 import Icons
 import Widget
 import Element.Font as Font
-
-buttonStyle : ButtonStyle msg
-buttonStyle =
-    { label = [ Element.spacing 8]
-    , container = Button.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-tabButtonStyle :ButtonStyle msg
-tabButtonStyle=
-    { label = [ Element.spacing 8]
-    , container = Button.simple ++ Group.top
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-chipButton : ButtonStyle msg
-chipButton =
-    { container = Tag.simple
-    , disabled = []
-    , label = Grid.simple
-    , active = Color.primary
-    }
+import Data.Style exposing (style)

 type alias Model =
    { selected : Maybe Int
@ -153,6 +130,9 @@ update msg model =

 select : Model -> (String,Element Msg)
 select model =
+    let
+        buttonStyle = style.button
+    in
    ( "Select"
    , { selected = model.selected
      , options = 
@ -188,6 +168,9 @@ select model =

 multiSelect : Model -> (String,Element Msg)
 multiSelect model =
+    let
+        buttonStyle = style.button
+    in
    ( "Multi Select"
    , { selected = model.multiSelected
      , options = 
@ -247,7 +230,7 @@ tab : Model -> (String,Element Msg)
 tab model =
    ( "Tab"
    , Widget.tab 
-            { button = tabButtonStyle
+            { button = style.tabButton
            , optionRow = Grid.simple
            , containerColumn = Grid.compact
            } 
@ -339,7 +322,7 @@ carousel model =
 iconButton : Model -> (String,Element Msg)
 iconButton model =
    ( "Icon Button"
-    , [Button.view buttonStyle
+    , [Button.view style.button
        { text = "disable me"
        , icon = Icons.slash |> Element.html |> Element.el []        , onPress =
            if model.button then
@ -347,7 +330,7 @@ iconButton model =
            else
                Nothing
        }
-    , Button.view buttonStyle
+    , Button.view style.button
        { text = "reset button"
        , icon = Element.none       
        , onPress =  Just <| ToggleButton True
@ -375,24 +358,7 @@ textInput model =
        , label = "Chips"
        , onChange = SetTextInput
        }
-            |> Widget.textInput
-            { chip = chipButton
-            , chipsRow = 
-                [ Element.width <| Element.shrink
-                , Element.spacing <| 4 ]
-            , containerRow = 
-                Button.simple
-                ++ Color.light
-                ++ [ Border.color <| Element.rgb255 186 189 182
-                    , Font.alignLeft
-                    , Element.padding 8
-                    , Element.height <| Element.px <|42
-                    ]
-                ++ Grid.simple
-            , input =
-                Color.light
-                ++ [Element.padding 0]
-            }
+            |> Widget.textInput style.textInput
        , model.chipTextInput
            |> Set.diff
                (["A","B","C"]
--- a/src/Layout.elm
+++ b/src/Layout.elm
@ -1,10 +1,10 @@
 module Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)

 import Array
-import Core.Style as Style exposing (Style)
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
 import Html exposing (Html)
+import Style exposing (Style)
 import Widget exposing (Select)
 import Widget.Button as Button exposing (Button)
 import Widget.Snackbar as Snackbar exposing (Message)
--- a/src/Core/Style.elm
+++ b/src/Core/Style.elm
@ -1,4 +1,4 @@
-module Core.Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton)
+module Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton)

 import Element exposing (Attribute, Element)
 import Html exposing (Html)
--- a/src/Widget.elm
+++ b/src/Widget.elm
@ -1,6 +1,6 @@
 module Widget exposing
    ( select, multiSelect, collapsable, carousel, modal, tab, dialog
-    , Dialog, Select, selectButton, textInput
+    , Dialog, Select, TextInputStyle, selectButton, textInput
    )

 {-| This module contains functions for displaying data.
@ -37,6 +37,14 @@ type alias Dialog msg =
    }


+type alias TextInputStyle msg =
+    { chip : ButtonStyle msg
+    , containerRow : List (Attribute msg)
+    , chipsRow : List (Attribute msg)
+    , input : List (Attribute msg)
+    }
+
+
 {-| A simple button
 -}
 selectButton :
@ -103,11 +111,7 @@ multiSelect { selected, options, onSelect } =

 {-| -}
 textInput :
-    { chip : ButtonStyle msg
-    , containerRow : List (Attribute msg)
-    , chipsRow : List (Attribute msg)
-    , input : List (Attribute msg)
-    }
+    TextInputStyle msg
    ->
        { chips : List (Button msg)
        , text : String