QML: Add support for selecting/loading effects

res/skins/QMLDemo/EffectSlot.qml

@@ -6,7 +6,7 @@ import "Theme"
 Item {
     id: root
 
-    property var slot: Mixxx.EffectsManager.getEffectSlot(1, unitNumber, effectNumber)
+    property Mixxx.EffectSlotProxy slot: Mixxx.EffectsManager.getEffectSlot(1, unitNumber, effectNumber)
     property int unitNumber // required
     property int effectNumber // required
     property bool expanded: false
@@ -46,7 +46,6 @@ Item {
             anchors.left: effectEnableButton.right
             anchors.right: effectMetaKnob.left
             anchors.margins: 5
-            // TODO: Add a way to retrieve effect names here
             textRole: "display"
             model: Mixxx.EffectsManager.visibleEffectsModel
             onActivated: {
@@ -100,7 +99,7 @@ Item {
         anchors.left: selector.right
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        clip: false
+        clip: true
         spacing: 5
         model: root.slot.parametersModel
         orientation: ListView.Horizontal
@@ -109,17 +108,17 @@ Item {
             id: parameter
 
             property int number: index + 1
-            property string name: shortName
+            property string label: shortName ? shortName : name
             property bool isButton: controlHint > 0 && controlHint == 6
             property bool isKnob: controlHint > 0 && controlHint < 6
 
-            width: 40
+            width: 50
             height: 50
 
             EmbeddedText {
                 anchors.fill: parent
                 verticalAlignment: Text.AlignBottom
-                text: parameter.name
+                text: parameter.label
                 font.bold: false
             }
 
@@ -141,7 +140,7 @@ Item {
                     property bool loaded: value != 0
 
                     group: root.group
-                    key: "parameter" + parameter.number + "_loaded"
+                    key: `parameter${parameter.number}_loaded`
                 }
 
             }
@@ -163,7 +162,7 @@ Item {
                     property bool loaded: value != 0
 
                     group: root.group
-                    key: "button_parameter" + parameter.number + "_loaded"
+                    key: `button_parameter${parameter.number}_loaded`
                 }
 
             }

res/skins/QMLDemo/Knob.qml

@@ -6,6 +6,8 @@ MixxxControls.Knob {
     id: root
 
     property color color // required
+    property url shadowSource: Theme.imgKnobShadow
+    property url backgroundSource: Theme.imgKnob
 
     implicitWidth: background.width
     implicitHeight: implicitWidth
@@ -24,7 +26,7 @@ MixxxControls.Knob {
         anchors.right: parent.right
         height: width * 7 / 6
         fillMode: Image.PreserveAspectFit
-        source: Theme.imgKnobShadow
+        source: root.shadowSource
     }
 
     background: Image {
@@ -34,21 +36,19 @@ MixxxControls.Knob {
         anchors.left: parent.left
         anchors.right: parent.right
         height: width
-        source: Theme.imgKnob
+        source: root.backgroundSource
     }
 
     foreground: Item {
-        id: inidicator
-
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         height: width
 
         Rectangle {
             anchors.horizontalCenter: parent.horizontalCenter
-            width: root.width / 30
-            height: 10
+            width: 2
+            height: root.width / 5
             y: height
             color: root.color
         }

res/skins/QMLDemo/MiniKnob.qml

@@ -1,56 +1,9 @@
-import Mixxx.Controls 0.1 as MixxxControls
-import QtQuick 2.12
+import "." as Skin
 import "Theme"
 
-MixxxControls.Knob {
+Skin.Knob {
     id: root
 
-    property color color // required
-
-    implicitWidth: background.width
-    implicitHeight: implicitWidth
-    arc: true
-    arcRadius: width * 0.45
-    arcOffsetY: width * 0.01
-    arcColor: root.color
-    arcWidth: 2
-    angle: 116
-
-    Image {
-        id: shadow
-
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: width * 7 / 6
-        fillMode: Image.PreserveAspectFit
-        source: Theme.imgKnobMiniShadow
-    }
-
-    background: Image {
-        id: background
-
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: width
-        source: Theme.imgKnobMini
-    }
-
-    foreground: Item {
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: width
-
-        Rectangle {
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: root.width / 30
-            height: 10
-            y: height
-            color: root.color
-        }
-
-    }
-
+    shadowSource: Theme.imgKnobMiniShadow
+    backgroundSource: Theme.imgKnobMini
 }

src/skin/qml/qmleffectmanifestparametersmodel.cpp

@@ -40,6 +40,8 @@ QVariant QmlEffectManifestParametersModel::data(const QModelIndex& index, int ro
     case QmlEffectManifestParametersModel::DescriptionRole:
         return pParameter->description();
     case QmlEffectManifestParametersModel::ControlHintRole:
+        // TODO: Remove this cast, instead expose the enum directly using
+        // Q_ENUM after #2618 has been merged.
         return static_cast<int>(pParameter->controlHint());
     default:
         return QVariant();