From 8a8631d8768080d11f27f7b6cd015cc46c96c55b Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Fri, 4 Jun 2021 12:09:34 +0200 Subject: [PATCH] Fixed visual bug with chips #70 --- src/Internal/Button.elm | 3 +- src/Internal/Material/Chip.elm | 65 ++++++++++++++++++---------------- src/Internal/Select.elm | 3 ++ 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/Internal/Button.elm b/src/Internal/Button.elm index ffc84a5..ef52e47 100644 --- a/src/Internal/Button.elm +++ b/src/Internal/Button.elm @@ -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 ] } diff --git a/src/Internal/Material/Chip.elm b/src/Internal/Material/Chip.elm index 345cf9b..f6a809b 100644 --- a/src/Internal/Material/Chip.elm +++ b/src/Internal/Material/Chip.elm @@ -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 } } diff --git a/src/Internal/Select.elm b/src/Internal/Select.elm index 41ca46c..64c6631 100644 --- a/src/Internal/Select.elm +++ b/src/Internal/Select.elm @@ -76,6 +76,9 @@ toggleButton style ( selected, b ) = ++ (if b.onPress == Nothing then style.ifDisabled + else if selected then + style.ifActive + else style.otherwise )