mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 13:14:10 +03:00
finishing the material design
This commit is contained in:
Unknown
parent
31dc7c09dd
commit
cc2ca06d93
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, update, view)
|
||||
module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
|
||||
|
||||
import Data.Style exposing (Style)
|
||||
import Element exposing (Element)
|
||||
@ -15,6 +15,90 @@ import Example.TextInput as TextInput
|
||||
import Framework.Grid as Grid
|
||||
import View.Test as Test
|
||||
|
||||
type Example
|
||||
= ButtonExample
|
||||
| SelectExample
|
||||
| MultiSelectExample
|
||||
| ExpansionPanelExample
|
||||
| TabExample
|
||||
| SortTableExample
|
||||
| ModalExample
|
||||
| DialogExample
|
||||
| TextInputExample
|
||||
| ListExample
|
||||
|
||||
asList : List Example
|
||||
asList =
|
||||
[ ButtonExample
|
||||
, SelectExample
|
||||
, MultiSelectExample
|
||||
, ExpansionPanelExample
|
||||
, TabExample
|
||||
, SortTableExample
|
||||
, ModalExample
|
||||
, DialogExample
|
||||
, TextInputExample
|
||||
, ListExample
|
||||
]
|
||||
|> 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"
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
type Msg
|
||||
= Button Button.Msg
|
||||
@ -29,6 +113,7 @@ type Msg
|
||||
| List List.Msg
|
||||
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ button : Button.Model
|
||||
, select : Select.Model
|
||||
@ -65,6 +150,18 @@ 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
|
||||
}
|
||||
|
||||
init : ( Model, Cmd Msg )
|
||||
init =
|
||||
@ -260,18 +357,8 @@ view :
|
||||
(Msg -> msg)
|
||||
-> Style msg
|
||||
-> Model
|
||||
->
|
||||
{ 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
|
||||
}
|
||||
-> ExampleView msg
|
||||
|
||||
view msgMapper style model =
|
||||
{ button =
|
||||
Button.view (Button >> msgMapper) style (.button model)
|
||||
@ -304,48 +391,14 @@ toCardList :
|
||||
}
|
||||
-> List ( String, Element msg, Element msg )
|
||||
toCardList { idle, msgMapper, style, model } =
|
||||
[ { title = "Button"
|
||||
, example = .button
|
||||
, test = Test.button
|
||||
}
|
||||
, { title = "Select"
|
||||
, example = .select
|
||||
, test = Test.select
|
||||
}
|
||||
, { title = "Multi Select"
|
||||
, example = .multiSelect
|
||||
, test = Test.multiSelect
|
||||
}
|
||||
, { title = "Expansion Panel"
|
||||
, example = .expansionPanel
|
||||
, test = Test.expansionPanel
|
||||
}
|
||||
, { title = "Tab"
|
||||
, example = .tab
|
||||
, test = Test.tab
|
||||
}
|
||||
, { title = "Sort Table"
|
||||
, example = .sortTable
|
||||
, test = Test.sortTable
|
||||
}
|
||||
, { title = "Modal"
|
||||
, example = .modal
|
||||
, test = Test.modal
|
||||
}
|
||||
, { title = "Dialog"
|
||||
, example = .dialog
|
||||
, test = Test.dialog
|
||||
}
|
||||
, { title = "Text Input"
|
||||
, example = .textInput
|
||||
, test = Test.textInput
|
||||
}
|
||||
, { title = "List"
|
||||
, example = .list
|
||||
, test = Test.list
|
||||
}
|
||||
]
|
||||
|> List.sortBy .title
|
||||
asList
|
||||
|> List.map
|
||||
(\example ->
|
||||
{ title = example |> toString
|
||||
, example = example |> get
|
||||
, test = example |> toTests
|
||||
}
|
||||
)
|
||||
|> List.map
|
||||
(\{ title, example, test } ->
|
||||
( title
|
||||
|
||||
@ -35,30 +35,6 @@ sortTable palette =
|
||||
, defaultIcon = Element.none
|
||||
}
|
||||
|
||||
layout : Palette -> String -> LayoutStyle msg
|
||||
layout palette string =
|
||||
{ container = [Font.family
|
||||
[ Font.typeface "Roboto"
|
||||
, Font.sansSerif
|
||||
]
|
||||
,Font.size 16
|
||||
, Font.letterSpacing 0.5]
|
||||
, snackbar = Material.snackbar palette
|
||||
, layout = Element.layout
|
||||
, header = Template.box <| string ++ ":header"
|
||||
, menuButton = Template.button <| string ++ ":menuButton"
|
||||
, sheetButton = Template.button <| string ++ ":sheetButton"
|
||||
, menuTabButton = Template.button <| string ++ ":menuTabButton"
|
||||
, sheet = Template.box <| string ++ ":sheet"
|
||||
, menuIcon = Template.icon <| string ++ ":menuIcon"
|
||||
, moreVerticalIcon = Template.icon <| string ++ ":moreVerticalIcon"
|
||||
, spacing = 8
|
||||
, title = Template.box <| string ++ ":title"
|
||||
, searchIcon = Template.icon <| string ++ ":searchIcon"
|
||||
, search = Template.box <| string ++ ":search"
|
||||
, searchFill = Template.box <| string ++ ":searchFill"
|
||||
}
|
||||
|
||||
|
||||
style : Palette -> Style msg
|
||||
style palette =
|
||||
@ -70,10 +46,10 @@ style palette =
|
||||
, button = Material.outlinedButton palette
|
||||
, primaryButton = Material.containedButton palette
|
||||
, selectButton = Material.toggleButton palette
|
||||
, tab = Template.tab <| "tab"
|
||||
, tab = Material.tab palette
|
||||
, textInput = Material.textInput palette
|
||||
, chipButton = Material.chip palette
|
||||
, expansionPanel = Material.expansionPanel palette
|
||||
, dialog = Material.alertDialog palette
|
||||
, layout = layout palette "layout"
|
||||
, layout = Material.layout palette "layout"
|
||||
}
|
||||
|
||||
@ -8,11 +8,13 @@ import Browser.Navigation as Navigation
|
||||
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 Framework
|
||||
import Framework.Grid as Grid
|
||||
import Framework.Heading as Heading
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes as Attributes
|
||||
import Icons
|
||||
import Reusable
|
||||
import Stateless
|
||||
@ -25,7 +27,7 @@ import Widget.ScrollingNav as ScrollingNav
|
||||
|
||||
type alias LoadedModel =
|
||||
{ stateless : Stateless.Model
|
||||
, scrollingNav : ScrollingNav.Model Section
|
||||
, scrollingNav : ScrollingNav.Model Example
|
||||
, layout : Layout LoadedMsg
|
||||
, displayDialog : Bool
|
||||
, window :
|
||||
@ -48,14 +50,14 @@ type Model
|
||||
|
||||
type LoadedMsg
|
||||
= StatelessSpecific Stateless.Msg
|
||||
| UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section)
|
||||
| UpdateScrollingNav (ScrollingNav.Model Example -> ScrollingNav.Model Example)
|
||||
| TimePassed Int
|
||||
| AddSnackbar ( String, Bool )
|
||||
| ToggleDialog Bool
|
||||
| ChangedSidebar (Maybe Part)
|
||||
| Resized { width : Int, height : Int }
|
||||
| Load String
|
||||
| JumpTo Section
|
||||
| JumpTo Example
|
||||
| ChangedSearch String
|
||||
| SetTheme Theme
|
||||
| Idle
|
||||
@ -71,9 +73,9 @@ initialModel { viewport } =
|
||||
let
|
||||
( scrollingNav, cmd ) =
|
||||
ScrollingNav.init
|
||||
{ toString = Section.toString
|
||||
, fromString = Section.fromString
|
||||
, arrangement = Section.asList
|
||||
{ toString = Example.toString
|
||||
, fromString = Example.fromString
|
||||
, arrangement = Example.asList
|
||||
, toMsg =
|
||||
\result ->
|
||||
case result of
|
||||
@ -170,24 +172,6 @@ view model =
|
||||
, text = "Github"
|
||||
, icon = Icons.github |> 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 []
|
||||
}
|
||||
, { onPress =
|
||||
if m.theme /= Material then
|
||||
Just <| SetTheme <| Material
|
||||
@ -206,6 +190,25 @@ view model =
|
||||
, 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 =
|
||||
@ -219,9 +222,10 @@ view model =
|
||||
, label = "Search"
|
||||
}
|
||||
} <|
|
||||
([ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
|
||||
, [ m.scrollingNav
|
||||
|> ScrollingNav.view
|
||||
(
|
||||
[ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
|
||||
, [StatelessViews,ReusableViews]
|
||||
|> List.map
|
||||
(\section ->
|
||||
(case section of
|
||||
ReusableViews ->
|
||||
@ -238,7 +242,9 @@ view model =
|
||||
}
|
||||
)
|
||||
|> (\{ title, description, items } ->
|
||||
[ Element.el Heading.h2 <| Element.text <| title
|
||||
[ title
|
||||
|> Element.text
|
||||
|> Element.el ( Heading.h2 )
|
||||
, if m.search.current == "" then
|
||||
description
|
||||
|> Element.text
|
||||
@ -262,7 +268,10 @@ view model =
|
||||
|> List.map
|
||||
(\( name, elem, more ) ->
|
||||
[ [ Element.text name
|
||||
|> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink ])
|
||||
|> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink
|
||||
, name
|
||||
|> Attributes.id
|
||||
|> Element.htmlAttribute])
|
||||
, elem
|
||||
]
|
||||
|> Element.column Grid.simple
|
||||
@ -282,10 +291,12 @@ view model =
|
||||
|> Element.column (Grid.section ++ [ Element.centerX ])
|
||||
)
|
||||
)
|
||||
]
|
||||
|> Element.column Framework.container
|
||||
-- |> Element.column Grid.section
|
||||
--]
|
||||
|> Element.column (Framework.container ++ style.layout.container)
|
||||
]
|
||||
|> Element.column Grid.compact)
|
||||
|> Element.column Grid.compact
|
||||
)
|
||||
|
||||
|
||||
updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
|
||||
|
||||
@ -73,3 +73,4 @@ button style { onPress, text, icon } =
|
||||
, Element.text text |> Element.el style.text
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -127,12 +127,13 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
|
||||
|> Array.fromList
|
||||
|> Array.get option
|
||||
)
|
||||
|> Maybe.map (.text >> Element.text >> Element.el style.title)
|
||||
|> Maybe.map (.text >> Element.text)
|
||||
|> Maybe.withDefault title
|
||||
|> Element.el style.title
|
||||
]
|
||||
|
||||
else
|
||||
[ title
|
||||
[ title |> Element.el style.title
|
||||
, menu
|
||||
|> Widget.select
|
||||
|> List.map (Widget.selectButton style.menuTabButton)
|
||||
@ -240,7 +241,9 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
|
||||
]
|
||||
, menu
|
||||
|> Widget.select
|
||||
|> List.map (Widget.selectButton style.sheetButton)
|
||||
|> List.map
|
||||
(Widget.selectButton style.sheetButton
|
||||
)
|
||||
]
|
||||
|> List.concat
|
||||
|> Element.column [ Element.width <| Element.fill ]
|
||||
@ -297,20 +300,20 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
|
||||
, Element.inFront snackbar
|
||||
]
|
||||
, if (layout.active /= Nothing) || (dialog /= Nothing) then
|
||||
(Element.height <| Element.px <| window.height)
|
||||
:: (case dialog of
|
||||
Just dialogConfig ->
|
||||
dialogConfig
|
||||
--(Element.height <| Element.px <| window.height)
|
||||
-- ::
|
||||
case dialog of
|
||||
Just dialogConfig ->
|
||||
dialogConfig
|
||||
|
||||
Nothing ->
|
||||
Widget.modal
|
||||
{ onDismiss =
|
||||
Nothing
|
||||
|> onChangedSidebar
|
||||
|> Just
|
||||
, content = sheet
|
||||
}
|
||||
)
|
||||
Nothing ->
|
||||
Widget.modal
|
||||
{ onDismiss =
|
||||
Nothing
|
||||
|> onChangedSidebar
|
||||
|> Just
|
||||
, content = sheet
|
||||
}
|
||||
|
||||
else
|
||||
[]
|
||||
|
||||
@ -5,7 +5,7 @@ module Widget.Style.Material exposing
|
||||
, alertDialog
|
||||
, row, column, cardColumn
|
||||
, expansionPanel
|
||||
, chip, darkPalette, snackbar, textInput
|
||||
, chip, darkPalette, iconButton, layout, snackbar, tab, tabButton, textInput
|
||||
)
|
||||
|
||||
{-|
|
||||
@ -60,12 +60,13 @@ import Widget.Style
|
||||
, ColumnStyle
|
||||
, DialogStyle
|
||||
, ExpansionPanelStyle
|
||||
, LayoutStyle
|
||||
, RowStyle
|
||||
, SnackbarStyle
|
||||
, SortTableStyle
|
||||
, TabStyle
|
||||
, TextInputStyle
|
||||
)
|
||||
import Widget.Style.Template as Template
|
||||
|
||||
|
||||
|
||||
@ -239,6 +240,7 @@ accessibleWithTextColor c color =
|
||||
)
|
||||
|
||||
|
||||
toCIELCH : Color -> { l : Float, c : Float, h : Float }
|
||||
toCIELCH =
|
||||
Convert.colorToLab
|
||||
>> (\{ l, a, b } ->
|
||||
@ -249,6 +251,7 @@ toCIELCH =
|
||||
)
|
||||
|
||||
|
||||
fromCIELCH : { l : Float, c : Float, h : Float } -> Color
|
||||
fromCIELCH =
|
||||
(\{ l, c, h } ->
|
||||
{ l = l
|
||||
@ -524,7 +527,7 @@ textButton palette =
|
||||
}
|
||||
|
||||
|
||||
{-| Implementation Detail:
|
||||
{-| Technical Remark:
|
||||
|
||||
- Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)
|
||||
|
||||
@ -613,13 +616,72 @@ toggleButton palette =
|
||||
}
|
||||
|
||||
|
||||
{-| Technical Remark:
|
||||
|
||||
- Could not find any specification details
|
||||
|
||||
-}
|
||||
iconButton : Palette -> ButtonStyle msg
|
||||
iconButton palette =
|
||||
{ container =
|
||||
(baseButton palette |> .container)
|
||||
++ [ Element.height <| Element.px 48
|
||||
, Border.rounded 24
|
||||
|
||||
--, Font.color <| fromColor <| palette.primary
|
||||
, Element.mouseDown
|
||||
[ palette.surface
|
||||
|> scaleOpacity buttonPressedOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.focused
|
||||
[ palette.surface
|
||||
|> scaleOpacity buttonFocusOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.mouseOver
|
||||
[ palette.surface
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
]
|
||||
, labelRow =
|
||||
[ Element.spacing 8
|
||||
, Element.width <| Element.shrink
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
]
|
||||
, text = baseButton palette |> .text
|
||||
, ifDisabled =
|
||||
(baseButton palette |> .ifDisabled)
|
||||
++ [ gray
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.mouseDown []
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
]
|
||||
, ifActive =
|
||||
[ palette.surface
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, otherwise =
|
||||
[]
|
||||
}
|
||||
|
||||
|
||||
|
||||
{-------------------------------------------------------------------------------
|
||||
-- C H I P
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
{-| Implementation Detail:
|
||||
{-| Technical Remark:
|
||||
|
||||
- There seams to be a bug, where in the mouseOver effects are now visible.
|
||||
This might have something to do with <https://github.com/mdgriffith/elm-ui/issues/47>.
|
||||
@ -747,7 +809,7 @@ buttonRow =
|
||||
}
|
||||
|
||||
|
||||
{-| Implementation Detail:
|
||||
{-| Technical Remark:
|
||||
|
||||
This is a simplification of the [Material Design Card
|
||||
](https://material.io/components/cards) and might get replaced at a later date.
|
||||
@ -849,17 +911,18 @@ alertDialog palette =
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
icon : String -> List (Svg Never) -> Element Never
|
||||
icon size =
|
||||
icon : String -> Int -> List (Svg Never) -> Element Never
|
||||
icon string size =
|
||||
Svg.svg
|
||||
[ Svg.Attributes.height "24"
|
||||
[ Svg.Attributes.height <| String.fromInt size
|
||||
, Svg.Attributes.stroke "currentColor"
|
||||
, Svg.Attributes.fill "currentColor"
|
||||
, Svg.Attributes.strokeLinecap "round"
|
||||
, Svg.Attributes.strokeLinejoin "round"
|
||||
, Svg.Attributes.strokeWidth "2"
|
||||
, Svg.Attributes.viewBox size
|
||||
, Svg.Attributes.width "24"
|
||||
|
||||
--, Svg.Attributes.strokeLinecap "round"
|
||||
--, Svg.Attributes.strokeLinejoin "round"
|
||||
--, Svg.Attributes.strokeWidth "2"
|
||||
, Svg.Attributes.viewBox string
|
||||
, Svg.Attributes.width <| String.fromInt size
|
||||
]
|
||||
>> Element.html
|
||||
>> Element.el []
|
||||
@ -867,20 +930,20 @@ icon size =
|
||||
|
||||
expand_less : Element Never
|
||||
expand_less =
|
||||
icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
|
||||
icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
|
||||
|
||||
|
||||
expand_more : Element Never
|
||||
expand_more =
|
||||
icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
|
||||
icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
|
||||
|
||||
|
||||
{-| Implementation Details:
|
||||
{-| Technical Remarks:
|
||||
|
||||
- The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
|
||||
The newer version is part of the List component.
|
||||
The styling is taken from the [new specification](https://material.io/components/lists#specs).
|
||||
- The Icons are taken from [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest) but seem wrong.
|
||||
- The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
|
||||
|
||||
-}
|
||||
expansionPanel : Palette -> ExpansionPanelStyle msg
|
||||
@ -923,7 +986,7 @@ expansionPanel palette =
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
{-| Implementation Detail:
|
||||
{-| Technical Remark:
|
||||
|
||||
- The text color of the button was not given in the specification. This implementation
|
||||
adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)
|
||||
@ -971,7 +1034,7 @@ snackbar palette =
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
{-| Implementation Detail:
|
||||
{-| Technical Remark:
|
||||
|
||||
- This is just a temporary implementation. It will soon be replaced with the official implementation.
|
||||
|
||||
@ -981,27 +1044,111 @@ textInput palette =
|
||||
{ chipButton = chip palette
|
||||
, chipsRow = [ Element.spacing 8 ]
|
||||
, containerRow =
|
||||
[ Element.spacing 8
|
||||
, Element.paddingXY 8 0
|
||||
, Border.width 1
|
||||
, Border.rounded 4
|
||||
, palette.on.surface
|
||||
|> scaleOpacity 0.14
|
||||
|> fromColor
|
||||
|> Border.color
|
||||
, Element.focused
|
||||
[ Border.shadow <| shadow 4
|
||||
, palette.primary
|
||||
|> fromColor
|
||||
|> Border.color
|
||||
]
|
||||
, Element.mouseOver [ Border.shadow <| shadow 2 ]
|
||||
]
|
||||
(palette.surface
|
||||
|> textAndBackground
|
||||
)
|
||||
++ [ Element.spacing 8
|
||||
, Element.paddingXY 8 0
|
||||
, Border.width 1
|
||||
, Border.rounded 4
|
||||
, palette.on.surface
|
||||
|> scaleOpacity 0.14
|
||||
|> fromColor
|
||||
|> Border.color
|
||||
, Element.focused
|
||||
[ Border.shadow <| shadow 4
|
||||
, palette.primary
|
||||
|> fromColor
|
||||
|> Border.color
|
||||
]
|
||||
, Element.mouseOver [ Border.shadow <| shadow 2 ]
|
||||
]
|
||||
, input =
|
||||
[ Border.width 0
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
(palette.surface
|
||||
|> textAndBackground
|
||||
)
|
||||
++ [ Border.width 0
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
{-------------------------------------------------------------------------------
|
||||
-- T A B
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
tabButton : Palette -> ButtonStyle msg
|
||||
tabButton palette =
|
||||
{ container =
|
||||
buttonFont
|
||||
++ [ Element.height <| Element.px 48
|
||||
, Element.fill
|
||||
|> Element.maximum 360
|
||||
|> Element.minimum 90
|
||||
|> Element.width
|
||||
, Element.paddingXY 12 16
|
||||
, Font.color <| fromColor <| palette.primary
|
||||
, Element.mouseDown
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonPressedOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.focused
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonFocusOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.mouseOver
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
]
|
||||
, labelRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
]
|
||||
, text = []
|
||||
, ifDisabled =
|
||||
(baseButton palette |> .ifDisabled)
|
||||
++ [ gray
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.mouseDown []
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
]
|
||||
, ifActive =
|
||||
[ Element.height <| Element.px 48
|
||||
, Border.widthEach
|
||||
{ bottom = 2
|
||||
, left = 0
|
||||
, right = 0
|
||||
, top = 0
|
||||
}
|
||||
]
|
||||
, otherwise =
|
||||
[]
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
tab : Palette -> TabStyle msg
|
||||
tab palette =
|
||||
{ button = tabButton palette
|
||||
, optionRow =
|
||||
[ Element.spaceEvenly
|
||||
, Border.shadow <| shadow 4
|
||||
]
|
||||
, containerColumn = [ Element.spacing 8 ]
|
||||
, content = [ Element.width <| Element.fill ]
|
||||
}
|
||||
|
||||
|
||||
@ -1010,3 +1157,203 @@ textInput palette =
|
||||
-- L A Y O U T
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
more_vert : Element Never
|
||||
more_vert =
|
||||
icon "0 0 48 48" 24 [ 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" ] [] ]
|
||||
|
||||
|
||||
search : Element Never
|
||||
search =
|
||||
icon "0 0 48 48" 24 [ 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" ] [] ]
|
||||
|
||||
|
||||
menu : Element Never
|
||||
menu =
|
||||
icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z" ] [] ]
|
||||
|
||||
|
||||
menuTabButton : Palette -> ButtonStyle msg
|
||||
menuTabButton palette =
|
||||
{ container =
|
||||
buttonFont
|
||||
++ [ Element.height <| Element.px 56
|
||||
, Element.fill
|
||||
|> Element.maximum 360
|
||||
|> Element.minimum 90
|
||||
|> Element.width
|
||||
, Element.paddingXY 12 16
|
||||
, palette.primary
|
||||
|> accessibleTextColor
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.alignBottom
|
||||
, Element.mouseDown
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonPressedOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.focused
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonFocusOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.mouseOver
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
]
|
||||
, labelRow =
|
||||
[ Element.spacing <| 8
|
||||
, Element.centerY
|
||||
, Element.centerX
|
||||
]
|
||||
, text = []
|
||||
, ifDisabled =
|
||||
(baseButton palette |> .ifDisabled)
|
||||
++ [ gray
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.mouseDown []
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
]
|
||||
, ifActive =
|
||||
[ Border.widthEach
|
||||
{ bottom = 2
|
||||
, left = 0
|
||||
, right = 0
|
||||
, top = 0
|
||||
}
|
||||
]
|
||||
, otherwise =
|
||||
[]
|
||||
}
|
||||
|
||||
|
||||
drawerButton : Palette -> ButtonStyle msg
|
||||
drawerButton palette =
|
||||
{ container =
|
||||
[ Font.size 14
|
||||
, Font.semiBold
|
||||
, Font.letterSpacing 0.25
|
||||
, Element.height <| Element.px 36
|
||||
, Element.width <| Element.fill
|
||||
, Element.paddingXY 8 8
|
||||
, Border.rounded <| 4
|
||||
, palette.surface
|
||||
|> accessibleTextColor
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.mouseDown
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonPressedOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.focused
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonFocusOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.mouseOver
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
]
|
||||
]
|
||||
, labelRow = baseButton palette |> .labelRow
|
||||
, text = baseButton palette |> .text
|
||||
, ifDisabled =
|
||||
(baseButton palette |> .ifDisabled)
|
||||
++ [ gray
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
, Element.mouseDown []
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
]
|
||||
, ifActive =
|
||||
[ palette.primary
|
||||
|> scaleOpacity buttonHoverOpacity
|
||||
|> fromColor
|
||||
|> Background.color
|
||||
, palette.primary
|
||||
|> fromColor
|
||||
|> Font.color
|
||||
]
|
||||
, otherwise =
|
||||
[]
|
||||
}
|
||||
|
||||
|
||||
{-| Technical Remark:
|
||||
|
||||
- Due to [a bug in Elm-Ui](https://github.com/mdgriffith/elm-ui/issues/47) the menu button still behave wierd.
|
||||
I've not found a workaround for it.
|
||||
- The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
|
||||
- The drawer button as not taken from the specification (This will been to be added later)
|
||||
|
||||
-}
|
||||
layout : Palette -> String -> LayoutStyle msg
|
||||
layout palette string =
|
||||
{ container =
|
||||
(palette.background |> textAndBackground)
|
||||
++ [ Font.family
|
||||
[ Font.typeface "Roboto"
|
||||
, Font.sansSerif
|
||||
]
|
||||
, Font.size 16
|
||||
, Font.letterSpacing 0.5
|
||||
]
|
||||
, snackbar = snackbar palette
|
||||
, layout = Element.layout
|
||||
, header =
|
||||
(palette.primary
|
||||
|> textAndBackground
|
||||
)
|
||||
++ [ Element.height <| Element.px 56
|
||||
, Element.padding 16
|
||||
, Element.width <| Element.minimum 360 <| Element.fill
|
||||
]
|
||||
, menuButton = iconButton palette
|
||||
, sheetButton = drawerButton palette
|
||||
, menuTabButton = menuTabButton palette
|
||||
, sheet =
|
||||
(palette.surface |> textAndBackground)
|
||||
++ [ Element.width <| Element.maximum 360 <| Element.fill
|
||||
, Element.padding 8
|
||||
, Element.spacing 8
|
||||
]
|
||||
, menuIcon = menu
|
||||
, moreVerticalIcon = more_vert
|
||||
, spacing = 8
|
||||
, title = h6 ++ [ Element.paddingXY 8 0 ]
|
||||
, searchIcon = search
|
||||
, search =
|
||||
(palette.surface |> textAndBackground)
|
||||
++ [ Element.spacing 8
|
||||
, Element.paddingXY 8 8
|
||||
, Element.height <| Element.px 32
|
||||
, Border.width 1
|
||||
, Border.rounded 4
|
||||
, palette.on.surface
|
||||
|> scaleOpacity 0.14
|
||||
|> fromColor
|
||||
|> Border.color
|
||||
, Element.focused
|
||||
[ Border.shadow <| shadow 4
|
||||
]
|
||||
, Element.mouseOver [ Border.shadow <| shadow 2 ]
|
||||
, Element.width <| Element.maximum 360 <| Element.fill
|
||||
, Element.alignRight
|
||||
]
|
||||
, searchFill =
|
||||
palette.surface |> textAndBackground
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user