From 9fc7b1f677f2983d304dfedabd6499214f60fc31 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Mon, 18 Nov 2024 12:18:30 +0100 Subject: [PATCH] push buttons: Style checked state properly (#477) Resolves #367 --- designsystems/fluent2/QskFluent2Skin.cpp | 6 +++--- designsystems/material3/QskMaterial3Skin.cpp | 17 +++++++++++++++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/designsystems/fluent2/QskFluent2Skin.cpp b/designsystems/fluent2/QskFluent2Skin.cpp index 10f73b74d..7243d3791 100644 --- a/designsystems/fluent2/QskFluent2Skin.cpp +++ b/designsystems/fluent2/QskFluent2Skin.cpp @@ -1008,7 +1008,7 @@ void Editor::setupPushButtonColors( const auto text = Q::Text | section | variation; const auto icon = Q::Icon | section | variation; - for ( const auto state : { QskAspect::NoState, Q::Hovered, Q::Pressed, Q::Disabled } ) + for ( const auto state : { QskAspect::NoState, Q::Hovered, Q::Pressed, Q::Checked, Q::Disabled } ) { QRgb panelColor, borderColor1, borderColor2, textColor; int graphicRole; @@ -1023,7 +1023,7 @@ void Editor::setupPushButtonColors( textColor = pal.fillColor.textOnAccent.primary; graphicRole = W::GraphicRoleFillColorTextOnAccentPrimary; } - else if ( state == Q::Pressed ) + else if ( state == Q::Pressed || state == Q::Checked ) { panelColor = pal.fillColor.accent.tertiary; borderColor1 = borderColor2 = pal.strokeColor.control.onAccentDefault; @@ -1056,7 +1056,7 @@ void Editor::setupPushButtonColors( textColor = pal.fillColor.text.primary; graphicRole = W::GraphicRoleFillColorTextPrimary; } - else if ( state == Q::Pressed ) + else if ( state == Q::Pressed || state == Q::Checked ) { panelColor = pal.fillColor.control.tertiary; borderColor1 = borderColor2 = pal.strokeColor.control.defaultColor; diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp index 22d662bf9..4f2b31843 100644 --- a/designsystems/material3/QskMaterial3Skin.cpp +++ b/designsystems/material3/QskMaterial3Skin.cpp @@ -725,6 +725,7 @@ void Editor::setupPushButton() setBoxShape( Q::Splash, 40_dp ); setAnimation( Q::Splash | QskAspect::Color, qskDuration ); + const auto checkedOpacity = m_pal.focusOpacity + m_pal.pressedOpacity; // elevated buttons: @@ -751,8 +752,11 @@ void Editor::setupPushButton() setGradient( Q::Panel | M3::Elevated | Q::Focused, elevatedPressedColor ); setShadowMetrics( Q::Panel | M3::Elevated | Q::Focused, m_pal.elevation1 ); - setGradient( Q::Panel | M3::Elevated | Q::Pressed, elevatedPressedColor ); - setShadowMetrics( Q::Panel | M3::Elevated | Q::Pressed, m_pal.elevation1 ); + for( const auto state: { Q::Pressed, Q::Checked } ) + { + setGradient( Q::Panel | M3::Elevated | state, elevatedPressedColor ); + setShadowMetrics( Q::Panel | M3::Elevated | state, m_pal.elevation1 ); + } // normal buttons (i.e. Filled): @@ -769,6 +773,8 @@ void Editor::setupPushButton() setGradient( Q::Panel | Q::Focused, focusColor ); setGradient( Q::Panel | Q::Pressed, focusColor ); + setGradient( Q::Panel | Q::Checked, + flattenedColor( m_pal.onPrimary, m_pal.primary, checkedOpacity ) ); setGradient( Q::Splash, stateLayerColor( m_pal.onPrimary, m_pal.hoverOpacity ) ); @@ -806,6 +812,10 @@ void Editor::setupPushButton() setGradient( Q::Panel | M3::Tonal | Q::Pressed, tonalPressedColor ); setShadowMetrics( Q::Panel | M3::Tonal | Q::Pressed, m_pal.elevation0 ); + const auto tonalCheckedColor = flattenedColor( m_pal.onSecondaryContainer, + m_pal.secondaryContainer, checkedOpacity ); + setGradient( Q::Panel | M3::Tonal | Q::Checked, tonalCheckedColor ); + // outlined buttons: @@ -831,6 +841,7 @@ void Editor::setupPushButton() setGradient( Q::Panel | M3::Outlined | Q::Pressed, m_pal.primary12 ); + setGradient( Q::Panel | M3::Outlined | Q::Checked, m_pal.primary12 ); /* text buttons: @@ -857,6 +868,8 @@ void Editor::setupPushButton() setGradient( Q::Panel | M3::Text | Q::Focused, m_pal.primary12 ); setGradient( Q::Panel | M3::Text | Q::Pressed, m_pal.primary12 ); + + setGradient( Q::Panel | M3::Text | Q::Checked, m_pal.primary12 ); } void Editor::setupDialogButtonBox()