diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusCircularProgressBar.qml b/ui/StatusQ/src/StatusQ/Controls/StatusCircularProgressBar.qml new file mode 100644 index 0000000000..b315594d97 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Controls/StatusCircularProgressBar.qml @@ -0,0 +1,68 @@ +import QtQuick 2.15 + +import StatusQ.Core.Theme 0.1 + +Item { + id: root + + property int size: 16 + property real lineWidth: 1.5 + property real value: 1 // 0..1 + + property color primaryColor: Theme.palette.primaryColor1 + property color secondaryColor: Theme.palette.primaryColor2 + + property int animationDuration: 1000 + + width: size + height: size + + onValueChanged: canvas.degree = value * 360 + + Canvas { + id: canvas + + property real degree: 0 + + anchors.fill: parent + antialiasing: true + renderStrategy: Canvas.Threaded + + onDegreeChanged: { + requestPaint() + } + + onPaint: { + var ctx = getContext("2d") + + var x = root.width/2 + var y = root.height/2 + + var radius = root.size/2 - root.lineWidth + var startAngle = (Math.PI/180) * 270 + var fullAngle = (Math.PI/180) * (270 + 360) + var progressAngle = (Math.PI/180) * (270 + degree) + + ctx.reset() + + ctx.lineCap = 'round' + ctx.lineWidth = root.lineWidth + + ctx.beginPath() + ctx.arc(x, y, radius, startAngle, fullAngle) + ctx.strokeStyle = root.secondaryColor + ctx.stroke() + + ctx.beginPath() + ctx.arc(x, y, radius, startAngle, progressAngle) + ctx.strokeStyle = root.primaryColor + ctx.stroke() + } + + Behavior on degree { + NumberAnimation { + duration: root.animationDuration + } + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 2fa0d39bae..fbe513a953 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -63,3 +63,4 @@ StatusColorRadioButton 0.1 StatusColorRadioButton.qml StatusBlockProgressBar 0.1 StatusBlockProgressBar.qml StatusWarningBox 0.1 StatusWarningBox.qml StatusIconSwitch 0.1 StatusIconSwitch.qml +StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index e32340642d..59afeb7fc6 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -103,6 +103,7 @@ StatusQ/Controls/StatusChatInfoButton.qml StatusQ/Controls/StatusChatListCategoryItemButton.qml StatusQ/Controls/StatusCheckBox.qml + StatusQ/Controls/StatusCircularProgressBar.qml StatusQ/Controls/StatusClearButton.qml StatusQ/Controls/StatusColorRadioButton.qml StatusQ/Controls/StatusColorSelector.qml