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>

modules/osd/Content.qml

@@ -15,29 +15,54 @@ Column {
 
     spacing: Appearance.spacing.normal
 
-    VerticalSlider {
+    CustomMouseArea {
-        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)
-
         implicitWidth: Config.osd.sizes.sliderWidth
         implicitHeight: Config.osd.sizes.sliderHeight
+
+        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)
+        }
     }
 
-    VerticalSlider {
+    CustomMouseArea {
-        icon: `brightness_${(Math.round(value * 6) + 1)}`
-        value: root.monitor?.brightness ?? 0
-        onMoved: root.monitor?.setBrightness(value)
-
         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)
+        }
     }
 }

widgets/VerticalSlider.qml

@@ -11,8 +11,6 @@ Slider {
     required property string icon
     property real oldValue
 
-    wheelEnabled: true
-
     orientation: Qt.Vertical
 
     background: StyledRect {
@@ -59,7 +57,7 @@ Slider {
             MouseArea {
                 anchors.fill: parent
                 cursorShape: Qt.PointingHandCursor
-                onPressed: event => event.accepted = false
+                acceptedButtons: Qt.NoButton
             }
 
             MaterialIcon {