mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
added MulitLineItem
This commit is contained in:
parent
50083cf8e7
commit
cea936f7ee
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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 ->
|
||||
|
@ -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 ]
|
||||
|
@ -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 =
|
||||
|
@ -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
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user