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

Added images for doc, starting with doc

Browse Source
This commit is contained in:
Unknown 2020-05-25 07:40:46 +02:00
parent cc2ca06d93
commit bb3ae50376
29 changed files with 490 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/assets/dialog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
docs/assets/expansionPanel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/assets/list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/assets/material-style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/assets/modal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/assets/multiSelect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
docs/assets/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
docs/assets/snackbar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
docs/assets/sortTable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
docs/assets/tab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
docs/assets/template-style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/assets/textInput.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
docs/select.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 933 B

6
elm.json
View File

@ -6,9 +6,11 @@
"version": "1.0.0",
"exposed-modules": [
"Widget.Layout",
"Widget.Style",
"Widget.ScrollingNav",
"Widget.Snackbar"
"Widget.Snackbar",
"Widget.Style",
"Widget.Style.Material",
"Widget.Style.Template"
],
"elm-version": "0.19.0 <= v < 0.20.0",
"dependencies": {

4
example/elm.json
View File

@ -20,6 +20,7 @@
"mdgriffith/elm-ui": "1.1.5",
"noahzgordon/elm-color-extra": "1.0.2",
"ryannhg/elm-spa": "4.1.0",
"turboMaCk/any-set": "1.4.0",
"turboMaCk/queue": "1.0.2",
"wernerdegroot/listzipper": "4.0.0"
},
@ -28,7 +29,8 @@
"elm/regex": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2",
"fredcy/elm-parseint": "2.0.1"
"fredcy/elm-parseint": "2.0.1",
"turboMaCk/any-dict": "2.3.0"
}
},
"test-dependencies": {

210
example/src/Data/Example.elm
View File

@ -1,4 +1,4 @@
module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
module Data.Example exposing (Example, Model, Msg, asList, fromString, init, subscriptions, toCardList, toString, update, view)
import Data.Style exposing (Style)
import Element exposing (Element)
@ -15,6 +15,7 @@ import Example.TextInput as TextInput
import Framework.Grid as Grid
import View.Test as Test
type Example
= ButtonExample
| SelectExample
@ -27,6 +28,7 @@ type Example
| TextInputExample
| ListExample
asList : List Example
asList =
[ ButtonExample
@ -40,65 +42,147 @@ asList =
, TextInputExample
, ListExample
]
|> List.sortBy toString
|> List.sortBy toString
toString : Example -> String
toString example =
case example of
ButtonExample -> "Button"
SelectExample -> "Select"
MultiSelectExample -> "Multi Select"
ExpansionPanelExample -> "ExpansionPanel"
TabExample -> "Tab"
SortTableExample -> "SortTable"
ModalExample -> "Modal"
DialogExample -> "Dialog"
TextInputExample -> "TextInput"
ListExample -> "List"
ButtonExample ->
"Button"
fromString : String -> Maybe Example
SelectExample ->
"Select"
MultiSelectExample ->
"Multi Select"
ExpansionPanelExample ->
"ExpansionPanel"
TabExample ->
"Tab"
SortTableExample ->
"SortTable"
ModalExample ->
"Modal"
DialogExample ->
"Dialog"
TextInputExample ->
"TextInput"
ListExample ->
"List"
fromString : String -> Maybe Example
fromString string =
case string of
"Button" -> Just ButtonExample
"Select" -> Just SelectExample
"Multi Select" -> Just MultiSelectExample
"ExpansionPanel" -> Just ExpansionPanelExample
"Tab" -> Just TabExample
"SortTable" -> Just SortTableExample
"Modal" -> Just ModalExample
"Dialog" -> Just DialogExample
"TextInput" -> Just TextInputExample
"List" -> Just ListExample
_ -> Nothing
"Button" ->
Just ButtonExample
"Select" ->
Just SelectExample
"Multi Select" ->
Just MultiSelectExample
"ExpansionPanel" ->
Just ExpansionPanelExample
"Tab" ->
Just TabExample
"SortTable" ->
Just SortTableExample
"Modal" ->
Just ModalExample
"Dialog" ->
Just DialogExample
"TextInput" ->
Just TextInputExample
"List" ->
Just ListExample
_ ->
Nothing
get : Example -> ExampleView msg -> Element msg
get example =
case example of
ButtonExample -> .button
SelectExample -> .select
MultiSelectExample -> .multiSelect
ExpansionPanelExample -> .expansionPanel
TabExample -> .tab
SortTableExample -> .sortTable
ModalExample -> .modal
DialogExample -> .dialog
TextInputExample -> .textInput
ListExample -> .list
ButtonExample ->
.button
SelectExample ->
.select
MultiSelectExample ->
.multiSelect
ExpansionPanelExample ->
.expansionPanel
TabExample ->
.tab
SortTableExample ->
.sortTable
ModalExample ->
.modal
DialogExample ->
.dialog
TextInputExample ->
.textInput
ListExample ->
.list
toTests : Example -> msg -> Style msg -> List ( String, Element msg )
toTests example =
case example of
ButtonExample -> Test.button
SelectExample -> Test.select
MultiSelectExample -> Test.multiSelect
ExpansionPanelExample -> Test.expansionPanel
TabExample -> Test.tab
SortTableExample -> Test.sortTable
ModalExample -> Test.modal
DialogExample -> Test.dialog
TextInputExample -> Test.textInput
ListExample -> Test.list
ButtonExample ->
Test.button
SelectExample ->
Test.select
MultiSelectExample ->
Test.multiSelect
ExpansionPanelExample ->
Test.expansionPanel
TabExample ->
Test.tab
SortTableExample ->
Test.sortTable
ModalExample ->
Test.modal
DialogExample ->
Test.dialog
TextInputExample ->
Test.textInput
ListExample ->
Test.list
type Msg
= Button Button.Msg
@ -113,7 +197,6 @@ type Msg
| List List.Msg
type alias Model =
{ button : Button.Model
, select : Select.Model
@ -150,18 +233,20 @@ type alias UpgradeCollection =
, list : UpgradeRecord List.Model List.Msg
}
type alias ExampleView msg =
{ button : Element msg
, select : Element msg
, multiSelect : Element msg
, expansionPanel : Element msg
, tab : Element msg
, sortTable : Element msg
, modal : Element msg
, dialog : Element msg
, textInput : Element msg
, list : Element msg
}
, select : Element msg
, multiSelect : Element msg
, expansionPanel : Element msg
, tab : Element msg
, sortTable : Element msg
, modal : Element msg
, dialog : Element msg
, textInput : Element msg
, list : Element msg
}
init : ( Model, Cmd Msg )
init =
@ -358,7 +443,6 @@ view :
-> Style msg
-> Model
-> ExampleView msg
view msgMapper style model =
{ button =
Button.view (Button >> msgMapper) style (.button model)
@ -392,13 +476,13 @@ toCardList :
-> List ( String, Element msg, Element msg )
toCardList { idle, msgMapper, style, model } =
asList
|> List.map
(\example ->
{ title = example |> toString
, example = example |> get
, test = example |> toTests
}
)
|> List.map
(\example ->
{ title = example |> toString
, example = example |> get
, test = example |> toTests
}
)
|> List.map
(\{ title, example, test } ->
( title

2
example/src/Data/Section.elm
View File

@ -14,7 +14,6 @@ asList =
toString : Section -> String
toString section =
case section of
ReusableViews ->
"Reusable"
@ -25,7 +24,6 @@ toString section =
fromString : String -> Maybe Section
fromString string =
case string of
"Reusable" ->
Just ReusableViews

32
example/src/Data/Style.elm
View File

@ -6,27 +6,27 @@ import Widget.Style
, ColumnStyle
, DialogStyle
, ExpansionPanelStyle
, LayoutStyle
, RowStyle
, SortTableStyle
, TabStyle
, TextInputStyle
, LayoutStyle
)
type alias Style msg =
{ dialog : DialogStyle msg
, expansionPanel : ExpansionPanelStyle msg
, button : ButtonStyle msg
, primaryButton : ButtonStyle msg
, tab : TabStyle msg
, textInput : TextInputStyle msg
, chipButton : ButtonStyle msg
, row : RowStyle msg
, buttonRow : RowStyle msg
, column : ColumnStyle msg
, cardColumn : ColumnStyle msg
, sortTable : SortTableStyle msg
, selectButton : ButtonStyle msg
, layout : LayoutStyle msg
}
{ dialog : DialogStyle msg
, expansionPanel : ExpansionPanelStyle msg
, button : ButtonStyle msg
, primaryButton : ButtonStyle msg
, tab : TabStyle msg
, textInput : TextInputStyle msg
, chipButton : ButtonStyle msg
, row : RowStyle msg
, buttonRow : RowStyle msg
, column : ColumnStyle msg
, cardColumn : ColumnStyle msg
, sortTable : SortTableStyle msg
, selectButton : ButtonStyle msg
, layout : LayoutStyle msg
}

5
example/src/Data/Style/Material.elm
View File

@ -9,6 +9,7 @@ import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Html.Attributes as Attributes
import Icons
import Widget.Style
exposing
( ButtonStyle
@ -24,7 +25,7 @@ import Widget.Style
)
import Widget.Style.Material as Material exposing (Palette)
import Widget.Style.Template as Template
import Icons
sortTable : Palette -> SortTableStyle msg
sortTable palette =
@ -51,5 +52,5 @@ style palette =
, chipButton = Material.chip palette
, expansionPanel = Material.expansionPanel palette
, dialog = Material.alertDialog palette
, layout = Material.layout palette "layout"
, layout = Material.layout palette
}

1
example/src/Data/Theme.elm
View File

@ -6,6 +6,7 @@ import Data.Style.Material
import Data.Style.Template
import Widget.Style.Material
type Theme
= ElmUiFramework
| Template

4
example/src/Example/Dialog.elm
View File

@ -13,8 +13,8 @@ type alias Style style msg =
}
type Model =
IsOpen Bool
type Model
= IsOpen Bool
type Msg

