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

fixes #924 (closed)

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;
             }
         }
     ]