Add transition for UI show/hide

diff --git a/uiplugins/ui_desktop_qml_default/qml/main.qml b/uiplugins/ui_desktop_qml_default/qml/main.qml
index c74f820c7f4e80d74c01ac829756f8d742ec1104..22af8a00c06a08dd0cbdb05b90bc8d7205069d9c 100644 (file)
--- a/uiplugins/ui_desktop_qml_default/qml/main.qml
+++ b/uiplugins/ui_desktop_qml_default/qml/main.qml
@@ -246,11 +246,53 @@ Window {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        visible: controlsVisible
+        visible: true
+        opacity: 1
 
         function toggleVisible() {
             controlsVisible = !controlsVisible;
         }
+
+        states: [
+            State {
+                name: "invisible"
+                when: !controlsVisible
+                PropertyChanges {
+                    target: controls
+                    opacity: 0
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "invisible"
+                SequentialAnimation {
+                    NumberAnimation {
+                        property: "opacity"
+                        easing.type: Easing.InOutQuad
+                        duration: 500
+                    }
+                    ScriptAction {
+                        script: controls.visible = false
+                    }
+                }
+            },
+            Transition {
+                from: "invisible"
+                SequentialAnimation {
+                    ScriptAction {
+                        script: controls.visible = true
+                    }
+                    NumberAnimation {
+                        property: "opacity"
+                        easing.type: Easing.InOutQuad
+                        duration: 500
+                    }
+                }
+            }
+
+        ]
     }
 
     TextWithBackground {