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,80 @@
+import QtQuick
+import qs.config
+import qs.components
+import qs.services
+
+// Right section: the volume button, which also opens the brightness slider.
+// The sliders live in ControlsPanel.qml as a separate layer surface.
+Item {
+    id: root
+
+    required property var bar
+
+    readonly property int percent: Math.round(Audio.volume * 100)
+
+    // Nothing to control — no pipewire sink and no backlight — means no button.
+    visible: Audio.available || Brightness.available
+
+    implicitWidth: button.implicitWidth
+
+    PanelButton {
+        id: button
+
+        anchors.verticalCenter: parent.verticalCenter
+        height: root.height - Theme.spacing
+        minContentWidth: Theme.iconSize
+        active: panel.visible
+        activeColor: Theme.accent
+        acceptedButtons: Qt.LeftButton | Qt.MiddleButton
+
+        onClicked: event => {
+            // Middle click mutes, the way it does on most panels.
+            if (event.button === Qt.MiddleButton)
+                Audio.toggleMute();
+            else
+                Session.toggle("controls", panel.screenName);
+        }
+
+        Row {
+            spacing: Theme.spacing
+
+            VolumeGlyph {
+                size: Theme.iconSize
+                struck: Audio.muted || !Audio.available
+                level: !Audio.available || Audio.muted ? 0 : Audio.volume > 0.5 ? 2 : Audio.volume > 0 ? 1 : 0
+                color: button.active ? Theme.background : Audio.muted || !Audio.available ? Theme.textDim : Theme.text
+                dimColor: button.active ? Qt.rgba(Theme.background.r, Theme.background.g, Theme.background.b, 0.4) : Theme.border
+            }
+
+            Text {
+                height: Theme.iconSize
+                verticalAlignment: Text.AlignVCenter
+                visible: Audio.available
+                text: root.percent + "%"
+                color: button.active ? Theme.background : Audio.muted ? Theme.textDim : Theme.text
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.fontSizeSmall
+                font.bold: true
+            }
+        }
+    }
+
+    // Scrolling the button changes the volume without opening anything, which
+    // is the fastest way to nudge it with a pointer.
+    WheelHandler {
+        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+        enabled: Audio.available
+
+        onWheel: event => {
+            const notches = event.angleDelta.y / 120;
+            if (notches !== 0)
+                Audio.step(notches * Config.volumeStep);
+        }
+    }
+
+    ControlsPanel {
+        id: panel
+
+        bar: root.bar
+    }
+}