From be011f7acc1e661b4055de6df8d6fb29b14d9ebd Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Wed, 22 Apr 2020 20:55:02 +0200 Subject: [PATCH] collecting all styles into one type --- example/src/Component.elm | 28 +---- example/src/Data/Style.elm | 222 +++++++++++++++++++++++++++++++++++++ example/src/Example.elm | 145 +----------------------- example/src/Stateless.elm | 56 ++-------- src/Layout.elm | 2 +- src/{Core => }/Style.elm | 2 +- src/Widget.elm | 16 ++- 7 files changed, 249 insertions(+), 222 deletions(-) create mode 100644 example/src/Data/Style.elm rename src/{Core => }/Style.elm (93%) diff --git a/example/src/Component.elm b/example/src/Component.elm index f1a527f..892e2f9 100644 --- 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 diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm new file mode 100644 index 0000000..e341ab0 --- /dev/null +++ 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 + } \ No newline at end of file diff --git a/example/src/Example.elm b/example/src/Example.elm index 0a0b58a..63b623e 100644 --- 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 } = diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm index 3dd9347..b77f9a4 100644 --- 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"] diff --git a/src/Layout.elm b/src/Layout.elm index 4af1877..46a5183 100644 --- 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) diff --git a/src/Core/Style.elm b/src/Style.elm similarity index 93% rename from src/Core/Style.elm rename to src/Style.elm index 273fe65..5fa852e 100644 --- a/src/Core/Style.elm +++ b/src/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) diff --git a/src/Widget.elm b/src/Widget.elm index 53e52f6..2a7e342 100644 --- 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