QskSlider: Adapt to new Material3 style

Resolves #391

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
+    setBoxShape( Q::Groove | A::Horizontal, { 0, 100, 0, 100, Qt::RelativeSize } );
-
+    setBoxShape( Q::Groove | A::Vertical, { 100, 100, 0, 0, Qt::RelativeSize } );
-    setMetric( Q::Panel | A::Size, extent );
+    setMetric( Q::Groove | A::Size, 16_dp );
-    setBoxShape( Q::Panel, 0 );
+    setMargin( Q::Groove | A::Horizontal, { 6_dp, 0, 0, 0 } );
-    setBoxBorderMetrics( Q::Panel, 0 );
+    setMargin( Q::Groove | A::Vertical, {0, 0, 0, 6_dp } );
-    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 );
 
     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 );
+    // move the handle smoothly when using keys
-    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
     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();
         }
 

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;

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( ... ) ???
+    auto hint = panelHint;
-    const qreal m1 = slider->metric( QskSlider::Panel | QskAspect::Size );
+    hint = hint.expandedTo( grooveHint );
-    const qreal m2 = 4 * m1;
+    hint = hint.expandedTo( fillHint );
+    hint = hint.expandedTo( handleHint );
 
-    return ( slider->orientation() == Qt::Horizontal )
+    return hint;
-        ? QSizeF( m2, m1 ) : QSizeF( m1, m2 );
 }
 
 #include "moc_QskSliderSkinlet.cpp"