macOS: draw the handle as a part of the background

In dark mode, the slider handle is semi-transparent.
If we draw the handle and the groove separately like we do
today, the handle will end up _on top of_ the groove
rather than as a part of it. The result is that you will
see the groove behind the handle, which is wrong.

Since we already draw the groove with tick marks
without using a nine-patch image, we might as well draw
the handle at the same time. This will give us the
correct appearance.

Change-Id: Ie582f99450c824d6955e3c0783dad89ab41160ef
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

1 files changed, 25 insertions, 0 deletions

diff --git a/src/imports/controls/macos/Slider.qml b/src/imports/controls/macos/Slider.qml
index e8e0e036..77543577 100644
--- a/src/imports/controls/macos/Slider.qml
+++ b/src/imports/controls/macos/Slider.qml
@@ -38,6 +38,31 @@ import QtQuick
 import QtQuick.NativeStyle as NativeStyle
 
 NativeStyle.DefaultSlider {
+    id: control
     readonly property Item __focusFrameTarget: handle
     readonly property Item __focusFrameStyleItem: handle
+
+    background: NativeStyle.Slider {
+        control: control
+        subControl: NativeStyle.Slider.Groove | NativeStyle.Slider.Handle
+        // We normally cannot use a nine patch image for the
+        // groove if we draw tickmarks (since then the scaling
+        // would scale the tickmarks too). The groove might
+        // also use a different background color before, and
+        // after, the handle.
+        useNinePatchImage: false
+    }
+
+    handle: NativeStyle.Slider {
+        // The handle is hidden, since it will be drawn as a part
+        // of the background. But will still needs it to be here so
+        // that we can place the focus rect correctly.
+        visible: false
+
+        control: control
+        subControl: NativeStyle.Slider.Handle
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        useNinePatchImage: false
+    }
 }