diff --git a/ui/StatusQ/src/StatusQ/Components/StatusLoadingIndicator.qml b/ui/StatusQ/src/StatusQ/Components/StatusLoadingIndicator.qml index 4a0ce0ad06..e88172852e 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusLoadingIndicator.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusLoadingIndicator.qml @@ -2,17 +2,16 @@ import QtQuick 2.13 import StatusQ.Core 0.1 StatusIcon { - id: statusIcon + id: root icon: "loading" height: 17 width: 17 - RotationAnimation { - target: statusIcon; - from: 0; - to: 360; + RotationAnimator { + target: root + from: 0 + to: 360 duration: 1200 running: visible loops: Animation.Infinite } } - diff --git a/ui/StatusQ/src/StatusQ/Core/StatusIcon.qml b/ui/StatusQ/src/StatusQ/Core/StatusIcon.qml index c36c65a980..7ae7fe22f0 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusIcon.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusIcon.qml @@ -2,10 +2,11 @@ import QtQuick 2.13 import QtGraphicalEffects 1.13 Image { + id: root + property string icon: "" property color color: "transparent" - id: statusIcon width: 24 height: 24 // SVGs must have sourceSize, PNGs not; otherwise blurry @@ -16,7 +17,7 @@ Image { if(icon.startsWith("data:image/") || icon.startsWith("https://")) { //raw image data source = icon - objectName = "custom-icon" + objectName = "custom-icon" } else if (icon !== "") { source = "../../assets/img/icons/" + icon+ ".svg"; @@ -24,10 +25,13 @@ Image { } } - layer.smooth: true - layer.format: ShaderEffectSource.RGBA - layer.enabled: !Qt.colorEqual(statusIcon.color, "transparent") - layer.effect: ColorOverlay { - color: statusIcon.color + Loader { + anchors.fill: root + active: !Qt.colorEqual(root.color, "transparent") + sourceComponent: ColorOverlay { + source: root + color: root.color + smooth: true + } } }