feat(QML): enhance the setting components

Author: acolombier

res/qml/Settings.qml

@@ -268,7 +268,6 @@ Popup {
                     }
 
                     Component.onCompleted: {
-                        print("onCompleted", data)
                         let index = 0;
                         let activateBuilder = (index) => function() {
                             categoryList.currentIndex = index;
@@ -282,7 +281,6 @@ Popup {
                             child.visible = Qt.binding(visibleBuilder(index));
                             child.activated.connect(activateBuilder(index))
                             child.anchors.fill = this
-                            print("child", child.label, index, categoryList.currentIndex, child.anchors.fill)
                             index++;
                         }
                         // This is needed to ensure the right category is displayed.
@@ -295,10 +293,6 @@ Popup {
         }
     }
 
-    Component.onCompleted: {
-        print("Settings", categoryList.currentIndex)
-    }
-
     ListModel {
         id: sectionProperties
     }

res/qml/Settings/AudioRouter.qml

@@ -439,7 +439,7 @@ Rectangle {
                               "legacy"
                     ]
                     onOptionsChanged: {
-                        if (modeChoice.selected.startsWith("advanced")) {
+                        if (modeChoice.selected?.startsWith("advanced")) {
                             modeChoice.selected = options[1]
                         }
                     }

res/qml/Settings/RatioChoice.qml

@@ -10,10 +10,13 @@ Item {
     id: root
     required property list<string> options
     property list<var> tooltips: []
-    property string selected: options.length ? options[0] : null
+    property var selected: options.length ? options[0] : null
     property real spacing: 9
     property real maxWidth: 0
     property bool normalizedWidth: true
+    property color inactiveColor: Theme.darkGray2
+    property alias metric: fontMetrics
+    property alias content: contentList
 
     onTooltipsChanged: {
         popup.close()
@@ -27,6 +30,7 @@ Item {
 
     implicitHeight: (contentList.visible ? contentList.height : contentSpin.height) + dropRatio.radius * 2
     implicitWidth: (contentList.visible ? contentList.width : contentSpin.width) + dropRatio.radius * 2
+
     readonly property real cellSize: {
         Math.max.apply(null, options.map((option) => fontMetrics.advanceWidth(option))) + root.spacing*2
     }
@@ -43,16 +47,16 @@ Item {
                 options.reduce((acc, option) => acc + fontMetrics.advanceWidth(option) + root.spacing*2, 0) + root.spacing
             }
         }
-        color: '#2B2B2B'
+        color: root.inactiveColor
         radius: height / 2
         RowLayout {
-            anchors.fill: parent
+            anchors.centerIn: parent
             Repeater {
                 model: options
                 Item {
                     required property int index
                     required property var modelData
-                    width: root.normalizedWidth ? root.cellSize : fontMetrics.advanceWidth(modelData) + root.spacing*2
+                    implicitWidth: root.normalizedWidth ? root.cellSize : fontMetrics.advanceWidth(modelData) + root.spacing*2
                     height: contentList.height
                     Rectangle {
                         anchors.fill: parent
@@ -173,7 +177,7 @@ Item {
             implicitWidth: 24
             implicitHeight: 24
             radius: parent.height / 2
-            color: '#2B2B2B'
+            color: root.inactiveColor
             border.width: 0
 
             Text {
@@ -200,7 +204,7 @@ Item {
         background: Rectangle {
             implicitWidth: contentSpin.textWidth + 2 * contentSpin.spacing + 48
             radius: parent.height / 2
-            color: '#2B2B2B'
+            color: root.inactiveColor
         }
 
         textFromValue: function(value) {
@@ -216,6 +220,7 @@ Item {
         }
 
         onValueChanged: {
+            if (!contentSpin.visible) return;
             root.selected = contentSpin.textFromValue(value) ?? ""
             popup.tooltip = root.tooltips[contentSpin.value] ?? ""
             popup.x = contentSpin.width / 2 - popup.width / 2

res/qml/main.qml

@@ -9,6 +9,9 @@ import "Theme"
 ApplicationWindow {
     id: root
 
+    readonly property int numDecks: 4
+    readonly property int numSamplers: 16
+
     property alias maximizeLibrary: maximizeLibraryButton.checked
     property alias show4decks: show4DecksButton.checked
     property alias showEffects: showEffectsButton.checked
@@ -19,6 +22,22 @@ ApplicationWindow {
     visible: true
     width: 1920
 
+    Mixxx.ControlProxy {
+        group: "[App]"
+        key: "num_decks"
+        onInitializedChanged: {
+            value = root.numDecks
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[App]"
+        key: "num_samplers"
+        onInitializedChanged: {
+            value = root.numSamplers
+        }
+    }
+
     Column {
         id: content
         anchors.fill: parent