final theme

2026-08-11 02:05:46 +02:00
parent 105cf6b3a8
commit 08146fe16f
5 changed files with 174 additions and 39 deletions
@@ -0,0 +1,91 @@
+import QtQuick
+import "root:/config"
+import "root:/components"
+
+// One metric in a popout: a label and its reading on a line, with a wide
+// sheared segmented meter underneath.
+//
+// This replaces the radial Gauge. A 270° dial was the only curved thing in a
+// shell whose whole geometry is sheared slabs and hard chamfers, so it read as
+// though it had been imported from another design. The meter says the same
+// thing in the language the bar and the OSD already speak, and it gets far more
+// resolution across a popout's width than a 88px dial did.
+Item {
+    id: root
+
+    property string label: ""
+    property real value: 0            // 0..100
+    property string readout: Math.round(root.value) + "%"
+    property string sub: ""
+    property color tone: Theme.heat(root.value)
+
+    property int segments: 24
+    property real segmentSpacing: 3
+
+    implicitHeight: head.height + Theme.padS + meter.height
+
+    Item {
+        id: head
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: Math.max(name.implicitHeight, figure.implicitHeight)
+
+        Text {
+            id: name
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.label.toUpperCase()
+            color: Theme.subtext
+            font.family: Theme.fontMono
+            font.pixelSize: Theme.fsMicro
+            font.letterSpacing: 2
+            renderType: Text.NativeRendering
+        }
+
+        // The secondary figure — temperature, used-of-total. Sits next to the
+        // label rather than under the number so the right edge stays a single
+        // clean column of readings.
+        Text {
+            anchors.left: name.right
+            anchors.leftMargin: Theme.padM
+            anchors.right: figure.left
+            anchors.rightMargin: Theme.padM
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.sub !== ""
+            text: root.sub
+            color: Theme.muted
+            elide: Text.ElideRight
+            font.family: Theme.fontMono
+            font.pixelSize: Theme.fsMicro
+            renderType: Text.NativeRendering
+        }
+
+        SplitText {
+            // Not `value` — an id by that name shadows the `value` property, and
+            // the defaults above then round a Text item instead of a number.
+            id: figure
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.readout
+            pixelSize: Theme.fsBody
+            color: Theme.text
+            split: 1
+            splitOpacity: 0.5
+        }
+    }
+
+    MeterBar {
+        id: meter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: 12
+        segments: root.segments
+        spacing: root.segmentSpacing
+        // Fill the row exactly rather than leaving a ragged tail on the right.
+        segmentWidth: (width - (root.segments - 1) * root.segmentSpacing) / root.segments
+        value: root.value
+        activeColor: root.tone
+    }
+}