add volume and brightness control

2026-08-18 12:36:52 +02:00
parent 1d59b7808b
commit 7ff0f584e0
14 changed files with 984 additions and 2 deletions
@@ -0,0 +1,102 @@
+import QtQuick
+import qs.config
+
+// One labelled slider: glyph, name and reading on top, the slider under them.
+// Both rows of the controls panel are this.
+//
+// The glyph goes in `content`, so each row can bring its own — and, where the
+// glyph does something when clicked (mute), say so with `iconClickable`.
+Item {
+    id: root
+
+    property string label: ""
+    property string valueText: ""
+    property real value: 0
+    property real stepSize: 0.05
+    // Selected by the keyboard, which is what arrow keys move.
+    property bool selected: false
+    property bool iconClickable: false
+
+    default property alias content: glyph.data
+
+    signal moved(real value)
+    signal iconClicked
+
+    implicitHeight: header.height + slider.height
+
+    function step(delta: real): void {
+        slider.step(delta);
+    }
+
+    Item {
+        id: header
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        height: Theme.iconSize
+
+        Item {
+            id: glyph
+
+            anchors.verticalCenter: parent.verticalCenter
+            width: childrenRect.width
+            height: childrenRect.height
+        }
+
+        // Sibling of the glyph rather than a child of it: inside, it would be
+        // part of the childrenRect the glyph sizes itself from.
+        MouseArea {
+            anchors.fill: glyph
+            enabled: root.iconClickable
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.iconClicked()
+        }
+
+        Text {
+            anchors {
+                left: glyph.right
+                right: reading.left
+                leftMargin: Theme.padding
+                rightMargin: Theme.padding
+                verticalCenter: parent.verticalCenter
+            }
+            elide: Text.ElideRight
+            text: root.label
+            color: root.selected ? Theme.accent : Theme.text
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.fontSize
+            font.bold: true
+        }
+
+        Text {
+            id: reading
+
+            anchors {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: root.valueText
+            color: Theme.textDim
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.fontSizeSmall
+            font.bold: true
+        }
+    }
+
+    Slider {
+        id: slider
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.bottom
+        }
+        value: root.value
+        stepSize: root.stepSize
+
+        onMoved: value => root.moved(value)
+    }
+}