bars: refractor corner areas' scrolling behavior

.config/quickshell/ii/modules/bar/BarContent.qml

@@ -47,58 +47,26 @@ Item { // Bar content region
         border.color: Appearance.colors.colLayer0Border
     }
 
-    MouseArea { // Left side | scroll to change brightness
+    FocusedScrollMouseArea { // Left side | scroll to change brightness
         id: barLeftSideMouseArea
-        anchors.left: parent.left
+
-        implicitHeight: Appearance.sizes.baseBarHeight
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: middleSection.left
+        }
         implicitWidth: leftSectionRowLayout.implicitWidth
-        height: Appearance.sizes.barHeight
+        implicitHeight: Appearance.sizes.baseBarHeight
-        width: (root.width - middleSection.width) / 2
+
-        property bool hovered: false
+        onScrollDown: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness - 0.05)
-        property real lastScrollX: 0
+        onScrollUp: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness + 0.05)
-        property real lastScrollY: 0
+        onMovedAway: GlobalStates.osdBrightnessOpen = false
-        property bool trackingScroll: false
-        acceptedButtons: Qt.LeftButton
-        hoverEnabled: true
-        propagateComposedEvents: true
-        onEntered: event => {
-            barLeftSideMouseArea.hovered = true;
-        }
-        onExited: event => {
-            barLeftSideMouseArea.hovered = false;
-            barLeftSideMouseArea.trackingScroll = false;
-        }
         onPressed: event => {
-            if (event.button === Qt.LeftButton) {
+            if (event.button === Qt.LeftButton)
                 GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
-            }
         }
 
