config: allow enable/disable osd brightness (#481)

* Added option to disable brightness slider

* Removed unwanted imports

* Renamed WrappedLoader.name to brightnessSlider

* fixes

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

README.md

@@ -324,6 +324,8 @@ default, you must create it manually.
         "expire": false
     },
     "osd": {
+        "enabled": true,
+        "enableBrightness": true,
         "hideDelay": 2000
     },
     "paths": {

config/OsdConfig.qml

@@ -3,6 +3,7 @@ import Quickshell.Io
 JsonObject {
     property bool enabled: true
     property int hideDelay: 2000
+    property bool enableBrightness: true
     property Sizes sizes: Sizes {}
 
     component Sizes: JsonObject {

modules/osd/Content.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.components.controls
 import qs.services
 import qs.config
@@ -16,6 +18,7 @@ Column {
 
     spacing: Appearance.spacing.normal
 
+    // Speaker volume
     CustomMouseArea {
         implicitWidth: Config.osd.sizes.sliderWidth
         implicitHeight: Config.osd.sizes.sliderHeight
@@ -36,26 +39,35 @@ Column {
         }
     }
 
-    CustomMouseArea {
+    // Brightness
-        implicitWidth: Config.osd.sizes.sliderWidth
+    WrappedLoader {
-        implicitHeight: Config.osd.sizes.sliderHeight
+        active: Config.osd.enableBrightness
 
-        onWheel: event => {
+        sourceComponent: CustomMouseArea {
-            const monitor = root.monitor;
+            implicitWidth: Config.osd.sizes.sliderWidth
-            if (!monitor)
+            implicitHeight: Config.osd.sizes.sliderHeight
-                return;
-            if (event.angleDelta.y > 0)
-                monitor.setBrightness(monitor.brightness + 0.1);
-            else if (event.angleDelta.y < 0)
-                monitor.setBrightness(monitor.brightness - 0.1);
-        }
 
-        FilledSlider {
+            onWheel: event => {
-            anchors.fill: parent
+                const monitor = root.monitor;
+                if (!monitor)
+                    return;
+                if (event.angleDelta.y > 0)
+                    monitor.setBrightness(monitor.brightness + 0.1);
+                else if (event.angleDelta.y < 0)
+                    monitor.setBrightness(monitor.brightness - 0.1);
+            }
 
-            icon: `brightness_${(Math.round(value * 6) + 1)}`
+            FilledSlider {
-            value: root.monitor?.brightness ?? 0
+                anchors.fill: parent
-            onMoved: root.monitor?.setBrightness(value)
+
+                icon: `brightness_${(Math.round(value * 6) + 1)}`
+                value: root.monitor?.brightness ?? 0
+                onMoved: root.monitor?.setBrightness(value)
+            }
         }
     }
+    component WrappedLoader: Loader {
+        asynchronous: true
+        visible: active
+    }
 }