From 4f304de0e2e96974f01498fa0b02a3f775fb16a3 Mon Sep 17 00:00:00 2001
From: Elias <i@kelteseth.net>
Date: Sun, 16 Dec 2018 18:28:12 +0100
Subject: [PATCH] Add install second navigation fade in from top

---
 ScreenPlay/qml/Installed/Installed.qml | 49 +++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/ScreenPlay/qml/Installed/Installed.qml b/ScreenPlay/qml/Installed/Installed.qml
index 8693ff62..cda3ab3d 100644
--- a/ScreenPlay/qml/Installed/Installed.qml
+++ b/ScreenPlay/qml/Installed/Installed.qml
@@ -4,9 +4,9 @@ import QtQuick.Controls 2.3
 import QtQuick.Controls.Styles 1.4
 import QtGraphicalEffects 1.0
 
-
 Item {
     id: pageInstalled
+    state: "out"
 
     signal setSidebaractiveItem(var screenId, var type)
     signal setNavigationItem(var pos)
@@ -19,6 +19,7 @@ Item {
         installedListFilter.sortByRoleType("All")
         installedListModel.reset()
         installedListModel.loadScreens()
+        pageInstalled.state = "in"
     }
 
     Connections {
@@ -74,6 +75,7 @@ Item {
             height: 82
             width: parent.width
             property bool isVisible: false
+            opacity: 0
             onIsVisibleChanged: {
                 if (isVisible) {
                     txtHeader.color = "orange"
@@ -84,6 +86,22 @@ Item {
                 }
             }
 
+            Timer {
+                interval: 400
+                running: true
+                onTriggered: {
+                    animFadeIn.start()
+                }
+            }
+
+            PropertyAnimation on opacity {
+                id:animFadeIn
+                from:0
+                to:1
+                running: false
+                duration: 1000
+            }
+
             Text {
                 id: txtHeader
                 text: qsTr("Pull to refresh!")
@@ -296,5 +314,34 @@ Item {
         }
     }
 
+    states: [
+        State {
+            name: "out"
+            PropertyChanges {
+                target: navWrapper
+                anchors.topMargin: -115
+            }
+        },
+        State {
+            name: "in"
+            PropertyChanges {
+                target: navWrapper
+                anchors.topMargin: 0
+            }
+        }
+    ]
 
+    transitions: [
+        Transition {
+            from: "out"
+            to: "in"
+
+            NumberAnimation {
+                target: navWrapper
+                property: "anchors.topMargin"
+                duration: 400
+                easing.type: Easing.InOutQuart
+            }
+        }
+    ]
 }