summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkali kaneko (leap communications) <kali@leap.se>2021-10-08 12:34:30 +0200
committerkali kaneko (leap communications) <kali@leap.se>2021-11-23 21:51:21 +0100
commit75633117d4a72032d9d059190b8eef607033d458 (patch)
treee58e89a0e963622ca5df45887da79b3031b26c81
parentef683e13aaefebd9cd1f267d5339e1ef574c42d0 (diff)
[gui] fade behavior
-rw-r--r--gui/components/FadeBehavior.qml60
-rw-r--r--gui/components/StatusBox.qml21
-rw-r--r--gui/components/VPNState.qml13
-rw-r--r--gui/gui.qrc1
4 files changed, 85 insertions, 10 deletions
diff --git a/gui/components/FadeBehavior.qml b/gui/components/FadeBehavior.qml
new file mode 100644
index 0000000..e6fc8ea
--- /dev/null
+++ b/gui/components/FadeBehavior.qml
@@ -0,0 +1,60 @@
+/*
+MIT License
+
+Copyright (c) 2020 Pierre-Yves Siret
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import QtQuick 2.15
+import QtQml 2.15
+
+Behavior {
+ id: root
+
+ property QtObject fadeTarget: targetProperty.object
+ property string fadeProperty: "scale"
+ property int fadeDuration: 300
+ property var fadeValue: 0
+ property string easingType: "Quad"
+
+ property alias exitAnimation: exitAnimation
+ property alias enterAnimation: enterAnimation
+
+ SequentialAnimation {
+ NumberAnimation {
+ id: exitAnimation
+ target: root.fadeTarget
+ property: root.fadeProperty
+ duration: root.fadeDuration
+ to: root.fadeValue
+ easing.type: root.easingType === "Linear" ? Easing.Linear : Easing["In"+root.easingType]
+ }
+ PropertyAction { }
+ NumberAnimation {
+ id: enterAnimation
+ target: root.fadeTarget
+ property: root.fadeProperty
+ duration: root.fadeDuration
+ to: target[property]
+ easing.type: root.easingType === "Linear" ? Easing.Linear : Easing["Out"+root.easingType]
+ }
+ }
+}
+
diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index 17132ea..6036264 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -86,6 +86,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
text: ""
+ FadeBehavior on text { }
}
}
@@ -100,6 +101,11 @@ Item {
height: 120
}
+ // TODO this can be synced with opacity serial animation, see
+ // https://doc.qt.io/qt-5/qml-qtquick-animatedimage.html#example-usage
+ // If you want to customize your asset, here's how:
+ // convert -delay 50 -loop 0 ravens2_*.png ravens.gif
+
AnimatedImage {
id: connectionImage
height: 160
@@ -107,12 +113,17 @@ Item {
source: "../resources/icon-noshield.svg"
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
- onStatusChanged: playing = (status == AnimatedImage.Ready)
+ OpacityAnimator on opacity{
+ id: fadeIn
+ from: 0.5;
+ to: 1;
+ duration: 1000
+ }
+ onStatusChanged: {
+ playing = (status == AnimatedImage.Ready)
+ fadeIn.start()
+ }
}
- // TODO this can be synced with opacity serial animation, see
- // https://doc.qt.io/qt-5/qml-qtquick-animatedimage.html#example-usage
- // If you want to customize your asset, here's how:
- // convert -delay 50 -loop 0 ravens2_*.png ravens.gif
VerticalSpacer {
id: spacerPostImg
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index e85d8e9..4cacf2f 100644
--- a/gui/components/VPNState.qml
+++ b/gui/components/VPNState.qml
@@ -155,20 +155,23 @@ StateGroup {
},
State {
name: stopping
+ /*
+ this transition is bad. let's just remove the status
+ switch...
PropertyChanges {
target: connectionState
text: "Switching\nOff"
}
PropertyChanges {
- target: statusBoxBackground
- border.color: Theme.accentConnecting
- }
- PropertyChanges {
- // ?? is this image correct?
target: connectionImage
source: "../resources/ravens.svg"
anchors.horizontalCenter: parent.horizontalCenter
}
+ */
+ PropertyChanges {
+ target: statusBoxBackground
+ border.color: Theme.accentConnecting
+ }
PropertyChanges {
target: systray
tooltip: toHuman("stopping")
diff --git a/gui/gui.qrc b/gui/gui.qrc
index cb2ad41..3d198fe 100644
--- a/gui/gui.qrc
+++ b/gui/gui.qrc
@@ -9,6 +9,7 @@
<file>components/MainView.qml</file>
<file>components/ThemedPage.qml</file>
<file>components/Splash.qml</file>
+ <file>components/FadeBehavior.qml</file>
<file>components/Home.qml</file>
<file>components/Header.qml</file>
<file>components/Footer.qml</file>