Added icons to ExpandableComponent

This also makes the entire header react to mouse events instead of just the icon/button

CURA-5785

resources/qml/ExpandableComponent.qml

@@ -6,7 +6,7 @@ import UM 1.2 as UM
 // 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.
-//      * The Button; The actual button that expands the popup.
+//      * The Icon; An icon that is displayed on the right of the drawer.
 Item
 {
     // The headerItem holds the QML item that is always displayed.
@@ -26,6 +26,18 @@ Item
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
 
+    // What icon should be displayed on the right.
+    property alias iconSource: collapseButton.source
+
+    // What is the color of the icon?
+    property alias iconColor: collapseButton.color
+
+    // The icon size (it's always drawn as a square)
+    property alias iconSize: collapseButton.width
+
+    // Is the "drawer" open?
+    readonly property alias expanded: popup.visible
+
     onPopupItemChanged:
     {
         // Since we want the size of the popup to be set by the size of the content,
@@ -57,17 +69,26 @@ Item
             }
         }
 
-        Button
+        UM.RecolorImage
         {
             id: collapseButton
             anchors
             {
                 right: parent.right
-                top: parent.top
+                verticalCenter: parent.verticalCenter
-                bottom: parent.bottom
                 margins: background.padding
             }
-            text: popup.visible ? "close" : "open"
+            sourceSize.width: width
+            sourceSize.height: height
+            visible: source != ""
+            width: UM.Theme.getSize("section_icon").width
+            height: width
+            color: "black"
+        }
+
+        MouseArea
+        {
+            anchors.fill: parent
             onClicked: popup.visible ? popup.close() : popup.open()
         }
     }

resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml

@@ -27,6 +27,8 @@ Cura.ExpandableComponent
         name: "cura"
     }
 
+    iconSource: expanded ? UM.Theme.getIcon("arrow_left") : UM.Theme.getIcon("arrow_bottom")
+
     headerItem: Item
     {
         // Horizontal list that shows the extruders

resources/qml/PrintSetupSelector.qml

@@ -14,7 +14,6 @@ Cura.ExpandableComponent
 {
     id: base
 
-    height: childrenRect.height
     property int currentModeIndex: -1
     property bool hideSettings: PrintInformation.preSliced
 
@@ -25,6 +24,11 @@ Cura.ExpandableComponent
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
 
+    height: childrenRect.height
+    iconSource: UM.Theme.getIcon("pencil")
+
+    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
+
     UM.I18nCatalog
     {
         id: catalog
@@ -42,8 +46,6 @@ Cura.ExpandableComponent
         onTriggered: base.showTooltip(base, {x: 0, y: item.y}, text)
     }
 
-    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
-
     headerItem: RowLayout
     {
         anchors.fill: parent