QMLDemo: improve OrientationToggleButton touch friendlyness

The previous implementation was hard to use on a touchscreen
because the surface where it was touching was very small.
The new version makes use of a slider internally which allows
the control to be changed more intiutively by swiping.

res/skins/QMLDemo/OrientationToggleButton.qml

@@ -2,79 +2,61 @@ import "." as Skin
 import Mixxx 0.1 as Mixxx
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import "util.mjs" as Util
 
-AbstractButton {
+Item {
     id: root
 
     property string group // required
     property string key // required
-    property alias orientation: control.value
+    property alias orientation: orientationSlider.value
     property color color: "white"
 
     implicitWidth: 56
     implicitHeight: 26
-    onClicked: control.value = Math.trunc(3 * pressX / root.width)
-    states: [
-        State {
-            name: "left"
-            when: orientation == 0
-
-            PropertyChanges {
-                target: indicator
-                x: 0
-            }
-
-        },
-        State {
-            name: "right"
-            when: orientation == 2
-
-            PropertyChanges {
-                target: indicator
-                x: parent.width - width
-            }
 
-        },
-        State {
-            name: "mid"
-            when: orientation == 1
+    Slider {
+        id: orientationSlider
 
-            PropertyChanges {
-                target: indicator
-                x: parent.width / 2 - width / 2
-            }
-
-        }
-    ]
-
-    Mixxx.ControlProxy {
-        id: control
-
-        group: root.group
-        key: root.key
-    }
-
-    Item {
-        anchors.fill: root
+        anchors.fill: parent
         anchors.leftMargin: 10
         anchors.rightMargin: 10
         anchors.topMargin: 2
         anchors.bottomMargin: 2
+        wheelEnabled: false
+        live: false
+        from: 0
+        to: 2
+        stepSize: 1
+        value: control.value
+        orientation: Qt.Horizontal
+        snapMode: Slider.SnapOnRelease
+        onMoved: {
+            // The slider's `value` is not updated until after the move ended.
+            const val = valueAt(visualPosition);
+            if (Util.hasChanged(val)) {
+                console.warn("changed");
+                control.value = val;
+            }
+        }
+
+        background: Rectangle {
+            id: sliderBackground
 
-        Rectangle {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
             height: 2
             color: root.color
         }
 
-        Rectangle {
+        handle: Rectangle {
             id: indicator
 
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.margins: 5
+            x: orientationSlider.visualPosition * (sliderBackground.width - width)
             width: 3
             color: root.color
 
@@ -89,4 +71,11 @@ AbstractButton {
 
     }
 
+    Mixxx.ControlProxy {
+        id: control
+
+        group: root.group
+        key: root.key
+    }
+
 }

res/skins/QMLDemo/util.mjs

@@ -0,0 +1,8 @@
+let previous = undefined;
+// primitive function to check whether a value changed
+// between invocations
+export function hasChanged(value) {
+    const changed = value != previous;
+    previous = value;
+    return changed;
+}