Material: fix drop shadows

Change-Id: Ic4b1152a0a8a28a64721f064ccd09b669a12e795
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

3 files changed, 59 insertions, 44 deletions

diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml
index 582bc472..5204fd3b 100644
--- a/src/imports/controls/material/Button.qml
+++ b/src/imports/controls/material/Button.qml
@@ -69,33 +69,36 @@ T.Button {
     //! [label]
 
     //! [background]
-    background: Rectangle {
+    background: Item {
         implicitWidth: 36
         implicitHeight: 36
 
-        radius: 2
-        color: !control.enabled ? (control.highlighted ? control.Material.raisedHighlightedButtonDisabledColor : control.Material.raisedButtonDisabledColor) :
-            (control.pressed ? (control.highlighted ? control.Material.raisedHighlightedButtonPressColor : control.Material.raisedButtonPressColor) :
-            (control.activeFocus ? (control.highlighted ? control.Material.raisedHighlightedButtonHoverColor : control.Material.raisedButtonHoverColor) :
-            (control.highlighted ? control.Material.raisedHighlightedButtonColor : control.Material.raisedButtonColor)))
+        Rectangle {
+            id: rect
+            width: parent.width
+            height: parent.height
+            radius: 2
+            color: !control.enabled ? (control.highlighted ? control.Material.raisedHighlightedButtonDisabledColor : control.Material.raisedButtonDisabledColor) :
+                (control.pressed ? (control.highlighted ? control.Material.raisedHighlightedButtonPressColor : control.Material.raisedButtonPressColor) :
+                (control.activeFocus ? (control.highlighted ? control.Material.raisedHighlightedButtonHoverColor : control.Material.raisedButtonHoverColor) :
+                (control.highlighted ? control.Material.raisedHighlightedButtonColor : control.Material.raisedButtonColor)))
 
-        Behavior on color {
-            ColorAnimation {
-                duration: 400
+            Behavior on color {
+                ColorAnimation {
+                    duration: 400
+                }
             }
         }
 
-        layer.enabled: control.enabled
-        layer.effect: DropShadow {
+        DropShadow {
+            source: rect
+            visible: control.enabled
+            width: parent.width
+            height: parent.height
             verticalOffset: 1
             color: control.Material.dropShadowColor
             samples: control.pressed ? 15 : 9
             spread: 0.5
-
-            // TODO: Doesn't work because of QTBUG-49072
-            Behavior on radius {
-                NumberAnimation { duration: 1000 }
-            }
         }
     }
     //! [background]
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 13bbdf38..02d817a8 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -74,30 +74,33 @@ T.ComboBox {
     //! [contentItem]
 
     //! [background]
-    background: Rectangle {
+    background: Item {
         implicitWidth: 120
         implicitHeight: 32
 
-        radius: 2
-        color: control.Material.comboBoxColor
+        Rectangle {
+            id: rect
+            width: parent.width
+            height: parent.height
+            radius: 2
+            color: control.Material.comboBoxColor
 
-        Behavior on color {
-            ColorAnimation {
-                duration: 400
+            Behavior on color {
+                ColorAnimation {
+                    duration: 400
+                }
             }
         }
 
-        layer.enabled: control.enabled
-        layer.effect: DropShadow {
+        DropShadow {
+            source: rect
+            visible: control.enabled
+            width: parent.width
+            height: parent.height
             verticalOffset: 1
             color: control.Material.dropShadowColor
             samples: control.pressed ? 15 : 9
             spread: 0.5
-
-            // TODO: Doesn't work because of QTBUG-49072
-            Behavior on radius {
-                NumberAnimation { duration: 1000 }
-            }
         }
 
         Image {
@@ -111,7 +114,7 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
-        contentItem: Rectangle {
+        contentItem: Item {
             // TODO: Popup::anchors
             readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0)
             readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0)
@@ -121,19 +124,22 @@ T.ComboBox {
             width: control.width
             height: listview.height
 
-            color: control.Material.comboBoxColor
+            Rectangle {
+                id: panel
+                width: parent.width
+                height: parent.height
+                color: control.Material.comboBoxColor
+            }
 
-            layer.enabled: control.enabled
-            layer.effect: DropShadow {
+            DropShadow {
+                source: panel
+                visible: control.enabled
+                width: parent.width
+                height: parent.height
                 verticalOffset: 1
                 color: control.Material.dropShadowColor
                 samples: 15
                 spread: 0.5
-
-                // TODO: Doesn't work because of QTBUG-49072
-                Behavior on radius {
-                    NumberAnimation { duration: 1000 }
-                }
             }
 
             ListView {
diff --git a/src/imports/controls/material/Switch.qml b/src/imports/controls/material/Switch.qml
index 6e612d40..d2658de6 100644
--- a/src/imports/controls/material/Switch.qml
+++ b/src/imports/controls/material/Switch.qml
@@ -89,12 +89,6 @@ T.Switch {
             radius: width / 2
             color: control.enabled ? (control.checked ? control.Material.switchCheckedHandleColor : control.Material.switchUncheckedHandleColor)
                                    : control.Material.switchDisabledHandleColor
-            layer.enabled: true
-            layer.effect: DropShadow {
-                verticalOffset: 1
-                color: control.Material.dropShadowColor
-                spread: 0.3
-            }
 
             Behavior on x {
                 enabled: !control.pressed
@@ -103,6 +97,18 @@ T.Switch {
                 }
             }
         }
+
+        DropShadow {
+            x: handle.x
+            y: handle.y
+            width: handle.width
+            height: handle.height
+            source: handle
+            verticalOffset: 1
+            color: control.Material.dropShadowColor
+            spread: 0.3
+        }
+
     }
     //! [indicator]