CURA-4870 Make the configuration pop-up open and close with one click.

Before it was the case in which sometimes the user needs two clicks for
that.
Also collapse the dropdown when the configuration is applied.

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -66,6 +66,7 @@ Column
                 configuration: modelData
                 onActivateConfiguration:
                 {
+                    switchPopupState()
                     Cura.MachineManager.applyRemoteConfiguration(configuration)
                 }
             }

resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml

@@ -13,54 +13,54 @@ Item
     id: configurationSelector
     property var connectedDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
     property var panelWidth: control.width
-    property var panelVisible: false
 
-    SyncButton {
-        onClicked: configurationSelector.state == "open" ? configurationSelector.state = "closed" : configurationSelector.state = "open"
+    function switchPopupState()
+    {
+        popup.opened ? popup.close() : popup.open()
+    }
+
+    SyncButton
+    {
+        id: syncButton
+        onClicked: switchPopupState()
         outputDevice: connectedDevice
     }
 
-    Popup {
+    Popup
+    {
+        // TODO Change once updating to Qt5.10 - This property is already in 5.10 but is manually implemented until upgrade
+        property bool opened: false
         id: popup
         clip: true
+        closePolicy: Popup.CloseOnPressOutsideParent
         y: configurationSelector.height - UM.Theme.getSize("default_lining").height
         x: configurationSelector.width - width
         width: panelWidth
-        visible: panelVisible && connectedDevice != null
+        visible: opened
         padding: UM.Theme.getSize("default_lining").width
-        contentItem: ConfigurationListView {
+        transformOrigin: Popup.Top
+        contentItem: ConfigurationListView
+        {
             id: configList
             width: panelWidth - 2 * popup.padding
             outputDevice: connectedDevice
         }
-        background: Rectangle {
+        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 {
+        exit: 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; }
+            NumberAnimation { property: "visible"; duration: 75; }
         }
-    ]
+        enter: Transition
+        {
+            // This applies a default NumberAnimation to any changes a state change makes to x or y properties
+            NumberAnimation { property: "visible"; duration: 75; }
+        }
+        onClosed: opened = false
+        onOpened: opened = true
+    }
 }

resources/qml/Menus/ConfigurationMenu/SyncButton.qml

@@ -86,11 +86,6 @@ Button
         label: Label {}
     }
 
-    onClicked:
-    {
-        panelVisible = !panelVisible
-    }
-
     Connections {
         target: outputDevice
         onUniqueConfigurationsChanged: {