Modules/Resource.qml

@@ -7,26 +7,34 @@ import qs.Config
 Item {
 	id: root
 
-	property color accentColor: DynamicColors.palette.m3primary
+	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
 	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
+	property int warningThreshold: 80
 
 	clip: true
-	implicitHeight: root.parent.height
+	height: implicitHeight
-	implicitWidth: root.parent.width
+	implicitHeight: 34
+	implicitWidth: 34
 	percentage: 0
 	visible: width > 0 && height > 0
+	width: implicitWidth
+
+	Behavior on animatedPercentage {
+		Anim {
+			duration: Appearance.anim.durations.large
+		}
+	}
+
+	Component.onCompleted: animatedPercentage = percentage
+	onPercentageChanged: animatedPercentage = percentage
 
 	Canvas {
 		id: gaugeCanvas
@@ -40,7 +48,7 @@ Item {
 			const ctx = getContext("2d");
 			ctx.reset();
 			const cx = width / 2;
-			const cy = height / 2;
+			const cy = (height / 2) + 1;
 			const radius = (Math.min(width, height) - 12) / 2;
 			const lineWidth = 3;
 			ctx.beginPath();
@@ -75,4 +83,11 @@ Item {
 			target: DynamicColors
 		}
 	}
+
+	MaterialIcon {
+		anchors.centerIn: parent
+		color: DynamicColors.palette.m3onSurface
+		font.pointSize: 12
+		text: root.icon
+	}
 }

Modules/Resources.qml

@@ -3,10 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import QtQuick.Layouts
-import Quickshell.Wayland
+import qs.Helpers
 import qs.Modules
 import qs.Config
-import qs.Effects
 import qs.Components
 
 Item {
@@ -41,57 +40,37 @@ Item {
 		id: rowLayout
 
 		anchors.centerIn: parent
-		spacing: 6
+		spacing: 0
 
-		MaterialIcon {
+		Ref {
-			Layout.alignment: Qt.AlignVCenter
+			service: SystemUsage
-			color: DynamicColors.palette.m3onSurface
-			font.pointSize: 14
-			text: "memory_alt"
 		}
 
 		Resource {
 			Layout.alignment: Qt.AlignVCenter
+			icon: "memory"
 			mainColor: DynamicColors.palette.m3primary
-			percentage: ResourceUsage.memoryUsedPercentage
+			percentage: SystemUsage.cpuPerc
 			warningThreshold: 95
 		}
 
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3onSurface
-			font.pointSize: 14
-			text: "memory"
-		}
-
 		Resource {
+			icon: "memory_alt"
 			mainColor: DynamicColors.palette.m3secondary
-			percentage: ResourceUsage.cpuUsage
+			percentage: SystemUsage.memPerc
 			warningThreshold: 80
 		}
 
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3onSurface
-			font.pointSize: 14
-			text: "gamepad"
-		}
-
 		Resource {
+			icon: "gamepad"
 			mainColor: DynamicColors.palette.m3tertiary
-			percentage: ResourceUsage.gpuUsage
+			percentage: SystemUsage.gpuPerc
-		}
-
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3onSurface
-			font.pointSize: 14
-			text: "developer_board"
 		}
 
 		Resource {
+			icon: "developer_board"
 			mainColor: DynamicColors.palette.m3primary
-			percentage: ResourceUsage.gpuMemUsage
+			percentage: SystemUsage.gpuMemUsed
 		}
 	}
 }