Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-11-22 04:58:49 +03:00
Code Issues Projects Releases Wiki Activity

Add ToggleRow and WrappedRow #69

Browse Source
This commit is contained in:
Lucas Payr 2021-06-04 11:11:33 +02:00
parent bb6d183d07
commit 0aa00cada2
9 changed files with 279 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
explorer/src/Page/Button.elm
View File

@ -91,6 +91,8 @@ book =
( "Contained", Material.containedButton )
[ ( "Outlined", Material.outlinedButton )
, ( "Text", Material.textButton )
, ( "Chip", Material.chip )
, ( "IconButton", Material.iconButton)
]
)
--Changing the text of the label

54
explorer/src/Page/Select.elm
View File

@ -38,19 +38,6 @@ description =
-}
viewFunctions =
let
viewSelectButtonRow style selected options onSelect { palette } () =
Widget.select
{ selected = selected
, options = options
, onSelect = onSelect
}
|> Widget.buttonRow
{ elementRow = Material.buttonRow
, content = style palette
}
--Don't forget to change the title
|> Page.viewTile "Widget.buttonRow with Material.buttonRow"
viewSelectRow style selected options onSelect { palette } () =
Widget.select
{ selected = selected
@ -62,7 +49,34 @@ viewFunctions =
, content = style palette
}
--Don't forget to change the title
|> Page.viewTile "Widget.buttonRow with Material.row"
|> Page.viewTile "Widget.buttonRow "
viewTogggleRow style selected options onSelect { palette } () =
Widget.select
{ selected = selected
, options = options
, onSelect = onSelect
}
|> Widget.toggleRow
{ elementRow = Material.toggleRow
, content = style palette
}
--Don't forget to change the title
|> Page.viewTile "Widget.toggleRow"
viewWrappedRow style selected options onSelect { palette } () =
Widget.select
{ selected = selected
, options = options
, onSelect = onSelect
}
|> Widget.wrappedButtonRow
{ elementRow = Material.row
, content = style palette
}
--Don't forget to change the title
|> Page.viewTile "Widget.wrappedButtonRow"
viewSelectColumn style selected options onSelect { palette } () =
Widget.select
@ -77,7 +91,7 @@ viewFunctions =
--Don't forget to change the title
|> Page.viewTile "Widget.buttonColumn"
in
[ viewSelectButtonRow, viewSelectRow, viewSelectColumn ]
[ viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow ]
|> List.foldl Story.addTile
Story.initStaticTiles
@ -95,6 +109,8 @@ book =
( "Contained", Material.containedButton )
[ ( "Outlined", Material.outlinedButton )
, ( "Text", Material.textButton )
, ( "Chip", Material.chip )
, ( "IconButton", Material.iconButton)
, ( "Toggle", Material.toggleButton )
]
)
@ -111,17 +127,17 @@ book =
|> Story.addStory
(Story.optionListStory "Options"
( "3 Option"
, [ { icon = always Element.none, text = "42" }
, [ { icon = always Element.none, text = "Submit" }
, { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
, { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "42" }
, { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "Submit" }
]
)
[ ( "2 Option"
, [ { icon = always Element.none, text = "42" }
, [ { icon = always Element.none, text = "Submit" }
, { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
]
)
, ( "1 Option", [ { icon = always Element.none, text = "42" } ] )
, ( "1 Option", [ { icon = always Element.none, text = "Submit" } ] )
]
)
--Should an event be triggered when pressing the button?

6
explorer/src/UIExplorer/Story.elm
View File

@ -374,9 +374,9 @@ storyView context model =
|> Maybe.map (Tuple.second >> StorySelect label)
}
|> Widget.select
|> Widget.buttonColumn
{ elementColumn = Material.column
, content = Material.textButton context.palette
|> Widget.wrappedButtonRow
{ elementRow = Material.row
, content = Material.chip context.palette
}
]

1
src/Internal/Button.elm
View File

@ -85,6 +85,7 @@ button style { onPress, text, icon } =
else
style.otherwise
)
++ [ Region.description text ]
)
{ onPress = onPress
, label =

58
src/Internal/List.elm
View File

@ -1,4 +1,4 @@
module Internal.List exposing (ColumnStyle, RowStyle, buttonColumn, buttonRow, column, itemList, row)
module Internal.List exposing (ColumnStyle, RowStyle, buttonColumn, buttonRow, column, itemList, row, toggleRow, wrappedButtonRow)
import Element exposing (Attribute, Element)
import Internal.Button exposing (Button, ButtonStyle)
@ -134,6 +134,39 @@ internalButton style list =
)
toggleRow :
{ elementRow : RowStyle msg
, content : ButtonStyle msg
}
-> List ( Bool, Button msg )
-> Element msg
toggleRow style list =
(list
|> List.indexedMap
(\i ->
Select.toggleButton
(style.content
|> Customize.elementButton
(style.elementRow.content.element
++ (if List.length list == 1 then
style.elementRow.content.ifSingleton
else if i == 0 then
style.elementRow.content.ifFirst
else if i == (List.length list - 1) then
style.elementRow.content.ifLast
else
style.elementRow.content.otherwise
)
)
)
)
)
|> Element.row style.elementRow.elementRow
buttonRow :
{ elementRow : RowStyle msg
, content : ButtonStyle msg
@ -157,6 +190,29 @@ buttonRow style =
>> Element.row style.elementRow.elementRow
wrappedButtonRow :
{ elementRow : RowStyle msg
, content : ButtonStyle msg
}
-> List ( Bool, Button msg )
-> Element msg
wrappedButtonRow style =
internalButton
{ element =
style.elementRow.content.element
, ifSingleton =
style.elementRow.content.ifSingleton
, ifFirst =
style.elementRow.content.ifFirst
, ifLast =
style.elementRow.content.ifLast
, otherwise =
style.elementRow.content.otherwise
, content = style.content
}
>> Element.wrappedRow style.elementRow.elementRow
buttonColumn :
{ elementColumn : ColumnStyle msg
, content : ButtonStyle msg

6
src/Internal/Material/List.elm
View File

@ -1,10 +1,10 @@
module Internal.Material.List exposing
( bottomSheet
, buttonRow
, cardColumn
, column
, row
, sideSheet
, toggleRow
)
import Color
@ -49,8 +49,8 @@ column =
}
buttonRow : RowStyle msg
buttonRow =
toggleRow : RowStyle msg
toggleRow =
{ elementRow = []
, content =
{ element = []

35
src/Internal/Select.elm
View File

@ -1,7 +1,8 @@
module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton)
module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton, toggleButton)
import Element exposing (Element)
import Element.Input as Input
import Element.Region as Region
import Internal.Button exposing (Button, ButtonStyle)
import Set exposing (Set)
import Widget.Icon exposing (Icon)
@ -45,6 +46,7 @@ selectButton style ( selected, b ) =
else
style.otherwise
)
++ [ Region.description b.text ]
)
{ onPress = b.onPress
, label =
@ -64,6 +66,37 @@ selectButton style ( selected, b ) =
}
toggleButton :
ButtonStyle msg
-> ( Bool, Button msg )
-> Element msg
toggleButton style ( selected, b ) =
Input.button
(style.elementButton
++ (if b.onPress == Nothing then
style.ifDisabled
else
style.otherwise
)
++ [ Region.description b.text ]
)
{ onPress = b.onPress
, label =
b.icon
(if b.onPress == Nothing then
style.content.content.icon.ifDisabled
else if selected then
style.content.content.icon.ifActive
else
style.content.content.icon.otherwise
)
|> Element.el style.content.elementRow
}
select :
Select msg
-> List ( Bool, Button msg )

