diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml new file mode 100644 index 0000000000..c7e873509f --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml @@ -0,0 +1,62 @@ +import QtQuick 2.15 + +import StatusQ.Core.Theme 0.1 + +/*! + \qmltype StatusColorAnimation + \inherits SequentialAnimation + \inqmlmodule StatusQ.Controls + \since StatusQ.Controls 0.1 + \brief Animates target property (that shold be a color property) from/to color to target component within set duration. + + Example of how to use it: + + \qml + StatusBaseText { + id: animatedText + + onTextChanged: { + if (text === "") { + return + } + animate.restart() + } + + StatusColorAnimation { + id: animate + target: animatedText + } + } + \endqml + + For a list of components available see StatusQ. + */ + +SequentialAnimation { + id: root + + required property var target + property string targetProperty: "color" + property color fromColor: Theme.palette.directColor1 + property color toColor: Theme.palette.getColor(fromColor, 0.1) + property int duration: 500 // in milliseconds + + loops: 3 + alwaysRunToEnd: true + + ColorAnimation { + target: root.target + property: root.targetProperty + from: root.fromColor + to: root.toColor + duration: root.duration + } + + ColorAnimation { + target: root.target + property: root.targetProperty + from: root.toColor + to: root.fromColor + duration: root.duration + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 0d5757d341..8016825308 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -14,6 +14,7 @@ StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml StatusCheckBox 0.1 StatusCheckBox.qml StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml StatusClearButton 0.1 StatusClearButton.qml +StatusColorAnimation 0.1 StatusColorAnimation.qml StatusColorRadioButton 0.1 StatusColorRadioButton.qml StatusColorSelector 0.1 StatusColorSelector.qml StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index ec70ab52ad..90367c0fcd 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -105,6 +105,7 @@ StatusQ/Controls/StatusCheckBox.qml StatusQ/Controls/StatusCircularProgressBar.qml StatusQ/Controls/StatusClearButton.qml + StatusQ/Controls/StatusColorAnimation.qml StatusQ/Controls/StatusColorRadioButton.qml StatusQ/Controls/StatusColorSelector.qml StatusQ/Controls/StatusColorSelectorGrid.qml diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml index 50f59f897a..258f9aa5a2 100644 --- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml @@ -505,7 +505,7 @@ StatusDialog { font.weight: Font.Medium loading: root.swapAdaptor.swapProposalLoading - AnimatedText { + StatusColorAnimation { id: animation target: fees } diff --git a/ui/imports/shared/panels/AnimatedText.qml b/ui/imports/shared/panels/AnimatedText.qml deleted file mode 100644 index 00e5b41cb4..0000000000 --- a/ui/imports/shared/panels/AnimatedText.qml +++ /dev/null @@ -1,31 +0,0 @@ -import QtQuick 2.15 - -import StatusQ.Core.Theme 0.1 - -SequentialAnimation { - id: root - - property var target: null - property string targetProperty: "color" - property color fromColor: Theme.palette.directColor1 - property color toColor: Theme.palette.getColor(fromColor, 0.1) - property int duration: 500 // in milliseconds - - loops: 3 - - ColorAnimation { - target: root.target - property: root.targetProperty - from: root.fromColor - to: root.toColor - duration: root.duration - } - - ColorAnimation { - target: root.target - property: root.targetProperty - from: root.toColor - to: root.fromColor - duration: root.duration - } -} diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir index 34dc96c854..ac9137b100 100644 --- a/ui/imports/shared/panels/qmldir +++ b/ui/imports/shared/panels/qmldir @@ -18,4 +18,3 @@ Separator 1.0 Separator.qml SequenceColumnLayout 1.0 SequenceColumnLayout.qml StatusAssetSelector 1.0 StatusAssetSelector.qml StyledText 1.0 StyledText.qml -AnimatedText 1.0 AnimatedText.qml diff --git a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml index 50282ceac2..73787d7e47 100644 --- a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml +++ b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml @@ -52,7 +52,7 @@ StatusDialogFooter { estimatedTimeAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: estimatedTimeAnimation target: estimatedTime } @@ -80,7 +80,7 @@ StatusDialogFooter { feesAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: feesAnimation target: fees } diff --git a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml index b9670a6fb8..17fb93dd32 100644 --- a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml +++ b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml @@ -118,7 +118,7 @@ SignTransactionModalBase { maxFeesAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: maxFeesAnimation target: maxFees targetProperty: "customColor" @@ -148,7 +148,7 @@ SignTransactionModalBase { estimatedTimeAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: estimatedTimeAnimation target: estimatedTime targetProperty: "customColor" @@ -224,7 +224,7 @@ SignTransactionModalBase { fiatFeesAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: fiatFeesAnimation target: fiatFees targetProperty: "customColor" @@ -250,7 +250,7 @@ SignTransactionModalBase { cryptoFeesAnimation.restart() } - AnimatedText { + StatusColorAnimation { id: cryptoFeesAnimation target: cryptoFees fromColor: cryptoFees.customColor