410
example/src/Main.elm
View File

@ -5,11 +5,11 @@ import Browser
import Browser.Dom as Dom exposing (Viewport)
import Browser.Events as Events
import Browser.Navigation as Navigation
import Data.Example as Example exposing (Example)
import Data.Section as Section exposing (Section(..))
import Data.Style exposing (Style)
import Data.Theme as Theme exposing (Theme(..))
import Data.Example as Example exposing (Example)
import Element exposing (DeviceClass(..))
import Element exposing (Element,DeviceClass(..))
import Framework
import Framework.Grid as Grid
import Framework.Heading as Heading
@ -17,13 +17,14 @@ import Html exposing (Html)
import Html.Attributes as Attributes
import Icons
import Reusable
import Set.Any as AnySet exposing (AnySet)
import Stateless
import Task
import Time
import Widget
import Widget.Layout as Layout exposing (Layout, Part)
import Widget.ScrollingNav as ScrollingNav
import FeatherIcons
type alias LoadedModel =
{ stateless : Stateless.Model
@ -40,6 +41,7 @@ type alias LoadedModel =
, remaining : Int
}
, theme : Theme
, expanded : AnySet String Example
}
@ -61,6 +63,7 @@ type LoadedMsg
| ChangedSearch String
| SetTheme Theme
| Idle
| ToggledExample Example
type Msg
@ -103,6 +106,7 @@ initialModel { viewport } =
, remaining = 0
}
, theme = Material
, expanded = AnySet.empty Example.toString
}
, [ cmd
, statelessCmd |> Cmd.map StatelessSpecific
@ -118,187 +122,6 @@ init () =
)
view : Model -> Html Msg
view model =
case model of
Loading ->
Element.none |> Framework.responsiveLayout []
Loaded m ->
let
style : Style msg
style =
Theme.toStyle m.theme
in
Html.map LoadedSpecific <|
Layout.view style.layout
{ dialog =
if m.displayDialog then
{ text = "This is a dialog window"
, title = Just "Dialog"
, accept =
Just
{ text = "Ok"
, onPress = Just <| ToggleDialog False
}
, dismiss =
Just
{ text = "Dismiss"
, onPress = Just <| ToggleDialog False
}
}
|> Widget.dialog style.dialog
|> Just
else
Nothing
, layout = m.layout
, window = m.window
, menu =
m.scrollingNav
|> ScrollingNav.toSelect
(\int ->
m.scrollingNav.arrangement
|> Array.fromList
|> Array.get int
|> Maybe.map JumpTo
)
, actions =
[ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
, text = "Docs"
, icon = Icons.book |> Element.html |> Element.el []
}
, { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
, text = "Github"
, icon = Icons.github |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= Material then
Just <| SetTheme <| Material
else
Nothing
, text = "Material Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= DarkMaterial then
Just <| SetTheme <| DarkMaterial
else
Nothing
, text = "Dark Material Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= ElmUiFramework then
Just <| SetTheme <| ElmUiFramework
else
Nothing
, text = "Elm-Ui-Framework Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= Template then
Just <| SetTheme <| Template
else
Nothing
, text = "Template Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
]
, onChangedSidebar = ChangedSidebar
, title =
"Elm-Ui-Widgets"
|> Element.text
|> Element.el Heading.h1
, search =
Just
{ text = m.search.raw
, onChange = ChangedSearch
, label = "Search"
}
} <|
(
[ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
, [StatelessViews,ReusableViews]
|> List.map
(\section ->
(case section of
ReusableViews ->
Reusable.view
{ theme = m.theme
, addSnackbar = AddSnackbar
}
StatelessViews ->
Stateless.view
{ theme = m.theme
, msgMapper = StatelessSpecific
, model = m.stateless
}
)
|> (\{ title, description, items } ->
[ title
|> Element.text
|> Element.el ( Heading.h2 )
, if m.search.current == "" then
description
|> Element.text
|> List.singleton
|> Element.paragraph []
else
Element.none
, items
|> (if m.search.current /= "" then
List.filter
(\( a, _, _ ) ->
a
|> String.toLower
|> String.contains (m.search.current |> String.toLower)
)
else
identity
)
|> List.map
(\( name, elem, more ) ->
[ [ Element.text name
|> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink
, name
|> Attributes.id
|> Element.htmlAttribute])
, elem
]
|> Element.column Grid.simple
, more
|> Element.el
[ Element.width <| Element.fill
]
]
|> Widget.column style.cardColumn
)
|> Element.wrappedRow
(Grid.simple
++ [ Element.height <| Element.shrink
]
)
]
|> Element.column (Grid.section ++ [ Element.centerX ])
)
)
-- |> Element.column Grid.section
--]
|> Element.column (Framework.container ++ style.layout.container)
]
|> Element.column Grid.compact
)
updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
updateLoaded msg model =
case msg of
@ -414,6 +237,13 @@ updateLoaded msg model =
, Cmd.none
)
ToggledExample example ->
( { model
| expanded = model.expanded |> AnySet.toggle example
}
, Cmd.none
)
Idle ->
( model, Cmd.none )
@ -442,6 +272,218 @@ subscriptions _ =
|> Sub.map LoadedSpecific
view : Model -> Html Msg
view model =
case model of
Loading ->
Element.none |> Framework.responsiveLayout []
Loaded m ->
let
style : Style msg
style =
Theme.toStyle m.theme
in
Html.map LoadedSpecific <|
Layout.view style.layout
{ dialog =
if m.displayDialog then
{ text = "This is a dialog window"
, title = Just "Dialog"
, accept =
Just
{ text = "Ok"
, onPress = Just <| ToggleDialog False
}
, dismiss =
Just
{ text = "Dismiss"
, onPress = Just <| ToggleDialog False
}
}
|> Widget.dialog style.dialog
|> Just
else
Nothing
, layout = m.layout
, window = m.window
, menu =
m.scrollingNav
|> ScrollingNav.toSelect
(\int ->
m.scrollingNav.arrangement
|> Array.fromList
|> Array.get int
|> Maybe.map JumpTo
)
, actions =
[ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
, text = "Docs"
, icon = Icons.book |> Element.html |> Element.el []
}
, { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
, text = "Github"
, icon = Icons.github |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= Material then
Just <| SetTheme <| Material
else
Nothing
, text = "Material Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= DarkMaterial then
Just <| SetTheme <| DarkMaterial
else
Nothing
, text = "Dark Material Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= ElmUiFramework then
Just <| SetTheme <| ElmUiFramework
else
Nothing
, text = "Elm-Ui-Framework Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
, { onPress =
if m.theme /= Template then
Just <| SetTheme <| Template
else
Nothing
, text = "Template Theme"
, icon = Icons.penTool |> Element.html |> Element.el []
}
]
, onChangedSidebar = ChangedSidebar
, title =
"Elm-Ui-Widgets"
|> Element.text
|> Element.el Heading.h1
, search =
Just
{ text = m.search.raw
, onChange = ChangedSearch
, label = "Search"
}
}
<|
viewLoaded m
viewLoaded : LoadedModel -> Element LoadedMsg
viewLoaded m =
let
style : Style msg
style =
Theme.toStyle m.theme
in
[ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
, [ StatelessViews, ReusableViews ]
|> List.map
(\section ->
(case section of
ReusableViews ->
Reusable.view
{ theme = m.theme
, addSnackbar = AddSnackbar
}
StatelessViews ->
Stateless.view
{ theme = m.theme
, msgMapper = StatelessSpecific
, model = m.stateless
}
)
|> (\{ title, description, items } ->
[ title
|> Element.text
|> Element.el Heading.h2
, if m.search.current == "" then
description
|> Element.text
|> List.singleton
|> Element.paragraph []
else
Element.none
, items
|> (if m.search.current /= "" then
List.filter
(\( a, _, _ ) ->
a
|> String.toLower
|> String.contains (m.search.current |> String.toLower)
)
else
identity
)
|> List.map
(\( name, elem, more ) ->
[ [ Element.text name
|> Element.el
(Heading.h3
++ [ Element.height <| Element.shrink
, name
|> Attributes.id
|> Element.htmlAttribute
]
)
, elem
]
|> Element.column Grid.simple
,
Widget.expansionPanel style.expansionPanel
{ onToggle =
always
(name
|> Example.fromString
|> Maybe.map ToggledExample
|> Maybe.withDefault Idle
)
, icon = Element.none
, text =
"States"
, content = more
, isExpanded =
name
|> Example.fromString
|> Maybe.map
(\example ->
m.expanded
|> AnySet.member example
)|> Maybe.withDefault False
}
]
|> Widget.column style.cardColumn
)
|> Element.wrappedRow
(Grid.simple
++ [ Element.height <| Element.shrink
]
)
]
|> Element.column (Grid.section ++ [ Element.centerX ])
)
)
|> Element.column (Framework.container ++ style.layout.container)
]
|> Element.column Grid.compact
main : Program () Model Msg
main =
Browser.element

