Slider: Add ripple and style it

skins/material3/QskMaterial3Skin.cpp

@@ -87,7 +87,6 @@ namespace
         void setupTextLabel();
 
         const QskMaterial3Theme& m_pal;
-        const uint rippleSize = 40; // ### remove
     };
 
     QFont createFont( int pixelSize, QFont::Weight weight = QFont::Normal )
@@ -567,15 +566,18 @@ void Editor::setupSlider()
     setBoxShape( Q::Handle, 100, Qt::RelativeSize );
     setBoxBorderMetrics( Q::Handle, 0 );
 
-    setStrutSize( Q::Handle, qskDpiScaled( 20 + rippleSize ),
-        qskDpiScaled( 20 + rippleSize ) );
+    setStrutSize( Q::Handle, { 20, 20 } );
 
     setGradient( Q::Handle, m_pal.primary );
     setGradient( Q::Handle | Q::Pressed, m_pal.primary );
 
     setGradient( Q::Handle | Q::Disabled, m_pal.onSurface38 );
 
-    setBoxBorderMetrics( Q::Handle, qskDpiScaled( rippleSize / 2 ) );
+    setStrutSize( Q::Ripple, { 40, 40 } );
+    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 );

src/controls/QskSlider.cpp

@@ -14,6 +14,7 @@ QSK_SUBCONTROL( QskSlider, Groove )
 QSK_SUBCONTROL( QskSlider, Fill )
 QSK_SUBCONTROL( QskSlider, Scale )
 QSK_SUBCONTROL( QskSlider, Handle )
+QSK_SUBCONTROL( QskSlider, Ripple )
 
 QSK_SYSTEM_STATE( QskSlider, Pressed, QskAspect::FirstSystemState << 2 )
 QSK_SYSTEM_STATE( QskSlider, Minimum, QskAspect::LastUserState << 1 )

src/controls/QskSlider.h

@@ -23,7 +23,7 @@ class QSK_EXPORT QskSlider : public QskBoundedValueInput
     using Inherited = QskBoundedValueInput;
 
   public:
-    QSK_SUBCONTROLS( Panel, Groove, Fill, Scale, Handle )
+    QSK_SUBCONTROLS( Panel, Groove, Fill, Scale, Handle, Ripple )
     QSK_STATES( Pressed, Minimum, Maximum )
 
     explicit QskSlider( QQuickItem* parent = nullptr );

src/controls/QskSliderSkinlet.cpp

@@ -31,7 +31,7 @@ static inline QRectF qskInnerPanelRect(
 QskSliderSkinlet::QskSliderSkinlet( QskSkin* skin )
     : Inherited( skin )
 {
-    setNodeRoles( { PanelRole, GrooveRole, FillRole, HandleRole } );
+    setNodeRoles( { PanelRole, GrooveRole, FillRole, HandleRole, RippleRole } );
 }
 
 QskSliderSkinlet::~QskSliderSkinlet()
@@ -68,6 +68,11 @@ QRectF QskSliderSkinlet::subControlRect( const QskSkinnable* skinnable,
         return scaleRect( slider, contentsRect );
     }
 
+    if ( subControl == QskSlider::Ripple )
+    {
+        return rippleRect( slider, contentsRect );
+    }
+
     return Inherited::subControlRect( skinnable, contentsRect, subControl );
 }
 
@@ -97,6 +102,11 @@ QSGNode* QskSliderSkinlet::updateSubNode(
         {
             return updateBoxNode( slider, node, QskSlider::Handle );
         }
+
+        case RippleRole:
+        {
+            return updateBoxNode( slider, node, QskSlider::Ripple );
+        }
     }
 
     return Inherited::updateSubNode( skinnable, nodeRole, node );
@@ -223,6 +233,18 @@ QRectF QskSliderSkinlet::handleRect(
     return handleRect;
 }
 
+QRectF QskSliderSkinlet::rippleRect(
+    const QskSlider* slider, const QRectF& rect ) const
+{
+    auto r = handleRect( slider, rect );
+    auto rippleSize = slider->strutSizeHint( QskSlider::Ripple );
+    auto handleSize = slider->strutSizeHint( QskSlider::Handle );
+    auto w = ( rippleSize.width() - handleSize.width() ) / 2,
+            h = ( rippleSize.height() - handleSize.height() ) / 2;
+    r = r.marginsAdded( { w, h, w, h } );
+    return r;
+}
+
 QSizeF QskSliderSkinlet::sizeHint( const QskSkinnable* skinnable,
     Qt::SizeHint which, const QSizeF& ) const
 {

src/controls/QskSliderSkinlet.h

@@ -23,6 +23,7 @@ class QSK_EXPORT QskSliderSkinlet : public QskSkinlet
         GrooveRole,
         FillRole,
         HandleRole,
+        RippleRole,
 
         RoleCount
     };
@@ -46,6 +47,7 @@ class QSK_EXPORT QskSliderSkinlet : public QskSkinlet
     QRectF fillRect( const QskSlider*, const QRectF& ) const;
     QRectF handleRect( const QskSlider*, const QRectF& ) const;
     QRectF scaleRect( const QskSlider*, const QRectF& ) const;
+    QRectF rippleRect( const QskSlider*, const QRectF& ) const;
 
     QRectF innerRect( const QskSlider*, const QRectF&, QskAspect::Subcontrol ) const;
 };