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

Fixed visual bug with chips #70

Browse Source
This commit is contained in:
Lucas Payr 2021-06-04 12:09:34 +02:00
parent e220b5b184
commit 8a8631d876
3 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Internal/Button.elm
View File

@ -97,6 +97,7 @@ button style { onPress, text, icon } =
else
style.content.content.icon.otherwise
)
, Element.text text |> Element.el style.content.content.text.contentText
, Element.text text
|> Element.el style.content.content.text.contentText
]
}

65
src/Internal/Material/Chip.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 Widget.Material.Color as MaterialColor
@ -22,22 +22,22 @@ chip palette =
}
, Border.rounded <| 16
, Element.mouseDown <|
[ palette.on.surface
|> MaterialColor.scaleOpacity 0.12
[ palette
|> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.focused <|
[ palette.on.surface
|> MaterialColor.scaleOpacity 0.12
[ palette
|> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor
|> Background.color
]
, Element.mouseOver <|
[ palette.on.surface
|> MaterialColor.scaleOpacity 0.12
[ palette
|> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor
|> Background.color
@ -45,8 +45,8 @@ chip palette =
]
, ifDisabled =
(Button.baseButton palette |> .ifDisabled)
++ (palette.on.surface
|> MaterialColor.scaleOpacity 0.12
++ (palette
|> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonDisabledOpacity
|> MaterialColor.textAndBackground
)
@ -55,62 +55,65 @@ chip palette =
, Element.focused []
]
, ifActive =
[ palette.on.surface
|> MaterialColor.scaleOpacity 0.12
[ palette
|> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonSelectedOpacity
|> MaterialColor.fromColor
|> Background.color
, palette.on.surface
|> MaterialColor.scaleOpacity 0.12
, palette
|> Palette.lightGray
|> MaterialColor.accessibleTextColor
|> MaterialColor.fromColor
|> Font.color
, Border.shadow <| MaterialColor.shadow 4
]
, otherwise =
[ palette.on.surface
|> MaterialColor.scaleOpacity 0.12
[ palette
|> Palette.lightGray
|> MaterialColor.fromColor
|> Background.color
, palette.on.surface
|> MaterialColor.scaleOpacity 0.12
, palette
|> Palette.lightGray
|> MaterialColor.accessibleTextColor
|> MaterialColor.fromColor
|> Font.color
]
, content =
{ elementRow = [ Element.spacing 0, Element.centerY ]
{ elementRow =
[ Element.spacing 8
, Element.paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
, Element.centerY
]
, content =
{ text =
{ contentText =
[ Element.paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
]
[]
}
, icon =
{ ifActive =
{ size = 18
, color =
palette.on.surface
|> MaterialColor.scaleOpacity 0.12
palette
|> Palette.lightGray
|> MaterialColor.accessibleTextColor
}
, ifDisabled =
{ size = 18
, color =
palette.on.surface
|> MaterialColor.scaleOpacity 0.12
palette
|> Palette.lightGray
|> MaterialColor.accessibleTextColor
}
, otherwise =
{ size = 18
, color =
palette.on.surface
|> MaterialColor.scaleOpacity 0.12
palette
|> Palette.lightGray
|> MaterialColor.accessibleTextColor
}
}

3
src/Internal/Select.elm
View File

@ -76,6 +76,9 @@ toggleButton style ( selected, b ) =
++ (if b.onPress == Nothing then
style.ifDisabled
else if selected then
style.ifActive
else
style.otherwise
)