129
src/Widget.elm
View File

@ -1,11 +1,11 @@
module Widget exposing
( ButtonStyle, Button, TextButton, iconButton, textButton, button
, SwitchStyle, Switch, switch
, Select, selectButton, select
, Select, selectButton, select, toggleButton
, MultiSelect, multiSelect
, Modal, singleModal, multiModal
, DialogStyle, Dialog, dialog
, RowStyle, row, buttonRow
, RowStyle, row, buttonRow, toggleRow, wrappedButtonRow
, ColumnStyle, column, buttonColumn
, ItemStyle, Item
, FullBleedItemStyle, fullBleedItem
@ -66,7 +66,7 @@ You can create you own widgets by sticking widgets types together.
![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)
@docs Select, selectButton, select
@docs Select, selectButton, select, toggleButton
![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)
@ -94,7 +94,7 @@ You can create you own widgets by sticking widgets types together.
## Row
@docs RowStyle, row, buttonRow
@docs RowStyle, row, buttonRow, toggleRow, wrappedButtonRow
## Column
@ -475,7 +475,7 @@ type alias MultiSelect msg =
|> Widget.select
|> Widget.buttonRow
{ elementRow = Material.buttonRow
, content = Material.toggleButton Material.defaultPalette
, content = Material.outlinedButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
@ -488,6 +488,41 @@ selectButton =
Select.selectButton
{-| A icon button that can be selected. Should be used together with Material.toggleButton
import Widget.Material as Material
import Element
type Msg
= ChangedSelected Int
{ selected = Just 1
, options =
[ 1, 2, 42 ]
|> List.map
(\int ->
{ text = String.fromInt int
, icon = always Element.none
}
)
, onSelect = (\i -> Just <| ChangedSelected i)
}
|> Widget.select
|> Widget.toggleRow
{ elementRow = Material.toggleRow
, content = Material.toggleButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
-}
toggleButton :
ButtonStyle msg
-> ( Bool, Button msg )
-> Element msg
toggleButton =
Select.toggleButton
{-| Selects one out of multiple options. This can be used for radio buttons or Menus.
import Widget.Material as Material
@ -1434,7 +1469,7 @@ itemList =
}
|> Widget.buttonRow
{ elementRow = Material.row
, content = Material.toggleButton Material.defaultPalette
, content = Material.outlinedButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
@ -1449,6 +1484,88 @@ buttonRow =
List.buttonRow
{-| A row of icon buttons use this in combination with Material.toggleButton
import Element
import Widget.Material as Material
type Msg =
Select Int
selected : Maybe Int
selected =
Just 0
Widget.select
{ selected = selected
, options =
[ 1, 2, 42 ]
|> List.map
(\int ->
{ text = String.fromInt int
, icon = always Element.none
}
)
, onSelect = (\i -> Just (Select i ))
}
|> Widget.buttonRow
{ elementRow = Material.row
, content = Material.toggleButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
-}
toggleRow :
{ elementRow : RowStyle msg
, content : ButtonStyle msg
}
-> List ( Bool, Button msg )
-> Element msg
toggleRow =
List.toggleRow
{-| A wrapped row of buttons
import Element
import Widget.Material as Material
type Msg =
Select Int
selected : Maybe Int
selected =
Just 0
Widget.select
{ selected = selected
, options =
[ 1, 2, 42 ]
|> List.map
(\int ->
{ text = String.fromInt int
, icon = always Element.none
}
)
, onSelect = (\i -> Just (Select i ))
}
|> Widget.wrappedButtonRow
{ elementRow = Material.row
, content = Material.outlinedButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
-}
wrappedButtonRow :
{ elementRow : RowStyle msg
, content : ButtonStyle msg
}
-> List ( Bool, Button msg )
-> Element msg
wrappedButtonRow =
List.wrappedButtonRow
{-| A column of buttons
import Element

26
src/Widget/Material.elm
View File

@ -1,7 +1,7 @@
module Widget.Material exposing
( Palette, defaultPalette, darkPalette, gray
, containedButton, outlinedButton, textButton
, iconButton, toggleButton, buttonRow
, iconButton, toggleButton, toggleRow
, switch
, cardColumn
, chip, textInput, passwordInput
@ -16,6 +16,7 @@ module Widget.Material exposing
, sortTable
, snackbar
, tab, tabButton
, buttonRow
, textGray
)
@ -47,7 +48,7 @@ Different styles for buttons have different meanings.
Use `containedButton` for **the most** important action of the group.
@docs containedButton, outlinedButton, textButton
@docs iconButton, toggleButton, buttonRow
@docs iconButton, toggleButton, toggleRow
# Switch
@ -118,6 +119,11 @@ You way want to use special items to visually organize the content of your list.
@docs tab, tabButton
# DEPRECATED
@docs buttonRow
-}
import Color exposing (Color)
@ -500,6 +506,16 @@ expansionItem =
Item.expansionItem
{-| DEPRECATED
Use Material.toggleRow instead
-}
buttonRow : RowStyle msg
buttonRow =
List.toggleRow
{-| a Row of buttons.
Only use in combination with `toggleButton`
@ -507,9 +523,9 @@ Only use in combination with `toggleButton`
![buttonRow](https://orasund.github.io/elm-ui-widgets/assets/material/buttonRow.png)
-}
buttonRow : RowStyle msg
buttonRow =
List.buttonRow
toggleRow : RowStyle msg
toggleRow =
List.toggleRow
{-| A List styled like a card.