From a2773ca8974471d768e59d1584984ea662f8c749 Mon Sep 17 00:00:00 2001
From: Ian Paschal <i.paschal@ultimaker.com>
Date: Thu, 8 Mar 2018 16:30:05 +0100
Subject: [PATCH] Animated popup

---
 .../ConfigurationListView.qml                 |  2 ++
 .../ConfigurationSelection.qml                | 36 ++++++++++++++++---
 resources/qml/Menus/PrinterStatusIcon.qml     |  3 --
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml
index be11240831..1bb81656a3 100644
--- a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml
+++ b/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
diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml
index 10d8f60e90..3b053afb15 100644
--- a/resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml
+++ b/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; }
+        }
+    ]
 }
\ No newline at end of file
diff --git a/resources/qml/Menus/PrinterStatusIcon.qml b/resources/qml/Menus/PrinterStatusIcon.qml
index d7106bf33d..23459386d9 100644
--- a/resources/qml/Menus/PrinterStatusIcon.qml
+++ b/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