Material: implement ripple effect for SwitchDelegate

Task-number: QTBUG-50003
Change-Id: I33629bd06c125113408a7f5b11dea72821285876
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

3 files changed, 22 insertions, 12 deletions

diff --git a/src/imports/controls/material/Switch.qml b/src/imports/controls/material/Switch.qml
index 19da6f9c..f4130926 100644
--- a/src/imports/controls/material/Switch.qml
+++ b/src/imports/controls/material/Switch.qml
@@ -56,6 +56,15 @@ T.Switch {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
         control: control
+
+        Ripple {
+            x: parent.handle.x + parent.handle.width / 2 - width / 2
+            y: parent.handle.y + parent.handle.height / 2 - height / 2
+            width: 28; height: 28
+            pressed: control.pressed
+            active: control.down || control.visualFocus || control.hovered
+            color: control.checked ? control.Material.checkBoxCheckedRippleColor : control.Material.checkBoxUncheckedRippleColor
+        }
     }
 
     contentItem: Text {
diff --git a/src/imports/controls/material/SwitchDelegate.qml b/src/imports/controls/material/SwitchDelegate.qml
index 57a8603c..7b81524c 100644
--- a/src/imports/controls/material/SwitchDelegate.qml
+++ b/src/imports/controls/material/SwitchDelegate.qml
@@ -76,7 +76,17 @@ T.SwitchDelegate {
     background: Rectangle {
         implicitHeight: 48
 
-        visible: control.down || control.highlighted
-        color: control.down ? control.Material.buttonPressColor : control.Material.listHighlightColor
+        color: control.down ? control.Material.buttonPressColor : control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down || control.visualFocus || control.hovered
+            color: control.Material.checkBoxUncheckedRippleColor
+        }
     }
 }
diff --git a/src/imports/controls/material/SwitchIndicator.qml b/src/imports/controls/material/SwitchIndicator.qml
index 84898270..114c3956 100644
--- a/src/imports/controls/material/SwitchIndicator.qml
+++ b/src/imports/controls/material/SwitchIndicator.qml
@@ -44,19 +44,10 @@ Item {
     implicitHeight: 32
 
     property Item control
+    property alias handle: handle
 
     Material.elevation: 1
 
-    Ripple {
-        id: ripple
-        x: handle.x + handle.width / 2 - width / 2
-        y: handle.y + handle.height / 2 - height / 2
-        width: 28; height: 28
-        pressed: control.pressed
-        active: control.down || control.visualFocus || control.hovered
-        color: control.checked ? control.Material.checkBoxCheckedRippleColor : control.Material.checkBoxUncheckedRippleColor
-    }
-
     Rectangle {
         width: parent.width
         height: 14