sliders: rewrote the display using Shape to avoid visible stacked hacks when cross-fading colors

Widgets/NColorSlider.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
+import QtQuick.Shapes
 import qs.Commons
 import qs.Services.UI
 
@@ -20,9 +20,9 @@ Slider {
 
   readonly property real knobDiameter: Math.round((Style.baseWidgetSize * widthRatio * Style.uiScaleRatio) / 2) * 2
   readonly property real trackWidth: Math.round((knobDiameter * 0.4 * Style.uiScaleRatio) / 2) * 2
+  readonly property real trackRadius: Math.min(Style.iRadiusL, trackWidth / 2)
   readonly property real cutoutExtra: Math.round((Style.baseWidgetSize * 0.1 * Style.uiScaleRatio) / 2) * 2
 
-  //horizontal: false
   orientation: Qt.Vertical
 
   padding: cutoutExtra / 2
@@ -30,25 +30,19 @@ Slider {
   snapMode: snapAlways ? Slider.SnapAlways : Slider.SnapOnRelease
   implicitWidth: Math.max(trackWidth, knobDiameter)
 
-  background: Rectangle {
+  background: Item {
+    id: bgContainer
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
-
-    x: root.leftPadding + root.availableWidth / 2 - width / 2
-
-    height: root.availableHeight - root.knobDiameter
     width: root.trackWidth
+    height: root.availableHeight
 
-    radius: Math.min(Style.iRadiusL, width / 2)
-    color: Qt.alpha(Color.mSurface, 0.5)
-    border.color: Qt.alpha(Color.mOutline, 0.5)
-    border.width: Style.borderS
-
-    // Gradients
-    gradient: root.rainbowMode ? rainbowGradient : standardGradient
-    Gradient {
-      id: standardGradient
-      orientation: Gradient.Vertical
+    LinearGradient {
+      id: standardLinearGradient
+      x1: 0
+      y1: 0
+      x2: 0
+      y2: root.availableHeight
       GradientStop {
         position: 0.0
         color: root.topColor
@@ -58,9 +52,13 @@ Slider {
         color: root.bottomColor
       }
     }
-    Gradient {
-      id: rainbowGradient
-      orientation: Gradient.Vertical
+
+    LinearGradient {
+      id: rainbowLinearGradient
+      x1: 0
+      y1: 0
+      x2: 0
+      y2: root.availableHeight
       GradientStop {
         position: 0.000
         color: "#FF0000"
@@ -91,6 +89,69 @@ Slider {
       }
     }
 
+    Shape {
+      anchors.centerIn: parent
+      width: root.trackWidth
+      height: bgContainer.height
+      layer.enabled: true
+      layer.samples: 4
+
+      ShapePath {
+        id: trackPath
+        strokeColor: Qt.alpha(Color.mOutline, 0.5)
+        strokeWidth: Style.borderS
+        fillGradient: root.rainbowMode ? rainbowLinearGradient : standardLinearGradient
+
+        readonly property real w: root.trackWidth
+        readonly property real h: root.availableHeight
+        readonly property real r: root.trackRadius
+
+        startX: r
+        startY: 0
+
+        PathLine {
+          x: trackPath.w - trackPath.r
+          y: 0
+        }
+        PathArc {
+          x: trackPath.w
+          y: trackPath.r
+          radiusX: trackPath.r
+          radiusY: trackPath.r
+        }
+        PathLine {
+          x: trackPath.w
+          y: trackPath.h - trackPath.r
+        }
+        PathArc {
+          x: trackPath.w - trackPath.r
+          y: trackPath.h
+          radiusX: trackPath.r
+          radiusY: trackPath.r
+        }
+        PathLine {
+          x: trackPath.r
+          y: trackPath.h
+        }
+        PathArc {
+          x: 0
+          y: trackPath.h - trackPath.r
+          radiusX: trackPath.r
+          radiusY: trackPath.r
+        }
+        PathLine {
+          x: 0
+          y: trackPath.r
+        }
+        PathArc {
+          x: trackPath.r
+          y: 0
+          radiusX: trackPath.r
+          radiusY: trackPath.r
+        }
+      }
+    }
+
     // Circular cutout
     Rectangle {
       id: knobCutout
@@ -98,8 +159,7 @@ Slider {
       implicitHeight: root.knobDiameter + root.cutoutExtra
       radius: Math.min(Style.iRadiusL, width / 2)
       color: root.cutoutColor !== undefined ? root.cutoutColor : Color.mSurface
-
-      y: root.visualPosition * (root.availableHeight - root.knobDiameter) - ((root.knobDiameter + root.cutoutExtra) / 2)
+      y: root.visualPosition * (root.availableHeight - root.knobDiameter) - root.cutoutExtra / 2
       anchors.horizontalCenter: parent.horizontalCenter
     }
   }