Add shadow to ExpandableComponent

resources/qml/ExpandableComponent.qml

@@ -4,6 +4,8 @@ import QtQuick.Controls 2.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
+import QtGraphicalEffects 1.0 // For the dropshadow
+
 // The expandable component has 3 major sub components:
 //      * The headerItem; Always visible and should hold some info about what happens if the component is expanded
 //      * The popupItem; The content that needs to be shown if the component is expanded.
@@ -58,6 +60,12 @@ Item
     // On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
     property alias headerCornerSide: background.cornerSide
 
+    property alias headerShadowColor: shadow.color
+
+    property alias enableHeaderShadow: shadow.visible
+
+    property int shadowOffset: 2
+
     function togglePopup()
     {
         if(popup.visible)
@@ -149,13 +157,26 @@ Item
             onExited: background.color = headerBackgroundColor
         }
     }
+    DropShadow
+    {
+        id: shadow
+        // Don't blur the shadow
+        radius: 0
+        anchors.fill: background
+        source: background
+        verticalOffset: base.shadowOffset
+        visible: true
+        color: UM.Theme.getColor("action_button_shadow")
+        // Should always be drawn behind the background.
+        z: background.z - 1
+    }
 
     Popup
     {
         id: popup
 
         // Ensure that the popup is located directly below the headerItem
-        y: headerItemLoader.height + 2 * background.padding
+        y: headerItemLoader.height + 2 * background.padding + base.shadowOffset
 
         // Make the popup aligned with the rest, using the property popupAlignment to decide whether is right or left.
         // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.

resources/themes/cura-light/theme.json

@@ -178,7 +178,7 @@
         "action_button_disabled": [245, 245, 245, 255],
         "action_button_disabled_text": [127, 127, 127, 255],
         "action_button_disabled_border": [245, 245, 245, 255],
-        "action_button_shadow": [64, 47, 205, 255],
+        "action_button_shadow": [223, 223, 223, 255],
         "action_button_disabled_shadow": [228, 228, 228, 255],
 
         "scrollbar_background": [255, 255, 255, 255],