3
src/Widget/Layout.elm
View File

@ -242,8 +242,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
, menu
|> Widget.select
|> List.map
(Widget.selectButton style.sheetButton
)
(Widget.selectButton style.sheetButton)
]
|> List.concat
|> Element.column [ Element.width <| Element.fill ]

58
src/Widget/ScrollingNav.elm
View File

@ -1,7 +1,6 @@
module Widget.ScrollingNav exposing
( Model, init, view, current
, jumpTo, syncPositions
, getPos, jumpToWithOffset, setPos, toSelect
( Model, init, view, current, toSelect
, jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
)
{-| The Scrolling Nav is a navigation bar thats updates while you scroll through
@ -10,18 +9,17 @@ the page. Clicking on a navigation button will scroll directly to that section.
# Basics
@docs Model, Msg, init, update, subscriptions, view, viewSections, current
@docs Model, init, view, current, toSelect
# Operations
@docs jumpTo, syncPositions
@docs jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
-}
import Browser.Dom as Dom
import Element exposing (Element)
import Framework.Grid as Grid
import Html.Attributes as Attributes
import IntDict exposing (IntDict)
import Task exposing (Task)
@ -62,6 +60,8 @@ init { toString, fromString, arrangement, toMsg } =
)
{-| Syncs the position of of the viewport
-}
getPos : Task x (Model selection -> Model selection)
getPos =
Dom.getViewport
@ -73,12 +73,14 @@ getPos =
)
{-| sets the position of the viewport to show a specific section
-}
setPos : Int -> Model section -> Model section
setPos pos model =
{ model | scrollPos = pos }
{-| scrolls the screen to the respective section
{-| Scrolls the screen to the respective section
-}
jumpTo :
{ section : section
@ -95,7 +97,7 @@ jumpTo { section, onChange } { toString } =
|> Task.attempt onChange
{-| scrolls the screen to the respective section with some offset
{-| Scrolls the screen to the respective section with some offset
-}
jumpToWithOffset :
{ offset : Float
@ -113,7 +115,9 @@ jumpToWithOffset { offset, section, onChange } { toString } =
|> Task.attempt onChange
{-| -}
{-| Updates the positions of all sections.
This functions should be called regularly if the height of elements on your page can change during time.
-}
syncPositions : Model section -> Task Dom.Error (Model section -> Model section)
syncPositions { toString, arrangement } =
arrangement
@ -144,7 +148,8 @@ syncPositions { toString, arrangement } =
)
{-| -}
{-| Returns the current section
-}
current : (String -> Maybe section) -> Model section -> Maybe section
current fromString { positions, scrollPos } =
positions
@ -155,6 +160,8 @@ current fromString { positions, scrollPos } =
|> Maybe.andThen fromString
{-| Returns a select widget containing all section, with the current section selected.
-}
toSelect : (Int -> Maybe msg) -> Model section -> Select msg
toSelect onSelect ({ arrangement, toString, fromString } as model) =
{ selected =
@ -181,11 +188,37 @@ toSelect onSelect ({ arrangement, toString, fromString } as model) =
}
{-| -}
{-| Opinionated way of viewing the section.
This might be useful at first, but you should consider writing your own view function.
```
view :
(section -> Element msg)
-> Model section
-> Element msg
-> List (Element msg)
view asElement { toString, arrangement } =
arrangement
|> List.map
(\header ->
Element.el
[ header
|> toString
|> Attributes.id
|> Element.htmlAttribute
, Element.width <| Element.fill
]
<|
asElement <|
header
)
```
-}
view :
(section -> Element msg)
-> Model section
-> List (Element msg)
view asElement { toString, arrangement } =
arrangement
|> List.map
@ -201,4 +234,3 @@ view asElement { toString, arrangement } =
asElement <|
header
)
|> Element.column Grid.simple

7
src/Widget/Snackbar.elm
View File

@ -1,7 +1,6 @@
module Widget.Snackbar exposing
( Model, init, current, timePassed
( Model, Message, init, current, timePassed, view
, insert, insertFor, dismiss
, Message, view
)
{-| A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.
@ -9,7 +8,7 @@ module Widget.Snackbar exposing
# Basics
@docs Model, init, current, timePassed
@docs Model, Message, init, current, timePassed, view
# Operations
@ -104,6 +103,8 @@ current model =
model.current |> Maybe.map Tuple.first
{-| Views the current Message. (only one at a time)
-}
view :
SnackbarStyle msg
-> (a -> Message msg)

31
src/Widget/Style.elm
View File

@ -1,9 +1,16 @@
module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)
{-| This module contains style types for every widget.
@docs ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle
-}
import Element exposing (Attribute, Element)
import Html exposing (Html)
{-| -}
type alias ButtonStyle msg =
{ container : List (Attribute msg)
, labelRow : List (Attribute msg)
@ -14,6 +21,7 @@ type alias ButtonStyle msg =
}
{-| -}
type alias DialogStyle msg =
{ containerColumn : List (Attribute msg)
, title : List (Attribute msg)
@ -24,6 +32,12 @@ type alias DialogStyle msg =
}
{-| Technical Remark:
- If icons are defined in Svg, they might not display correctly.
To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-}
type alias ExpansionPanelStyle msg =
{ containerColumn : List (Attribute msg)
, panelRow : List (Attribute msg)
@ -34,6 +48,7 @@ type alias ExpansionPanelStyle msg =
}
{-| -}
type alias SnackbarStyle msg =
{ containerRow : List (Attribute msg)
, text : List (Attribute msg)
@ -41,6 +56,7 @@ type alias SnackbarStyle msg =
}
{-| -}
type alias TextInputStyle msg =
{ chipButton : ButtonStyle msg
, containerRow : List (Attribute msg)
@ -49,6 +65,7 @@ type alias TextInputStyle msg =
}
{-| -}
type alias TabStyle msg =
{ button : ButtonStyle msg
, optionRow : List (Attribute msg)
@ -57,6 +74,7 @@ type alias TabStyle msg =
}
{-| -}
type alias RowStyle msg =
{ containerRow : List (Attribute msg)
, element : List (Attribute msg)
@ -66,6 +84,7 @@ type alias RowStyle msg =
}
{-| -}
type alias ColumnStyle msg =
{ containerColumn : List (Attribute msg)
, element : List (Attribute msg)
@ -75,6 +94,12 @@ type alias ColumnStyle msg =
}
{-| Technical Remark:
- If icons are defined in Svg, they might not display correctly.
To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-}
type alias SortTableStyle msg =
{ containerTable : List (Attribute msg)
, headerButton : ButtonStyle msg
@ -84,6 +109,12 @@ type alias SortTableStyle msg =
}
{-| Technical Remark:
- If icons are defined in Svg, they might not display correctly.
To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-}
type alias LayoutStyle msg =
{ container : List (Attribute msg)
, snackbar : SnackbarStyle msg

5
src/Widget/Style/Material.elm
View File

@ -66,7 +66,6 @@ import Widget.Style
, TabStyle
, TextInputStyle
)
import Widget.Style.Template as Template
@ -1301,8 +1300,8 @@ drawerButton palette =
- The drawer button as not taken from the specification (This will been to be added later)
-}
layout : Palette -> String -> LayoutStyle msg
layout palette string =
layout : Palette -> LayoutStyle msg
layout palette =
{ container =
(palette.background |> textAndBackground)
++ [ Font.family

3
src/Widget/Style/Template.elm
View File

@ -1,5 +1,8 @@
module Widget.Style.Template exposing (box, button, column, decoration, dialog, expansionPanel, icon, layout, row, snackbar, sortTable, tab, textInput)
{-| This package
-}
import Element exposing (Attribute, Element)
import Element.Background as Background
import Element.Border as Border