[GSoC] LateNightQML: Effects Rack

CMakeLists.txt

@@ -3034,6 +3034,7 @@ if(BUILD_TESTING)
         src/test/controller_mapping_file_handler_test.cpp
         src/test/controllerrenderingengine_test.cpp
         src/test/qmlcontrolproxytest.cpp
+        src/test/qmleffectsproxytest.cpp
         src/test/qmlkeyutilstest.cpp
         src/test/qmlskincontrolcreatortest.cpp
         src/test/themeqml_test.cpp
@@ -3994,6 +3995,7 @@ if(QML)
       src/qml/qmldlgpreferencesproxy.cpp
       src/qml/qmleffectmanifestparametersmodel.cpp
       src/qml/qmleffectslotproxy.cpp
+      src/qml/qmleffectunitproxy.cpp
       src/qml/qmleffectsmanagerproxy.cpp
       src/qml/qmlkeyutils.cpp
       src/qml/qmllegacylibraryitem.cpp

res/qml/EffectAssignmentButtons.qml

@@ -0,0 +1,37 @@
+pragma ComponentBehavior: Bound
+
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import "Theme"
+
+Row {
+    id: root
+
+    property color activeColor: Theme.effectUnitColor
+    required property string channelGroup
+    property color inactiveColor: Theme.knobBackgroundColor
+    property bool showFourUnits: showFourUnitsControl.value > 0
+
+    Repeater {
+        model: root.showFourUnits ? 4 : 2
+
+        Skin.ControlButton {
+            required property int index
+
+            activeColor: root.activeColor
+            group: "[EffectRack1_EffectUnit" + (index + 1) + "]"
+            height: 20
+            key: "group_" + root.channelGroup + "_enable"
+            text: root.showFourUnits ? (index === 0 ? "FX1" : index + 1) : "FX" + (index + 1)
+            toggleable: true
+            width: root.showFourUnits ? (index === 0 ? 26 : 20) : 26
+        }
+    }
+    Mixxx.ControlProxy {
+        id: showFourUnitsControl
+
+        group: "[Skin]"
+        key: "show_4effectunits"
+    }
+}

res/qml/EffectChainPresetPopup.qml

@@ -0,0 +1,175 @@
+pragma ComponentBehavior: Bound
+
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import QtQuick.Controls
+
+Menu {
+    id: root
+
+    property color backgroundColor: "#151517"
+    property color borderColor: "#333333"
+    property url checkedSource
+    property color disabledTextColor: "#494949"
+    property string fontFamily: "Open Sans"
+    property int fontPixelSize: 14
+    property color hoverColor: "#2c454f"
+    property color hoverTextColor: "#ffffff"
+    property color separatorBottomColor: "#333333"
+    property color separatorTopColor: "#000000"
+    required property Mixxx.EffectSlotProxy slot1
+    required property Mixxx.EffectSlotProxy slot2
+    required property Mixxx.EffectSlotProxy slot3
+    property url submenuArrowSource
+    property color textColor: "#c2b3a5"
+    required property Mixxx.EffectUnitProxy unit
+
+    bottomPadding: 5
+    leftPadding: 5
+    rightPadding: 5
+    topPadding: 5
+    width: 160
+
+    background: Rectangle {
+        border.color: root.borderColor
+        border.width: 1
+        color: root.backgroundColor
+        radius: 1
+    }
+    delegate: Skin.EffectPresetMenuItem {
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        submenuArrowSource: root.submenuArrowSource
+        textColor: root.textColor
+    }
+
+    Instantiator {
+        model: Mixxx.EffectsManager.standardChainPresetModel
+
+        delegate: Skin.EffectPresetMenuItem {
+            required property int index
+            required property string name
+            required property string presetDisplay
+            required property string tooltip
+
+            ToolTip.delay: 500
+            ToolTip.text: tooltip
+            ToolTip.visible: hovered && tooltip.length > 0
+            checkedSource: root.checkedSource
+            disabledTextColor: root.disabledTextColor
+            fontFamily: root.fontFamily
+            fontPixelSize: root.fontPixelSize
+            hoverColor: root.hoverColor
+            hoverTextColor: root.hoverTextColor
+            submenuArrowSource: root.submenuArrowSource
+            text: (root.unit.presetName === name ? "✓ " : "") + presetDisplay
+            textColor: root.textColor
+
+            onTriggered: root.unit.loadPreset(index)
+        }
+
+        onObjectAdded: (index, object) => root.insertItem(index, object)
+        onObjectRemoved: (index, object) => root.removeItem(object)
+    }
+    Skin.EffectPresetMenuSeparator {
+        bottomColor: root.separatorBottomColor
+        topColor: root.separatorTopColor
+    }
+    Skin.EffectPresetMenuItem {
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        enabled: root.unit.canUpdatePreset
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        submenuArrowSource: root.submenuArrowSource
+        text: qsTr("Update Preset")
+        textColor: root.textColor
+        visible: enabled
+
+        onTriggered: root.unit.updatePreset()
+    }
+    Skin.EffectPresetMenuItem {
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        enabled: root.unit.canRenamePreset
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        submenuArrowSource: root.submenuArrowSource
+        text: qsTr("Rename Preset")
+        textColor: root.textColor
+        visible: enabled
+
+        onTriggered: root.unit.renamePreset()
+    }
+    Skin.EffectPresetMenuItem {
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        submenuArrowSource: root.submenuArrowSource
+        text: qsTr("Save As New Preset...")
+        textColor: root.textColor
+
+        onTriggered: root.unit.savePresetAs()
+    }
+    Skin.EffectPresetMenuSeparator {
+        bottomColor: root.separatorBottomColor
+        topColor: root.separatorTopColor
+    }
+    Skin.EffectSlotPresetMenu {
+        backgroundColor: root.backgroundColor
+        borderColor: root.borderColor
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        separatorBottomColor: root.separatorBottomColor
+        separatorTopColor: root.separatorTopColor
+        slot: root.slot1
+        submenuArrowSource: root.submenuArrowSource
+        textColor: root.textColor
+    }
+    Skin.EffectSlotPresetMenu {
+        backgroundColor: root.backgroundColor
+        borderColor: root.borderColor
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        separatorBottomColor: root.separatorBottomColor
+        separatorTopColor: root.separatorTopColor
+        slot: root.slot2
+        submenuArrowSource: root.submenuArrowSource
+        textColor: root.textColor
+    }
+    Skin.EffectSlotPresetMenu {
+        backgroundColor: root.backgroundColor
+        borderColor: root.borderColor
+        checkedSource: root.checkedSource
+        disabledTextColor: root.disabledTextColor
+        fontFamily: root.fontFamily
+        fontPixelSize: root.fontPixelSize
+        hoverColor: root.hoverColor
+        hoverTextColor: root.hoverTextColor
+        separatorBottomColor: root.separatorBottomColor
+        separatorTopColor: root.separatorTopColor
+        slot: root.slot3
+        submenuArrowSource: root.submenuArrowSource
+        textColor: root.textColor
+    }
+}

