diff options
Diffstat (limited to 'gui')
| -rw-r--r-- | gui/components/FadeBehavior.qml | 60 | ||||
| -rw-r--r-- | gui/components/StatusBox.qml | 21 | ||||
| -rw-r--r-- | gui/components/VPNState.qml | 13 | ||||
| -rw-r--r-- | gui/gui.qrc | 1 |
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> |