added MulitLineItem

This commit is contained in:
Lucas Payr 2021-01-25 19:24:41 +01:00
parent 50083cf8e7
commit cea936f7ee
7 changed files with 217 additions and 25 deletions

View File

@ -34,6 +34,7 @@ import Widget
, HeaderStyle
, TextItemStyle
, ImageItemStyle
, MultiLineItemStyle
, ExpansionItemStyle
)
import Widget.Snackbar exposing (SnackbarStyle)
@ -64,6 +65,7 @@ style palette =
, insetHeader = Material.insetHeader palette
, fullBleedHeader = Material.fullBleedHeader palette
, textItem = Material.textItem palette
, multiLineItem = Material.multiLineItem palette
, imageItem = Material.imageItem palette
, expansionItem = Material.expansionItem Material.defaultPalette
}
@ -94,6 +96,7 @@ type alias Style msg =
, insetHeader : ItemStyle (HeaderStyle msg) msg
, fullBleedHeader : ItemStyle (HeaderStyle msg) msg
, textItem : ItemStyle (TextItemStyle msg) msg
, multiLineItem : ItemStyle (MultiLineItemStyle msg) msg
, imageItem : ItemStyle (ImageItemStyle msg) msg
, expansionItem : ExpansionItemStyle msg
}

View File

@ -3,7 +3,7 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Widget
import Widget exposing (ColumnStyle,SwitchStyle, DividerStyle,ExpansionItemStyle,ImageItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
import Widget exposing (ColumnStyle,SwitchStyle, DividerStyle,ExpansionItemStyle,MultiLineItemStyle,ImageItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
import Widget.Style.Material as Material
import FeatherIcons
import Widget.Icon as Icon
@ -22,6 +22,7 @@ type alias Style style msg =
, imageItem : ItemStyle (ImageItemStyle msg) msg
, expansionItem : ExpansionItemStyle msg
, switch : SwitchStyle msg
, multiLineItem : ItemStyle (MultiLineItemStyle msg) msg
}
@ -37,6 +38,7 @@ materialStyle =
, imageItem = Material.imageItem Material.defaultPalette
, expansionItem = Material.expansionItem Material.defaultPalette
, switch = Material.switch Material.defaultPalette
, multiLineItem = Material.multiLineItem Material.defaultPalette
}
@ -118,11 +120,16 @@ view msgMapper style (IsExpanded isExpanded) =
,Font.size size
]
}
, Widget.textItem style.textItem
{ onPress = Nothing
, icon =
FeatherIcons.triangle
|> Icon.elmFeather FeatherIcons.toHtml
, Widget.multiLineItem style.multiLineItem
{ title = "Item"
, text = "Description"
, onPress = Nothing
, icon = always Element.none
, content = always Element.none
}
, Widget.imageItem style.imageItem
{ onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
, image = Element.none
, text = "Clickable Item with Switch"
, content = \{size,color} ->
Widget.switch style.switch

View File

@ -1,4 +1,4 @@
module Internal.Item exposing (DividerStyle, HeaderStyle, ImageItemStyle, ImageItem, imageItem, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
module Internal.Item exposing (DividerStyle, HeaderStyle, ImageItemStyle, ImageItem, MultiLineItemStyle,multiLineItem,imageItem, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
import Element exposing (Attribute, Element)
import Element.Input as Input
@ -43,6 +43,29 @@ type alias TextItemStyle msg =
}
}
type alias MultiLineItemStyle msg =
{ elementButton : List (Attribute msg)
, ifDisabled : List (Attribute msg)
, otherwise : List (Attribute msg)
, content :
{ elementRow : List (Attribute msg)
, content :
{ description :
{ elementColumn : List (Attribute msg)
, content :
{ title : {elementText : List (Attribute msg)}
, text : {elementText : List (Attribute msg)}
}
}
, icon :
{ element : List (Attribute msg)
, content : IconStyle
}
, content : IconStyle
}
}
}
type alias ImageItemStyle msg =
{ elementButton : List (Attribute msg)
, ifDisabled : List (Attribute msg)
@ -57,6 +80,12 @@ type alias ImageItemStyle msg =
}
}
type alias ExpansionItemStyle msg =
{ item : ItemStyle (TextItemStyle msg) msg
, expandIcon : Icon msg
, collapseIcon : Icon msg
}
type alias Item msg =
List (Attribute msg) -> Element msg
@ -75,6 +104,22 @@ type alias ImageItem msg =
, content : Icon msg
}
type alias ExpansionItem msg =
{ icon : Icon msg
, text : String
, onToggle : Bool -> msg
, content : List (Item msg)
, isExpanded : Bool
}
type alias MultiLineItem msg =
{ title : String
, text : String
, onPress : Maybe msg
, icon : Icon msg
, content : Icon msg
}
item : Element msg -> Item msg
item element =
toItem
@ -153,19 +198,6 @@ imageItem s { onPress, text, image, content } =
}
)
type alias ExpansionItemStyle msg =
{ item : ItemStyle (TextItemStyle msg) msg
, expandIcon : Icon msg
, collapseIcon : Icon msg
}
type alias ExpansionItem msg =
{ icon : Icon msg
, text : String
, onToggle : Bool -> msg
, content : List (Item msg)
, isExpanded : Bool
}
expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
@ -184,6 +216,36 @@ expansionItem s { icon, text,onToggle,content,isExpanded} =
)
:: (if isExpanded then content else [])
multiLineItem : ItemStyle (MultiLineItemStyle msg) msg -> MultiLineItem msg -> Item msg
multiLineItem s { onPress, title,text, icon, content } =
toItem s
(\style ->
Input.button (style.elementButton ++ (if onPress == Nothing then
style.ifDisabled
else
style.otherwise
))
{ onPress = onPress
, label =
[ icon style.content.content.icon.content
|> Element.el style.content.content.icon.element
, [ title
|> Element.text
|> List.singleton
|> Element.paragraph style.content.content.description.content.title.elementText
, text
|> Element.text
|> List.singleton
|> Element.paragraph style.content.content.description.content.text.elementText
]
|> Element.column style.content.content.description.elementColumn
, content style.content.content.content
]
|> Element.row style.content.elementRow
}
)
toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg
toItem style element =
\attr ->

