ui: use NumberAnimation for state change animation

this fixes a bug where the UI was not updated when the window is not visible, turning vpn on/off via the tray didn't update the state correctly i.e the tray icon's state would be stuck in the connecting state with the yellow icon using NumberAnimation for the state transition instead of OpacityAnimator fixes the issue as it seems opacity animator only works when the window is visible
leapcode · Dec 7, 2024 · d92a1b6 · d92a1b6
1 parent d8464f9
commit d92a1b6
Showing 1 changed file with 38 additions and 20 deletions.
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
@@ -37,6 +37,7 @@ StateGroup {
             PropertyChanges {
                 target: backgroundImage
                 source: customTheme.bgConnecting
+                opacity: 0.8
             }
             PropertyChanges {
                 target: connectionImage
@@ -54,6 +55,7 @@ StateGroup {
             PropertyChanges {
                 target: backgroundImage
                 source: customTheme.bgConnecting
+                opacity: 0.8
             }
             PropertyChanges {
                 target: connectionImage
@@ -159,6 +161,7 @@ StateGroup {
             PropertyChanges {
                 target: backgroundImage
                 source: customTheme.bgConnecting
+                opacity: 0.8
             }
             PropertyChanges {
                 target: connectionImage
@@ -183,6 +186,7 @@ StateGroup {
             StateChangeScript {
                 script: {
                     vpn.startingUI = false;
+                    console.debug("status starting");
                 }
             }
         },
@@ -204,6 +208,7 @@ StateGroup {
             PropertyChanges {
                 target: backgroundImage
                 source: customTheme.bgConnecting
+                opacity: 0.8
             }
             PropertyChanges {
                 target: toggleVPN
@@ -219,6 +224,11 @@ StateGroup {
                 target: systray.statusItem
                 text: toHuman("stopping")
             }
+            StateChangeScript {
+                script: {
+                    console.debug("status stopping");
+                }
+            }
         },
         State {
             name: failed
@@ -227,38 +237,46 @@ StateGroup {
     transitions: [
         Transition {
             to: on
-            OpacityAnimator {
-                target: backgroundImage
-                from: 0.8;
-                to: 1;
-                duration: 500;
+            NumberAnimation {
+               target: backgroundImage
+               properties: "opacity"
+               from: 0.8
+               to: 1.0
+               duration: 500;
+               easing.type: Easing.InCubic;
             }
         },
         Transition {
             to: off
-            OpacityAnimator {
-                target: backgroundImage
-                from: 0.8;
-                to: 1;
-                duration: 500;
+            NumberAnimation {
+               target: backgroundImage
+               properties: "opacity"
+               from: 0.8
+               to: 1.0
+               duration: 500;
+               easing.type: Easing.InCubic;
             }
         },
         Transition {
             to: starting
-            OpacityAnimator {
-                target: backgroundImage
-                from: 0.8;
-                to: 1;
-                duration: 500;
+            NumberAnimation {
+               target: backgroundImage
+               properties: "opacity"
+               from: 0.8
+               to: 1.0
+               duration: 500;
+               easing.type: Easing.InCubic;
             }
         },
         Transition {
             to: stopping
-            OpacityAnimator {
-                target: backgroundImage
-                from: 0.8;
-                to: 1;
-                duration: 500;
+            NumberAnimation {
+               target: backgroundImage
+               properties: "opacity"
+               from: 0.8
+               to: 1.0
+               duration: 500;
+               easing.type: Easing.InCubic;
             }
         }
     ]