circular progress: use implicitSize instead of size

note: the credit is removed because the widget has been rewritten to use Shape instead of Canvas
This commit is contained in:
end-4
2025-08-03 19:54:01 +07:00
parent 87f7bc28a3
commit 0708070764
4 changed files with 20 additions and 23 deletions
@@ -43,9 +43,9 @@ Item {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
lineWidth: 2 lineWidth: 2
value: percentage value: percentage
size: 26 implicitSize: 26
secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer colSecondary: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer colPrimary: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
fill: (isLow && !isCharging) fill: (isLow && !isCharging)
MaterialSymbol { MaterialSymbol {
+3 -3
View File
@@ -53,9 +53,9 @@ Item {
Layout.leftMargin: rowLayout.spacing Layout.leftMargin: rowLayout.spacing
lineWidth: 2 lineWidth: 2
value: activePlayer?.position / activePlayer?.length value: activePlayer?.position / activePlayer?.length
size: 26 implicitSize: 26
secondaryColor: Appearance.colors.colSecondaryContainer colSecondary: Appearance.colors.colSecondaryContainer
primaryColor: Appearance.m3colors.m3onSecondaryContainer colPrimary: Appearance.m3colors.m3onSecondaryContainer
enableAnimation: false enableAnimation: false
MaterialSymbol { MaterialSymbol {
@@ -21,9 +21,9 @@ Item {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
lineWidth: 2 lineWidth: 2
value: percentage value: percentage
size: 26 implicitSize: 26
secondaryColor: Appearance.colors.colSecondaryContainer colSecondary: Appearance.colors.colSecondaryContainer
primaryColor: Appearance.m3colors.m3onSecondaryContainer colPrimary: Appearance.m3colors.m3onSecondaryContainer
enableAnimation: false enableAnimation: false
MaterialSymbol { MaterialSymbol {
@@ -1,6 +1,3 @@
// From https://github.com/rafzby/circular-progressbar with modifications
// License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
import QtQuick import QtQuick
import QtQuick.Shapes import QtQuick.Shapes
import qs.modules.common import qs.modules.common
@@ -11,25 +8,25 @@ import qs.modules.common
Item { Item {
id: root id: root
property int size: 30 property int implicitSize: 30
property int lineWidth: 2 property int lineWidth: 2
property real value: 0 property real value: 0
property color primaryColor: Appearance.m3colors.m3onSecondaryContainer property color colPrimary: Appearance.m3colors.m3onSecondaryContainer
property color secondaryColor: Appearance.colors.colSecondaryContainer property color colSecondary: Appearance.colors.colSecondaryContainer
property real gapAngle: 180 / 9 property real gapAngle: 360 / 18
property bool fill: false property bool fill: false
property int fillOverflow: 2 property int fillOverflow: 2
property bool enableAnimation: true property bool enableAnimation: true
property int animationDuration: 1000 property int animationDuration: 800
property var easingType: Easing.OutCubic property var easingType: Easing.OutCubic
width: size implicitWidth: implicitSize
height: size implicitHeight: implicitSize
property real degree: value * 360 property real degree: value * 360
property real centerX: root.width / 2 property real centerX: root.width / 2
property real centerY: root.height / 2 property real centerY: root.height / 2
property real arcRadius: root.size / 2 - root.lineWidth property real arcRadius: root.implicitSize / 2 - root.lineWidth
property real startAngle: -90 property real startAngle: -90
Behavior on degree { Behavior on degree {
@@ -47,7 +44,7 @@ Item {
sourceComponent: Rectangle { sourceComponent: Rectangle {
radius: 9999 radius: 9999
color: root.secondaryColor color: root.colSecondary
} }
} }
@@ -58,7 +55,7 @@ Item {
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
ShapePath { ShapePath {
id: secondaryPath id: secondaryPath
strokeColor: root.secondaryColor strokeColor: root.colSecondary
strokeWidth: root.lineWidth strokeWidth: root.lineWidth
capStyle: ShapePath.RoundCap capStyle: ShapePath.RoundCap
fillColor: "transparent" fillColor: "transparent"
@@ -73,7 +70,7 @@ Item {
} }
ShapePath { ShapePath {
id: primaryPath id: primaryPath
strokeColor: root.primaryColor strokeColor: root.colPrimary
strokeWidth: root.lineWidth strokeWidth: root.lineWidth
capStyle: ShapePath.RoundCap capStyle: ShapePath.RoundCap
fillColor: "transparent" fillColor: "transparent"