Animated popup

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -12,12 +12,14 @@ Column
 {
     id: base
     property var outputDevice: Cura.MachineManager.printerOutputDevices[0]
+    property var computedHeight: container.height + configurationListHeading.height + 3 * padding
     height: childrenRect.height + 2 * padding
     padding: UM.Theme.getSize("default_margin").width
     spacing: Math.round(UM.Theme.getSize("default_margin").height / 2)
 
     Label
     {
+        id: configurationListHeading
         text: catalog.i18nc("@label:header configurations", "Available configurations")
         font: UM.Theme.getFont("large")
         width: parent.width - 2 * parent.padding

resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml

@@ -14,24 +14,50 @@ Item
     property var panelWidth: control.width
     property var panelVisible: false
 
-    SyncButton { }
+    SyncButton {
+        onClicked: configurationSelector.state == "open" ? configurationSelector.state = "closed" : configurationSelector.state = "open"
+    }
 
-    Popup
-    {
+    Popup {
         id: popup
+        clip: true
         y: configurationSelector.height - UM.Theme.getSize("default_lining").height
         x: configurationSelector.width - width
         width: panelWidth
         visible: panelVisible
         padding: UM.Theme.getSize("default_lining").width
-
         contentItem: ConfigurationListView {
+            id: configList
             width: panelWidth - 2 * popup.padding
         }
-
         background: Rectangle {
             color: UM.Theme.getColor("setting_control")
             border.color: UM.Theme.getColor("setting_control_border")
         }
     }
+
+    states: [
+        // This adds a second state to the container where the rectangle is farther to the right
+        State {
+            name: "open"
+            PropertyChanges {
+                target: popup
+                height: configList.computedHeight
+            }
+        },
+        State {
+            name: "closed"
+            PropertyChanges {
+                target: popup
+                height: 0
+            }
+        }
+    ]
+    transitions: [
+        // This adds a transition that defaults to applying to all state changes
+        Transition {
+            // This applies a default NumberAnimation to any changes a state change makes to x or y properties
+            NumberAnimation { properties: "height"; duration: 200; easing.type: Easing.InOutQuad; }
+        }
+    ]
 }

resources/qml/Menus/PrinterStatusIcon.qml

@@ -2,9 +2,6 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura