osd: animate scrolling (#316)

* refactor: make the animation smooth when scrolling the mouse wheel

* fix: can't drag

* format

* fix cursor

---------

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

1 files changed, 43 insertions, 18 deletions

diff --git a/modules/osd/Content.qml b/modules/osd/Content.qml
index 8f78894..a707fb4 100644
--- a/modules/osd/Content.qml
+++ b/modules/osd/Content.qml
@@ -15,29 +15,54 @@ Column {
 
     spacing: Appearance.spacing.normal
 
-    VerticalSlider {
-        icon: {
-            if (Audio.muted)
-                return "no_sound";
-            if (value >= 0.5)
-                return "volume_up";
-            if (value > 0)
-                return "volume_down";
-            return "volume_mute";
-        }
-        value: Audio.volume
-        onMoved: Audio.setVolume(value)
-
+    CustomMouseArea {
         implicitWidth: Config.osd.sizes.sliderWidth
         implicitHeight: Config.osd.sizes.sliderHeight
-    }
 
-    VerticalSlider {
-        icon: `brightness_${(Math.round(value * 6) + 1)}`
-        value: root.monitor?.brightness ?? 0
-        onMoved: root.monitor?.setBrightness(value)
+        onWheel: event => {
+            if (event.angleDelta.y > 0)
+                Audio.setVolume(Audio.volume + 0.1);
+            else if (event.angleDelta.y < 0)
+                Audio.setVolume(Audio.volume - 0.1);
+        }
 
+        VerticalSlider {
+            anchors.fill: parent
+
+            icon: {
+                if (Audio.muted)
+                    return "no_sound";
+                if (value >= 0.5)
+                    return "volume_up";
+                if (value > 0)
+                    return "volume_down";
+                return "volume_mute";
+            }
+            value: Audio.volume
+            onMoved: Audio.setVolume(value)
+        }
+    }
+
+    CustomMouseArea {
         implicitWidth: Config.osd.sizes.sliderWidth
         implicitHeight: Config.osd.sizes.sliderHeight
+
+        onWheel: event => {
+            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);
+        }
+
+        VerticalSlider {
+            anchors.fill: parent
+
+            icon: `brightness_${(Math.round(value * 6) + 1)}`
+            value: root.monitor?.brightness ?? 0
+            onMoved: root.monitor?.setBrightness(value)
+        }
     }
 }