[AU4] Fix volume slider styling

kryksyh · Oct 12, 2024 · e5fab12 · e5fab12
1 parent afb7c6b
commit e5fab12
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/au4/src/projectscene/qml/Audacity/ProjectScene/trackspanel/audio/VolumeSlider.qml b/au4/src/projectscene/qml/Audacity/ProjectScene/trackspanel/audio/VolumeSlider.qml
@@ -10,34 +10,72 @@ StyledSlider {
 
     Layout.fillWidth: true
 
-    property double volumeLevel: 0
     property double snapPoint: 0.0
     property double snapRange: 2.0
 
     from: -60.0
     to: 12.0
 
+    QtObject {
+        id: prv
+
+        property bool dragActive: false
+        property real handleWidth: root.handle ? root.handle.width : 0
+        property real innerMargin: handleWidth / 2
+    }
+
     VolumeTooltip {
         id: tooltip
+
         parent: root.handle
         volume: root.value
     }
 
+    // We have to reimplement dragging to allow the tooltip
+    // to stay on when the mouse is moved outside of the component
     MouseArea {
-        acceptedButtons: Qt.NoButton
+        id: mouseArea
+
         anchors.fill: parent
+
         hoverEnabled: true
+
+        onPressed: {
+            prv.dragActive = true
+            let relativePos = (mouseX - prv.innerMargin) / (width - prv.handleWidth);
+            relativePos = Math.max(0, Math.min(1, relativePos));
+            root.value = relativePos * (root.to - root.from) + root.from;
+        }
+
+        onReleased: {
+            prv.dragActive = false
+            if (!containsMouse) {
+                tooltip.hide()
+            }
+        }
+
         onEntered: {
             tooltip.show()
         }
+
         onExited: {
-            tooltip.hide()
+            if (!prv.dragActive) {
+                tooltip.hide()
+            }
         }
-    }
 
-    onMoved: {
-        if (Math.abs(value - snapPoint) < snapRange) {
-            value = snapPoint
+        onPositionChanged: {
+            if (prv.dragActive) {
+                let relativePos = (mouseX - prv.innerMargin) / (width - prv.handleWidth)
+                relativePos = Math.max(0, Math.min(1, relativePos))
+                let value = relativePos * (root.to - root.from) + root.from
+
+                if (Math.abs(value - snapPoint) < snapRange) {
+                    value = snapPoint
+                }
+
+                root.value = value
+            }
         }
     }
 }
diff --git a/au4/src/projectscene/qml/Audacity/ProjectScene/trackspanel/audio/VolumeTooltip.qml b/au4/src/projectscene/qml/Audacity/ProjectScene/trackspanel/audio/VolumeTooltip.qml
@@ -23,6 +23,8 @@ StyledPopupView {
         anchors.fill: parent
 
         StyledTextLabel {
+            id: label
+
             anchors.right: parent.right
             text: {
                 let value = root.volume.toFixed(1);
@@ -34,7 +36,7 @@ StyledPopupView {
     FontMetrics {
         id: fontMetrics
 
-        font: ui.theme.defaultFont
+        font: label.font
     }
 
     Timer {