Merge pull request mixxxdj#14887 from acolombier/feat/qml-settings-interface

feat(QML): add interface settings

Author: ronso0

res/qml/Deck/TrackTime.qml

@@ -0,0 +1,91 @@
+import ".." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick 2.12
+
+Skin.EmbeddedText {
+    id: root
+
+    enum Display {
+        Elapsed,
+        Remaining,
+        Both
+    }
+    enum Mode {
+        Traditional,
+        TraditionalCoarse,
+        Seconds,
+        SecondsLong,
+        KiloSeconds,
+        HectoSeconds
+    }
+
+    property var display: TrackTime.Mode.Display
+    property double elapsed: durationControl.value
+    property string group: "[Channel1]"
+    property var mode: TrackTime.Mode.Traditional
+    property double remaining: durationControl.value * (1 - playPositionControl.value)
+
+    function toTime(value) {
+        let result = "";
+        switch (root.mode) {
+        case TrackTime.Mode.Seconds:
+        case TrackTime.Mode.SecondsLong:
+            {
+                let seconds = parseInt(value).toString();
+                let subs = value % 1;
+                return `${seconds.padStart(root.mode === TrackTime.Mode.SecondsLong ? 3 : 0, '0')}.${subs.toFixed(2).slice(-2)}`;
+            }
+        case TrackTime.Mode.KiloSeconds:
+            {
+                let kilos = parseInt(value / 1000);
+                let seconds = parseInt(value % 1000).toString();
+                let subs = value % 1;
+                return `${kilos}.${seconds.padStart(3, '0')} ${subs.toFixed(2).slice(-2)}`;
+            }
+        case TrackTime.Mode.HectoSeconds:
+            return `???`;
+        default:
+            console.warn(`Unsupported track time mode: ${root.mode}. Defaulting to traditional`);
+        case TrackTime.Mode.Traditional:
+        case TrackTime.Mode.TraditionalCoarse:
+            {
+                let component = [];
+                if (remaining + elapsed > 3600) {
+                    component.push(parseInt(value / 3600).toString().padStart(2, '0'));
+                }
+                component.push(parseInt(value / 60).toString().padStart(2, '0'));
+                component.push(parseInt(value % 60).toString().padStart(2, '0'));
+                if (root.mode !== TrackTime.Mode.TraditionalCoarse) {
+                    component[component.length - 1] += `.${(value % 1).toFixed(2).slice(-2)}`;
+                }
+                return component.join(':');
+            }
+        }
+    }
+
+    text: {
+        switch (root.display) {
+        case TrackTime.Display.Remaining:
+            return `-${toTime(root.remaining)}`;
+        case TrackTime.Display.Both:
+            return `${toTime(root.elapsed)}  -${toTime(root.remaining)}`;
+        default:
+            console.warn(`Unsupported track time display: ${root.display}. Defaulting to elapsed`);
+        case TrackTime.Display.Elapsed:
+            return toTime(root.elapsed);
+        }
+    }
+
+    Mixxx.ControlProxy {
+        id: durationControl
+
+        group: root.group
+        key: "duration"
+    }
+    Mixxx.ControlProxy {
+        id: playPositionControl
+
+        group: root.group
+        key: "playposition"
+    }
+}

res/qml/HotcuePopup.qml

