Material: Add proper elevation support

- Added an ElevationEffect component based on elevation shadows from Angular Material
- Use it on Button, ToolBar, ComboBox, Drawer, Pane, Popup, Menu, and Switch
- Add an elevation property to the Material attached object
- Update the button colors based on the elevation property

Change-Id: I5152e1a56bdcb1016cc4f945a16ef510e0cdece6
Task-number: QTBUG-51276
Reviewed-by: Nikita Krupenko <krnekit@gmail.com>
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

1 files changed, 8 insertions, 11 deletions

diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 99e2f0f2..0dec9bf6 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -39,11 +39,14 @@ import QtQuick.Window 2.2
 import QtQuick.Controls 2.0
 import QtQuick.Templates 2.0 as T
 import QtQuick.Controls.Material 2.0
+import QtQuick.Controls.Material.impl 2.0
 import QtGraphicalEffects 1.0
 
 T.ComboBox {
     id: control
 
+    Material.elevation: control.pressed ? 8 : 2
+
     implicitWidth: Math.max(background ? background.implicitWidth : 0,
                             contentItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
@@ -100,12 +103,9 @@ T.ComboBox {
             }
         }
 
-        layer.enabled: control.enabled
-        layer.effect: DropShadow {
-            verticalOffset: 1
-            color: control.Material.dropShadowColor
-            samples: control.pressed ? 15 : 9
-            spread: 0.5
+        layer.enabled: control.enabled && control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
         }
 
         Rectangle {
@@ -156,11 +156,8 @@ T.ComboBox {
             color: control.Material.dialogColor
 
             layer.enabled: control.enabled
-            layer.effect: DropShadow {
-                verticalOffset: 1
-                color: control.Material.dropShadowColor
-                samples: 15
-                spread: 0.5
+            layer.effect: ElevationEffect {
+                elevation: 8
             }
         }
     }