From e7b64bf4a0116c61ff758b71779576972e5e5e3f Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Tue, 30 Apr 2024 13:03:59 +0200 Subject: [PATCH] QskSlider: Adapt to new Material3 style Resolves #391 --- designsystems/material3/QskMaterial3Skin.cpp | 57 +++++++++----------- designsystems/material3/QskMaterial3Skin.h | 5 ++ src/controls/QskSliderSkinlet.cpp | 34 +++++++++--- 3 files changed, 57 insertions(+), 39 deletions(-) diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp index b4664475..82ff1ddb 100644 --- a/designsystems/material3/QskMaterial3Skin.cpp +++ b/designsystems/material3/QskMaterial3Skin.cpp @@ -839,41 +839,34 @@ void Editor::setupSlider() using A = QskAspect; using Q = QskSlider; - const qreal extent = 30_dp; + const QSizeF sliderSize( 48_dp, 44_dp ); + setStrutSize( Q::Panel | A::Horizontal, sliderSize ); + setStrutSize( Q::Panel | A::Vertical, sliderSize.transposed() ); - // Panel - - setMetric( Q::Panel | A::Size, extent ); - setBoxShape( Q::Panel, 0 ); - setBoxBorderMetrics( Q::Panel, 0 ); - setGradient( Q::Panel, QskGradient() ); - - setPadding( Q::Panel | A::Horizontal, QskMargins( 0.5 * extent, 0 ) ); - setPadding( Q::Panel | A::Vertical, QskMargins( 0, 0.5 * extent ) ); - - // Groove, Fill - - for ( auto subControl : { Q::Groove, Q::Fill } ) - { - setPadding( subControl, 0 ); - - setBoxShape( subControl, 0 ); - setBoxBorderMetrics( subControl, 0 ); - } - - setMetric( Q::Groove | A::Size, 4_dp ); - setMetric( Q::Fill | A::Size, 6_dp ); + setBoxShape( Q::Groove | A::Horizontal, { 0, 100, 0, 100, Qt::RelativeSize } ); + setBoxShape( Q::Groove | A::Vertical, { 100, 100, 0, 0, Qt::RelativeSize } ); + setMetric( Q::Groove | A::Size, 16_dp ); + setMargin( Q::Groove | A::Horizontal, { 6_dp, 0, 0, 0 } ); + setMargin( Q::Groove | A::Vertical, {0, 0, 0, 6_dp } ); setGradient( Q::Groove, m_pal.primaryContainer ); setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 ); + setBoxShape( Q::Fill | A::Horizontal, { 100, 0, 100, 0, Qt::RelativeSize } ); + setBoxShape( Q::Fill | A::Vertical, { 0, 0, 100, 100, Qt::RelativeSize } ); + setMetric( Q::Fill | A::Size, 16_dp ); + setMargin( Q::Fill | A::Horizontal, { 0, 0, 6_dp, 0 } ); + setMargin( Q::Fill | A::Vertical, {0, 6_dp, 0, 0 } ); + setGradient( Q::Fill, m_pal.primary ); setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 ); setBoxShape( Q::Handle, 100, Qt::RelativeSize ); setBoxBorderMetrics( Q::Handle, 0 ); - setStrutSize( Q::Handle, 20_dp, 20_dp ); + const QSizeF handleSize( 4_dp, 44_dp ); + setStrutSize( Q::Handle | A::Horizontal, handleSize ); + setStrutSize( Q::Handle | A::Vertical, handleSize.transposed() ); setGradient( Q::Handle, m_pal.primary ); setGradient( Q::Handle | Q::Pressed, m_pal.primary ); @@ -881,13 +874,7 @@ void Editor::setupSlider() const auto disabledColor = flattenedColor( m_pal.onSurface, m_pal.background, 0.38 ); setGradient( Q::Handle | Q::Disabled, disabledColor ); - setStrutSize( Q::Ripple, 40_dp, 40_dp ); - setBoxShape( Q::Ripple, 100, Qt::RelativeSize ); - setGradient( Q::Ripple, Qt::transparent ); - setGradient( Q::Ripple | Q::Hovered, m_pal.primary12 ); - setGradient( Q::Ripple | Q::Pressed, m_pal.primary12 ); - - // move the handle smoothly, when using keys + // move the handle smoothly when using keys setAnimation( Q::Handle | A::Metric | A::Position, 2 * qskDuration ); setAnimation( Q::Handle | A::Metric | A::Position | Q::Pressed, 0 ); } @@ -1309,6 +1296,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, onPrimary = color.toned( 100 ).rgb(); primaryContainer = color.toned( 90 ).rgb(); onPrimaryContainer = color.toned( 10 ).rgb(); + inversePrimary = color.toned( 80 ).rgb(); } { @@ -1345,6 +1333,9 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, onBackground = color.toned( 10 ).rgb(); surface = color.toned( 99 ).rgb(); onSurface = color.toned( 10 ).rgb(); + inverseSurface = color.toned( 20 ).rgb(); + inverseOnSurface = color.toned( 95 ).rgb(); + scrim = color.toned( 0 ).rgb(); shadow = color.toned( 0 ).rgb(); } @@ -1368,6 +1359,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, onPrimary = color.toned( 20 ).rgb(); primaryContainer = color.toned( 30 ).rgb(); onPrimaryContainer = color.toned( 90 ).rgb(); + inversePrimary = color.toned( 40 ).rgb(); } { @@ -1404,6 +1396,9 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, onBackground = color.toned( 90 ).rgb(); surface = color.toned( 10 ).rgb(); onSurface = color.toned( 80 ).rgb(); + inverseSurface = color.toned( 90 ).rgb(); + inverseOnSurface = color.toned( 20 ).rgb(); + scrim = color.toned( 0 ).rgb(); shadow = color.toned( 0 ).rgb(); } diff --git a/designsystems/material3/QskMaterial3Skin.h b/designsystems/material3/QskMaterial3Skin.h index b790addb..06d8fd22 100644 --- a/designsystems/material3/QskMaterial3Skin.h +++ b/designsystems/material3/QskMaterial3Skin.h @@ -81,6 +81,11 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme QRgb surfaceContainerHighest; + QRgb inverseSurface; + QRgb inverseOnSurface; + QRgb inversePrimary; + + QRgb scrim; QRgb shadow; QskShadowMetrics elevation0; diff --git a/src/controls/QskSliderSkinlet.cpp b/src/controls/QskSliderSkinlet.cpp index 9dbc720b..1b6810d6 100644 --- a/src/controls/QskSliderSkinlet.cpp +++ b/src/controls/QskSliderSkinlet.cpp @@ -161,9 +161,24 @@ QRectF QskSliderSkinlet::innerRect( const QskSlider* slider, } QRectF QskSliderSkinlet::grooveRect( - const QskSlider* slider, const QRectF& rect ) const + const QskSlider* slider, const QRectF& contentsRect ) const { - return innerRect( slider, rect, QskSlider::Groove ); + const auto r = qskInnerPanelRect( slider, contentsRect ); + auto grooveRect = innerRect( slider, contentsRect, QskSlider::Groove ); + const auto pos = qBound( 0.0, slider->handlePosition(), 1.0 ); + + if ( slider->orientation() == Qt::Horizontal ) + { + grooveRect.setLeft( r.left() + pos * r.width() ); + grooveRect.setRight( r.right() ); + } + else + { + grooveRect.setBottom( r.bottom() - pos * r.height() ); + grooveRect.setTop( r.top() ); + } + + return grooveRect; } QRectF QskSliderSkinlet::scaleRect( @@ -254,14 +269,17 @@ QSizeF QskSliderSkinlet::sizeHint( const QskSkinnable* skinnable, if ( which != Qt::PreferredSize ) return QSizeF(); - const auto slider = static_cast< const QskSlider* >( skinnable ); + const auto panelHint = skinnable->strutSizeHint( QskSlider::Panel ); + const auto grooveHint = skinnable->strutSizeHint( QskSlider::Groove ); + const auto fillHint = skinnable->strutSizeHint( QskSlider::Fill ); + const auto handleHint = skinnable->strutSizeHint( QskSlider::Handle ); - // strutSizeHint( ... ) ??? - const qreal m1 = slider->metric( QskSlider::Panel | QskAspect::Size ); - const qreal m2 = 4 * m1; + auto hint = panelHint; + hint = hint.expandedTo( grooveHint ); + hint = hint.expandedTo( fillHint ); + hint = hint.expandedTo( handleHint ); - return ( slider->orientation() == Qt::Horizontal ) - ? QSizeF( m2, m1 ) : QSizeF( m1, m2 ); + return hint; } #include "moc_QskSliderSkinlet.cpp"