From 8f66163859b854534c93797b407d0c87bc3a2cae Mon Sep 17 00:00:00 2001
From: jkito <belter@riseup.net>
Date: Sat, 15 Jun 2024 00:43:38 +0530
Subject: [PATCH] gui: use background image to inform vpn connection status
this changes the StatusBox component of the app to use the
background images from the new design to inform about conn
states
---
gui/components/StatusBox.qml | 34 +++++++---------------
gui/components/VPNState.qml | 56 ++++++++++++++++++++----------------
2 files changed, 43 insertions(+), 47 deletions(-)
diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index 8bd2fe2c..c59dcddf 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -12,30 +12,18 @@ Item {
id: statusbox
anchors.fill: parent
- VPNState {
- id: vpn
- }
-
Rectangle {
- color: customTheme.bgColor
+ id: statusBoxBackground
anchors.fill: parent
+ Image {
+ id: backgroundImage
+ anchors.fill: parent
+ source: customTheme.bgDisconnected
+ }
}
- Rectangle {
- id: statusBoxBackground
- color: customTheme.fgColor
- height: 300
- radius: 10
- antialiasing: true
- anchors {
- fill: parent
- margins: 20
- bottomMargin: 30
- }
- border {
- color: Theme.accentOff
- width: 4
- }
+ VPNState {
+ id: vpn
}
ToolButton {
@@ -131,10 +119,10 @@ Item {
source: customTheme.iconOff
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
- OpacityAnimator on opacity{
+ OpacityAnimator on opacity {
id: fadeIn
- from: 0.5;
- to: 1;
+ from: 0.5
+ to: 1
duration: 1000
}
onStatusChanged: {
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index 4882d0a2..72219b3a 100644
--- a/gui/components/VPNState.qml
+++ b/gui/components/VPNState.qml
@@ -35,8 +35,8 @@ StateGroup {
text: getSnowflakeTag()
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentConnecting
+ target: backgroundImage
+ source: customTheme.bgConnecting
}
PropertyChanges {
target: connectionImage
@@ -52,8 +52,8 @@ StateGroup {
font.pixelSize: Theme.fontSize * 1.5
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentConnecting
+ target: backgroundImage
+ source: customTheme.bgConnecting
}
PropertyChanges {
target: connectionImage
@@ -86,8 +86,8 @@ StateGroup {
visible: true
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentOff
+ target: backgroundImage
+ source: customTheme.bgDisconnected
}
PropertyChanges {
target: connectionImage
@@ -121,8 +121,8 @@ StateGroup {
visible: true
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentOn
+ target: backgroundImage
+ source: customTheme.bgConnected
}
PropertyChanges {
target: connectionImage
@@ -157,8 +157,8 @@ StateGroup {
visible: true
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentConnecting
+ target: backgroundImage
+ source: customTheme.bgConnecting
}
PropertyChanges {
target: connectionImage
@@ -201,8 +201,8 @@ StateGroup {
}
*/
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentConnecting
+ target: backgroundImage
+ source: customTheme.bgConnecting
}
PropertyChanges {
target: systray
@@ -221,30 +221,38 @@ StateGroup {
transitions: [
Transition {
to: on
- ColorAnimation {
- target: statusBoxBackground
- duration: 500
+ OpacityAnimator {
+ target: backgroundImage
+ from: 0.8;
+ to: 1;
+ duration: 500;
}
},
Transition {
to: off
- ColorAnimation {
- target: statusBoxBackground
- duration: 500
+ OpacityAnimator {
+ target: backgroundImage
+ from: 0.8;
+ to: 1;
+ duration: 500;
}
},
Transition {
to: starting
- ColorAnimation {
- target: statusBoxBackground
- duration: 500
+ OpacityAnimator {
+ target: backgroundImage
+ from: 0.8;
+ to: 1;
+ duration: 500;
}
},
Transition {
to: stopping
- ColorAnimation {
- target: statusBoxBackground
- duration: 500
+ OpacityAnimator {
+ target: backgroundImage
+ from: 0.8;
+ to: 1;
+ duration: 500;
}
}
]
--
GitLab