From 2b85dce86a6eaf3411c0098019538d01b76e8502 Mon Sep 17 00:00:00 2001
From: 0xFEEDC0DE64 <daniel@brunner.ninja>
Date: Fri, 12 Jul 2024 21:23:23 +0200
Subject: [PATCH] Implement zoom navigation transition animation

---
 AnimatedStackView.qml | 59 +++++++++++++++++++++++++++++++++++++++++++
 AppInstance.qml       |  8 ++++++
 CMakeLists.txt        |  1 +
 ChargerTabPage.qml    |  2 +-
 DeviceListScreen.qml  | 43 +------------------------------
 EcoTabPage.qml        |  2 +-
 SettingsTabPage.qml   |  2 +-
 qmldir                |  1 +
 8 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 AnimatedStackView.qml

diff --git a/AnimatedStackView.qml b/AnimatedStackView.qml
new file mode 100644
index 0000000..271c7ef
--- /dev/null
+++ b/AnimatedStackView.qml
@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import EVChargerApp
+
+StackView {
+    popEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 2
+            to: 1
+            duration: 200
+        }
+    }
+    popExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 1
+            to: 0.5
+            duration: 200
+        }
+    }
+    pushEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 0.5
+            to: 1
+            duration: 200
+        }
+    }
+    pushExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 1
+            to: 2
+            duration: 200
+        }
+    }
+}
diff --git a/AppInstance.qml b/AppInstance.qml
index c7a4ac8..1ca2db2 100644
--- a/AppInstance.qml
+++ b/AppInstance.qml
@@ -12,6 +12,14 @@ Loader {
         return loader.item.backPressed()
     }
 
+    DevicesModel {
+        id: devicesModel
+
+        settings: theSettings
+
+        Component.onCompleted: start()
+    }
+
     Component {
         id: deviceList
 
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 9aeb966..031755f 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -53,6 +53,7 @@ qt_add_qml_module(evcharger-app
         AboutPage.qml
         AccessPage.qml
         AddDeviceScreen.qml
+        AnimatedStackView.qml
         ApiKeyValueItem.qml
         ApiSettingsPage.qml
         AppInstance.qml
diff --git a/ChargerTabPage.qml b/ChargerTabPage.qml
index ab7abd5..bc18087 100644
--- a/ChargerTabPage.qml
+++ b/ChargerTabPage.qml
@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {
diff --git a/DeviceListScreen.qml b/DeviceListScreen.qml
index 26ddee5..7ba25fa 100644
--- a/DeviceListScreen.qml
+++ b/DeviceListScreen.qml
@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     signal deviceSelected(url: string, password: string)
@@ -16,39 +16,6 @@ StackView {
         return false
     }
 
-    // pushEnter: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 0
-    //         to:1
-    //         duration: 200
-    //     }
-    // }
-    // pushExit: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 1
-    //         to:0
-    //         duration: 200
-    //     }
-    // }
-    // popEnter: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 0
-    //         to:1
-    //         duration: 200
-    //     }
-    // }
-    // popExit: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 1
-    //         to:0
-    //         duration: 200
-    //     }
-    // }
-
     initialItem: BaseNavigationPage {
         id: page
         title: qsTr("Device list")
@@ -57,14 +24,6 @@ StackView {
             id: cloudUrlsModel
         }
 
-        DevicesModel {
-            id: devicesModel
-
-            settings: theSettings
-
-            Component.onCompleted: start()
-        }
-
         headerItems: [
             Button {
                 text: qsTr("App Settings")
diff --git a/EcoTabPage.qml b/EcoTabPage.qml
index 6259b6d..7107eef 100644
--- a/EcoTabPage.qml
+++ b/EcoTabPage.qml
@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {
diff --git a/SettingsTabPage.qml b/SettingsTabPage.qml
index 047094d..c22a90f 100644
--- a/SettingsTabPage.qml
+++ b/SettingsTabPage.qml
@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {
diff --git a/qmldir b/qmldir
index 30abcbb..38ea269 100644
--- a/qmldir
+++ b/qmldir
@@ -3,6 +3,7 @@ module EVChargerApp
 EVChargerApp 1.0 AboutPage.qml
 EVChargerApp 1.0 AccessPage.qml
 EVChargerApp 1.0 AddDeviceScreen.qml
+EVChargerApp 1.0 AnimatedStackView.qml
 EVChargerApp 1.0 ApiKeyValueItem.qml
 EVChargerApp 1.0 ApiSettingsPage.qml
 EVChargerApp 1.0 AppInstance.qml