restructure bar components layout

2026-08-15 14:18:00 +02:00
parent 0092b41a05
commit 9823c66299
34 changed files with 69 additions and 278 deletions
@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+import qs.Components
+import ZShell.Config
+import qs.Services
+
+GridLayout {
+	id: root
+
+	property color accentColor: warning ? Colors.palette.m3error : mainColor
+	property real animatedPercentage: 0
+	readonly property real arcStartAngle: 0.75 * Math.PI
+	readonly property real arcSweep: 1.5 * Math.PI
+	required property bool horizontal
+	property string icon
+	required property color iconColor
+	required property color mainColor
+	required property double percentage
+	property bool shown: true
+	property color usageColor: warning ? Colors.palette.m3error : mainColor
+	property bool warning: percentage * 100 >= warningThreshold
+	property int warningThreshold: 80
+
+	columnSpacing: Tokens.spacing.smaller
+	columns: horizontal ? -1 : 1
+	percentage: 0
+
+	Behavior on animatedPercentage {
+		Anim {
+		}
+	}
+
+	Component.onCompleted: animatedPercentage = percentage
+	onPercentageChanged: {
+		const next = percentage;
+
+		if (Math.abs(next - animatedPercentage) >= 0.05)
+			animatedPercentage = next;
+	}
+
+	MaterialIcon {
+		id: icon
+
+		Layout.preferredWidth: 16
+		color: root.iconColor
+		font.pointSize: Tokens.font.size.larger
+		text: root.icon
+	}
+
+	CustomClippingRect {
+		Layout.preferredHeight: root.horizontal ? icon.implicitHeight - Tokens.padding.small : 4
+		Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth
+		color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+		radius: Tokens.rounding.full
+
+		CustomRect {
+			id: fill
+
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.right: root.horizontal ? parent.right : undefined
+			anchors.top: root.horizontal ? undefined : parent.top
+			color: root.mainColor
+			implicitHeight: root.horizontal ? Math.ceil(root.percentage * parent.height) : 0
+			implicitWidth: root.horizontal ? 0 : Math.ceil(root.percentage * parent.width)
+
+			// Behavior on implicitHeight {
+			// 	Anim {
+			// 	}
+			// }
+		}
+	}
+}