mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-08-16 09:50:23 +03:00
fixed iconButton.
This commit is contained in:
parent
cea936f7ee
commit
d0a4d01995
1
elm.json
1
elm.json
@ -6,7 +6,6 @@
|
||||
"version": "2.3.0",
|
||||
"exposed-modules": [
|
||||
"Widget",
|
||||
"Widget.Style",
|
||||
"Widget.Style.Material",
|
||||
"Widget.Style.Material.Typography",
|
||||
"Widget.Style.Material.Color",
|
||||
|
@ -41,7 +41,11 @@
|
||||
}
|
||||
},
|
||||
"test-dependencies": {
|
||||
"direct": {},
|
||||
"indirect": {}
|
||||
"direct": {
|
||||
"elm-explorations/test": "1.2.2"
|
||||
},
|
||||
"indirect": {
|
||||
"elm/random": "1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -540,10 +540,13 @@ view msgMapper style model =
|
||||
Icon.view (Icon >> msgMapper) style (.icon model)
|
||||
}
|
||||
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
-- DO NOT CHANGE ANYTHING AFTER THIS
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
|
||||
toCardList :
|
||||
{ idle : msg
|
||||
, msgMapper : Msg -> msg
|
||||
@ -590,9 +593,6 @@ toCardList { idle, msgMapper, style, model } =
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
updateField :
|
||||
(UpgradeCollection -> UpgradeRecord model msg)
|
||||
-> msg
|
||||
|
@ -1,4 +1,4 @@
|
||||
module Data.Style exposing (Style,style)
|
||||
module Data.Style exposing (Style, style)
|
||||
|
||||
import Color exposing (Color)
|
||||
import Color.Accessibility as Accessibility
|
||||
@ -10,41 +10,38 @@ import Element.Font as Font
|
||||
import FeatherIcons
|
||||
import Html.Attributes as Attributes
|
||||
import Icons
|
||||
import Widget.Icon as Icon
|
||||
import Widget
|
||||
exposing
|
||||
( ButtonStyle
|
||||
, ColumnStyle
|
||||
, DialogStyle
|
||||
, RowStyle
|
||||
, SortTableStyle
|
||||
, TabStyle
|
||||
, TextInputStyle
|
||||
, ButtonStyle
|
||||
, ColumnStyle
|
||||
, DialogStyle
|
||||
, DividerStyle
|
||||
, ExpansionItemStyle
|
||||
, HeaderStyle
|
||||
, ImageItemStyle
|
||||
, ItemStyle
|
||||
, MultiLineItemStyle
|
||||
, ProgressIndicatorStyle
|
||||
, RowStyle
|
||||
, SortTableStyle
|
||||
, SwitchStyle
|
||||
, TabStyle
|
||||
, TextInputStyle
|
||||
, HeaderStyle
|
||||
, TextItemStyle
|
||||
, ImageItemStyle
|
||||
, MultiLineItemStyle
|
||||
, ExpansionItemStyle
|
||||
)
|
||||
import Widget.Snackbar exposing (SnackbarStyle)
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Layout exposing (LayoutStyle)
|
||||
import Widget.Snackbar exposing (SnackbarStyle)
|
||||
import Widget.Style.Material as Material exposing (Palette)
|
||||
|
||||
|
||||
style : Palette -> Style msg
|
||||
style palette =
|
||||
{ sortTable = Material.sortTable palette
|
||||
{ containedButton = Material.containedButton Material.defaultPalette
|
||||
, outlinedButton = Material.outlinedButton Material.defaultPalette
|
||||
, textButton = Material.textButton Material.defaultPalette
|
||||
, iconButton = Material.iconButton Material.defaultPalette
|
||||
, sortTable = Material.sortTable palette
|
||||
, row = Material.row
|
||||
, buttonRow = Material.buttonRow
|
||||
, cardColumn = Material.cardColumn palette
|
||||
@ -71,11 +68,12 @@ style palette =
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
type alias Style msg =
|
||||
{ dialog : DialogStyle msg
|
||||
{ containedButton : ButtonStyle msg
|
||||
, outlinedButton : ButtonStyle msg
|
||||
, textButton : ButtonStyle msg
|
||||
, iconButton : ButtonStyle msg
|
||||
, dialog : DialogStyle msg
|
||||
, button : ButtonStyle msg
|
||||
, switch : SwitchStyle msg
|
||||
, primaryButton : ButtonStyle msg
|
||||
|
@ -1,7 +1,6 @@
|
||||
module Data.Theme exposing (Theme(..), toStyle)
|
||||
|
||||
import Data.Style as Style exposing (Style)
|
||||
import Data.Style
|
||||
import Widget.Style.Material exposing (Palette)
|
||||
|
||||
|
||||
|
@ -2,49 +2,78 @@ module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import FeatherIcons
|
||||
import Widget
|
||||
import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Material.Icons as MaterialIcons
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
|
||||
import Widget.Icon as Icon
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Style.Customize as Customize
|
||||
import Widget.Style.Material as Material
|
||||
import Widget.Style.Material.Color as MaterialColor
|
||||
import Widget.Style.Material.Typography as Typography
|
||||
|
||||
|
||||
type alias Style style msg =
|
||||
{ style
|
||||
| primaryButton : ButtonStyle msg
|
||||
, button : ButtonStyle msg
|
||||
| containedButton : ButtonStyle msg
|
||||
, outlinedButton : ButtonStyle msg
|
||||
, textButton : ButtonStyle msg
|
||||
, iconButton : ButtonStyle msg
|
||||
, row : RowStyle msg
|
||||
, column : ColumnStyle msg
|
||||
, cardColumn : ColumnStyle msg
|
||||
}
|
||||
|
||||
|
||||
materialStyle : Style {} msg
|
||||
materialStyle =
|
||||
{ primaryButton = Material.containedButton Material.defaultPalette
|
||||
, button = Material.outlinedButton Material.defaultPalette
|
||||
{ containedButton = Material.containedButton Material.defaultPalette
|
||||
, outlinedButton = Material.outlinedButton Material.defaultPalette
|
||||
, textButton = Material.textButton Material.defaultPalette
|
||||
, iconButton = Material.iconButton Material.defaultPalette
|
||||
, row = Material.row
|
||||
, column = Material.column
|
||||
, cardColumn = Material.cardColumn Material.defaultPalette
|
||||
}
|
||||
|
||||
|
||||
type Model
|
||||
= IsButtonEnabled Bool
|
||||
type alias Model =
|
||||
Int
|
||||
|
||||
|
||||
type Msg
|
||||
= ChangedButtonStatus Bool
|
||||
= Increase Int
|
||||
| Decrease Int
|
||||
| Reset
|
||||
|
||||
|
||||
init : ( Model, Cmd Msg )
|
||||
init =
|
||||
( IsButtonEnabled True
|
||||
( 0
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg _ =
|
||||
update msg model =
|
||||
case msg of
|
||||
ChangedButtonStatus bool ->
|
||||
( IsButtonEnabled bool
|
||||
Increase int ->
|
||||
( model + int
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
Decrease int ->
|
||||
( if (model - int) >= 0 then
|
||||
model - int
|
||||
|
||||
else
|
||||
model
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
Reset ->
|
||||
( 0
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
@ -57,33 +86,91 @@ subscriptions _ =
|
||||
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
|
||||
-}
|
||||
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
|
||||
view msgMapper style (IsButtonEnabled isButtonEnabled) =
|
||||
[ Widget.button style.primaryButton
|
||||
{ text = "disable me"
|
||||
, icon =
|
||||
FeatherIcons.slash
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
, onPress =
|
||||
if isButtonEnabled then
|
||||
ChangedButtonStatus False
|
||||
view msgMapper style model =
|
||||
[ model
|
||||
|> String.fromInt
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
(Typography.h4
|
||||
++ [ Element.centerX, Element.centerY ]
|
||||
)
|
||||
|> List.singleton
|
||||
|> Widget.column
|
||||
(style.cardColumn
|
||||
|> Customize.elementColumn
|
||||
[ Element.centerX
|
||||
, Element.width <| Element.px 128
|
||||
, Element.height <| Element.px 128
|
||||
, Widget.iconButton style.iconButton
|
||||
{ text = "+2"
|
||||
, icon =
|
||||
MaterialIcons.exposure_plus_2
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, onPress =
|
||||
Increase 2
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
|> Element.el [ Element.alignRight ]
|
||||
|> Element.inFront
|
||||
]
|
||||
|> Customize.mapContent
|
||||
(Customize.element
|
||||
[ Element.width <| Element.px 128
|
||||
, Element.height <| Element.px 128
|
||||
, Material.defaultPalette.secondary
|
||||
|> MaterialColor.fromColor
|
||||
|> Background.color
|
||||
]
|
||||
)
|
||||
)
|
||||
, [ [ Widget.textButton style.textButton
|
||||
{ text = "Reset"
|
||||
, onPress =
|
||||
Reset
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
, Widget.button style.outlinedButton
|
||||
{ text = "Decrease"
|
||||
, icon =
|
||||
MaterialIcons.remove
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, onPress =
|
||||
if model > 0 then
|
||||
Decrease 1
|
||||
|> msgMapper
|
||||
|> Just
|
||||
|
||||
else
|
||||
Nothing
|
||||
}
|
||||
, Widget.iconButton style.button
|
||||
{ text = "reset"
|
||||
, icon =
|
||||
FeatherIcons.repeat
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
, onPress =
|
||||
ChangedButtonStatus True
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
else
|
||||
Nothing
|
||||
}
|
||||
]
|
||||
|> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ])
|
||||
, [ Widget.button style.containedButton
|
||||
{ text = "Increase"
|
||||
, icon =
|
||||
MaterialIcons.add
|
||||
|> Icon.elmMaterialIcons Color
|
||||
, onPress =
|
||||
Increase 1
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
]
|
||||
|> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ])
|
||||
]
|
||||
|> Widget.row
|
||||
(style.row
|
||||
|> Customize.elementRow [ Element.width <| Element.fill ]
|
||||
|> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
|
||||
)
|
||||
]
|
||||
|> Widget.row style.row
|
||||
|> Widget.column
|
||||
(style.column
|
||||
|> Customize.elementColumn [ Element.width <| Element.fill ]
|
||||
|> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
|
||||
)
|
||||
|
||||
|
||||
main : Program () Model Msg
|
||||
|
@ -3,9 +3,8 @@ module Example.Dialog exposing (Model, Msg, init, subscriptions, update, view)
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import FeatherIcons
|
||||
import Widget
|
||||
import Widget.Icon as Icon
|
||||
import Widget exposing (ButtonStyle, DialogStyle)
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
||||
|
@ -13,9 +13,8 @@ import Material.Icons exposing (offline_bolt)
|
||||
import Material.Icons.Action
|
||||
import Material.Icons.Types exposing (Coloring(..))
|
||||
import Octicons
|
||||
import Widget
|
||||
import Widget.Icon exposing (Icon)
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Icon exposing (Icon)
|
||||
import Widget.Style.Material as Material
|
||||
import Zondicons
|
||||
|
||||
@ -73,31 +72,49 @@ view msgMapper style () =
|
||||
|> Element.text
|
||||
|> List.singleton
|
||||
|> Element.paragraph []
|
||||
, [ (Material.Icons.done
|
||||
|> Widget.Icon.elmMaterialIcons Color,"elm-material-icons")
|
||||
, (Material.Icons.Action.done
|
||||
|> Widget.Icon.materialIcons, "material-icons")
|
||||
, (FeatherIcons.check
|
||||
|> Widget.Icon.elmFeather FeatherIcons.toHtml,"elm-feather")
|
||||
, (FontAwesome.Solid.check
|
||||
|> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon,"elm-fontawesome")
|
||||
, (Ionicon.checkmark
|
||||
|> Widget.Icon.elmIonicons,"elm-ionicons")
|
||||
, (Octicons.check
|
||||
, [ ( Material.Icons.done
|
||||
|> Widget.Icon.elmMaterialIcons Color
|
||||
, "elm-material-icons"
|
||||
)
|
||||
, ( Material.Icons.Action.done
|
||||
|> Widget.Icon.materialIcons
|
||||
, "material-icons"
|
||||
)
|
||||
, ( FeatherIcons.check
|
||||
|> Widget.Icon.elmFeather FeatherIcons.toHtml
|
||||
, "elm-feather"
|
||||
)
|
||||
, ( FontAwesome.Solid.check
|
||||
|> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
|
||||
, "elm-fontawesome"
|
||||
)
|
||||
, ( Ionicon.checkmark
|
||||
|> Widget.Icon.elmIonicons
|
||||
, "elm-ionicons"
|
||||
)
|
||||
, ( Octicons.check
|
||||
|> Widget.Icon.elmOcticons
|
||||
{ withSize = Octicons.size
|
||||
, withColor = Octicons.color
|
||||
, defaultOptions = Octicons.defaultOptions
|
||||
},"elm-octicons")
|
||||
, (Heroicons.Solid.check
|
||||
|> Widget.Icon.elmHeroicons,"elm-heroicons")
|
||||
, (Ant.Icons.Svg.checkOutlined
|
||||
|> Widget.Icon.antDesignIconsElm,"ant-design-icons-elm")
|
||||
,( Zondicons.checkmark
|
||||
|> Widget.Icon.elmZondicons,"elm-zondicons")
|
||||
}
|
||||
, "elm-octicons"
|
||||
)
|
||||
, ( Heroicons.Solid.check
|
||||
|> Widget.Icon.elmHeroicons
|
||||
, "elm-heroicons"
|
||||
)
|
||||
, ( Ant.Icons.Svg.checkOutlined
|
||||
|> Widget.Icon.antDesignIconsElm
|
||||
, "ant-design-icons-elm"
|
||||
)
|
||||
, ( Zondicons.checkmark
|
||||
|> Widget.Icon.elmZondicons
|
||||
, "elm-zondicons"
|
||||
)
|
||||
]
|
||||
|> List.map
|
||||
(\(icon,text) ->
|
||||
(\( icon, text ) ->
|
||||
Widget.button style.primaryButton
|
||||
{ text = text
|
||||
, icon = icon
|
||||
|
@ -2,14 +2,14 @@ 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,MultiLineItemStyle,ImageItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
|
||||
import Widget.Style.Material as Material
|
||||
import FeatherIcons
|
||||
import Widget.Icon as Icon
|
||||
import Element.Font as Font
|
||||
import FeatherIcons
|
||||
import Widget exposing (ColumnStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, TextItemStyle)
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Style.Material as Material
|
||||
import Widget.Style.Material.Color as MaterialColor
|
||||
|
||||
|
||||
type alias Style style msg =
|
||||
{ style
|
||||
| cardColumn : ColumnStyle msg
|
||||
@ -65,11 +65,11 @@ update msg _ =
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions _ =
|
||||
Sub.none
|
||||
|
||||
|
||||
|
||||
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
|
||||
-}
|
||||
@ -79,93 +79,98 @@ view msgMapper style (IsExpanded isExpanded) =
|
||||
|> Widget.headerItem style.fullBleedHeader
|
||||
, Widget.item <| Element.text <| "Custom Item"
|
||||
, Widget.divider style.middleDivider
|
||||
, Widget.item <| Element.el [Element.centerY ] <| Element.text <| "Custom Item (centered)"
|
||||
, Widget.item <| Element.el [ Element.centerY ] <| Element.text <| "Custom Item (centered)"
|
||||
, "Section 2"
|
||||
|> Widget.headerItem style.fullBleedHeader
|
||||
, Widget.textItem style.textItem
|
||||
{ onPress = Nothing
|
||||
, icon =
|
||||
, icon =
|
||||
FeatherIcons.triangle
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
, text = "Item with Icon"
|
||||
, content = \{size,color} ->
|
||||
Element.none
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
Element.none
|
||||
}
|
||||
, Widget.imageItem style.imageItem
|
||||
{ onPress = Nothing
|
||||
, image = Element.image [Element.width <| Element.px <| 40, Element.height <| Element.px <| 40]
|
||||
{ src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
|
||||
, description = "Elm logo"
|
||||
}
|
||||
, image =
|
||||
Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]
|
||||
{ src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
|
||||
, description = "Elm logo"
|
||||
}
|
||||
, text = "Item with Image"
|
||||
, content = \{size,color} ->
|
||||
"1."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[Font.color <| MaterialColor.fromColor color
|
||||
,Font.size size
|
||||
]
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
"1."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
, Widget.divider style.insetDivider
|
||||
, Widget.textItem style.textItem
|
||||
{ onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
|
||||
{ onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just
|
||||
, icon = always Element.none
|
||||
, text = "Click Me"
|
||||
, content =
|
||||
\{size,color} ->
|
||||
"2."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[Font.color <| MaterialColor.fromColor color
|
||||
,Font.size size
|
||||
]
|
||||
\{ size, color } ->
|
||||
"2."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
, Widget.multiLineItem style.multiLineItem
|
||||
{ title = "Item"
|
||||
, text = "Description"
|
||||
, text = "Description. Description. Description. Description. Description. Description. Description. Description. Description. Description."
|
||||
, onPress = Nothing
|
||||
, icon = always Element.none
|
||||
, content = always Element.none
|
||||
}
|
||||
, Widget.imageItem style.imageItem
|
||||
{ onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
|
||||
{ onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just
|
||||
, image = Element.none
|
||||
, text = "Clickable Item with Switch"
|
||||
, content = \{size,color} ->
|
||||
Widget.switch style.switch
|
||||
{ description = "Click Me"
|
||||
, active = isExpanded
|
||||
, onPress =
|
||||
not isExpanded
|
||||
|> ToggleCollapsable
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
Widget.switch style.switch
|
||||
{ description = "Click Me"
|
||||
, active = isExpanded
|
||||
, onPress =
|
||||
not isExpanded
|
||||
|> ToggleCollapsable
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
}
|
||||
, Widget.divider style.fullBleedDivider
|
||||
]++ (Widget.expansionItem style.expansionItem
|
||||
{ onToggle = ToggleCollapsable >> msgMapper
|
||||
, isExpanded = isExpanded
|
||||
, icon = always Element.none
|
||||
, text = "Expandable Item"
|
||||
, content =
|
||||
[ "Section 3"
|
||||
|> Widget.headerItem style.insetHeader
|
||||
, Widget.textItem style.textItem
|
||||
{ onPress = Nothing
|
||||
, icon = always Element.none
|
||||
, text = "Item"
|
||||
, content =
|
||||
\{size,color} ->
|
||||
"3."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[Font.color <| MaterialColor.fromColor color
|
||||
,Font.size size
|
||||
]
|
||||
++ Widget.expansionItem style.expansionItem
|
||||
{ onToggle = ToggleCollapsable >> msgMapper
|
||||
, isExpanded = isExpanded
|
||||
, icon = always Element.none
|
||||
, text = "Expandable Item"
|
||||
, content =
|
||||
[ "Section 3"
|
||||
|> Widget.headerItem style.insetHeader
|
||||
, Widget.textItem style.textItem
|
||||
{ onPress = Nothing
|
||||
, icon = always Element.none
|
||||
, text = "Item"
|
||||
, content =
|
||||
\{ size, color } ->
|
||||
"3."
|
||||
|> Element.text
|
||||
|> Element.el
|
||||
[ Font.color <| MaterialColor.fromColor color
|
||||
, Font.size size
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|> Widget.itemList style.cardColumn
|
||||
|
||||
|
||||
|
@ -3,9 +3,8 @@ module Example.Modal exposing (Model, Msg, init, subscriptions, update, view)
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import FeatherIcons
|
||||
import Widget
|
||||
import Widget.Icon as Icon
|
||||
import Widget exposing (ButtonStyle, ColumnStyle)
|
||||
import Widget.Icon as Icon
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
||||
|
@ -3,7 +3,6 @@ module Example.MultiSelect exposing (Model, Msg, init, subscriptions, update, vi
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Set exposing (Set)
|
||||
import Widget
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -2,7 +2,6 @@ module Example.ProgressIndicator exposing (Model, Msg, init, subscriptions, upda
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Widget
|
||||
import Widget exposing (ProgressIndicatorStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -2,7 +2,6 @@ module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Widget
|
||||
import Widget exposing (ButtonStyle, RowStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -4,9 +4,8 @@ import Browser
|
||||
import Element exposing (Element)
|
||||
import FeatherIcons
|
||||
import Time
|
||||
import Widget
|
||||
import Widget.Snackbar as Snackbar exposing (Snackbar)
|
||||
import Widget exposing (ButtonStyle, ColumnStyle, RowStyle, SnackbarStyle)
|
||||
import Widget.Snackbar as Snackbar exposing (Snackbar)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
||||
|
@ -2,7 +2,6 @@ module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Widget
|
||||
import Widget exposing (SortTableStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -3,7 +3,6 @@ module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import FeatherIcons
|
||||
import Widget
|
||||
import Widget exposing (RowStyle, SwitchStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -2,7 +2,6 @@ module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
|
||||
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Widget
|
||||
import Widget exposing (TabStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -3,7 +3,6 @@ module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Set exposing (Set)
|
||||
import Widget
|
||||
import Widget exposing (ColumnStyle, TextInputStyle)
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
|
@ -439,36 +439,36 @@ viewLoaded m =
|
||||
|
||||
else
|
||||
[ Widget.divider style.fullBleedDivider
|
||||
] ++ Widget.expansionItem style.expansionItem
|
||||
{ onToggle =
|
||||
always
|
||||
(name
|
||||
|> Example.fromString
|
||||
|> Maybe.map ToggledExample
|
||||
|> Maybe.withDefault Idle
|
||||
)
|
||||
, icon = always Element.none
|
||||
, text =
|
||||
"States"
|
||||
, content =
|
||||
Element.column
|
||||
(Grid.simple
|
||||
++ [ Element.width <| Element.fill ]
|
||||
)
|
||||
more
|
||||
|> Widget.item
|
||||
|> List.singleton
|
||||
, isExpanded =
|
||||
name
|
||||
|> Example.fromString
|
||||
|> Maybe.map
|
||||
(\example ->
|
||||
m.expanded
|
||||
|> AnySet.member example
|
||||
]
|
||||
++ Widget.expansionItem style.expansionItem
|
||||
{ onToggle =
|
||||
always
|
||||
(name
|
||||
|> Example.fromString
|
||||
|> Maybe.map ToggledExample
|
||||
|> Maybe.withDefault Idle
|
||||
)
|
||||
|> Maybe.withDefault False
|
||||
}
|
||||
|
||||
, icon = always Element.none
|
||||
, text =
|
||||
"States"
|
||||
, content =
|
||||
Element.column
|
||||
(Grid.simple
|
||||
++ [ Element.width <| Element.fill ]
|
||||
)
|
||||
more
|
||||
|> Widget.item
|
||||
|> List.singleton
|
||||
, isExpanded =
|
||||
name
|
||||
|> Example.fromString
|
||||
|> Maybe.map
|
||||
(\example ->
|
||||
m.expanded
|
||||
|> AnySet.member example
|
||||
)
|
||||
|> Maybe.withDefault False
|
||||
}
|
||||
)
|
||||
)
|
||||
|> Widget.itemList style.cardColumn
|
||||
|
@ -276,7 +276,6 @@ multiSelect idle style =
|
||||
]
|
||||
|
||||
|
||||
|
||||
tab : msg -> Style msg -> List ( String, Element msg )
|
||||
tab idle style =
|
||||
[ ( "Nothing selected"
|
||||
@ -501,18 +500,25 @@ list _ style =
|
||||
|> Widget.row style.row
|
||||
)
|
||||
, ( "Column"
|
||||
, [ Element.text "A"
|
||||
, Element.text "B"
|
||||
, Element.text "C"
|
||||
]
|
||||
|> Widget.column style.column
|
||||
)
|
||||
, ( "Column as Card"
|
||||
, [ Element.text "A"
|
||||
, Element.text "B"
|
||||
, Element.text "C"
|
||||
]
|
||||
|> Widget.column style.cardColumn
|
||||
)
|
||||
, ( "Singleton List"
|
||||
, ( "Singleton List as Card"
|
||||
, [ Element.text "A"
|
||||
]
|
||||
|> Widget.column style.cardColumn
|
||||
)
|
||||
, ( "Empty List"
|
||||
, ( "Empty List as Card"
|
||||
, []
|
||||
|> Widget.column style.cardColumn
|
||||
)
|
||||
|
10
example/tests/Example.elm
Normal file
10
example/tests/Example.elm
Normal file
@ -0,0 +1,10 @@
|
||||
module Example exposing (..)
|
||||
|
||||
import Expect exposing (Expectation)
|
||||
import Fuzz exposing (Fuzzer, int, list, string)
|
||||
import Test exposing (..)
|
||||
|
||||
|
||||
suite : Test
|
||||
suite =
|
||||
todo "Implement our first test. See https://package.elm-lang.org/packages/elm-explorations/test/latest for how to do this!"
|
@ -30,9 +30,9 @@ type alias ExpansionPanelStyle msg =
|
||||
, icon : IconStyle
|
||||
}
|
||||
}
|
||||
, content : {element : List (Attribute msg)}
|
||||
}
|
||||
, content : { element : List (Attribute msg) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type alias ExpansionPanel msg =
|
||||
@ -62,12 +62,12 @@ expansionPanel style model =
|
||||
|> Element.el style.content.panel.content.label.content.text.elementText
|
||||
]
|
||||
, if model.isExpanded then
|
||||
style.content.panel.content.collapseIcon
|
||||
style.content.panel.content.icon
|
||||
style.content.panel.content.collapseIcon
|
||||
style.content.panel.content.icon
|
||||
|
||||
else
|
||||
style.content.panel.content.expandIcon
|
||||
style.content.panel.content.icon
|
||||
else
|
||||
style.content.panel.content.expandIcon
|
||||
style.content.panel.content.icon
|
||||
]
|
||||
, if model.isExpanded then
|
||||
Element.el style.content.content.element <| model.content
|
||||
|
@ -1,4 +1,4 @@
|
||||
module Internal.Item exposing (DividerStyle, HeaderStyle, ImageItemStyle, ImageItem, MultiLineItemStyle,multiLineItem,imageItem, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
|
||||
module Internal.Item exposing (DividerStyle, ExpansionItem, ExpansionItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, TextItem, TextItemStyle, divider, expansionItem, headerItem, imageItem, item, multiLineItem, textItem, toItem)
|
||||
|
||||
import Element exposing (Attribute, Element)
|
||||
import Element.Input as Input
|
||||
@ -34,7 +34,7 @@ type alias TextItemStyle msg =
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ text : { elementText : List (Attribute msg) }
|
||||
, icon :
|
||||
, icon :
|
||||
{ element : List (Attribute msg)
|
||||
, content : IconStyle
|
||||
}
|
||||
@ -43,6 +43,7 @@ type alias TextItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type alias MultiLineItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
@ -50,14 +51,14 @@ type alias MultiLineItemStyle msg =
|
||||
, content :
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ description :
|
||||
{ elementColumn : List (Attribute msg)
|
||||
{ description :
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ title : {elementText : List (Attribute msg)}
|
||||
, text : {elementText : List (Attribute msg)}
|
||||
{ title : { elementText : List (Attribute msg) }
|
||||
, text : { elementText : List (Attribute msg) }
|
||||
}
|
||||
}
|
||||
, icon :
|
||||
, icon :
|
||||
{ element : List (Attribute msg)
|
||||
, content : IconStyle
|
||||
}
|
||||
@ -66,6 +67,7 @@ type alias MultiLineItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type alias ImageItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
@ -80,12 +82,14 @@ 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
|
||||
|
||||
@ -97,6 +101,7 @@ type alias TextItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
type alias ImageItem msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
@ -104,6 +109,7 @@ type alias ImageItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
type alias ExpansionItem msg =
|
||||
{ icon : Icon msg
|
||||
, text : String
|
||||
@ -112,6 +118,7 @@ type alias ExpansionItem msg =
|
||||
, isExpanded : Bool
|
||||
}
|
||||
|
||||
|
||||
type alias MultiLineItem msg =
|
||||
{ title : String
|
||||
, text : String
|
||||
@ -120,6 +127,7 @@ type alias MultiLineItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
item : Element msg -> Item msg
|
||||
item element =
|
||||
toItem
|
||||
@ -152,12 +160,15 @@ textItem : ItemStyle (TextItemStyle msg) msg -> TextItem msg -> Item msg
|
||||
textItem s { onPress, text, icon, content } =
|
||||
toItem s
|
||||
(\style ->
|
||||
Input.button (style.elementButton ++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
Input.button
|
||||
(style.elementButton
|
||||
++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
else
|
||||
style.otherwise
|
||||
))
|
||||
else
|
||||
style.otherwise
|
||||
)
|
||||
)
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
[ icon style.content.content.icon.content
|
||||
@ -173,19 +184,23 @@ textItem s { onPress, text, icon, content } =
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
imageItem : ItemStyle (ImageItemStyle msg) msg -> ImageItem msg -> Item msg
|
||||
imageItem s { onPress, text, image, content } =
|
||||
toItem s
|
||||
(\style ->
|
||||
Input.button (style.elementButton ++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
Input.button
|
||||
(style.elementButton
|
||||
++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
else
|
||||
style.otherwise
|
||||
))
|
||||
else
|
||||
style.otherwise
|
||||
)
|
||||
)
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
[ image
|
||||
[ image
|
||||
|> Element.el style.content.content.image.element
|
||||
, text
|
||||
|> Element.text
|
||||
@ -199,46 +214,53 @@ imageItem s { onPress, text, image, content } =
|
||||
)
|
||||
|
||||
|
||||
|
||||
expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
|
||||
expansionItem s { icon, text,onToggle,content,isExpanded} =
|
||||
(textItem s.item
|
||||
{ text = text
|
||||
expansionItem s { icon, text, onToggle, content, isExpanded } =
|
||||
textItem s.item
|
||||
{ text = text
|
||||
, onPress = Just <| onToggle <| not isExpanded
|
||||
, icon = icon
|
||||
, content =
|
||||
(if isExpanded then
|
||||
s.collapseIcon
|
||||
else
|
||||
s.expandIcon )
|
||||
|
||||
if isExpanded then
|
||||
s.collapseIcon
|
||||
|
||||
else
|
||||
s.expandIcon
|
||||
}
|
||||
)
|
||||
:: (if isExpanded then content else [])
|
||||
:: (if isExpanded then
|
||||
content
|
||||
|
||||
else
|
||||
[]
|
||||
)
|
||||
|
||||
|
||||
multiLineItem : ItemStyle (MultiLineItemStyle msg) msg -> MultiLineItem msg -> Item msg
|
||||
multiLineItem s { onPress, title,text, icon, content } =
|
||||
multiLineItem s { onPress, title, text, icon, content } =
|
||||
toItem s
|
||||
(\style ->
|
||||
Input.button (style.elementButton ++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
Input.button
|
||||
(style.elementButton
|
||||
++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
else
|
||||
style.otherwise
|
||||
))
|
||||
else
|
||||
style.otherwise
|
||||
)
|
||||
)
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
[ icon style.content.content.icon.content
|
||||
|> Element.el style.content.content.icon.element
|
||||
, [ title
|
||||
, [ title
|
||||
|> Element.text
|
||||
|> List.singleton
|
||||
|> Element.paragraph style.content.content.description.content.title.elementText
|
||||
, text
|
||||
, 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
|
||||
]
|
||||
@ -246,9 +268,10 @@ multiLineItem s { onPress, title,text, icon, content } =
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg
|
||||
toItem style element =
|
||||
\attr ->
|
||||
element style.content
|
||||
|> Element.el
|
||||
(attr ++ (style.element))
|
||||
(attr ++ style.element)
|
||||
|
@ -427,6 +427,7 @@ iconButton palette =
|
||||
{ elementButton =
|
||||
(baseButton palette |> .elementButton)
|
||||
++ [ Element.height <| Element.px 48
|
||||
, Element.width <| Element.minimum 48 <| Element.shrink
|
||||
, Border.rounded 24
|
||||
, Element.mouseDown
|
||||
[ palette.surface
|
||||
|
@ -1,13 +1,14 @@
|
||||
module Internal.Material.Icon exposing (icon,expand_less,expand_more)
|
||||
module Internal.Material.Icon exposing (expand_less, expand_more, icon)
|
||||
|
||||
import Color exposing (Color)
|
||||
import Element exposing (Element)
|
||||
import Svg exposing (Svg)
|
||||
import Svg.Attributes
|
||||
import Color exposing (Color)
|
||||
import Widget.Icon exposing (Icon)
|
||||
|
||||
icon : {viewBox:String,size:Int,color:Color} -> List (Svg msg) -> Element msg
|
||||
icon {viewBox,size,color} =
|
||||
|
||||
icon : { viewBox : String, size : Int, color : Color } -> List (Svg msg) -> Element msg
|
||||
icon { viewBox, size, color } =
|
||||
Svg.svg
|
||||
[ Svg.Attributes.height <| String.fromInt size
|
||||
, Svg.Attributes.stroke <| Color.toCssString <| color
|
||||
@ -22,15 +23,16 @@ icon {viewBox,size,color} =
|
||||
>> Element.html
|
||||
>> Element.el []
|
||||
|
||||
|
||||
expand_less : Icon msg
|
||||
expand_less { size, color } =
|
||||
icon {viewBox = "0 0 48 48"
|
||||
icon
|
||||
{ viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
, color = color
|
||||
}
|
||||
}
|
||||
[ Svg.path
|
||||
[ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z"
|
||||
|
||||
]
|
||||
[]
|
||||
]
|
||||
@ -38,13 +40,13 @@ expand_less { size, color } =
|
||||
|
||||
expand_more : Icon msg
|
||||
expand_more { size, color } =
|
||||
icon {viewBox = "0 0 48 48"
|
||||
icon
|
||||
{ viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
, color = color
|
||||
}
|
||||
}
|
||||
[ Svg.path
|
||||
[ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z"
|
||||
|
||||
]
|
||||
[]
|
||||
]
|
||||
]
|
||||
|
@ -2,12 +2,12 @@ module Internal.Material.Item exposing
|
||||
( expansionItem
|
||||
, fullBleedDivider
|
||||
, fullBleedHeader
|
||||
, imageItem
|
||||
, insetDivider
|
||||
, insetHeader
|
||||
, middleDivider
|
||||
, textItem
|
||||
, imageItem
|
||||
, multiLineItem
|
||||
, textItem
|
||||
)
|
||||
|
||||
import Color
|
||||
@ -16,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,MultiLineItemStyle, ImageItemStyle , ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
|
||||
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
|
||||
import Internal.Material.Icon as Icon
|
||||
import Internal.Material.Palette exposing (Palette)
|
||||
import Svg
|
||||
@ -25,6 +25,7 @@ import Widget.Icon exposing (Icon)
|
||||
import Widget.Style.Material.Color as MaterialColor
|
||||
import Widget.Style.Material.Typography as Typography
|
||||
|
||||
|
||||
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
fullBleedDivider _ =
|
||||
{ element =
|
||||
@ -240,7 +241,7 @@ textItem _ =
|
||||
}
|
||||
|
||||
|
||||
multiLineItem : Palette -> ItemStyle ( MultiLineItemStyle msg) msg
|
||||
multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
|
||||
multiLineItem _ =
|
||||
{ element = [ Element.padding 0 ]
|
||||
, content =
|
||||
@ -278,15 +279,20 @@ multiLineItem _ =
|
||||
{ elementRow = [ Element.spacing 16, Element.width Element.fill ]
|
||||
, content =
|
||||
{ description =
|
||||
{ elementColumn = [ Element.width Element.fill
|
||||
, Element.spacing 4
|
||||
]
|
||||
{ elementColumn =
|
||||
[ Element.width Element.fill
|
||||
, Element.spacing 4
|
||||
]
|
||||
, content =
|
||||
{ title = {elementText = Typography.body1}
|
||||
, text = {elementText = Typography.body2
|
||||
++ [MaterialColor.gray
|
||||
|> MaterialColor.fromColor
|
||||
|> Font.color]}
|
||||
{ title = { elementText = Typography.body1 }
|
||||
, text =
|
||||
{ elementText =
|
||||
Typography.body2
|
||||
++ [ MaterialColor.gray
|
||||
|> MaterialColor.fromColor
|
||||
|> Font.color
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
, icon =
|
||||
@ -308,6 +314,7 @@ multiLineItem _ =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
|
||||
imageItem _ =
|
||||
{ element = [ Element.padding 0 ]
|
||||
@ -345,8 +352,11 @@ imageItem _ =
|
||||
, content =
|
||||
{ elementRow = [ Element.spacing 16, Element.width Element.fill ]
|
||||
, content =
|
||||
{ text = { elementText = [ Element.width Element.fill
|
||||
] }
|
||||
{ text =
|
||||
{ elementText =
|
||||
[ Element.width Element.fill
|
||||
]
|
||||
}
|
||||
, image =
|
||||
{ element =
|
||||
[ Element.width <| Element.px 40
|
||||
@ -363,8 +373,6 @@ imageItem _ =
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
expansionItem : Palette -> ExpansionItemStyle msg
|
||||
expansionItem palette =
|
||||
{ item = textItem palette
|
||||
|
@ -22,10 +22,11 @@ import Widget.Style.Material.Typography as Typography
|
||||
|
||||
more_vert : Icon msg
|
||||
more_vert { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
Icon.icon
|
||||
{ viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
, color = color
|
||||
}
|
||||
}
|
||||
[ Svg.path
|
||||
[ Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"
|
||||
]
|
||||
@ -35,10 +36,11 @@ more_vert { size, color } =
|
||||
|
||||
search : Icon msg
|
||||
search { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
Icon.icon
|
||||
{ viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
, color = color
|
||||
}
|
||||
}
|
||||
[ Svg.path
|
||||
[ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"
|
||||
]
|
||||
@ -48,10 +50,11 @@ search { size, color } =
|
||||
|
||||
menu : Icon msg
|
||||
menu { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
Icon.icon
|
||||
{ viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
, color = color
|
||||
}
|
||||
}
|
||||
[ Svg.path
|
||||
[ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"
|
||||
]
|
||||
|
@ -2,9 +2,10 @@ module Internal.Material.SortTable exposing (sortTable)
|
||||
|
||||
import Element
|
||||
import Internal.Material.Button as Button
|
||||
import Internal.Material.Icon as Icon
|
||||
import Internal.Material.Palette exposing (Palette)
|
||||
import Internal.SortTable exposing (SortTableStyle)
|
||||
import Internal.Material.Icon as Icon
|
||||
|
||||
|
||||
sortTable : Palette -> SortTableStyle msg
|
||||
sortTable palette =
|
||||
|
@ -24,7 +24,7 @@ switch palette =
|
||||
[ Element.height <| Element.px 14
|
||||
, Element.width <| Element.px 34
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
, Element.centerX
|
||||
, Border.rounded <| 10
|
||||
]
|
||||
, ifDisabled =
|
||||
@ -75,7 +75,6 @@ switch palette =
|
||||
|> Background.color
|
||||
]
|
||||
, Element.alignRight
|
||||
|
||||
, Element.moveRight 8
|
||||
]
|
||||
, otherwise =
|
||||
|
126
src/Widget.elm
126
src/Widget.elm
@ -6,13 +6,18 @@ module Widget exposing
|
||||
, DialogStyle, Dialog, modal, dialog
|
||||
, RowStyle, row, buttonRow
|
||||
, ColumnStyle, column, buttonColumn
|
||||
, ItemStyle, DividerStyle, HeaderStyle, TextItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, textItem, expansionItem
|
||||
, ItemStyle, Item, item
|
||||
, TextItemStyle, TextItem, textItem
|
||||
, ExpansionItemStyle, ExpansionItem, expansionItem
|
||||
, ImageItemStyle, ImageItem, imageItem
|
||||
, MultiLineItemStyle, MultiLineItem, multiLineItem
|
||||
, HeaderStyle, headerItem
|
||||
, DividerStyle, divider
|
||||
, itemList
|
||||
, SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
|
||||
, TextInputStyle, TextInput, textInput
|
||||
, TabStyle, Tab, tab
|
||||
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator, imageItem
|
||||
, ImageItemStyle
|
||||
, MultiLineItemStyle,multiLineItem
|
||||
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
|
||||
)
|
||||
|
||||
{-| This module contains different stateless view functions. No wiring required.
|
||||
@ -78,7 +83,6 @@ You can create you own widgets by sticking widgets types together.
|
||||
@docs DialogStyle, Dialog, modal, dialog
|
||||
|
||||
|
||||
|
||||
# List
|
||||
|
||||
![List](https://orasund.github.io/elm-ui-widgets/assets/list.png)
|
||||
@ -98,7 +102,14 @@ You can create you own widgets by sticking widgets types together.
|
||||
|
||||
## Item
|
||||
|
||||
@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle,ImageItemStyle, ExpansionItemStyle,MultiLineItemStyle,Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem,imageItem, expansionItem,multiLineItem
|
||||
@docs ItemStyle, 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 itemList, buttonDrawer
|
||||
|
||||
|
||||
# Sort Table
|
||||
@ -141,11 +152,9 @@ You can create you own widgets by sticking widgets types together.
|
||||
import Color exposing (Color)
|
||||
import Element exposing (Attribute, Element, Length)
|
||||
import Element.Input exposing (Placeholder)
|
||||
import Html exposing (Html)
|
||||
import Internal.Button as Button
|
||||
import Internal.Dialog as Dialog
|
||||
import Internal.ExpansionPanel as ExpansionPanel
|
||||
import Internal.Item as Item
|
||||
import Internal.Item as Item
|
||||
import Internal.List as List
|
||||
import Internal.ProgressIndicator as ProgressIndicator
|
||||
import Internal.Select as Select
|
||||
@ -221,6 +230,18 @@ type alias TextButton msg =
|
||||
|
||||
|
||||
{-| A button containing only an icon, the text is used for screenreaders.
|
||||
|
||||
import Widget.Style.Material as Material
|
||||
|
||||
type Msg
|
||||
= Like
|
||||
|
||||
iconButton (Material.iconButton Material.defaultPalette)
|
||||
{ text = Like
|
||||
, icon = MaterialIcons.hearth |> Icon.elmMaterialIcons Color
|
||||
, onPress = Just Like
|
||||
}
|
||||
|
||||
-}
|
||||
iconButton :
|
||||
ButtonStyle msg
|
||||
@ -478,7 +499,6 @@ dialog =
|
||||
|
||||
|
||||
|
||||
|
||||
{----------------------------------------------------------
|
||||
- TEXT INPUT
|
||||
----------------------------------------------------------}
|
||||
@ -538,7 +558,7 @@ textInput =
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ItemStyle content msg=
|
||||
type alias ItemStyle content msg =
|
||||
{ element : List (Attribute msg)
|
||||
, content : content
|
||||
}
|
||||
@ -604,6 +624,7 @@ type alias TextItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias MultiLineItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
@ -612,14 +633,14 @@ type alias MultiLineItemStyle msg =
|
||||
, content :
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ description :
|
||||
{ elementColumn : List (Attribute msg)
|
||||
{ description :
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ title : {elementText : List (Attribute msg)}
|
||||
, text : {elementText : List (Attribute msg)}
|
||||
{ title : { elementText : List (Attribute msg) }
|
||||
, text : { elementText : List (Attribute msg) }
|
||||
}
|
||||
}
|
||||
, icon :
|
||||
, icon :
|
||||
{ element : List (Attribute msg)
|
||||
, content : IconStyle
|
||||
}
|
||||
@ -628,6 +649,7 @@ type alias MultiLineItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ImageItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
@ -643,6 +665,7 @@ type alias ImageItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ExpansionItemStyle msg =
|
||||
{ item : ItemStyle (TextItemStyle msg) msg
|
||||
@ -650,6 +673,7 @@ type alias ExpansionItemStyle msg =
|
||||
, collapseIcon : Icon msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias TextItem msg =
|
||||
{ text : String
|
||||
@ -658,6 +682,7 @@ type alias TextItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias MultiLineItem msg =
|
||||
{ title : String
|
||||
@ -667,6 +692,7 @@ type alias MultiLineItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ImageItem msg =
|
||||
{ text : String
|
||||
@ -675,6 +701,7 @@ type alias ImageItem msg =
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ExpansionItem msg =
|
||||
{ icon : Icon msg
|
||||
@ -717,45 +744,60 @@ headerItem =
|
||||
|
||||
{-| A clickable item that contains two spots for icons or additional information and a single line of text.
|
||||
-}
|
||||
textItem : ItemStyle (TextItemStyle msg) msg
|
||||
-> { text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon msg
|
||||
, content : Icon msg
|
||||
} -> Item msg
|
||||
textItem :
|
||||
ItemStyle (TextItemStyle msg) msg
|
||||
->
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon msg
|
||||
, content : Icon msg
|
||||
}
|
||||
-> Item 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 :
|
||||
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
|
||||
-> { text : String
|
||||
, onPress : Maybe msg
|
||||
, image : Element msg
|
||||
, content : Icon msg
|
||||
} -> Item msg
|
||||
imageItem :
|
||||
ItemStyle (ImageItemStyle msg) msg
|
||||
->
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, image : Element msg
|
||||
, content : Icon msg
|
||||
}
|
||||
-> Item msg
|
||||
imageItem =
|
||||
Item.imageItem
|
||||
|
||||
|
||||
{-| An expandable Item
|
||||
-}
|
||||
expansionItem : ExpansionItemStyle msg
|
||||
-> { icon : Icon msg
|
||||
, text : String
|
||||
, onToggle : Bool -> msg
|
||||
, content : List (Item msg)
|
||||
, isExpanded : Bool
|
||||
} -> List (Item msg)
|
||||
expansionItem :
|
||||
ExpansionItemStyle msg
|
||||
->
|
||||
{ icon : Icon msg
|
||||
, text : String
|
||||
, onToggle : Bool -> msg
|
||||
, content : List (Item msg)
|
||||
, isExpanded : Bool
|
||||
}
|
||||
-> List (Item msg)
|
||||
expansionItem =
|
||||
Item.expansionItem
|
||||
|
||||
|
@ -27,7 +27,6 @@ It is responsive and changes view to apply to the [material design guidelines](h
|
||||
-}
|
||||
|
||||
import Array
|
||||
import Color exposing (Color)
|
||||
import Element exposing (Attribute, DeviceClass(..), Element)
|
||||
import Element.Input as Input
|
||||
import Html exposing (Html)
|
||||
@ -35,7 +34,7 @@ import Internal.Button as Button exposing (Button, ButtonStyle)
|
||||
import Internal.Dialog as Dialog
|
||||
import Internal.Select as Select exposing (Select)
|
||||
import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
|
||||
import Widget.Icon exposing (Icon, IconStyle)
|
||||
import Widget.Icon exposing (Icon)
|
||||
import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)
|
||||
import Widget.Style.Customize as Customize
|
||||
|
||||
|
@ -7,12 +7,12 @@ module Widget.Style.Material exposing
|
||||
, chip, textInput
|
||||
, alertDialog
|
||||
, row, column
|
||||
, fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
|
||||
, progressIndicator,imageItem
|
||||
, fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem
|
||||
, progressIndicator
|
||||
, sortTable
|
||||
, snackbar
|
||||
, tab, tabButton
|
||||
, layout, multiLineItem
|
||||
, layout
|
||||
)
|
||||
|
||||
{-| ![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,multiLineItem,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,MultiLineItemStyle)
|
||||
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
|
||||
import Internal.List exposing (ColumnStyle, RowStyle)
|
||||
import Internal.Material.Button as Button
|
||||
import Internal.Material.Chip as Chip
|
||||
@ -402,18 +402,23 @@ 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.
|
||||
|
||||
-}
|
||||
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
|
||||
imageItem =
|
||||
imageItem =
|
||||
Item.imageItem
|
||||
|
||||
|
||||
|
||||
{-------------------------------------------------------------------------------
|
||||
-- D I A L O G
|
||||
-------------------------------------------------------------------------------}
|
||||
@ -426,6 +431,7 @@ alertDialog =
|
||||
Dialog.alertDialog
|
||||
|
||||
|
||||
|
||||
{-------------------------------------------------------------------------------
|
||||
-- P R O G R E S S I N D I C A T O R
|
||||
-------------------------------------------------------------------------------}
|
||||
|
@ -8,8 +8,7 @@ import Element.Background
|
||||
import Element.Border
|
||||
import Element.Font
|
||||
import Element.Input
|
||||
import Widget
|
||||
import Widget.Style exposing (ButtonStyle, ColumnStyle, RowStyle)
|
||||
import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
|
||||
import Widget.Style.Material as Material exposing (Palette)
|
||||
|
||||
|
||||
|
15
tests/elm-verify-examples.json
Normal file
15
tests/elm-verify-examples.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"root": "../src",
|
||||
"tests": [
|
||||
"Widget",
|
||||
"Widget.Style.Material",
|
||||
"Widget.Style.Material.Typography",
|
||||
"Widget.Style.Material.Color",
|
||||
"Widget.Style.Customize",
|
||||
"Widget.Layout",
|
||||
"Widget.ScrollingNav",
|
||||
"Widget.Snackbar",
|
||||
"Widget.Icon",
|
||||
"./README.md"
|
||||
]
|
||||
}
|
Loading…
Reference in New Issue
Block a user