feat: improve slider

components/controls/StyledSlider.qml

@@ -1,5 +1,7 @@
 import QtQuick
 import QtQuick.Templates
+import Caelestia
+import Caelestia.Components
 import Caelestia.Config
 import qs.components
 import qs.services
@@ -7,51 +9,152 @@ import qs.services
 Slider {
     id: root
 
-    background: Item {
+    property bool wavy: true
-        StyledRect {
+    property bool animateWave
-            anchors.top: parent.top
+    property alias waveFrequency: wave.frequency
-            anchors.bottom: parent.bottom
+    property alias waveDuration: waveAnim.duration
-            anchors.left: parent.left
-            anchors.topMargin: root.implicitHeight / 3
-            anchors.bottomMargin: root.implicitHeight / 3
 
-            implicitWidth: root.handle.x - root.implicitHeight / 6
+    property color fgColour: enabled ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3onSurface, 0.38)
+    property color bgColour: enabled ? Colours.palette.m3secondaryContainer : Qt.alpha(Colours.palette.m3onSurface, 0.1)
 
-            color: Colours.palette.m3primary
+    property real pos: visualPosition
-            radius: Tokens.rounding.full
+
-            topRightRadius: root.implicitHeight / 15
+    signal interaction(v: real)
-            bottomRightRadius: root.implicitHeight / 15
+
-        }
+    implicitWidth: 200
+    implicitHeight: 8
+
+    contentItem: Item {
+        anchors.fill: parent
 
         StyledRect {
-            anchors.top: parent.top
+            id: remaining
-            anchors.bottom: parent.bottom
+
+            anchors.left: handle.right
             anchors.right: parent.right
-            anchors.topMargin: root.implicitHeight / 3
+            anchors.verticalCenter: parent.verticalCenter
-            anchors.bottomMargin: root.implicitHeight / 3
+            anchors.leftMargin: Tokens.spacing.extraSmall
 
-            implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
+            implicitHeight: Math.min(width, parent.height)
+            opacity: implicitHeight / parent.height
 
-            color: Colours.palette.m3surfaceContainerHighest
             radius: Tokens.rounding.full
-            topLeftRadius: root.implicitHeight / 15
+            topLeftRadius: Tokens.rounding.extraSmall / 2
-            bottomLeftRadius: root.implicitHeight / 15
+            bottomLeftRadius: Tokens.rounding.extraSmall / 2
+            color: root.bgColour
+        }
+
+        StyledRect {
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.rightMargin: (parent.height - implicitHeight) / 2 * remaining.opacity
+
+            implicitWidth: implicitHeight
+            implicitHeight: 4 * remaining.opacity
+            opacity: remaining.opacity
+
+            radius: Tokens.rounding.full
+            color: root.fgColour
+        }
+
+        StyledRect {
+            id: handle
+
+            anchors.left: wave.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: Tokens.spacing.extraSmall
+
+            implicitWidth: parent.height * 0.75
+            implicitHeight: parent.height * (mouse.pressed ? 5 : 4)
+
+            radius: Tokens.rounding.full
+            color: root.fgColour
+
+            Behavior on implicitHeight {
+                Anim {
+                    type: Anim.FastSpatial
+                }
             }
         }
 
-    handle: StyledRect {
+        WavyLine {
-        x: root.visualPosition * root.availableWidth - implicitWidth / 2
+            id: wave
 
-        implicitWidth: root.implicitHeight / 4.5
+            anchors.left: parent.left
-        implicitHeight: root.implicitHeight
+            anchors.verticalCenter: parent.verticalCenter
+            implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
 
-        color: Colours.palette.m3primary
+            lineWidth: parent.height - 1
-        radius: Tokens.rounding.full
+            amplitudeMultiplier: root.wavy ? 0.5 : 0
+            startX: x
+            fullLength: parent.width - handle.implicitWidth - handle.anchors.leftMargin
+            color: root.fgColour
+
+            Component.onCompleted: implicitWidth = Qt.binding(() => fullLength * root.pos)
+
+            Anim on waveProgress {
+                id: waveAnim
+
+                running: true
+                paused: !root.animateWave
+                from: 0
+                to: 1
+                duration: 1000
+                easing.type: Easing.Linear
+                loops: Animation.Infinite
+            }
+
+            Behavior on amplitudeMultiplier {
+                Anim {
+                    type: Anim.DefaultEffects
+                }
+            }
+
+            Behavior on color {
+                CAnim {}
+            }
+
+            Behavior on implicitWidth {
+                id: widthBehavior
+
+                Anim {}
+            }
+        }
+    }
+
+    Binding {
+        id: posBinding
+
+        target: root
+        property: "pos"
+        value: CUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
+        when: mouse.pressed
+    }
 
     MouseArea {
-            anchors.fill: parent
+        id: mouse
-            acceptedButtons: Qt.NoButton
+
-            cursorShape: Qt.PointingHandCursor
+        property real pressStartX
+        property real pressStartPos
+        property real dragMovement
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        preventStealing: true
+        implicitHeight: handle.implicitHeight
+
+        onPressed: e => {
+            widthBehavior.enabled = false;
+            pressStartX = e.x;
+            pressStartPos = root.visualPosition;
+        }
+        onPositionChanged: e => dragMovement = (e.x - pressStartX) / width
+        onReleased: e => {
+            root.interaction(posBinding.value);
+            widthBehavior.enabled = true;
+            dragMovement = 0;
         }
     }
 }