Add quick effect support on stem

CMakeLists.txt

@@ -2776,6 +2776,7 @@ if(QML)
     src/qml/qmlplayermanagerproxy.cpp
     src/qml/qmlplayerproxy.cpp
     src/qml/qmlvisibleeffectsmodel.cpp
+    src/qml/qmlchainpresetmodel.cpp
     src/qml/qmlwaveformoverview.cpp
     # The following sources need to be in this target to get QML_ELEMENT properly interpreted
     src/control/controlmodel.cpp

res/qml/ComboBox.qml

@@ -6,6 +6,9 @@ import "Theme"
 ComboBox {
     id: root
 
+    property alias popupWidth: popup.width
+    property bool clip: false
+
     background: Skin.EmbeddedBackground {
     }
 
@@ -40,10 +43,12 @@ ComboBox {
         font: root.font
         color: Theme.deckTextColor
         verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
+        elide: root.clip ? Text.ElideNone : Text.ElideRight
+        clip: root.clip
     }
 
     popup: Popup {
+        id: popup
         y: root.height
         width: root.width
         implicitHeight: contentItem.implicitHeight

res/qml/EqColumn.qml

@@ -18,17 +18,24 @@ Column {
         key: "stem_count"
     }
 
+    function stemGroup(group, index) {
+        return `${group.substr(0, group.length-1)}Stem${index + 1}]`
+    }
+
     Row {
         Column {
             id: stem
             spacing: 4
+            width: 10
             visible: opacity != 0
             Repeater {
                 model: root.player.stemsModel
 
                 Skin.StemKnob {
+                    required property int index
+
                     id: stem
-                    group: root.group
+                    stemGroup: root.stemGroup(root.group, index)
                     property alias color: stem.stemColor
                 }
             }
@@ -59,11 +66,8 @@ Column {
                 knob.color: Theme.eqLowColor
             }
 
-            Skin.EqKnob {
-                knob.group: "[QuickEffectRack1_" + root.group + "]"
-                knob.key: "super1"
-                statusGroup: "[QuickEffectRack1_" + root.group + "_Effect1]"
-                statusKey: "enabled"
+            Skin.QuickFxKnob {
+                group: "[QuickEffectRack1_" + root.group + "]"
                 knob.arcStyle: ShapePath.DashLine
                 knob.arcStylePattern: [2, 2]
                 knob.color: Theme.eqFxColor

res/qml/Mixxx/Controls/Knob.qml

@@ -17,7 +17,7 @@ Item {
     property alias foreground: foreground.data
     property real min: 0
     property real max: 1
-    property real wheelStepSize: (root.max - root.min) / 10
+    property real wheelStepSize: (root.max - root.min) / 100
     property real angle: 130
     property bool arc: false
     property int arcStart: Knob.Center

res/qml/QuickFxKnob.qml

@@ -0,0 +1,83 @@
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick 2.12
+import "Theme"
+
+Rectangle {
+    id: root
+
+    property alias knob: knob
+    required property string group
+
+    color: Theme.knobBackgroundColor
+    width: 56
+    height: 56
+    radius: 5
+
+    Skin.ControlKnob {
+        id: knob
+
+        group: root.group
+        key: "super1"
+
+        anchors.horizontalCenter: root.horizontalCenter
+        anchors.top: root.top
+        width: 40
+        height: 40
+    }
+
+    Mixxx.ControlProxy {
+        id: statusControl
+
+        group: root.group
+        key: "enabled"
+    }
+
+    Rectangle {
+        id: statusButton
+
+        anchors.left: root.left
+        anchors.bottom: root.bottom
+        anchors.leftMargin: 4
+        anchors.bottomMargin: 4
+        width: 8
+        height: width
+        radius: width / 2
+        border.width: 1
+        border.color: Theme.buttonNormalColor
+        color: statusControl.value ? knob.color : "transparent"
+
+        TapHandler {
+            onTapped: statusControl.value = !statusControl.value
+        }
+    }
+
+    Mixxx.ControlProxy {
+        id: fxSelect
+
+        group: root.group
+        key: "loaded_chain_preset"
+    }
+
+    Skin.ComboBox {
+        id: effectSelector
+        anchors.left: statusButton.right
+        anchors.leftMargin: 2
+        anchors.right: root.right
+        anchors.top: knob.bottom
+        anchors.margins: 1
+        spacing: 2
+        indicator.width: 0
+        popupWidth: 150
+        clip: true
+
+        opacity: statusControl.value ? 1 : 0.5
+        textRole: "display"
+        font.pixelSize: 10
+        model: Mixxx.EffectsManager.quickChainPresetModel
+        currentIndex: fxSelect.value == -1 ? 0 : fxSelect.value
+        onActivated: (index) => {
+            fxSelect.value = index
+        }
+    }
+}

res/qml/StemKnob.qml

@@ -6,44 +6,32 @@ import "Theme"
 Rectangle {
     id: root
 
-    property alias knob: knob
+    property alias knob: volume
 
-    required property string group
+    required property string stemGroup
     required property string label
     required property color stemColor
-    required property int index
+
+    readonly property string fxGroup: `[QuickEffectRack1_${stemGroup}]`
 
     width: 56
     height: 56
     radius: 5
     color: stemColor
+    opacity: statusControl.value ? 0.5 : 1
 
-    Skin.ControlKnob {
-        id: knob
-        group: root.group
-        key: `stem_${root.index + 1}_volume`
-        color: Theme.gainKnobColor
-        anchors.topMargin: 5
-        anchors.top: root.top
-        anchors.horizontalCenter: root.horizontalCenter
-
-        arcStart: 0
-
-        width: 36
-        height: 36
-    }
+    Mixxx.ControlProxy {
+        id: statusControl
 
-    Text {
-        anchors.bottom: root.bottom
-        anchors.horizontalCenter: root.horizontalCenter
-        text: label
+        group: root.stemGroup
+        key: "mute"
     }
 
     Mixxx.ControlProxy {
-        id: statusControl
+        id: fxControl
 
-        group: root.group
-        key: `stem_${root.index + 1}_mute`
+        group: root.fxGroup
+        key: "enabled"
     }
 
     Rectangle {
@@ -58,10 +46,98 @@ Rectangle {
         radius: width / 2
         border.width: 1
         border.color: Theme.buttonNormalColor
-        color: statusControl.value ? knob.color : "transparent"
+        color: statusControl.value ? volume.color : "transparent"
 
         TapHandler {
             onTapped: statusControl.value = !statusControl.value
         }
     }
+
+    Text {
+        id: stemLabel
+        anchors.top: root.top
+        anchors.right: root.right
+        anchors.topMargin: 2
+        anchors.rightMargin: 2
+        elide: Text.ElideRight
+        text: label
+        font.pixelSize: 10
+    }
+
+    Skin.ControlKnob {
+        id: volume
+        group: root.stemGroup
+        key: "volume"
+        color: Theme.gainKnobColor
+        anchors.leftMargin: 1
+        anchors.top: statusButton.bottom
+        anchors.left: root.left
+
+        arcStart: 0
+
+        width: 32
+        height: 32
+    }
+
+    Rectangle {
+        id: fxButton
+
+        anchors.top: stemLabel.bottom
+        anchors.right: root.right
+        anchors.left: volume.right
+        anchors.leftMargin: 8
+        anchors.rightMargin: 8
+        width: 8
+        height: width
+        radius: width / 2
+        border.width: 1
+        border.color: Theme.buttonNormalColor
+        color: fxControl.value ? effectSuperKnob.color : "transparent"
+
+        TapHandler {
+            onTapped: fxControl.value = !fxControl.value
+        }
+    }
+
+    Skin.ControlMiniKnob {
+        id: effectSuperKnob
+
+        anchors.right: root.right
+        anchors.left: volume.right
+        anchors.bottom: effectSelector.top
+        anchors.margins: 2
+        arcStart: Knob.ArcStart.Minimum
+        group: root.fxGroup
+        key: "super1"
+        color: Theme.effectColor
+        opacity: fxControl.value ? 1 : 0.5
+    }
+
+    Mixxx.ControlProxy {
+        id: fxSelect
+
+        group: root.fxGroup
+        key: "loaded_chain_preset"
+    }
+
+    Skin.ComboBox {
+        id: effectSelector
+        anchors.left: root.left
+        anchors.right: root.right
+        anchors.bottom: root.bottom
+        anchors.margins: 1
+        spacing: 2
+        indicator.width: 0
+        popupWidth: 150
+        clip: true
+
+        opacity: fxControl.value ? 1 : 0.5
+        textRole: "display"
+        font.pixelSize: 10
+        model: Mixxx.EffectsManager.quickChainPresetModel
+        currentIndex: fxSelect.value == -1 ? 0 : fxSelect.value
+        onActivated: (index) => {
+            fxSelect.value = index
+        }
+    }
 }