View File

@ -7,6 +7,7 @@ module Internal.Material.Item exposing
, middleDivider
, textItem
, imageItem
, multiLineItem
)
import Color
@ -15,7 +16,7 @@ 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, ImageItemStyle , ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
import Internal.Item exposing (DividerStyle,MultiLineItemStyle, ImageItemStyle , ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
import Internal.Material.Icon as Icon
import Internal.Material.Palette exposing (Palette)
import Svg
@ -238,6 +239,75 @@ textItem _ =
}
}
multiLineItem : Palette -> ItemStyle ( MultiLineItemStyle msg) msg
multiLineItem _ =
{ element = [ Element.padding 0 ]
, content =
{ elementButton =
[ Element.width Element.fill
, Element.padding 16
]
, ifDisabled =
[ Element.mouseDown []
, Element.mouseOver []
, Element.focused []
, Element.htmlAttribute <| Attributes.style "cursor" "default"
]
, otherwise =
[ Element.mouseDown <|
[ MaterialColor.gray
|> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.focused <|
[ MaterialColor.gray
|> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.mouseOver <|
[ MaterialColor.gray
|> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor
|> Background.color
]
]
, content =
{ elementRow = [ Element.spacing 16, Element.width Element.fill ]
, content =
{ description =
{ elementColumn = [ Element.width Element.fill
, Element.spacing 4
]
, content =
{ title = {elementText = Typography.body1}
, text = {elementText = Typography.body2
++ [MaterialColor.gray
|> MaterialColor.fromColor
|> Font.color]}
}
}
, icon =
{ element =
[ Element.width <| Element.px 40
, Element.height <| Element.px 24
]
, content =
{ size = 24
, color = MaterialColor.gray
}
}
, content =
{ size = 24
, color = MaterialColor.gray
}
}
}
}
}
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
imageItem _ =
{ element = [ Element.padding 0 ]

View File

@ -23,6 +23,8 @@ switch palette =
{ element =
[ Element.height <| Element.px 14
, Element.width <| Element.px 34
, Element.centerY
, Element.centerX
, Border.rounded <| 10
]
, ifDisabled =

View File

@ -12,6 +12,7 @@ module Widget exposing
, TabStyle, Tab, tab
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator, imageItem
, ImageItemStyle
, MultiLineItemStyle,multiLineItem
)
{-| This module contains different stateless view functions. No wiring required.
@ -97,7 +98,7 @@ You can create you own widgets by sticking widgets types together.
## Item
@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle,ImageItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem,imageItem, expansionItem
@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle,ImageItemStyle, ExpansionItemStyle,MultiLineItemStyle,Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem,imageItem, expansionItem,multiLineItem
# Sort Table
@ -603,6 +604,30 @@ type alias TextItemStyle msg =
}
}
{-| -}
type alias MultiLineItemStyle msg =
{ elementButton : List (Attribute msg)
, ifDisabled : List (Attribute msg)
, otherwise : List (Attribute msg)
, content :
{ elementRow : List (Attribute msg)
, content :
{ description :
{ elementColumn : List (Attribute msg)
, content :
{ title : {elementText : List (Attribute msg)}
, text : {elementText : List (Attribute msg)}
}
}
, icon :
{ element : List (Attribute msg)
, content : IconStyle
}
, content : IconStyle
}
}
}
{-| -}
type alias ImageItemStyle msg =
{ elementButton : List (Attribute msg)
@ -633,6 +658,15 @@ type alias TextItem msg =
, content : Icon msg
}
{-| -}
type alias MultiLineItem msg =
{ title : String
, text : String
, onPress : Maybe msg
, icon : Icon msg
, content : Icon msg
}
{-| -}
type alias ImageItem msg =
{ text : String
@ -692,6 +726,16 @@ textItem : ItemStyle (TextItemStyle msg) msg
textItem =
Item.textItem
multiLineItem : ItemStyle (MultiLineItemStyle msg) msg
-> { title : String
, text : String
, onPress : Maybe msg
, icon : Icon msg
, content : Icon msg
} -> Item msg
multiLineItem =
Item.multiLineItem
{-| A clickable item that contains a image , a line of text and some additonal information
-}
imageItem : ItemStyle (ImageItemStyle msg) msg

View File

@ -12,7 +12,7 @@ module Widget.Style.Material exposing
, sortTable
, snackbar
, tab, tabButton
, layout
, layout, multiLineItem
)
{-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@ -85,7 +85,7 @@ The [List widget](https://material.io/components/lists) is a very complex widget
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,imageItem, expansionItem
@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem,multiLineItem,imageItem, expansionItem
# Progress Indicator
@ -123,7 +123,7 @@ 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,ImageItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
import Internal.Item exposing (DividerStyle, ExpansionItemStyle,ImageItemStyle, HeaderStyle, ItemStyle, TextItemStyle,MultiLineItemStyle)
import Internal.List exposing (ColumnStyle, RowStyle)
import Internal.Material.Button as Button
import Internal.Material.Chip as Chip
@ -402,6 +402,10 @@ textItem : Palette -> ItemStyle (TextItemStyle msg) msg
textItem =
Item.textItem
multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
multiLineItem =
Item.multiLineItem
{-| Similar to a textItem but with an image instead of the icon.
If the image is bigger then 40x40, the size of the item will change.