res/qml/EffectFocusButton.qml

@@ -0,0 +1,40 @@
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import "Theme"
+
+Skin.Button {
+    id: root
+
+    required property int effectNumber
+    required property string effectUnitGroup
+    readonly property bool focused: Math.round(focusedEffectControl.value) === effectNumber
+
+    activeColor: Theme.effectColor
+    highlight: focused
+    text: "F"
+    visible: showFocusControl.value > 0
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton
+
+        onTapped: focusedEffectControl.value = root.focused ? 0 : root.effectNumber
+    }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+
+        onTapped: focusedEffectControl.value = 0
+    }
+    Mixxx.ControlProxy {
+        id: focusedEffectControl
+
+        group: root.effectUnitGroup
+        key: "focused_effect"
+    }
+    Mixxx.ControlProxy {
+        id: showFocusControl
+
+        group: root.effectUnitGroup
+        key: "show_focus"
+    }
+}

res/qml/EffectPresetMenuItem.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Controls
+
+MenuItem {
+    id: root
+
+    property url checkedSource
+    property color disabledTextColor: "#494949"
+    property string fontFamily: "Open Sans"
+    property int fontPixelSize: 14
+    property color hoverColor: "#2c454f"
+    property color hoverTextColor: "#ffffff"
+    property url submenuArrowSource
+    property color textColor: "#c2b3a5"
+
+    implicitHeight: visible ? 22 : 0
+    implicitWidth: Math.max(160, contentItem.implicitWidth + leftPadding + rightPadding)
+    leftPadding: checkable ? 22 : 6
+    rightPadding: subMenu ? 22 : 6
+
+    arrow: Image {
+        anchors.right: parent.right
+        anchors.rightMargin: 6
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        height: 10
+        source: root.submenuArrowSource
+        visible: root.subMenu && root.enabled
+        width: 6
+    }
+    background: Rectangle {
+        color: root.highlighted && root.enabled ? root.hoverColor : "transparent"
+        radius: 1
+    }
+    contentItem: Text {
+        color: !root.enabled ? root.disabledTextColor : root.highlighted ? root.hoverTextColor : root.textColor
+        elide: Text.ElideRight
+        font.family: root.fontFamily
+        font.pixelSize: root.fontPixelSize
+        horizontalAlignment: Text.AlignLeft
+        text: root.text
+        verticalAlignment: Text.AlignVCenter
+    }
+    indicator: Image {
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        height: 14
+        source: root.checked ? root.checkedSource : ""
+        visible: root.checkable && root.checked
+        width: 14
+    }
+}

res/qml/EffectPresetMenuSeparator.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Controls
+
+MenuSeparator {
+    id: root
+
+    property color bottomColor: "#333333"
+    property color topColor: "#000000"
+
+    implicitHeight: 6
+
+    contentItem: Item {
+        Rectangle {
+            color: root.topColor
+            height: 1
+            width: parent.width - 8
+            x: 4
+            y: 2
+        }
+        Rectangle {
+            color: root.bottomColor
+            height: 1
+            width: parent.width - 8
+            x: 4
+            y: 3
+        }
+    }
+}