From d92a1b6b9cfb1a046c055c55ad5413b959e3d801 Mon Sep 17 00:00:00 2001
From: jkito <belter@riseup.net>
Date: Sun, 8 Dec 2024 00:00:56 +0530
Subject: [PATCH] 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
---
gui/components/VPNState.qml | 58 ++++++++++++++++++++++++-------------
1 file changed, 38 insertions(+), 20 deletions(-)
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index eb6b40a2..744256d3 100644
--- 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;
}
}
]
--
GitLab