From b970dd77684cb117fa2ea1f5c0144b29f9c696fb Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Wed, 3 Feb 2021 13:35:06 +0100 Subject: [PATCH] Added insetIem and fullBleedItem --- example/src/Data/Style.elm | 17 +++-- example/src/Example/List.elm | 45 ++++++++++--- example/src/Example/Sheet.elm | 18 ++--- example/src/Main.elm | 4 +- src/Internal/Dialog.elm | 6 +- src/Internal/Grid.elm | 28 -------- src/Internal/Item.elm | 74 +++++++++++++++++---- src/Internal/List.elm | 26 ++++++-- src/Internal/Material/Item.elm | 54 ++++++++++----- src/Internal/Material/Layout.elm | 14 ++-- src/Internal/Material/Sheet.elm | 15 ++--- src/Internal/Sheet.elm | 8 +-- src/Widget.elm | 111 +++++++++++++++++++++++-------- src/Widget/Layout.elm | 55 +++++++-------- src/Widget/Material.elm | 46 +++++++++---- 15 files changed, 340 insertions(+), 181 deletions(-) delete mode 100644 src/Internal/Grid.elm diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm index d449d00..ee2c888 100644 --- a/example/src/Data/Style.elm +++ b/example/src/Data/Style.elm @@ -27,8 +27,9 @@ import Widget , SwitchStyle , TabStyle , TextInputStyle - , TextItemStyle - , SheetStyle + , InsetItemStyle + , SideSheetStyle + , FullBleedItemStyle ) import Widget.Icon as Icon import Widget.Layout exposing (LayoutStyle) @@ -62,11 +63,13 @@ style palette = , middleDivider = Material.middleDivider palette , insetHeader = Material.insetHeader palette , fullBleedHeader = Material.fullBleedHeader palette - , textItem = Material.textItem palette + , insetItem = Material.insetItem palette , multiLineItem = Material.multiLineItem palette , imageItem = Material.imageItem palette , expansionItem = Material.expansionItem palette - , sheet = Material.sheet palette + , sideSheet = Material.sideSheet palette + , fullBleedItem = Material.fullBleedItem Material.defaultPalette + , selectItem = Material.selectItem Material.defaultPalette } @@ -95,9 +98,11 @@ type alias Style msg = , fullBleedDivider : ItemStyle (DividerStyle msg) msg , insetHeader : ItemStyle (HeaderStyle msg) msg , fullBleedHeader : ItemStyle (HeaderStyle msg) msg - , textItem : ItemStyle (TextItemStyle msg) msg + , insetItem : ItemStyle (InsetItemStyle msg) msg , multiLineItem : ItemStyle (MultiLineItemStyle msg) msg , imageItem : ItemStyle (ImageItemStyle msg) msg , expansionItem : ExpansionItemStyle msg - , sheet : SheetStyle msg + , sideSheet : SideSheetStyle msg + , fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg + , selectItem : ItemStyle (ButtonStyle msg) msg } diff --git a/example/src/Example/List.elm b/example/src/Example/List.elm index 1963ccb..26784dc 100644 --- a/example/src/Example/List.elm +++ b/example/src/Example/List.elm @@ -4,7 +4,7 @@ import Browser import Element exposing (Element) import Element.Font as Font import FeatherIcons -import Widget exposing (ColumnStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, TextItemStyle) +import Widget exposing (ButtonStyle,ColumnStyle,FullBleedItemStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, InsetItemStyle) import Widget.Icon as Icon import Widget.Material as Material import Widget.Material.Color as MaterialColor @@ -18,11 +18,13 @@ type alias Style style msg = , fullBleedDivider : ItemStyle (DividerStyle msg) msg , insetHeader : ItemStyle (HeaderStyle msg) msg , fullBleedHeader : ItemStyle (HeaderStyle msg) msg - , textItem : ItemStyle (TextItemStyle msg) msg + , insetItem : ItemStyle (InsetItemStyle msg) msg , imageItem : ItemStyle (ImageItemStyle msg) msg , expansionItem : ExpansionItemStyle msg , switch : SwitchStyle msg , multiLineItem : ItemStyle (MultiLineItemStyle msg) msg + , fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg + , selectItem : ItemStyle (ButtonStyle msg) msg } @@ -34,11 +36,13 @@ materialStyle = , fullBleedDivider = Material.fullBleedDivider Material.defaultPalette , insetHeader = Material.insetHeader Material.defaultPalette , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette - , textItem = Material.textItem Material.defaultPalette + , insetItem = Material.insetItem Material.defaultPalette , imageItem = Material.imageItem Material.defaultPalette , expansionItem = Material.expansionItem Material.defaultPalette , switch = Material.switch Material.defaultPalette , multiLineItem = Material.multiLineItem Material.defaultPalette + , fullBleedItem = Material.fullBleedItem Material.defaultPalette + , selectItem = Material.selectItem Material.defaultPalette } @@ -77,12 +81,18 @@ view : (Msg -> msg) -> Style style msg -> Model -> Element msg view msgMapper style (IsExpanded isExpanded) = [ "Section 1" |> Widget.headerItem style.fullBleedHeader - , Widget.item <| Element.text <| "Custom Item" + , Widget.asItem <| Element.text <| "Custom Item" , Widget.divider style.middleDivider - , Widget.item <| Element.el [ Element.centerY ] <| Element.text <| "Custom Item (centered)" + , Widget.fullBleedItem style.fullBleedItem + { onPress = Nothing + , icon = + \{ size, color } -> + Element.none + , text = "Full Bleed Item" + } , "Section 2" |> Widget.headerItem style.fullBleedHeader - , Widget.textItem style.textItem + , Widget.insetItem style.insetItem { onPress = Nothing , icon = FeatherIcons.triangle @@ -110,7 +120,7 @@ view msgMapper style (IsExpanded isExpanded) = ] } , Widget.divider style.insetDivider - , Widget.textItem style.textItem + , Widget.insetItem style.insetItem { onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just , icon = always Element.none , text = "Click Me" @@ -156,7 +166,7 @@ view msgMapper style (IsExpanded isExpanded) = , content = [ "Section 3" |> Widget.headerItem style.insetHeader - , Widget.textItem style.textItem + , Widget.insetItem style.insetItem { onPress = Nothing , icon = always Element.none , text = "Item" @@ -171,6 +181,25 @@ view msgMapper style (IsExpanded isExpanded) = } ] } + ++ [ "Menu" |> Widget.headerItem style.fullBleedHeader] + ++ ({ selected = if isExpanded then Just 1 else Just 0 + , options = + [ True, False ] + |> List.map + (\bool -> + { text = if bool then "Expanded" else "Collapsed" + , icon = always Element.none + } + ) + , onSelect = (\int -> + (int == 1) + |> ToggleCollapsable + |> msgMapper + |> Just + ) + } + |> Widget.selectItem style.selectItem + ) |> Widget.itemList style.cardColumn diff --git a/example/src/Example/Sheet.elm b/example/src/Example/Sheet.elm index 9602a10..6f94e8e 100644 --- a/example/src/Example/Sheet.elm +++ b/example/src/Example/Sheet.elm @@ -3,26 +3,26 @@ module Example.Sheet exposing (Model, Msg, init, subscriptions, update, view) import Browser import Element exposing (Element) import FeatherIcons -import Widget exposing (ButtonStyle, SheetStyle,ItemStyle,HeaderStyle,TextItemStyle) +import Widget exposing (ButtonStyle, SideSheetStyle,ItemStyle,HeaderStyle,InsetItemStyle) import Widget.Icon as Icon import Widget.Material as Material import Widget.Material.Typography as Typography type alias Style style msg = { style - | sheet : SheetStyle msg + | sideSheet : SideSheetStyle msg , primaryButton : ButtonStyle msg , fullBleedHeader : ItemStyle (HeaderStyle msg) msg - , textItem : ItemStyle (TextItemStyle msg) msg + , insetItem : ItemStyle (InsetItemStyle msg) msg } materialStyle : Style {} msg materialStyle = - { sheet = Material.sheet Material.defaultPalette + { sideSheet = Material.sideSheet Material.defaultPalette , primaryButton = Material.containedButton Material.defaultPalette , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette - , textItem = Material.textItem Material.defaultPalette + , insetItem = Material.insetItem Material.defaultPalette } @@ -78,8 +78,8 @@ view msgMapper style (IsEnabled isEnabled) = [ "Menu" |> Element.text |> Element.el Typography.h6 - |> Widget.item - , Widget.textItem style.textItem + |> Widget.asItem + , Widget.insetItem style.insetItem { onPress = Just <| msgMapper <| ToggleModal False , icon = FeatherIcons.triangle @@ -89,7 +89,7 @@ view msgMapper style (IsEnabled isEnabled) = \{ size, color } -> Element.none } - , Widget.textItem style.textItem + , Widget.insetItem style.insetItem { onPress = Just <| msgMapper <| ToggleModal False , icon = FeatherIcons.triangle @@ -100,7 +100,7 @@ view msgMapper style (IsEnabled isEnabled) = Element.none } ] - |> Widget.sheet style.sheet + |> Widget.sideSheet style.sideSheet , onDismiss = Just <| msgMapper <| ToggleModal False } |> List.singleton diff --git a/example/src/Main.elm b/example/src/Main.elm index 3791448..713eb3d 100644 --- a/example/src/Main.elm +++ b/example/src/Main.elm @@ -432,7 +432,7 @@ viewLoaded m = , elem ] |> Element.column Grid.simple - |> Widget.item + |> Widget.asItem ) :: (if more |> List.isEmpty then [] @@ -457,7 +457,7 @@ viewLoaded m = ++ [ Element.width <| Element.fill ] ) more - |> Widget.item + |> Widget.asItem |> List.singleton , isExpanded = name diff --git a/src/Internal/Dialog.elm b/src/Internal/Dialog.elm index 32c6f2b..9c17885 100644 --- a/src/Internal/Dialog.elm +++ b/src/Internal/Dialog.elm @@ -1,10 +1,8 @@ module Internal.Dialog exposing (Dialog, DialogStyle, dialog) -import Element exposing (Attribute, Element) -import Element.Background as Background -import Element.Events as Events +import Element exposing (Attribute) import Internal.Button as Button exposing (ButtonStyle, TextButton) -import Internal.Modal as Modal exposing (Modal) +import Internal.Modal exposing (Modal) {-| -} diff --git a/src/Internal/Grid.elm b/src/Internal/Grid.elm deleted file mode 100644 index 2675323..0000000 --- a/src/Internal/Grid.elm +++ /dev/null @@ -1,28 +0,0 @@ -module Internal.Grid exposing (ColumnStyle, RowStyle) - -import Element exposing (Attribute, Element) - -{-| -} -type alias RowStyle msg = - { elementRow : List (Attribute msg) - , content : - { element : List (Attribute msg) - , ifFirst : List (Attribute msg) - , ifLast : List (Attribute msg) - , ifSingleton : List (Attribute msg) - , otherwise : List (Attribute msg) - } - } - - -{-| -} -type alias ColumnStyle msg = - { elementColumn : List (Attribute msg) - , content : - { element : List (Attribute msg) - , ifFirst : List (Attribute msg) - , ifLast : List (Attribute msg) - , ifSingleton : List (Attribute msg) - , otherwise : List (Attribute msg) - } - } \ No newline at end of file diff --git a/src/Internal/Item.elm b/src/Internal/Item.elm index 906f9ac..53278f0 100644 --- a/src/Internal/Item.elm +++ b/src/Internal/Item.elm @@ -1,12 +1,13 @@ -module Internal.Item exposing (DividerStyle,selectItem, ExpansionItem, ExpansionItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, TextItem, TextItemStyle, divider, expansionItem, headerItem, imageItem, item, multiLineItem, textItem, toItem) +module Internal.Item exposing (DividerStyle + , ExpansionItem, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, InsetItem, InsetItemStyle, asItem, divider, expansionItem, fullBleedItem, headerItem, imageItem, multiLineItem, selectItem, insetItem, toItem) import Element exposing (Attribute, Element) import Element.Input as Input +import Internal.Button exposing (Button, ButtonStyle) +import Internal.Select as Select exposing (Select) import Widget.Customize exposing (content) import Widget.Icon exposing (Icon, IconStyle) -import Internal.Button exposing (ButtonStyle) -import Internal.Grid exposing (ColumnStyle) -import Internal.Select as Select exposing (Select) + type alias ItemStyle content msg = { element : List (Attribute msg) @@ -28,7 +29,21 @@ type alias HeaderStyle msg = } -type alias TextItemStyle msg = +type alias FullBleedItemStyle msg = + { elementButton : List (Attribute msg) + , ifDisabled : List (Attribute msg) + , otherwise : List (Attribute msg) + , content : + { elementRow : List (Attribute msg) + , content : + { text : { elementText : List (Attribute msg) } + , icon : IconStyle + } + } + } + + +type alias InsetItemStyle msg = { elementButton : List (Attribute msg) , ifDisabled : List (Attribute msg) , otherwise : List (Attribute msg) @@ -86,7 +101,7 @@ type alias ImageItemStyle msg = type alias ExpansionItemStyle msg = - { item : ItemStyle (TextItemStyle msg) msg + { item : ItemStyle (InsetItemStyle msg) msg , expandIcon : Icon msg , collapseIcon : Icon msg } @@ -96,7 +111,7 @@ type alias Item msg = List (Attribute msg) -> Element msg -type alias TextItem msg = +type alias InsetItem msg = { text : String , onPress : Maybe msg , icon : Icon msg @@ -130,8 +145,35 @@ type alias MultiLineItem msg = } -item : Element msg -> Item msg -item element = +fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg -> Button msg -> Item msg +fullBleedItem s { onPress, text, icon } = + toItem s + (\style -> + Input.button + (style.elementButton + ++ (if onPress == Nothing then + style.ifDisabled + + else + style.otherwise + ) + ) + { onPress = onPress + , label = + [ text + |> Element.text + |> List.singleton + |> Element.paragraph [] + |> Element.el style.content.content.text.elementText + , icon style.content.content.icon + ] + |> Element.row style.content.elementRow + } + ) + + +asItem : Element msg -> Item msg +asItem element = toItem { element = [] , content = () @@ -158,8 +200,8 @@ headerItem style title = ) -textItem : ItemStyle (TextItemStyle msg) msg -> TextItem msg -> Item msg -textItem s { onPress, text, icon, content } = +insetItem : ItemStyle (InsetItemStyle msg) msg -> InsetItem msg -> Item msg +insetItem s { onPress, text, icon, content } = toItem s (\style -> Input.button @@ -218,7 +260,7 @@ imageItem s { onPress, text, image, content } = expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg) expansionItem s { icon, text, onToggle, content, isExpanded } = - textItem s.item + insetItem s.item { text = text , onPress = Just <| onToggle <| not isExpanded , icon = icon @@ -270,16 +312,20 @@ multiLineItem s { onPress, title, text, icon, content } = } ) + selectItem : ItemStyle (ButtonStyle msg) msg -> Select msg -> List (Item msg) selectItem s select = select - |> Select.select - |> List.map (\b -> toItem s (\style -> b |> Select.selectButton style) ) + |> Select.select + |> List.map (\b -> toItem s (\style -> b |> Select.selectButton style)) + + -------------------------------------------------------------------------------- -- Internal -------------------------------------------------------------------------------- + toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg toItem style element = \attr -> diff --git a/src/Internal/List.elm b/src/Internal/List.elm index 3195de6..c607b1b 100644 --- a/src/Internal/List.elm +++ b/src/Internal/List.elm @@ -5,15 +5,33 @@ import Internal.Button exposing (Button, ButtonStyle) import Internal.Item as Item exposing (Item) import Internal.Select as Select import Widget.Customize as Customize -import Internal.Grid as Grid exposing (ColumnStyle, RowStyle) -type alias ColumnStyle msg= - Grid.ColumnStyle msg +{-| -} type alias RowStyle msg = - Grid.RowStyle msg + { elementRow : List (Attribute msg) + , content : + { element : List (Attribute msg) + , ifFirst : List (Attribute msg) + , ifLast : List (Attribute msg) + , ifSingleton : List (Attribute msg) + , otherwise : List (Attribute msg) + } + } +{-| -} +type alias ColumnStyle msg = + { elementColumn : List (Attribute msg) + , content : + { element : List (Attribute msg) + , ifFirst : List (Attribute msg) + , ifLast : List (Attribute msg) + , ifSingleton : List (Attribute msg) + , otherwise : List (Attribute msg) + } + } + internal : { element : List (Attribute msg) diff --git a/src/Internal/Material/Item.elm b/src/Internal/Material/Item.elm index 9ffe45b..2bb4eca 100644 --- a/src/Internal/Material/Item.elm +++ b/src/Internal/Material/Item.elm @@ -2,13 +2,14 @@ module Internal.Material.Item exposing ( expansionItem , fullBleedDivider , fullBleedHeader + , fullBleedItem , imageItem , insetDivider , insetHeader , middleDivider , multiLineItem , selectItem - , textItem + , insetItem ) import Color @@ -17,14 +18,14 @@ import Element.Background as Background import Element.Border as Border import Element.Font as Font import Html.Attributes as Attributes -import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle) +import Internal.Button exposing (ButtonStyle) +import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, InsetItemStyle) +import Internal.Material.Button as Button import Internal.Material.Icon as Icon import Internal.Material.Palette exposing (Palette) -import Internal.Material.Button as Button -import Internal.Button exposing (ButtonStyle) import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography -import Internal.Material.List as List + fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg fullBleedDivider _ = @@ -183,8 +184,30 @@ fullBleedHeader palette = } -textItem : Palette -> ItemStyle (TextItemStyle msg) msg -textItem _ = +fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg +fullBleedItem palette = + let + i = + insetItem palette + in + { element = i.element + , content = + { elementButton = i.content.elementButton + , ifDisabled = i.content.ifDisabled + , otherwise = i.content.otherwise + , content = + { elementRow = i.content.content.elementRow + , content = + { text = i.content.content.content.text + , icon = i.content.content.content.content + } + } + } + } + + +insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg +insetItem _ = { element = [ Element.padding 0 ] , content = { elementButton = @@ -375,14 +398,15 @@ imageItem _ = expansionItem : Palette -> ExpansionItemStyle msg expansionItem palette = - { item = textItem palette + { item = insetItem palette , expandIcon = Icon.expand_more , collapseIcon = Icon.expand_less } + selectItem : Palette -> ItemStyle (ButtonStyle msg) msg selectItem palette = - { element = [] + { element = [ Element.paddingXY 8 4 ] , content = { elementButton = [ Font.size 14 @@ -420,10 +444,10 @@ selectItem palette = ++ [ MaterialColor.gray |> MaterialColor.fromColor |> Font.color - , Element.mouseDown [] - , Element.mouseOver [] - , Element.focused [] - ] + , Element.mouseDown [] + , Element.mouseOver [] + , Element.focused [] + ] , ifActive = [ palette.primary |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity @@ -442,7 +466,7 @@ selectItem palette = , Element.centerY ] , content = - { text = + { text = { contentText = [ Element.centerX ] } , icon = @@ -462,4 +486,4 @@ selectItem palette = } } } - } \ No newline at end of file + } diff --git a/src/Internal/Material/Layout.elm b/src/Internal/Material/Layout.elm index 8843726..553ff89 100644 --- a/src/Internal/Material/Layout.elm +++ b/src/Internal/Material/Layout.elm @@ -1,4 +1,4 @@ -module Internal.Material.Layout exposing ( layout, menu, menuTabButton, more_vert, search) +module Internal.Material.Layout exposing (layout, menu, menuTabButton, more_vert, search) import Element import Element.Background as Background @@ -7,12 +7,11 @@ import Element.Font as Font import Internal.Button exposing (ButtonStyle) import Internal.Material.Button as Button import Internal.Material.Icon as Icon +import Internal.Material.Item as Item import Internal.Material.Palette exposing (Palette) import Internal.Material.Sheet as Sheet import Internal.Material.Snackbar as Snackbar import Internal.Material.TextInput as TextInput -import Internal.Material.Item as Item -import Internal.Item exposing (ItemStyle) import Svg import Svg.Attributes import Widget.Customize as Customize @@ -192,14 +191,15 @@ layout palette = ) , sheetButton = Item.selectItem palette , menuTabButton = menuTabButton palette - , sheet = Sheet.sheet palette + , sheet = Sheet.sideSheet palette , menuIcon = menu , moreVerticalIcon = more_vert , spacing = 8 , title = Typography.h6 ++ [ Element.paddingXY 8 0 ] , searchIcon = search , search = TextInput.searchInput palette - , searchFill = TextInput.textInputBase palette - |> Customize.elementRow [ Element.height <| Element.px 56 ] - , textItem = Item.textItem palette + , searchFill = + TextInput.textInputBase palette + |> Customize.elementRow [ Element.height <| Element.px 56 ] + , insetItem = Item.insetItem palette } diff --git a/src/Internal/Material/Sheet.elm b/src/Internal/Material/Sheet.elm index 4e7aebd..4b9ae56 100644 --- a/src/Internal/Material/Sheet.elm +++ b/src/Internal/Material/Sheet.elm @@ -1,23 +1,22 @@ -module Internal.Material.Sheet exposing (sheet) +module Internal.Material.Sheet exposing (sideSheet) import Element import Internal.Material.Palette exposing (Palette) -import Internal.Sheet exposing (SheetStyle) +import Internal.Sheet exposing (SideSheetStyle) import Widget.Material.Color as MaterialColor -sheet : Palette -> SheetStyle msg -sheet palette = - { element = [] +sideSheet : Palette -> SideSheetStyle msg +sideSheet palette = + { element = [ ] , content = { elementColumn = (palette.surface |> MaterialColor.textAndBackground) ++ [ Element.width <| Element.maximum 360 <| Element.fill - , Element.padding 8 - , Element.spacing 8 ] , content = - { element = [ Element.width <| Element.fill ] + { element = + [ Element.width <| Element.fill ] , ifSingleton = [] , ifFirst = [] , ifLast = [] diff --git a/src/Internal/Sheet.elm b/src/Internal/Sheet.elm index 20b374e..b266298 100644 --- a/src/Internal/Sheet.elm +++ b/src/Internal/Sheet.elm @@ -1,4 +1,4 @@ -module Internal.Sheet exposing (SheetStyle, sheet) +module Internal.Sheet exposing (SideSheetStyle, sideSheet) import Element exposing (Attribute, Element) import Internal.Item exposing (Item) @@ -6,13 +6,13 @@ import Internal.List as List exposing (ColumnStyle) import Widget.Customize as Customize -type alias SheetStyle msg = +type alias SideSheetStyle msg = { element : List (Attribute msg) , content : ColumnStyle msg } -sheet : SheetStyle msg -> List (Item msg) -> Element msg -sheet style = +sideSheet : SideSheetStyle msg -> List (Item msg) -> Element msg +sideSheet style = List.itemList (style.content |> Customize.elementColumn [ Element.height <| Element.fill ]) >> Element.el (style.element ++ [ Element.height <| Element.fill ]) diff --git a/src/Widget.elm b/src/Widget.elm index e314b0b..09ca092 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -7,19 +7,21 @@ module Widget exposing , DialogStyle, Dialog, dialog , RowStyle, row, buttonRow , ColumnStyle, column, buttonColumn - , ItemStyle, Item, item - , TextItemStyle, TextItem, textItem + , ItemStyle, Item + , InsetItemStyle, InsetItem, insetItem , ExpansionItemStyle, ExpansionItem, expansionItem , ImageItemStyle, ImageItem, imageItem , MultiLineItemStyle, MultiLineItem, multiLineItem , HeaderStyle, headerItem , DividerStyle, divider + , selectItem, asItem , itemList - , SheetStyle, sheet + , SideSheetStyle, sideSheet , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn , TextInputStyle, TextInput, textInput , TabStyle, Tab, tab , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator + , FullBleedItemStyle, fullBleedItem ) {-| This module contains different stateless view functions. No wiring required. @@ -109,19 +111,20 @@ You can create you own widgets by sticking widgets types together. ## Item -@docs ItemStyle, Item, item +@docs ItemStyle, FullBleedStyle, Item, item @docs TextItemStyle, TextItem, textItem @docs ExpansionItemStyle, ExpansionItem, expansionItem @docs ImageItemStyle, ImageItem, imageItem @docs MultiLineItemStyle, MultiLineItem, multiLineItem @docs HeaderStyle, headerItem @docs DividerStyle, divider -@docs selectItem +@docs selectItem, asItem @docs itemList + # Sheet -@docs SheetStyle, sheet +@docs SideSheetStyle, sideSheet # Sort Table @@ -588,7 +591,7 @@ This way you can see the list as a queue of modals. = Close Element.layout - (modal + (singleModal [ { onDismiss = Just Close , content = Element.text "Click outside this window to close it." @@ -839,7 +842,22 @@ type alias ColumnStyle msg = {-| -} -type alias TextItemStyle msg = +type alias FullBleedItemStyle msg = + { elementButton : List (Attribute msg) + , ifDisabled : List (Attribute msg) + , otherwise : List (Attribute msg) + , content : + { elementRow : List (Attribute msg) + , content : + { text : { elementText : List (Attribute msg) } + , icon : IconStyle + } + } + } + + +{-| -} +type alias InsetItemStyle msg = { elementButton : List (Attribute msg) , ifDisabled : List (Attribute msg) , otherwise : List (Attribute msg) @@ -900,14 +918,14 @@ type alias ImageItemStyle msg = {-| -} type alias ExpansionItemStyle msg = - { item : ItemStyle (TextItemStyle msg) msg + { item : ItemStyle (InsetItemStyle msg) msg , expandIcon : Icon msg , collapseIcon : Icon msg } {-| -} -type alias TextItem msg = +type alias InsetItem msg = { text : String , onPress : Maybe msg , icon : Icon msg @@ -946,28 +964,45 @@ type alias ExpansionItem msg = {-| Item widget type. -Use `Widget.item` if you want to turn a simple element into an item. +Use `Widget.asItem` if you want to turn a simple element into an item. -} type alias Item msg = List (Attribute msg) -> Element msg -{-| Simple element for a list. +fullBleedItem : + ItemStyle (FullBleedItemStyle msg) msg + -> + { text : String + , onPress : Maybe msg + , icon : Icon msg + } + -> Item msg +fullBleedItem = + let + fun : ItemStyle (FullBleedItemStyle msg) msg -> Button msg -> Item msg + fun = + Item.fullBleedItem + in + fun + + +{-| Turns a Element into an item. Only use if you want to take care of the styling yourself. import Element import Widget.Material as Material Element.text "Just a text" - |> Widget.item + |> Widget.asItem |> List.singleton |> Widget.itemList (Material.cardColumn Material.defaultPalette) |> always "Ignore this line" --> "Ignore this line" -} -item : Element msg -> Item msg -item = - Item.item +asItem : Element msg -> Item msg +asItem = + Item.asItem {-| A divider. @@ -1062,8 +1097,8 @@ headerItem = |> always "Ignore this line" --> "Ignore this line" -} -textItem : - ItemStyle (TextItemStyle msg) msg +insetItem : + ItemStyle (InsetItemStyle msg) msg -> { text : String , onPress : Maybe msg @@ -1071,8 +1106,13 @@ textItem : , content : Icon msg } -> Item msg -textItem = - Item.textItem +insetItem = + let + fun : ItemStyle (InsetItemStyle msg) msg -> InsetItem msg -> Item msg + fun = + Item.insetItem + in + fun {-| A item contining a text running over multiple lines. @@ -1105,7 +1145,12 @@ multiLineItem : } -> Item msg multiLineItem = - Item.multiLineItem + let + fun : ItemStyle (MultiLineItemStyle msg) msg -> MultiLineItem msg -> Item msg + fun = + Item.multiLineItem + in + fun {-| A clickable item that contains a image , a line of text and some additonal information @@ -1147,7 +1192,12 @@ imageItem : } -> Item msg imageItem = - Item.imageItem + let + fun : ItemStyle (ImageItemStyle msg) msg -> ImageItem msg -> Item msg + fun = + Item.imageItem + in + fun {-| An expandable Item @@ -1206,7 +1256,13 @@ expansionItem : } -> List (Item msg) expansionItem = - Item.expansionItem + let + fun : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg) + fun = + Item.expansionItem + in + fun + {-| Displays a selection of Buttons as a item list. This is intended to be used as a menu. -} @@ -1214,6 +1270,7 @@ selectItem : ItemStyle (ButtonStyle msg) msg -> Select msg -> List (Item msg) selectItem = Item.selectItem + {-| Replacement of `Element.row` import Element @@ -1355,7 +1412,7 @@ buttonColumn = -------------------------------------------------------------------------------- -type alias SheetStyle msg = +type alias SideSheetStyle msg = { element : List (Attribute msg) , content : ColumnStyle msg } @@ -1363,9 +1420,9 @@ type alias SheetStyle msg = {-| A sheet is similar to -} -sheet : SheetStyle msg -> List (Item msg) -> Element msg -sheet = - Sheet.sheet +sideSheet : SideSheetStyle msg -> List (Item msg) -> Element msg +sideSheet = + Sheet.sideSheet diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm index 747ab99..0619c2c 100644 --- a/src/Widget/Layout.elm +++ b/src/Widget/Layout.elm @@ -37,28 +37,23 @@ import Element.Input as Input import Html exposing (Html) import Internal.Button as Button exposing (Button, ButtonStyle) import Internal.Dialog as Dialog -import Internal.Item as Item exposing (ItemStyle,TextItemStyle) +import Internal.Item as Item exposing (ItemStyle, InsetItemStyle) import Internal.Modal as Modal exposing (Modal) import Internal.Select as Select exposing (Select) -import Internal.Sheet as Sheet exposing (SheetStyle) +import Internal.Sheet as Sheet exposing (SideSheetStyle) import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle) import Widget.Customize as Customize import Widget.Icon exposing (Icon) import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle) -{-| Technical Remark: - - - If icons are defined in Svg, they might not display correctly. - To avoid that, make sure to wrap them in `Element.html >> Element.el []` - --} +{-| -} type alias LayoutStyle msg = { container : List (Attribute msg) , snackbar : SnackbarStyle msg , layout : List (Attribute msg) -> Element msg -> Html msg , header : List (Attribute msg) - , sheet : SheetStyle msg + , sheet : SideSheetStyle msg , sheetButton : ItemStyle (ButtonStyle msg) msg , menuButton : ButtonStyle msg , menuTabButton : ButtonStyle msg @@ -69,7 +64,7 @@ type alias LayoutStyle msg = , searchIcon : Icon msg , search : TextInputStyle msg , searchFill : TextInputStyle msg - , textItem : ItemStyle (TextItemStyle msg) msg + , insetItem : ItemStyle (InsetItemStyle msg) msg } @@ -325,9 +320,9 @@ dialog -> top sheet -> bottom sheet -> left sheet -> right sheet -} getModals : { button : ItemStyle (ButtonStyle msg) msg - , sheet : SheetStyle msg + , sheet : SideSheetStyle msg , searchFill : TextInputStyle msg - , textItem : ItemStyle (TextItemStyle msg) msg + , insetItem : ItemStyle (InsetItemStyle msg) msg } -> { window : { height : Int, width : Int } @@ -356,12 +351,11 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac (\part -> case part of LeftSheet -> - (title |> Item.item) + (title |> Item.asItem) :: (menu |> Item.selectItem style.button - ) - |> Sheet.sheet + |> Sheet.sideSheet (style.sheet |> Customize.element [ Element.alignLeft ] |> Customize.mapContent @@ -372,16 +366,17 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac RightSheet -> moreActions - |> List.map (\{onPress,text,icon} -> - Item.textItem - style.textItem - { text = text - , onPress = onPress - , icon = icon - , content = always Element.none - } - ) - |> Sheet.sheet + |> List.map + (\{ onPress, text, icon } -> + Item.insetItem + style.insetItem + { text = text + , onPress = onPress + , icon = icon + , content = always Element.none + } + ) + |> Sheet.sideSheet (style.sheet |> Customize.element [ Element.alignRight ] ) @@ -393,18 +388,14 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac |> Maybe.map (TextInput.textInput (style.searchFill - |> Customize.elementRow - - - - [ Element.width <| Element.fill + |> Customize.elementRow + [ Element.width <| Element.fill ] |> Customize.mapContent (\record -> { record | text = record.text - } ) ) @@ -480,7 +471,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay { button = style.sheetButton , sheet = style.sheet , searchFill = style.searchFill - , textItem = style.textItem + , insetItem = style.insetItem } { window = window , dialog = dialog diff --git a/src/Widget/Material.elm b/src/Widget/Material.elm index 02f6a47..73a2c1c 100644 --- a/src/Widget/Material.elm +++ b/src/Widget/Material.elm @@ -7,13 +7,15 @@ module Widget.Material exposing , chip, textInput , alertDialog , row, column - , fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem + , sideSheet + , fullBleedItem, insetItem, multiLineItem, imageItem, expansionItem, selectItem + , fullBleedDivider, insetDivider, middleDivider + , insetHeader, fullBleedHeader , progressIndicator , sortTable , snackbar , tab, tabButton , layout - , sheet, selectItem ) {-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png) @@ -78,16 +80,20 @@ Thus for now we only provide a card containing a list. @docs row, column + # Sheet -@docs sheet +@docs sideSheet + # Item A List is build from items. You way want to use special items to visually organize the content of your list. -@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem, selectItem +@docs fullBleedItem, insetItem, multiLineItem, imageItem, expansionItem, selectItem +@docs fullBleedDivider, insetDivider, middleDivider +@docs fullBleedHeader, insetHeader # Progress Indicator @@ -125,7 +131,8 @@ Note that you might want to checkout the [file on GitHub](https://github.com/Ora import Color exposing (Color) import Internal.Button exposing (ButtonStyle) import Internal.Dialog exposing (DialogStyle) -import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle) +import Internal.Item exposing (DividerStyle + , ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, InsetItemStyle) import Internal.List exposing (ColumnStyle, RowStyle) import Internal.Material.Button as Button import Internal.Material.Chip as Chip @@ -135,18 +142,18 @@ import Internal.Material.Layout as Layout import Internal.Material.List as List import Internal.Material.Palette as Palette import Internal.Material.ProgressIndicator as ProgressIndicator +import Internal.Material.Sheet as Sheet import Internal.Material.Snackbar as Snackbar import Internal.Material.SortTable as SortTable import Internal.Material.Switch as Switch import Internal.Material.Tab as Tab import Internal.Material.TextInput as TextInput -import Internal.Material.Sheet as Sheet import Internal.ProgressIndicator exposing (ProgressIndicatorStyle) +import Internal.Sheet exposing (SideSheetStyle) import Internal.SortTable exposing (SortTableStyle) import Internal.Switch exposing (SwitchStyle) import Internal.Tab exposing (TabStyle) import Internal.TextInput exposing (TextInputStyle) -import Internal.Sheet exposing (SheetStyle) import Widget.Layout exposing (LayoutStyle) import Widget.Snackbar exposing (SnackbarStyle) @@ -303,13 +310,18 @@ chip : Palette -> ButtonStyle msg chip = Chip.chip + + {------------------------------------------------------------------------------- -- SHEET -------------------------------------------------------------------------------} -sheet : Palette -> SheetStyle msg -sheet = - Sheet.sheet + +sideSheet : Palette -> SideSheetStyle msg +sideSheet = + Sheet.sideSheet + + {------------------------------------------------------------------------------- -- L I S T @@ -400,6 +412,11 @@ cardColumn = List.cardColumn +fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg +fullBleedItem = + Item.fullBleedItem + + {-| A basic item containg some text, a button and some additional information. Technical Remark: @@ -408,9 +425,9 @@ There are some conflicting informations about the height of an element in the [S A normal item should be 48 height, but a item with an icon should be 56. This is confusing, because a normal item can also have an additional icon that is the same size. -} -textItem : Palette -> ItemStyle (TextItemStyle msg) msg -textItem = - Item.textItem +insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg +insetItem = + Item.insetItem {-| A text item allowing for more text. @@ -429,12 +446,15 @@ imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg imageItem = Item.imageItem + {-| Displays a selection. This should be combined with Widget.selectItem -} selectItem : Palette -> ItemStyle (ButtonStyle msg) msg selectItem = Item.selectItem + + {------------------------------------------------------------------------------- -- D I A L O G -------------------------------------------------------------------------------}