diff --git a/src/qml/Base/HButtonContent.qml b/src/qml/Base/HButtonContent.qml index eedbc1ea..2ffb75af 100644 --- a/src/qml/Base/HButtonContent.qml +++ b/src/qml/Base/HButtonContent.qml @@ -18,47 +18,42 @@ HRowLayout { Behavior on opacity { HOpacityAnimator {} } + Item { + id: iconWrapper - HIcon { - property bool loading: button.loading || false - - id: icon - svgName: button.icon.name - colorize: enabled ? button.icon.color: theme.icons.disabledColorize - cache: button.icon.cache - - onLoadingChanged: if (! loading) resetAnimations.start() - - Layout.fillHeight: true - Layout.alignment: Qt.AlignCenter - + Layout.preferredWidth: icon.width + Layout.preferredHeight: icon.height ParallelAnimation { id: resetAnimations - HOpacityAnimator { target: icon; to: 1 } - HNumberAnimation { target: icon; property: "rotation"; to: 0 } + HOpacityAnimator { target: iconWrapper; to: 1 } + HRotationAnimator { target: iconWrapper; to: 0 } } - - HNumberAnimation on opacity { + HOpacityAnimator { id: blink + target: iconWrapper from: 1 to: 0.5 factor: 2 running: button.loading || false - onFinished: { [from, to] = [to, from]; start() } + onFinished: { + if (button.loading) { [from, to] = [to, from]; start() } + } } SequentialAnimation { running: button.loading || false loops: Animation.Infinite + onStopped: resetAnimations.start() HPauseAnimation { factor: blink.factor * 8 } - HNumberAnimation { + // These don't work directly on HIcon, hence why we wrap it in + // an Item. Qt bug? (5.13.1_1) + HRotationAnimator { id: rotation1 - target: icon - property: "rotation" + target: iconWrapper from: 0 to: 180 factor: blink.factor @@ -66,14 +61,26 @@ HRowLayout { HPauseAnimation { factor: blink.factor * 8 } - HNumberAnimation { + HRotationAnimator { target: rotation1.target - property: rotation1.property from: rotation1.to to: 360 factor: rotation1.factor + direction: RotationAnimator.Clockwise } } + + HIcon { + property bool loading: button.loading || false + + id: icon + svgName: button.icon.name + colorize: enabled ? button.icon.color: theme.icons.disabledColorize + cache: button.icon.cache + + Layout.fillHeight: true + Layout.alignment: Qt.AlignCenter + } } HLabel { diff --git a/src/qml/Base/HRotationAnimator.qml b/src/qml/Base/HRotationAnimator.qml new file mode 100644 index 00000000..38408cc9 --- /dev/null +++ b/src/qml/Base/HRotationAnimator.qml @@ -0,0 +1,7 @@ +import QtQuick 2.12 + +RotationAnimator { + duration: theme.animationDuration * factor + + property real factor: 1.0 +}