Material: implement ripple effect for RadioDelegate

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

3 files changed, 25 insertions, 11 deletions

diff --git a/src/imports/controls/material/RadioButton.qml b/src/imports/controls/material/RadioButton.qml
index 284eaa2a..403b4315 100644
--- a/src/imports/controls/material/RadioButton.qml
+++ b/src/imports/controls/material/RadioButton.qml
@@ -58,6 +58,18 @@ T.RadioButton {
         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/RadioDelegate.qml b/src/imports/controls/material/RadioDelegate.qml
index 0b8ac084..918f9a37 100644
--- a/src/imports/controls/material/RadioDelegate.qml
+++ b/src/imports/controls/material/RadioDelegate.qml
@@ -37,6 +37,7 @@
 import QtQuick 2.6
 import QtQuick.Templates 2.1 as T
 import QtQuick.Controls.Material 2.1
+import QtQuick.Controls.Material.impl 2.1
 
 T.RadioDelegate {
     id: control
@@ -75,7 +76,17 @@ T.RadioDelegate {
     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/RadioIndicator.qml b/src/imports/controls/material/RadioIndicator.qml
index 304176e4..2a2fabe4 100644
--- a/src/imports/controls/material/RadioIndicator.qml
+++ b/src/imports/controls/material/RadioIndicator.qml
@@ -48,15 +48,6 @@ Rectangle {
 
     property Item control
 
-    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
-    }
-
     Rectangle {
         x: (parent.width - width) / 2
         y: (parent.height - height) / 2