added quickshell

2026-08-10 23:57:26 +02:00
parent cbaf55cfc5
commit 47ff5233bd
69 changed files with 6945 additions and 80 deletions
@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Shapes
+import "root:/config"
+
+// Radial gauge used across the resource popout. Sweeps a 270° arc with a
+// tick-marked rail behind it and the reading set in the middle.
+Item {
+    id: root
+
+    property real value: 0            // 0..100
+    property string label: ""
+    property string readout: Math.round(value) + "%"
+    property string sub: ""
+    property color arcColor: Theme.heat(value)
+    property real thickness: 7
+    property real startAngle: 135
+    property real sweep: 270
+    property int ticks: 24
+
+    implicitWidth: 96
+    implicitHeight: 96
+
+    readonly property real _r: Math.min(width, height) / 2 - thickness / 2 - 4
+    readonly property real _cx: width / 2
+    readonly property real _cy: height / 2
+
+    // Rail
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: Theme.alpha(Theme.outline, 0.5)
+            strokeWidth: root.thickness
+            capStyle: ShapePath.FlatCap
+            PathAngleArc {
+                centerX: root._cx; centerY: root._cy
+                radiusX: root._r; radiusY: root._r
+                startAngle: root.startAngle
+                sweepAngle: root.sweep
+            }
+        }
+    }
+
+    // Tick marks around the rail.
+    Repeater {
+        model: root.ticks
+        Rectangle {
+            required property int index
+            readonly property real a: (root.startAngle + root.sweep * (index / (root.ticks - 1))) * Math.PI / 180
+            readonly property real rr: root._r + root.thickness / 2 + 3
+            width: 2
+            height: index % 4 === 0 ? 6 : 3
+            color: Theme.alpha(Theme.primary, index % 4 === 0 ? 0.55 : 0.25)
+            x: root._cx + Math.cos(a) * rr - width / 2
+            y: root._cy + Math.sin(a) * rr - height / 2
+            rotation: (root.startAngle + root.sweep * (index / (root.ticks - 1))) + 90
+        }
+    }
+
+    // Value arc
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: root.arcColor
+            strokeWidth: root.thickness
+            capStyle: ShapePath.FlatCap
+            PathAngleArc {
+                id: valueArc
+                centerX: root._cx; centerY: root._cy
+                radiusX: root._r; radiusY: root._r
+                startAngle: root.startAngle
+                sweepAngle: root.sweep * Math.max(0, Math.min(100, root.value)) / 100
+
+                Behavior on sweepAngle {
+                    NumberAnimation {
+                        duration: Theme.durSlow
+                        easing.type: Easing.OutExpo
+                    }
+                }
+            }
+        }
+    }
+
+    Column {
+        anchors.centerIn: parent
+        spacing: -2
+
+        SplitText {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: root.readout
+            pixelSize: Theme.fsLarge
+            color: Theme.text
+            split: 1.2
+            splitOpacity: 0.6
+        }
+
+        Text {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: root.label
+            color: Theme.muted
+            font.family: Theme.fontMono
+            font.pixelSize: Theme.fsMicro
+            font.letterSpacing: 2
+            renderType: Text.NativeRendering
+        }
+
+        Text {
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.sub !== ""
+            text: root.sub
+            color: Theme.subtext
+            font.family: Theme.fontMono
+            font.pixelSize: Theme.fsMicro
+            renderType: Text.NativeRendering
+        }
+    }
+}