Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-11-22 13:14:10 +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 else
style.content.content.icon.otherwise 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 Element.Font as Font
import Internal.Button exposing (ButtonStyle) import Internal.Button exposing (ButtonStyle)
import Internal.Material.Button as Button 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 import Widget.Material.Color as MaterialColor
@ -22,22 +22,22 @@ chip palette =
} }
, Border.rounded <| 16 , Border.rounded <| 16
, Element.mouseDown <| , Element.mouseDown <|
[ palette.on.surface [ palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonPressedOpacity |> MaterialColor.withShade palette.on.surface MaterialColor.buttonPressedOpacity
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Background.color |> Background.color
] ]
, Element.focused <| , Element.focused <|
[ palette.on.surface [ palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonFocusOpacity |> MaterialColor.withShade palette.on.surface MaterialColor.buttonFocusOpacity
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Background.color |> Background.color
] ]
, Element.mouseOver <| , Element.mouseOver <|
[ palette.on.surface [ palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonHoverOpacity |> MaterialColor.withShade palette.on.surface MaterialColor.buttonHoverOpacity
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Background.color |> Background.color
@ -45,8 +45,8 @@ chip palette =
] ]
, ifDisabled = , ifDisabled =
(Button.baseButton palette |> .ifDisabled) (Button.baseButton palette |> .ifDisabled)
++ (palette.on.surface ++ (palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonDisabledOpacity |> MaterialColor.withShade palette.on.surface MaterialColor.buttonDisabledOpacity
|> MaterialColor.textAndBackground |> MaterialColor.textAndBackground
) )
@ -55,62 +55,65 @@ chip palette =
, Element.focused [] , Element.focused []
] ]
, ifActive = , ifActive =
[ palette.on.surface [ palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.withShade palette.on.surface MaterialColor.buttonSelectedOpacity |> MaterialColor.withShade palette.on.surface MaterialColor.buttonSelectedOpacity
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Background.color |> Background.color
, palette.on.surface , palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.accessibleTextColor |> MaterialColor.accessibleTextColor
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Font.color |> Font.color
, Border.shadow <| MaterialColor.shadow 4 , Border.shadow <| MaterialColor.shadow 4
] ]
, otherwise = , otherwise =
[ palette.on.surface [ palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Background.color |> Background.color
, palette.on.surface , palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.accessibleTextColor |> MaterialColor.accessibleTextColor
|> MaterialColor.fromColor |> MaterialColor.fromColor
|> Font.color |> Font.color
] ]
, content = , content =
{ elementRow = [ Element.spacing 0, Element.centerY ] { elementRow =
[ Element.spacing 8
, Element.paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
, Element.centerY
]
, content = , content =
{ text = { text =
{ contentText = { contentText =
[ Element.paddingEach []
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
]
} }
, icon = , icon =
{ ifActive = { ifActive =
{ size = 18 { size = 18
, color = , color =
palette.on.surface palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.accessibleTextColor |> MaterialColor.accessibleTextColor
} }
, ifDisabled = , ifDisabled =
{ size = 18 { size = 18
, color = , color =
palette.on.surface palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.accessibleTextColor |> MaterialColor.accessibleTextColor
} }
, otherwise = , otherwise =
{ size = 18 { size = 18
, color = , color =
palette.on.surface palette
|> MaterialColor.scaleOpacity 0.12 |> Palette.lightGray
|> MaterialColor.accessibleTextColor |> MaterialColor.accessibleTextColor
} }
} }

3
src/Internal/Select.elm
View File

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