internal: position slider handle correctly

Also better labels for audio popout

1 files changed, 17 insertions, 19 deletions

diff --git a/components/controls/StyledSlider.qml b/components/controls/StyledSlider.qml
index 0352cef..25b5bdd 100644
--- a/components/controls/StyledSlider.qml
+++ b/components/controls/StyledSlider.qml
@@ -1,59 +1,57 @@
 import qs.components
-import qs.config
 import qs.services
-import QtQuick.Controls
+import qs.config
 import QtQuick
+import QtQuick.Controls
 
 Slider {
-    id: slider
+    id: root
 
     background: Item {
         StyledRect {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            anchors.topMargin: slider.implicitHeight / 3
-            anchors.bottomMargin: slider.implicitHeight / 3
+            anchors.topMargin: root.implicitHeight / 3
+            anchors.bottomMargin: root.implicitHeight / 3
 
-            implicitWidth: slider.handle.x - slider.implicitHeight / 6
+            implicitWidth: root.handle.x - root.implicitHeight / 6
 
             color: Colours.palette.m3primary
             radius: Appearance.rounding.full
-            topRightRadius: slider.implicitHeight / 15
-            bottomRightRadius: slider.implicitHeight / 15
+            topRightRadius: root.implicitHeight / 15
+            bottomRightRadius: root.implicitHeight / 15
         }
 
         StyledRect {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.right: parent.right
-            anchors.topMargin: slider.implicitHeight / 3
-            anchors.bottomMargin: slider.implicitHeight / 3
+            anchors.topMargin: root.implicitHeight / 3
+            anchors.bottomMargin: root.implicitHeight / 3
 
-            implicitWidth: parent.width - slider.handle.x - slider.handle.implicitWidth - slider.implicitHeight / 6
+            implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
 
             color: Colours.palette.m3surfaceContainer
             radius: Appearance.rounding.full
-            topLeftRadius: slider.implicitHeight / 15
-            bottomLeftRadius: slider.implicitHeight / 15
+            topLeftRadius: root.implicitHeight / 15
+            bottomLeftRadius: root.implicitHeight / 15
         }
     }
 
     handle: StyledRect {
-        id: rect
-
-        x: slider.visualPosition * slider.availableWidth
+        x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-        implicitWidth: slider.implicitHeight / 4.5
-        implicitHeight: slider.implicitHeight
+        implicitWidth: root.implicitHeight / 4.5
+        implicitHeight: root.implicitHeight
 
         color: Colours.palette.m3primary
         radius: Appearance.rounding.full
 
         MouseArea {
             anchors.fill: parent
+            acceptedButtons: Qt.NoButton
             cursorShape: Qt.PointingHandCursor
-            onPressed: event => event.accepted = false
         }
     }
 }