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
lineWidth: 2
value: percentage
size: 26
secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
implicitSize: 26
colSecondary: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
colPrimary: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
fill: (isLow && !isCharging)
MaterialSymbol {
+3 -3
View File
@@ -53,9 +53,9 @@ Item {
Layout.leftMargin: rowLayout.spacing
lineWidth: 2
value: activePlayer?.position / activePlayer?.length
size: 26
secondaryColor: Appearance.colors.colSecondaryContainer
primaryColor: Appearance.m3colors.m3onSecondaryContainer
implicitSize: 26
colSecondary: Appearance.colors.colSecondaryContainer
colPrimary: Appearance.m3colors.m3onSecondaryContainer
enableAnimation: false
MaterialSymbol {
@@ -21,9 +21,9 @@ Item {
Layout.alignment: Qt.AlignVCenter
lineWidth: 2
value: percentage
size: 26
secondaryColor: Appearance.colors.colSecondaryContainer
primaryColor: Appearance.m3colors.m3onSecondaryContainer
implicitSize: 26
colSecondary: Appearance.colors.colSecondaryContainer
colPrimary: Appearance.m3colors.m3onSecondaryContainer
enableAnimation: false
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.Shapes
import qs.modules.common
@@ -11,25 +8,25 @@ import qs.modules.common
Item {
id: root
property int size: 30
property int implicitSize: 30
property int lineWidth: 2
property real value: 0
property color primaryColor: Appearance.m3colors.m3onSecondaryContainer
property color secondaryColor: Appearance.colors.colSecondaryContainer
property real gapAngle: 180 / 9
property color colPrimary: Appearance.m3colors.m3onSecondaryContainer
property color colSecondary: Appearance.colors.colSecondaryContainer
property real gapAngle: 360 / 18
property bool fill: false
property int fillOverflow: 2
property bool enableAnimation: true
property int animationDuration: 1000
property int animationDuration: 800
property var easingType: Easing.OutCubic
width: size
height: size
implicitWidth: implicitSize
implicitHeight: implicitSize
property real degree: value * 360
property real centerX: root.width / 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
Behavior on degree {
@@ -47,7 +44,7 @@ Item {
sourceComponent: Rectangle {
radius: 9999
color: root.secondaryColor
color: root.colSecondary
}
}
@@ -58,7 +55,7 @@ Item {
preferredRendererType: Shape.CurveRenderer
ShapePath {
id: secondaryPath
strokeColor: root.secondaryColor
strokeColor: root.colSecondary
strokeWidth: root.lineWidth
capStyle: ShapePath.RoundCap
fillColor: "transparent"
@@ -73,7 +70,7 @@ Item {
}
ShapePath {
id: primaryPath
strokeColor: root.primaryColor
strokeColor: root.colPrimary
strokeWidth: root.lineWidth
capStyle: ShapePath.RoundCap
fillColor: "transparent"