resource widget is broken lol

2026-03-02 17:09:39 +01:00
parent 9065d693ef
commit 7451c52684
8 changed files with 263 additions and 224 deletions
@@ -7,110 +7,72 @@ import qs.Config
 Item {
 	id: root

+	property color accentColor: DynamicColors.palette.m3primary
+	property real animatedPercentage: 0
+	readonly property real arcStartAngle: 0.75 * Math.PI
+	readonly property real arcSweep: 1.5 * Math.PI
 	property color borderColor: warning ? DynamicColors.palette.m3onError : mainColor
+	property string icon
 	required property color mainColor
 	required property double percentage
 	property bool shown: true
+	property string subtitle
+	property string title
 	property color usageColor: warning ? DynamicColors.palette.m3error : mainColor
 	property bool warning: percentage * 100 >= warningThreshold
 	property int warningThreshold: 100

 	clip: true
-	implicitHeight: 22
-	implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth
+	implicitHeight: root.parent.height
+	implicitWidth: root.parent.width
+	percentage: 0
 	visible: width > 0 && height > 0

-	Behavior on percentage {
-		NumberAnimation {
-			duration: 300
-			easing.type: Easing.InOutQuad
-		}
-	}
+	Canvas {
+		id: gaugeCanvas

-	RowLayout {
-		id: resourceRowLayout
+		anchors.centerIn: parent
+		height: width
+		width: Math.min(parent.width, parent.height)

-		spacing: 2
-		x: shown ? 0 : -resourceRowLayout.width
-
-		anchors {
-			verticalCenter: parent.verticalCenter
+		Component.onCompleted: requestPaint()
+		onPaint: {
+			const ctx = getContext("2d");
+			ctx.reset();
+			const cx = width / 2;
+			const cy = height / 2;
+			const radius = (Math.min(width, height) - 12) / 2;
+			const lineWidth = 3;
+			ctx.beginPath();
+			ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep);
+			ctx.lineWidth = lineWidth;
+			ctx.lineCap = "round";
+			ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
+			ctx.stroke();
+			if (root.animatedPercentage > 0) {
+				ctx.beginPath();
+				ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep * root.animatedPercentage);
+				ctx.lineWidth = lineWidth;
+				ctx.lineCap = "round";
+				ctx.strokeStyle = root.accentColor;
+				ctx.stroke();
+			}
 		}

-		Item {
-			Layout.alignment: Qt.AlignVCenter
-			implicitHeight: root.implicitHeight
-			implicitWidth: 14
-
-			Rectangle {
-				id: backgroundCircle
-
-				anchors.centerIn: parent
-				border.color: "#404040"
-				border.width: 1
-				color: "#40000000"
-				height: 14
-				radius: height / 2
-				width: 14
+		Connections {
+			function onAnimatedPercentageChanged() {
+				gaugeCanvas.requestPaint();
 			}

-			Shape {
-				anchors.fill: backgroundCircle
-				preferredRendererType: Shape.CurveRenderer
-				smooth: true
+			target: root
+		}

-				ShapePath {
-					fillColor: root.usageColor
-					startX: backgroundCircle.width / 2
-					startY: backgroundCircle.height / 2
-					strokeWidth: 0
-
-					Behavior on fillColor {
-						CAnim {
-						}
-					}
-
-					PathLine {
-						x: backgroundCircle.width / 2
-						y: 0 + (1 / 2)
-					}
-
-					PathAngleArc {
-						centerX: backgroundCircle.width / 2
-						centerY: backgroundCircle.height / 2
-						radiusX: backgroundCircle.width / 2 - (1 / 2)
-						radiusY: backgroundCircle.height / 2 - (1 / 2)
-						startAngle: -90
-						sweepAngle: 360 * root.percentage
-					}
-
-					PathLine {
-						x: backgroundCircle.width / 2
-						y: backgroundCircle.height / 2
-					}
-				}
-
-				ShapePath {
-					capStyle: ShapePath.FlatCap
-					fillColor: "transparent"
-					strokeColor: root.borderColor
-					strokeWidth: 1
-
-					Behavior on strokeColor {
-						CAnim {
-						}
-					}
-
-					PathAngleArc {
-						centerX: backgroundCircle.width / 2
-						centerY: backgroundCircle.height / 2
-						radiusX: backgroundCircle.width / 2 - (1 / 2)
-						radiusY: backgroundCircle.height / 2 - (1 / 2)
-						startAngle: -90
-						sweepAngle: 360 * root.percentage
-					}
-				}
+		Connections {
+			function onPaletteChanged() {
+				gaugeCanvas.requestPaint();
 			}
+
+			target: DynamicColors
 		}
 	}
 }