@@ -9,12 +9,44 @@ Popup {
 
     required property Hotcue hotcue
 
-    dim: false
-    modal: true
-    focus: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    contentWidth: colorGrid.implicitWidth
     contentHeight: colorGrid.implicitHeight + clearButton.implicitHeight
+    contentWidth: colorGrid.implicitWidth
+    dim: false
+    focus: true
+    modal: true
+
+    background: BorderImage {
+        id: backgroundImage
+
+        anchors.fill: parent
+        horizontalTileMode: BorderImage.Stretch
+        source: Theme.imgPopupBackground
+        verticalTileMode: BorderImage.Stretch
+
+        border {
+            bottom: 10
+            left: 20
+            right: 20
+            top: 10
+        }
+    }
+    enter: Transition {
+        NumberAnimation {
+            duration: 100
+            from: 0
+            properties: "opacity"
+            to: 1
+        }
+    }
+    exit: Transition {
+        NumberAnimation {
+            duration: 100
+            from: 1
+            properties: "opacity"
+            to: 0
+        }
+    }
 
     Grid {
         id: colorGrid
@@ -23,17 +55,18 @@ Popup {
         spacing: 2
 
         Repeater {
-            model: Mixxx.Config.getHotcueColorPalette()
+            model: Mixxx.Config.hotcueColorPalette
 
             Rectangle {
                 required property color modelData
 
+                color: modelData
                 height: 24
                 width: 24
-                color: modelData
 
                 MouseArea {
                     anchors.fill: parent
+
                     onClicked: {
                         root.hotcue.setColor(parent.color);
                         root.close();
@@ -42,50 +75,16 @@ Popup {
             }
         }
     }
-
     Skin.Button {
         id: clearButton
 
-        anchors.top: colorGrid.bottom
+        activeColor: Theme.deckActiveColor
         anchors.left: parent.left
+        anchors.top: colorGrid.bottom
         anchors.topMargin: 5
         text: "Clear"
-        activeColor: Theme.deckActiveColor
+
         onPressed: root.hotcue.clear = 1
         onReleased: root.hotcue.clear = 0
     }
-
-    enter: Transition {
-        NumberAnimation {
-            properties: "opacity"
-            from: 0
-            to: 1
-            duration: 100
-        }
-    }
-
-    exit: Transition {
-        NumberAnimation {
-            properties: "opacity"
-            from: 1
-            to: 0
-            duration: 100
-        }
-    }
-
-    background: BorderImage {
-        id: backgroundImage
-
-        anchors.fill: parent
-        horizontalTileMode: BorderImage.Stretch
-        verticalTileMode: BorderImage.Stretch
-        source: Theme.imgPopupBackground
-
-        border {
-            top: 10
-            left: 20
-            right: 20
-            bottom: 10
-        }
-    }
 }

res/qml/Mixxx/Controls/Knob.qml

@@ -12,33 +12,33 @@ Item {
         Maximum
     }
 
-    property real value: min
-    property alias background: background.data
-    property alias foreground: foreground.data
-    property real min: 0
-    property real max: 1
-    property real wheelStepSize: (root.max - root.min) / 100
     property real angle: 130
     property bool arc: false
-    property int arcStart: Knob.Center
+    property alias arcColor: arcPath.strokeColor
+    property real arcOffsetX: 0
+    property real arcOffsetY: 0
     property real arcRadius: width / 2
+    property int arcStart: Knob.Center
     readonly property real arcStartValue: {
         switch (arcStart) {
-            case Knob.ArcStart.Minimum:
-                return min;
-            case Knob.ArcStart.Maximum:
-                return max;
-            default:
-                return valueCenter;
+        case Knob.ArcStart.Minimum:
+            return min;
+        case Knob.ArcStart.Maximum:
+            return max;
+        default:
+            return valueCenter;
         }
     }
-    property real arcOffsetX: 0
-    property real arcOffsetY: 0
-    property alias arcColor: arcPath.strokeColor
-    property alias arcWidth: arcPath.strokeWidth
     property alias arcStyle: arcPath.strokeStyle
     property alias arcStylePattern: arcPath.dashPattern
+    property alias arcWidth: arcPath.strokeWidth
+    property alias background: background.data
+    property alias foreground: foreground.data
+    property real max: 1
+    property real min: 0
+    property real value: min
     readonly property real valueCenter: (max - min) / 2
+    property real wheelStepSize: (root.max - root.min) / 100
 
     signal turned(real value)
 
@@ -51,51 +51,49 @@ Item {
 
         anchors.fill: parent
     }
-
     Item {
         id: foreground
 
         anchors.fill: parent
         rotation: root.angleFrom(root.value - root.valueCenter)
     }
-
     Shape {
-        anchors.fill: parent
-        antialiasing: true
-        visible: root.arc
         // Enable smooth curves. For QtQuick Shapes, this currently only works
         // by enabling multisampling, so we use 4xMSAA here.
-        //
         // See https://www.qt.io/blog/2017/07/07/let-there-be-shapes for details.
-        property int multiSamplingLevel: Mixxx.Config.getMultiSamplingLevel()
+        property int multiSamplingLevel: Mixxx.Config.multiSamplingLevel
+
+        anchors.fill: parent
+        antialiasing: true
         layer.enabled: multiSamplingLevel > 1
         layer.samples: multiSamplingLevel
+        visible: root.arc
 
         ShapePath {
             id: arcPath
 
+            fillColor: "transparent"
             strokeColor: "transparent"
             strokeWidth: 2
-            fillColor: "transparent"
 
             PathAngleArc {
-                startAngle: root.angleFrom(root.arcStartValue - root.valueCenter) - 90
-                sweepAngle: root.angleFrom(root.value - root.arcStartValue)
-                radiusX: root.arcRadius
-                radiusY: root.arcRadius
                 centerX: root.width / 2 + root.arcOffsetX
                 centerY: root.width / 2 + root.arcOffsetY
+                radiusX: root.arcRadius
+                radiusY: root.arcRadius
+                startAngle: root.angleFrom(root.arcStartValue - root.valueCenter) - 90
+                sweepAngle: root.angleFrom(root.value - root.arcStartValue)
             }
         }
     }
-
     DragHandler {
         id: dragHandler
 
-        property real value
         property vector2d lastTranslation: Qt.vector2d(0, 0)
+        property real value
 
         target: null
+
         onActiveChanged: {
             dragHandler.value = root.value;
             lastTranslation = Qt.vector2d(0, 0);
@@ -120,12 +118,11 @@ Item {
             dragHandler.value = value;
         }
     }
-
     Binding {
-        when: dragHandler.active
-        target: root
         property: "value"
+        target: root
         value: dragHandler.value
+        when: dragHandler.active
     }
 
     // TODO: Replace this with a WheelHandler once we switch to Qt >= 5.14.
@@ -134,19 +131,19 @@ Item {
 
         property real value
 
-        anchors.fill: parent
         acceptedButtons: Qt.NoButton
+        anchors.fill: parent
+
         onWheel: {
             const value = (wheel.angleDelta.y < 0) ? Math.min(root.max, root.value + root.wheelStepSize) : Math.max(root.min, root.value - root.wheelStepSize);
             root.turned(value);
             dragHandler.value = value;
         }
     }
-
     Binding {
-        when: wheelHandler.drag.active
-        target: root
         property: "value"
+        target: root
         value: wheelHandler.value
+        when: wheelHandler.drag.active
     }
 }