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

More improvements on the grays #63

Browse Source
This commit is contained in:
Lucas Payr 2021-06-03 22:38:14 +02:00
parent cb10b08dec
commit cfe6167dcf
11 changed files with 128 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,6 @@ book =
|> Story.addTile viewButton
|> Story.addTile viewTextButton
|> Story.addTile viewIconButton
|> Story.addTile viewSelectButton
--|> Story.addTile viewButtonSource
)
|> Story.addStory
@ -88,7 +87,7 @@ viewLabel =
viewButton palette button text icon onPress _ _ =
{ title = Nothing
{ title = Just "Button"
, position = Tile.LeftColumnTile
, attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
, body =
@ -97,8 +96,7 @@ viewButton palette button text icon onPress _ _ =
, Element.centerY
, Element.Font.color <| MaterialColor.fromColor palette.on.surface
]
[ viewLabel "button"
, Widget.button
[ Widget.button
(button palette
|> Customize.elementButton
[ Element.alignLeft
@ -114,7 +112,7 @@ viewButton palette button text icon onPress _ _ =
viewTextButton palette button text icon onPress _ _ =
{ title = Nothing
{ title = Just "Text Button"
, position = Tile.LeftColumnTile
, attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
, body =
@ -123,8 +121,7 @@ viewTextButton palette button text icon onPress _ _ =
, Element.centerY
, Element.Font.color <| MaterialColor.fromColor palette.on.surface
]
[ viewLabel "textButton"
, Widget.textButton
[ Widget.textButton
(button palette
|> Customize.elementButton
[ Element.alignLeft
@ -139,7 +136,7 @@ viewTextButton palette button text icon onPress _ _ =
viewIconButton palette button text icon onPress _ _ =
{ title = Nothing
{ title = Just "Icon Button"
, position = Tile.LeftColumnTile
, attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
, body =
@ -148,8 +145,7 @@ viewIconButton palette button text icon onPress _ _ =
, Element.centerY
, Element.Font.color <| MaterialColor.fromColor palette.on.surface
]
[ viewLabel "textButton"
, Widget.iconButton
[ Widget.iconButton
(button palette
|> Customize.elementButton
[ Element.alignLeft
@ -164,49 +160,6 @@ viewIconButton palette button text icon onPress _ _ =
}
viewSelectButton palette button text icon onPress _ _ =
{ title = Nothing
, position = Tile.LeftColumnTile
, attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
, body =
Element.row
[ Element.width Element.fill
, Element.centerY
, Element.Font.color <| MaterialColor.fromColor palette.on.surface
]
[ viewLabel "select button"
, Element.column [ Element.width Element.fill, Element.spacing 8 ]
[ Widget.selectButton
(button palette
|> Customize.elementButton
[ Element.centerY
, Element.alignLeft
]
)
( False
, { text = text
, icon = icon
, onPress = onPress
}
)
, Widget.selectButton
(button palette
|> Customize.elementButton
[ Element.centerY
, Element.alignLeft
]
)
( True
, { text = text
, icon = icon
, onPress = onPress
}
)
]
]
}
viewButtonSource palette text icon onPress size _ _ =
{ title = Just "source code"
, position = Tile.FullWidthTile

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

@ -7,6 +7,7 @@ import SelectList exposing (SelectList)
import UIExplorer.Tile as Tile exposing (Context)
import Widget
import Widget.Material as Material
import Widget.Material.Typography as Typography
type StoryInfo
@ -319,7 +320,13 @@ storyView context model =
case model of
RangeStoryModel label { unit, min, max, value } ->
Element.column [ Element.spacing 8 ]
[ Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")"
[ label
++ " ("
++ String.fromInt value
++ unit
++ ")"
|> Element.text
|> Element.el Typography.caption
, Input.slider []
{ onChange = round >> String.fromInt >> StorySelect label
, label = Input.labelHidden label
@ -333,7 +340,7 @@ storyView context model =
TextStoryModel label value ->
Element.column [ Element.spacing 8 ]
[ Element.text label
[ Element.text label |> Element.el Typography.caption
, Widget.textInput (Material.textInput context.palette)
{ chips = []
, onChange = StorySelect label
@ -345,7 +352,7 @@ storyView context model =
OptionListStoryModel label options ->
Element.column [ Element.spacing 8 ]
[ Element.text label
[ Element.text label |> Element.el Typography.caption
, { selected =
Just <| SelectList.index options
, options =
@ -374,8 +381,9 @@ storyView context model =
]
BoolStoryModel label value ->
Element.row [ Element.spacing 8 ]
[ Widget.switch (Material.switch context.palette)
Element.row [ Element.spaceEvenly, Element.width Element.fill ]
[ Element.text label |> Element.el Typography.caption
, Widget.switch (Material.switch context.palette)
{ description = label
, onPress =
Just <|
@ -387,7 +395,6 @@ storyView context model =
"t"
, active = value
}
, Element.text label
]

8
explorer/src/UIExplorer/Tile.elm
View File

@ -9,7 +9,7 @@ import SelectList exposing (SelectList)
import UIExplorer exposing (Page, PageSize)
import Widget exposing (Item)
import Widget.Customize as Customize
import Widget.Material as Material
import Widget.Material as Material exposing (Palette)
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
@ -411,12 +411,12 @@ withTitle title tile =
}
canvas : Element msg -> Element msg
canvas view =
canvas : Palette -> Element msg -> Element msg
canvas palette view =
Element.el
[ Element.padding 30
, Element.width Element.fill
, Background.color <| MaterialColor.fromColor <| MaterialColor.gray
, Background.color <| MaterialColor.fromColor <| Material.gray palette
]
<|
Element.el

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

@ -8,7 +8,7 @@ import Internal.AppBar exposing (AppBarStyle)
import Internal.Button exposing (ButtonStyle)
import Internal.Material.Button as Button
import Internal.Material.Icon as Icon
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Internal.Material.TextInput as TextInput
import Widget.Customize as Customize
import Widget.Icon as Icon exposing (Icon)
@ -52,7 +52,7 @@ menuTabButton palette =
]
, ifDisabled =
(Button.baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -84,7 +84,7 @@ menuTabButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18

33
src/Internal/Material/Button.elm
View File

@ -6,13 +6,13 @@ import Element.Border as Border
import Element.Font as Font
import Html.Attributes as Attributes
import Internal.Button exposing (ButtonStyle)
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
baseButton : Palette -> ButtonStyle msg
baseButton _ =
baseButton palette =
{ elementButton =
Typography.button
++ [ Element.height <| Element.px 36
@ -35,15 +35,15 @@ baseButton _ =
, icon =
{ ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, ifActive =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
}
}
@ -82,11 +82,11 @@ containedButton palette =
]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity
|> MaterialColor.fromColor
|> Background.color
, Font.color <| MaterialColor.fromColor <| MaterialColor.gray
, Font.color <| MaterialColor.fromColor <| Palette.gray palette
, Border.shadow <| MaterialColor.shadow 0
, Element.mouseDown []
, Element.mouseOver []
@ -126,7 +126,8 @@ containedButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color =
Palette.gray palette
}
, otherwise =
{ size = 18
@ -174,7 +175,7 @@ outlinedButton palette =
]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -212,7 +213,7 @@ outlinedButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18
@ -252,7 +253,7 @@ textButton palette =
]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -278,7 +279,7 @@ textButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18
@ -342,7 +343,7 @@ toggleButton palette =
|> MaterialColor.scaleOpacity 0.14
|> MaterialColor.fromColor
|> Border.color
, MaterialColor.gray
, Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -401,7 +402,7 @@ toggleButton palette =
}
, ifDisabled =
{ size = 24
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 24
@ -450,7 +451,7 @@ iconButton palette =
]
, ifDisabled =
(baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -481,7 +482,7 @@ iconButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18

64
src/Internal/Material/Item.elm
View File

@ -22,13 +22,13 @@ import Internal.Button exposing (ButtonStyle)
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, InsetItemStyle, ItemStyle, MultiLineItemStyle)
import Internal.Material.Button as Button
import Internal.Material.Icon as Icon
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
fullBleedDivider _ =
fullBleedDivider palette =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
@ -39,7 +39,7 @@ fullBleedDivider _ =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
, MaterialColor.gray
, Palette.lightGray palette
|> MaterialColor.fromColor
|> Background.color
]
@ -48,7 +48,7 @@ fullBleedDivider _ =
insetDivider : Palette -> ItemStyle (DividerStyle msg) msg
insetDivider _ =
insetDivider palette =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
@ -64,7 +64,7 @@ insetDivider _ =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
, MaterialColor.gray
, Palette.lightGray palette
|> MaterialColor.fromColor
|> Background.color
]
@ -73,7 +73,7 @@ insetDivider _ =
middleDivider : Palette -> ItemStyle (DividerStyle msg) msg
middleDivider _ =
middleDivider palette =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
@ -89,7 +89,7 @@ middleDivider _ =
{ element =
[ Element.width <| Element.fill
, Element.height <| Element.px 1
, MaterialColor.gray
, Palette.lightGray palette
|> MaterialColor.fromColor
|> Background.color
]
@ -120,8 +120,8 @@ insetHeader palette =
insetDivider palette
|> .content
, title =
Typography.body2
++ [ MaterialColor.gray
Typography.caption
++ [ Palette.textGray palette
|> MaterialColor.fromColor
|> Font.color
]
@ -151,11 +151,11 @@ fullBleedHeader palette =
, content =
{ divider = { element = [] }
, title =
Typography.caption
++ [ MaterialColor.gray
Typography.subtitle2
++ [ Palette.textGray palette
|> MaterialColor.fromColor
|> Font.color
, Element.paddingXY 16 0
, Element.paddingXY 16 8
]
}
}
@ -185,7 +185,7 @@ fullBleedItem palette =
insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg
insetItem _ =
insetItem palette =
{ element = [ Element.padding 0 ]
, content =
{ elementButton =
@ -200,19 +200,19 @@ insetItem _ =
]
, otherwise =
[ Element.mouseDown <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.focused <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.mouseOver <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor
|> Background.color
@ -229,12 +229,12 @@ insetItem _ =
]
, content =
{ size = 24
, color = MaterialColor.gray
, color = Palette.gray palette
}
}
, content =
{ size = 24
, color = MaterialColor.gray
, color = Palette.gray palette
}
}
}
@ -243,7 +243,7 @@ insetItem _ =
multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
multiLineItem _ =
multiLineItem palette =
{ element = [ Element.padding 0 ]
, content =
{ elementButton =
@ -258,19 +258,19 @@ multiLineItem _ =
]
, otherwise =
[ Element.mouseDown <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.focused <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.mouseOver <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor
|> Background.color
@ -289,7 +289,7 @@ multiLineItem _ =
, text =
{ elementText =
Typography.body2
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
]
@ -303,12 +303,12 @@ multiLineItem _ =
]
, content =
{ size = 24
, color = MaterialColor.gray
, color = Palette.textGray palette
}
}
, content =
{ size = 24
, color = MaterialColor.gray
, color = Palette.textGray palette
}
}
}
@ -317,7 +317,7 @@ multiLineItem _ =
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
imageItem _ =
imageItem palette =
{ element = [ Element.padding 0 ]
, content =
{ elementButton =
@ -332,19 +332,19 @@ imageItem _ =
]
, otherwise =
[ Element.mouseDown <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.focused <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.mouseOver <|
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor
|> Background.color
@ -366,7 +366,7 @@ imageItem _ =
}
, content =
{ size = 24
, color = MaterialColor.gray
, color = Palette.gray palette
}
}
}
@ -419,7 +419,7 @@ selectItem palette =
]
, ifDisabled =
(Button.baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -454,7 +454,7 @@ selectItem palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18

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

@ -13,7 +13,7 @@ import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Internal.List exposing (ColumnStyle, RowStyle)
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Widget.Material.Color as MaterialColor
@ -88,6 +88,11 @@ cardColumn palette =
[ Border.shadow <| MaterialColor.shadow 4 ]
, Element.alignTop
, Border.rounded 4
, Border.width 1
, palette.on.surface
|> MaterialColor.scaleOpacity 0.14
|> MaterialColor.fromColor
|> Border.color
]
, content =
{ element =
@ -119,12 +124,6 @@ cardColumn palette =
, bottomLeft = 0
, bottomRight = 0
}
, Border.widthEach
{ top = 1
, left = 1
, right = 1
, bottom = 0
}
]
, ifLast =
[ Border.roundEach
@ -133,21 +132,9 @@ cardColumn palette =
, bottomLeft = 4
, bottomRight = 4
}
, Border.widthEach
{ top = 0
, left = 1
, right = 1
, bottom = 1
}
]
, otherwise =
[ Border.rounded 0
, Border.widthEach
{ top = 0
, left = 1
, right = 1
, bottom = 0
}
]
}
}
@ -160,14 +147,14 @@ sideSheet palette =
++ [ Element.width <| Element.maximum 360 <| Element.fill
, Element.height <| Element.fill
, Element.paddingXY 0 8
, MaterialColor.gray
, Palette.gray palette
|> MaterialColor.fromColor
|> Border.color
]
, content =
{ element =
[ Element.width <| Element.fill
, MaterialColor.gray
, Palette.gray palette
|> MaterialColor.fromColor
|> Border.color
]

21
src/Internal/Material/Palette.elm
View File

@ -1,6 +1,7 @@
module Internal.Material.Palette exposing (Palette, darkPalette, defaultPalette)
module Internal.Material.Palette exposing (Palette, darkPalette, defaultPalette, gray, lightGray, textGray)
import Color exposing (Color)
import Widget.Material.Color as MaterialColor
type alias Palette =
@ -51,3 +52,21 @@ darkPalette =
, error = Color.rgb255 0x00 0x00 0x00
}
}
gray : Palette -> Color
gray palette =
palette.surface
|> MaterialColor.withShade palette.on.surface 0.5
lightGray : Palette -> Color
lightGray palette =
palette.surface
|> MaterialColor.withShade palette.on.surface 0.14
textGray : Palette -> Color
textGray palette =
palette.surface
|> MaterialColor.withShade palette.on.surface 0.77

7
src/Internal/Material/Switch.elm
View File

@ -5,7 +5,7 @@ import Element
import Element.Background as Background
import Element.Border as Border
import Html.Attributes as Attributes
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Internal.Switch exposing (SwitchStyle)
import Widget.Material.Color as MaterialColor
@ -30,7 +30,8 @@ switch palette =
, ifDisabled =
[ Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
, palette.surface
|> MaterialColor.withShade MaterialColor.gray (0.5 * MaterialColor.buttonDisabledOpacity)
|> MaterialColor.withShade (Palette.gray palette)
(0.5 * MaterialColor.buttonDisabledOpacity)
|> MaterialColor.fromColor
|> Background.color
]
@ -41,7 +42,7 @@ switch palette =
|> Background.color
]
, otherwise =
[ MaterialColor.gray
[ Palette.gray palette
|> MaterialColor.scaleOpacity 0.5
|> MaterialColor.fromColor
|> Background.color

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

@ -6,7 +6,7 @@ import Element.Border as Border
import Element.Font as Font
import Internal.Button exposing (ButtonStyle)
import Internal.Material.Button as Button
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Palette as Palette exposing (Palette)
import Internal.Tab exposing (TabStyle)
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
@ -44,7 +44,7 @@ tabButton palette =
]
, ifDisabled =
(Button.baseButton palette |> .ifDisabled)
++ [ MaterialColor.gray
++ [ Palette.gray palette
|> MaterialColor.fromColor
|> Font.color
, Element.mouseDown []
@ -77,7 +77,7 @@ tabButton palette =
}
, ifDisabled =
{ size = 18
, color = MaterialColor.gray
, color = Palette.gray palette
}
, otherwise =
{ size = 18

23
src/Widget/Material.elm
View File

@ -16,6 +16,7 @@ module Widget.Material exposing
, sortTable
, snackbar
, tab, tabButton
, textGray
)
{-| This module implements a Material design theme for all widgets.
@ -157,7 +158,6 @@ import Internal.Switch exposing (SwitchStyle)
import Internal.Tab exposing (TabStyle)
import Internal.TextInput exposing (TextInputStyle)
import Widget.Icon exposing (Icon)
import Widget.Material.Color as MaterialColor
import Widget.Snackbar exposing (SnackbarStyle)
@ -214,12 +214,25 @@ darkPalette =
Palette.darkPalette
{-| generates a "grayish" color that matches the on-surface color.
{-| generates a "grayish 50%" color that matches the on-surface color.
-}
gray : Palette -> Color
gray palette =
palette.on.surface
|> MaterialColor.scaleOpacity 0.14
gray =
Palette.gray
{-| generates a "grayish 14%" color that matches the on-surface color.
-}
lightGray : Palette -> Color
lightGray =
Palette.lightGray
{-| generates a grayer text color
-}
textGray : Palette -> Color
textGray =
Palette.textGray