-        // Scroll to change brightness
-        WheelHandler {
-            onWheel: event => {
-                if (event.angleDelta.y < 0)
-                    root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness - 0.05);
-                else if (event.angleDelta.y > 0)
-                    root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness + 0.05);
-                // Store the mouse position and start tracking
-                barLeftSideMouseArea.lastScrollX = event.x;
-                barLeftSideMouseArea.lastScrollY = event.y;
-                barLeftSideMouseArea.trackingScroll = true;
-            }
-            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        }
-        onPositionChanged: mouse => {
-            if (barLeftSideMouseArea.trackingScroll) {
-                const dx = mouse.x - barLeftSideMouseArea.lastScrollX;
-                const dy = mouse.y - barLeftSideMouseArea.lastScrollY;
-                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
-                    GlobalStates.osdBrightnessOpen = false;
-                    barLeftSideMouseArea.trackingScroll = false;
-                }
-            }
-        }
-        
         // Visual content
         ScrollHint {
             reveal: barLeftSideMouseArea.hovered
@@ -159,7 +127,11 @@ Item { // Bar content region
 
     RowLayout { // Middle section
         id: middleSection
-        anchors.centerIn: parent
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            horizontalCenter: parent.horizontalCenter
+        }
         spacing: 4
 
         BarGroup {
@@ -242,63 +214,35 @@ Item { // Bar content region
         }
     }
 
-    MouseArea { // Right side | scroll to change volume
+    FocusedScrollMouseArea { // Right side | scroll to change volume
         id: barRightSideMouseArea
 
-        anchors.right: parent.right
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: middleSection.right
+            right: parent.right
+        }
         implicitWidth: rightSectionRowLayout.implicitWidth
         implicitHeight: Appearance.sizes.baseBarHeight
-        height: Appearance.sizes.barHeight
-        width: (root.width - middleSection.width) / 2
 
-        property bool hovered: false
+        onScrollDown: {
-        property real lastScrollX: 0
+            const currentVolume = Audio.value;
-        property real lastScrollY: 0
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
-        property bool trackingScroll: false
+            Audio.sink.audio.volume -= step;
-
-        acceptedButtons: Qt.LeftButton
-        hoverEnabled: true
-        propagateComposedEvents: true
-        onEntered: event => {
-            barRightSideMouseArea.hovered = true;
         }
-        onExited: event => {
+        onScrollUp: {
-            barRightSideMouseArea.hovered = false;
+            const currentVolume = Audio.value;
-            barRightSideMouseArea.trackingScroll = false;
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
+            Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
         }
+        onMovedAway: GlobalStates.osdVolumeOpen = false;
         onPressed: event => {
             if (event.button === Qt.LeftButton) {
                 GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
             }
         }
 
-        // Scroll to change volume
-        WheelHandler {
-            onWheel: event => {
-                const currentVolume = Audio.value;
-                const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
-                if (event.angleDelta.y < 0)
-                    Audio.sink.audio.volume -= step;
-                else if (event.angleDelta.y > 0)
-                    Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
-                // Store the mouse position and start tracking
-                barRightSideMouseArea.lastScrollX = event.x;
-                barRightSideMouseArea.lastScrollY = event.y;
-                barRightSideMouseArea.trackingScroll = true;
-            }
-            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        }
-        onPositionChanged: mouse => {
-            if (barRightSideMouseArea.trackingScroll) {
-                const dx = mouse.x - barRightSideMouseArea.lastScrollX;
-                const dy = mouse.y - barRightSideMouseArea.lastScrollY;
-                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
-                    GlobalStates.osdVolumeOpen = false;
-                    barRightSideMouseArea.trackingScroll = false;
-                }
-            }
-        }
-
         // Visual content
         ScrollHint {
             reveal: barRightSideMouseArea.hovered

.config/quickshell/ii/modules/common/widgets/FocusedScrollMouseArea.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.UPower
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+MouseArea { // Right side | scroll to change volume
+    id: root
+
+    signal scrollUp(delta: int)
+    signal scrollDown(delta: int)
+    signal movedAway()
+
+    property bool hovered: false
+    property real lastScrollX: 0
+    property real lastScrollY: 0
+    property bool trackingScroll: false
+
+    acceptedButtons: Qt.LeftButton
+    hoverEnabled: true
+
+    onEntered: {
+        root.hovered = true;
+    }
+
+    onExited: {
+        root.hovered = false;
+        root.trackingScroll = false;
+    }
+
+    onWheel: event => {
+        if (event.angleDelta.y < 0)
+            root.scrollDown(event.angleDelta.y);
+        else if (event.angleDelta.y > 0)
+            root.scrollUp(event.angleDelta.y);
+        // Store the mouse position and start tracking
+        root.lastScrollX = event.x;
+        root.lastScrollY = event.y;
+        root.trackingScroll = true;
+    }
+
+    onPositionChanged: mouse => {
+        if (root.trackingScroll) {
+            const dx = mouse.x - root.lastScrollX;
+            const dy = mouse.y - root.lastScrollY;
+            if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
+                root.movedAway();
+                root.trackingScroll = false;
+            }
+        }
+    }
+
+    onContainsMouseChanged: {
+        if (!root.containsMouse && root.trackingScroll) {
+            root.movedAway();
+            root.trackingScroll = false;
+        }
+    }
+}

.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml

@@ -45,57 +45,22 @@ Item { // Bar content region
         border.color: Appearance.colors.colLayer0Border
     }
 
-    MouseArea { // Top section | scroll to change brightness
+    FocusedScrollMouseArea { // Top section | scroll to change brightness
         id: barTopSectionMouseArea
         anchors.top: parent.top
         implicitHeight: topSectionColumnLayout.implicitHeight
         implicitWidth: Appearance.sizes.baseVerticalBarWidth
         height: (root.height - middleSection.height) / 2
         width: Appearance.sizes.verticalBarWidth
-        property bool hovered: false
+
-        property real lastScrollX: 0
+        onScrollDown: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness - 0.05)
-        property real lastScrollY: 0
+        onScrollUp: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness + 0.05)
-        property bool trackingScroll: false
+        onMovedAway: GlobalStates.osdBrightnessOpen = false
-        acceptedButtons: Qt.LeftButton
-        hoverEnabled: true
-        propagateComposedEvents: true
-        onEntered: event => {
-            barTopSectionMouseArea.hovered = true;
-        }
-        onExited: event => {
-            barTopSectionMouseArea.hovered = false;
-            barTopSectionMouseArea.trackingScroll = false;
-        }
         onPressed: event => {
-            if (event.button === Qt.LeftButton) {
+            if (event.button === Qt.LeftButton)
                 GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
-            }
         }
-        // Scroll to change brightness
+
-        WheelHandler {
-            onWheel: event => {
-                if (event.angleDelta.y < 0)
-                    root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness - 0.05);
-                else if (event.angleDelta.y > 0)
-                    root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness + 0.05);
-                // Store the mouse position and start tracking
-                barTopSectionMouseArea.lastScrollX = event.x;
-                barTopSectionMouseArea.lastScrollY = event.y;
-                barTopSectionMouseArea.trackingScroll = true;
-            }
-            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        }
-        onPositionChanged: mouse => {
-            if (barTopSectionMouseArea.trackingScroll) {
-                const dx = mouse.x - barTopSectionMouseArea.lastScrollX;
-                const dy = mouse.y - barTopSectionMouseArea.lastScrollY;
-                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
-                    GlobalStates.osdBrightnessOpen = false;
-                    barTopSectionMouseArea.trackingScroll = false;
-                }
-            }
-        }
-        
         ColumnLayout { // Content
             id: topSectionColumnLayout
             anchors.fill: parent
@@ -223,7 +188,7 @@ Item { // Bar content region
         }
     }
 
-    MouseArea { // Bottom section | scroll to change volume
+    FocusedScrollMouseArea { // Bottom section | scroll to change volume
         id: barBottomSectionMouseArea
 
         anchors {
@@ -233,54 +198,23 @@ Item { // Bar content region
         }
         implicitWidth: Appearance.sizes.baseVerticalBarWidth
         implicitHeight: bottomSectionColumnLayout.implicitHeight
-        width: Appearance.sizes.verticalBarWidth
+        
-
+        onScrollDown: {
-        property bool hovered: false
+            const currentVolume = Audio.value;
-        property real lastScrollX: 0
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
-        property real lastScrollY: 0
+            Audio.sink.audio.volume -= step;
-        property bool trackingScroll: false
-
-        acceptedButtons: Qt.LeftButton
-        hoverEnabled: true
-        propagateComposedEvents: true
-        onEntered: event => {
-            barBottomSectionMouseArea.hovered = true;
         }
-        onExited: event => {
+        onScrollUp: {
-            barBottomSectionMouseArea.hovered = false;
+            const currentVolume = Audio.value;
-            barBottomSectionMouseArea.trackingScroll = false;
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
+            Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
         }
+        onMovedAway: GlobalStates.osdVolumeOpen = false;
         onPressed: event => {
             if (event.button === Qt.LeftButton) {
                 GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
             }
         }
-        // Scroll to change volume
-        WheelHandler {
-            onWheel: event => {
-                const currentVolume = Audio.value;
-                const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
-                if (event.angleDelta.y < 0)
-                    Audio.sink.audio.volume -= step;
-                else if (event.angleDelta.y > 0)
-                    Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
-                // Store the mouse position and start tracking
-                barBottomSectionMouseArea.lastScrollX = event.x;
-                barBottomSectionMouseArea.lastScrollY = event.y;
-                barBottomSectionMouseArea.trackingScroll = true;
-            }
-            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        }
-        onPositionChanged: mouse => {
-            if (barBottomSectionMouseArea.trackingScroll) {
-                const dx = mouse.x - barBottomSectionMouseArea.lastScrollX;
-                const dy = mouse.y - barBottomSectionMouseArea.lastScrollY;
-                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
-                    GlobalStates.osdVolumeOpen = false;
-                    barBottomSectionMouseArea.trackingScroll = false;
-                }
-            }
-        }
 
         ColumnLayout {
             id: bottomSectionColumnLayout