Helpers/SystemUsage.qml

@@ -79,12 +79,22 @@ Singleton {
 		onTriggered: {
 			stat.reload();
 			meminfo.reload();
-			storage.running = true;
 			if (root.gpuType === "GENERIC")
 				gpuUsage.running = true;
 		}
 	}
 
+	Timer {
+		interval: 60000 * 120
+		repeat: true
+		running: true
+		triggeredOnStart: true
+
+		onTriggered: {
+			storage.running = true;
+		}
+	}
+
 	Timer {
 		interval: Config.dashboard.resourceUpdateInterval * 5
 		repeat: true

Modules/Resource.qml

@@ -4,7 +4,7 @@ import QtQuick.Shapes
 import qs.Components
 import qs.Config
 
-Item {
+RowLayout {
 	id: root
 
 	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
@@ -20,12 +20,7 @@ Item {
 	property int warningThreshold: 80
 
 	clip: true
-	height: implicitHeight
-	implicitHeight: 34
-	implicitWidth: 34
 	percentage: 0
-	visible: width > 0 && height > 0
-	width: implicitWidth
 
 	Behavior on animatedPercentage {
 		Anim {
@@ -36,58 +31,80 @@ Item {
 	Component.onCompleted: animatedPercentage = percentage
 	onPercentageChanged: animatedPercentage = percentage
 
-	Canvas {
+	// Canvas {
-		id: gaugeCanvas
+	// 	id: gaugeCanvas
-
+	//
-		anchors.centerIn: parent
+	// 	anchors.centerIn: parent
-		height: width
+	// 	height: width
-		width: Math.min(parent.width, parent.height)
+	// 	width: Math.min(parent.width, parent.height)
-
+	//
-		Component.onCompleted: requestPaint()
+	// 	Component.onCompleted: requestPaint()
-		onPaint: {
+	// 	onPaint: {
-			const ctx = getContext("2d");
+	// 		const ctx = getContext("2d");
-			ctx.reset();
+	// 		ctx.reset();
-			const cx = width / 2;
+	// 		const cx = width / 2;
-			const cy = (height / 2) + 1;
+	// 		const cy = (height / 2) + 1;
-			const radius = (Math.min(width, height) - 12) / 2;
+	// 		const radius = (Math.min(width, height) - 12) / 2;
-			const lineWidth = 3;
+	// 		const lineWidth = 3;
-			ctx.beginPath();
+	// 		ctx.beginPath();
-			ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep);
+	// 		ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep);
-			ctx.lineWidth = lineWidth;
+	// 		ctx.lineWidth = lineWidth;
-			ctx.lineCap = "round";
+	// 		ctx.lineCap = "round";
-			ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
+	// 		ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
-			ctx.stroke();
+	// 		ctx.stroke();
-			if (root.animatedPercentage > 0) {
+	// 		if (root.animatedPercentage > 0) {
-				ctx.beginPath();
+	// 			ctx.beginPath();
-				ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep * root.animatedPercentage);
+	// 			ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep * root.animatedPercentage);
-				ctx.lineWidth = lineWidth;
+	// 			ctx.lineWidth = lineWidth;
-				ctx.lineCap = "round";
+	// 			ctx.lineCap = "round";
-				ctx.strokeStyle = root.accentColor;
+	// 			ctx.strokeStyle = root.accentColor;
-				ctx.stroke();
+	// 			ctx.stroke();
-			}
+	// 		}
-		}
+	// 	}
-
+	//
-		Connections {
+	// 	Connections {
-			function onAnimatedPercentageChanged() {
+	// 		function onAnimatedPercentageChanged() {
-				gaugeCanvas.requestPaint();
+	// 			gaugeCanvas.requestPaint();
-			}
+	// 		}
-
+	//
-			target: root
+	// 		target: root
-		}
+	// 	}
-
+	//
-		Connections {
+	// 	Connections {
-			function onPaletteChanged() {
+	// 		function onPaletteChanged() {
-				gaugeCanvas.requestPaint();
+	// 			gaugeCanvas.requestPaint();
-			}
+	// 		}
-
+	//
-			target: DynamicColors
+	// 		target: DynamicColors
-		}
+	// 	}
-	}
+	// }
 
 	MaterialIcon {
-		anchors.centerIn: parent
+		id: icon
+
 		color: DynamicColors.palette.m3onSurface
 		font.pointSize: 12
 		text: root.icon
 	}
+
+	CustomClippingRect {
+		Layout.preferredHeight: root.height
+		Layout.preferredWidth: 5
+		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+		radius: Appearance.rounding.full
+
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: root.mainColor
+			implicitHeight: root.percentage * parent.height
+			radius: implicitHeight / 2
+
+			Behavior on implicitHeight {
+				Anim {
+				}
+			}
+		}
+	}
 }

Modules/Resources.qml

@@ -16,7 +16,7 @@ CustomRect {
 	clip: true
 	color: DynamicColors.tPalette.m3surfaceContainer
 	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.small * 2
+	implicitWidth: rowLayout.implicitWidth + Appearance.padding.normal * 2
 	radius: height / 2
 
 	StateLayer {
@@ -27,7 +27,8 @@ CustomRect {
 		id: rowLayout
 
 		anchors.centerIn: parent
-		spacing: 0
+		implicitHeight: root.implicitHeight
+		spacing: Appearance.spacing.smaller
 
 		Ref {
 			service: SystemUsage
@@ -35,6 +36,7 @@ CustomRect {
 
 		Resource {
 			Layout.alignment: Qt.AlignVCenter
+			Layout.fillHeight: true
 			icon: "memory"
 			mainColor: DynamicColors.palette.m3primary
 			percentage: SystemUsage.cpuPerc
@@ -42,6 +44,7 @@ CustomRect {
 		}
 
 		Resource {
+			Layout.fillHeight: true
 			icon: "memory_alt"
 			mainColor: DynamicColors.palette.m3secondary
 			percentage: SystemUsage.memPerc
@@ -49,12 +52,14 @@ CustomRect {
 		}
 
 		Resource {
+			Layout.fillHeight: true
 			icon: "gamepad"
 			mainColor: DynamicColors.palette.m3tertiary
 			percentage: SystemUsage.gpuPerc
 		}
 
 		Resource {
+			Layout.fillHeight: true
 			icon: "developer_board"
 			mainColor: DynamicColors.palette.m3primary
 			percentage: SystemUsage.gpuMemUsed