slider: more accurate sizes

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

@@ -6,26 +6,53 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell.Widgets
 
-// Material 3 slider. See https://m3.material.io/components/sliders/overview
+/**
+ * Material 3 slider. See https://m3.material.io/components/sliders/overview
+ * It doesn't exactly match the spec because it does not make sense to have stuff on a computer that fucking huge.
+ * Should be at 3/4 scale...
+ */
+ 
 Slider {
     id: root
-    property real scale: 0.85
+
-    property real backgroundDotSize: 4 * scale
+    property list<real> stopIndicatorValues: [1]
-    property real backgroundDotMargins: 4 * scale
+    enum Configuration {
-    // property real handleMargins: 0 * scale
+        XS = 12,
-    property real handleMargins: (root.pressed ? 0 : 2) * scale
+        S = 18,
-    property real handleWidth: (root.pressed ? 3 : 5) * scale
+        M = 30,
-    property real handleHeight: 44 * scale
+        L = 42,
-    property real handleLimit: root.backgroundDotMargins
+        XL = 72
-    property real trackHeight: 30 * scale
+    }
+
+    property var configuration: StyledSlider.Configuration.S
+
+    property real handleDefaultWidth: 3
+    property real handlePressedWidth: 1.5
+
     property color highlightColor: Appearance.colors.colPrimary
     property color trackColor: Appearance.colors.colSecondaryContainer
     property color handleColor: Appearance.m3colors.m3onSecondaryContainer
-    property real trackRadius: Appearance.rounding.verysmall * scale
+    property color dotColor: Appearance.m3colors.m3onSecondaryContainer
+    property color dotColorHighlighted: Appearance.m3colors.m3onPrimary
     property real unsharpenRadius: Appearance.rounding.unsharpen
-
+    property real trackWidth: configuration
-    property real limitedHandleRangeWidth: (root.availableWidth - handleWidth - root.handleLimit * 2)
+    property real trackRadius: trackWidth >= StyledSlider.Configuration.XL ? 21
+        : trackWidth >= StyledSlider.Configuration.L ? 12
+        : trackWidth >= StyledSlider.Configuration.M ? 9
+        : 6
+    property real handleHeight: Math.max(33, trackWidth + 9)
+    property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
+    property real handleMargins: 4
+    onHandleMarginsChanged: {
+        console.log("Handle margins changed to", handleMargins);
+    }
+    property real trackDotSize: 3
     property string tooltipContent: `${Math.round(value * 100)}%`
+
+    leftPadding: handleMargins
+    rightPadding: handleMargins
+    property real effectiveDraggingWidth: width - leftPadding - rightPadding
+
     Layout.fillWidth: true
     from: 0
     to: 1
@@ -37,10 +64,20 @@ Slider {
     }
 
     Behavior on handleMargins {
-        NumberAnimation {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            duration: Appearance.animation.elementMoveFast.duration
+    }
-            easing.type: Appearance.animation.elementMoveFast.type
+
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+    component TrackDot: Rectangle {
+        required property real value
+        anchors.verticalCenter: parent.verticalCenter
+        x: root.handleMargins + (value * root.effectiveDraggingWidth) - (root.trackDotSize / 2)
+        width: root.trackDotSize
+        height: root.trackDotSize
+        radius: Appearance.rounding.full
+        color: value > root.visualPosition ? root.dotColor : root.dotColorHighlighted
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
         }
     }
 
@@ -52,14 +89,17 @@ Slider {
 
     background: Item {
         anchors.verticalCenter: parent.verticalCenter
-        implicitHeight: trackHeight
+        width: parent.width
+        implicitHeight: trackWidth
         
         // Fill left
         Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
+            anchors {
-            anchors.left: parent.left
+                verticalCenter: parent.verticalCenter
-            width: root.handleLimit * 2 + root.visualPosition * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
+                left: parent.left
-            height: trackHeight
+            }
+            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+            height: trackWidth
             color: root.highlightColor
             topLeftRadius: root.trackRadius
             bottomLeftRadius: root.trackRadius
@@ -69,35 +109,37 @@ Slider {
 
         // Fill right
         Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
+            anchors {
-            anchors.right: parent.right
+                verticalCenter: parent.verticalCenter
-            width: root.handleLimit * 2 + (1 - root.visualPosition) * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
+                right: parent.right
-            height: trackHeight
+            }
+            width: root.handleMargins + ((1 - root.visualPosition) * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+            height: trackWidth
             color: root.trackColor
-            topLeftRadius: root.unsharpenRadius
-            bottomLeftRadius: root.unsharpenRadius
             topRightRadius: root.trackRadius
             bottomRightRadius: root.trackRadius
+            topLeftRadius: root.unsharpenRadius
+            bottomLeftRadius: root.unsharpenRadius
         }
 
-        // Dot at the end
+        // Stop indicators
-        Rectangle {
+        Repeater {
-            anchors.verticalCenter: parent.verticalCenter
+            model: root.stopIndicatorValues
-            anchors.right: parent.right
+            TrackDot {
-            anchors.rightMargin: root.backgroundDotMargins
+                required property real modelData
-            width: root.backgroundDotSize
+                value: modelData
-            height: root.backgroundDotSize
+                anchors.verticalCenter: parent.verticalCenter
-            radius: Appearance.rounding.full
+            }
-            color: root.handleColor
         }
     }
 
     handle: Rectangle {
         id: handle
-        x: root.leftPadding + root.handleLimit + root.visualPosition * root.limitedHandleRangeWidth
+
-        y: root.topPadding + root.availableHeight / 2 - height / 2
         implicitWidth: root.handleWidth
         implicitHeight: root.handleHeight
+        x: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2)
+        anchors.verticalCenter: parent.verticalCenter
         radius: Appearance.rounding.full
         color: root.handleColor