Material: implement ripple effect for CheckDelegate & MenuItem

Move Ripple out of CheckIndicator to CheckBox's indicator, because for
CheckDelegate and MenuItem it's in the background instead. This change
adds ripple effect to CheckDelegate & MenuItem, which means that they
now also have hover effects.

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

4 files changed, 36 insertions, 13 deletions

diff --git a/src/imports/controls/material/CheckBox.qml b/src/imports/controls/material/CheckBox.qml
index 688310fb..90794f31 100644
--- a/src/imports/controls/material/CheckBox.qml
+++ b/src/imports/controls/material/CheckBox.qml
@@ -58,6 +58,18 @@ T.CheckBox {
         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.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 28; height: 28
+
+            z: -1
+            anchor: control
+            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/CheckDelegate.qml b/src/imports/controls/material/CheckDelegate.qml
index 3689c1de..0092f174 100644
--- a/src/imports/controls/material/CheckDelegate.qml
+++ b/src/imports/controls/material/CheckDelegate.qml
@@ -76,7 +76,17 @@ T.CheckDelegate {
     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/CheckIndicator.qml b/src/imports/controls/material/CheckIndicator.qml
index 3e765593..a373bdb8 100644
--- a/src/imports/controls/material/CheckIndicator.qml
+++ b/src/imports/controls/material/CheckIndicator.qml
@@ -63,15 +63,6 @@ Rectangle {
         }
     }
 
-    Ripple {
-        x: (parent.width - width) / 2
-        y: (parent.height - 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
-    }
-
     // TODO: This needs to be transparent
     Image {
         id: checkImage
diff --git a/src/imports/controls/material/MenuItem.qml b/src/imports/controls/material/MenuItem.qml
index d98aef1a..4f221f2c 100644
--- a/src/imports/controls/material/MenuItem.qml
+++ b/src/imports/controls/material/MenuItem.qml
@@ -77,7 +77,17 @@ T.MenuItem {
     background: Rectangle {
         implicitWidth: 200
         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
+        }
     }
 }