From b509e632735cd58fdedb7fc59c72e2044f3864cd Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Tue, 26 May 2020 07:18:59 +0200 Subject: [PATCH] Added Ellies. Made Tabs full width --- docs/2.0.0/index.html | 3 +- docs/index.html | 3 +- src/Widget.elm | 94 +++++++++++++++++++++++------------ src/Widget/Style/Material.elm | 4 +- 4 files changed, 69 insertions(+), 35 deletions(-) diff --git a/docs/2.0.0/index.html b/docs/2.0.0/index.html index 6a99ca8..47ebdc8 100644 --- a/docs/2.0.0/index.html +++ b/docs/2.0.0/index.html @@ -15923,7 +15923,8 @@ button: $author$project$Widget$Style$Material$tabButton(palette), containerColumn: _List_fromArray( [ - $mdgriffith$elm_ui$Element$spacing(8) + $mdgriffith$elm_ui$Element$spacing(8), + $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill) ]), content: _List_fromArray( [ diff --git a/docs/index.html b/docs/index.html index f26dd12..7612d8e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16371,7 +16371,8 @@ var $author$project$Widget$Style$Material$tab = function (palette) { button: $author$project$Widget$Style$Material$tabButton(palette), containerColumn: _List_fromArray( [ - $mdgriffith$elm_ui$Element$spacing(8) + $mdgriffith$elm_ui$Element$spacing(8), + $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill) ]), content: _List_fromArray( [ diff --git a/src/Widget.elm b/src/Widget.elm index 374c0e6..fd32029 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -1,10 +1,11 @@ module Widget exposing ( Button, TextButton, iconButton, textButton, button - , Select, MultiSelect, selectButton, select, multiSelect + , Select, selectButton, select + , MultiSelect, multiSelect , Dialog, modal, dialog , ExpansionPanel, expansionPanel , row, column, buttonRow, buttonColumn - , SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn + , SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn , TextInput, textInput , Tab, tab ) @@ -13,32 +14,33 @@ module Widget exposing These widgets should be used by defining the styling seperately: -``` -Widget.button Material.primaryButton - { text = "disable me" - , icon = - FeatherIcons.slash - |> FeatherIcons.withSize 16 - |> FeatherIcons.toHtml [] - |> Element.html - |> Element.el [] - , onPress = - if isButtonEnabled then - ChangedButtonStatus False - |> Just + Widget.button Material.primaryButton + { text = "disable me" + , icon = + FeatherIcons.slash + |> FeatherIcons.withSize 16 + |> FeatherIcons.toHtml [] + |> Element.html + |> Element.el [] + , onPress = + if isButtonEnabled then + ChangedButtonStatus False + |> Just - else - Nothing - } -``` + else + Nothing + } Every widgets comes with a type. You can think of the widgets as building blocks. You can create you own widgets by sticking widgets types together. + # Buttons ![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png) +[Open in Ellie](https://ellie-app.com/8XDrHsxYkKNa1) + @docs Button, TextButton, iconButton, textButton, button @@ -46,45 +48,59 @@ You can create you own widgets by sticking widgets types together. ![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png) +[Open in Ellie](https://ellie-app.com/8XDsBDB92Dfa1) + @docs Select, selectButton, select -![multiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png) +![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png) + +[Open in Ellie](https://ellie-app.com/8XDtW5gVnB3a1) @docs MultiSelect, multiSelect # Dialog -![dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png) +![Dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png) + +[Open in Ellie](https://ellie-app.com/8XDvDKrm8R4a1) @docs Dialog, modal, dialog # Expansion Panel -![expansionPanel](https://orasund.github.io/elm-ui-widgets/assets/expansionPanel.png) +![ExpansionPanel](https://orasund.github.io/elm-ui-widgets/assets/expansionPanel.png) + +[Open in Ellie](https://ellie-app.com/8XDwr7pCZ3Ca1) @docs ExpansionPanel, expansionPanel # List -![list](https://orasund.github.io/elm-ui-widgets/assets/list.png) +![List](https://orasund.github.io/elm-ui-widgets/assets/list.png) + +[Open in Ellie](https://ellie-app.com/8XDxbpZZbFMa1) @docs row, column, buttonRow, buttonColumn # Sort Table -![sortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png) +![SortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png) -@docs SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn +[Open in Ellie](https://ellie-app.com/8XDy5mGRd4Xa1) + +@docs SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn # Text Input ![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png) +[Open in Ellie](https://ellie-app.com/8XDyZD5VBd6a1) + @docs TextInput, textInput @@ -92,6 +108,8 @@ You can create you own widgets by sticking widgets types together. ![tab](https://orasund.github.io/elm-ui-widgets/assets/textInput.png) +[Open in Ellie](https://ellie-app.com/8XDzMBgC36wa1) + @docs Tab, tab -} @@ -107,7 +125,7 @@ import Internal.SortTable as SortTable import Internal.Tab as Tab import Internal.TextInput as TextInput import Set exposing (Set) -import Widget.Style exposing (ButtonStyle,TextInputStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle) +import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle, TextInputStyle) @@ -188,7 +206,7 @@ button = Technical Remark: -* A more suitable name would be "Choice" + - A more suitable name would be "Choice" -} type alias Select msg = @@ -206,7 +224,7 @@ type alias Select msg = Technical Remark: -* A more suitable name would be "Options" + - A more suitable name would be "Options" -} type alias MultiSelect msg = @@ -268,7 +286,7 @@ type alias Dialog msg = Technical Remark: -* To stop the screen from scrolling, set the height of the layout to the height of the screen. + - To stop the screen from scrolling, set the height of the layout to the height of the screen. -} modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg) @@ -296,6 +314,7 @@ dialog = - EXPANSION PANEL ----------------------------------------------------------} + {-| Expansion Panel widget type -} type alias ExpansionPanel msg = @@ -308,6 +327,7 @@ type alias ExpansionPanel msg = , isExpanded : Bool } + {-| An expansion Panel -} expansionPanel : @@ -329,6 +349,7 @@ expansionPanel = - TEXT INPUT ----------------------------------------------------------} + {-| Text Input widget type -} type alias TextInput msg = @@ -339,7 +360,9 @@ type alias TextInput msg = , onChange : String -> msg } -{-| A text Input that allows to include chips. -} + +{-| A text Input that allows to include chips. +-} textInput : TextInputStyle msg -> @@ -359,18 +382,21 @@ textInput = - LIST ----------------------------------------------------------} + {-| Replacement of `Element.row` -} row : RowStyle msg -> List (Element msg) -> Element msg row = List.row + {-| Replacement of `Element.column` -} column : ColumnStyle msg -> List (Element msg) -> Element msg column = List.column + {-| A row of buttons -} buttonRow : @@ -382,6 +408,7 @@ buttonRow : buttonRow = List.buttonRow + {-| A column of buttons -} buttonColumn : @@ -405,9 +432,10 @@ buttonColumn = type alias Column a = SortTable.Column a -{-| Sort Table widget type + +{-| Sort Table widget type -} -type alias SortTable a msg= +type alias SortTable a msg = { content : List a , columns : List (Column a) , sortBy : String @@ -415,6 +443,7 @@ type alias SortTable a msg= , onChange : String -> msg } + {-| An unsortable Column, when trying to sort by this column, nothing will change. -} unsortableColumn : @@ -487,6 +516,7 @@ sortTable = - TAB ----------------------------------------------------------} + {-| Tab widget type -} type alias Tab msg = diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm index 811d775..b156359 100644 --- a/src/Widget/Style/Material.elm +++ b/src/Widget/Style/Material.elm @@ -1349,8 +1349,10 @@ tab palette = , optionRow = [ Element.spaceEvenly , Border.shadow <| shadow 4 + , Element.spacing 8 + , Element.width <| Element.fill ] - , containerColumn = [ Element.spacing 8 ] + , containerColumn = [ Element.spacing 8, Element.width <| Element.fill ] , content = [ Element.width <| Element.fill ] }