sidebar: android-style quick toggles & sliders (#2217)

Co-Authored-By: Vague Syntax <173799252+vaguesyntax@users.noreply.github.com>
2025-10-18 19:07:10 +02:00
parent 77ae119d32
commit 5d1a9b1e9c
35 changed files with 1895 additions and 90 deletions
@@ -0,0 +1,111 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.UPower
+
+Rectangle {
+    id: root
+
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+
+    implicitWidth: contentItem.implicitWidth + root.horizontalPadding * 2
+    implicitHeight: contentItem.implicitHeight + root.verticalPadding * 2
+    radius: Appearance.rounding.normal
+    color: Appearance.colors.colLayer1
+    property real verticalPadding: 4
+    property real horizontalPadding: 12
+
+    Column {
+        id: contentItem
+        anchors {
+            fill: parent
+            leftMargin: root.horizontalPadding
+            rightMargin: root.horizontalPadding
+            topMargin: root.verticalPadding
+            bottomMargin: root.verticalPadding
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showBrightness
+            sourceComponent: QuickSlider {
+                materialSymbol: "brightness_6"
+                value: root.brightnessMonitor.brightness
+                onMoved: {
+                    root.brightnessMonitor.setBrightness(value)
+                }
+            }
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showVolume
+            sourceComponent: QuickSlider {
+                materialSymbol: "volume_up"
+                value: Audio.sink.audio.volume
+                onMoved: {
+                    Audio.sink.audio.volume = value
+                }
+            }
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showMic
+            sourceComponent: QuickSlider {
+                materialSymbol: "mic"
+                value: Audio.source.audio.volume
+                onMoved: {
+                    Audio.source.audio.volume = value
+                }
+            }
+        }
+    }
+
+    component QuickSlider: StyledSlider { 
+        id: quickSlider
+        required property string materialSymbol
+        configuration: StyledSlider.Configuration.M
+        stopIndicatorValues: []
+        
+        MaterialSymbol {
+            id: icon
+            property bool nearFull: quickSlider.value >= 0.9
+            anchors {
+                verticalCenter: parent.verticalCenter
+                right: nearFull ? quickSlider.handle.right : parent.right
+                rightMargin: quickSlider.nearFull ? 14 : 8
+            }
+            iconSize: 20
+            color: nearFull ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+            text: quickSlider.materialSymbol
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+            Behavior on anchors.rightMargin {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+
+        }
+    }
+}