skins/QMLDemo: Move Hotcue and HotcuePopup to separate components

3 files changed, 163 insertions, 125 deletions

diff --git a/res/skins/QMLDemo/Hotcue.qml b/res/skins/QMLDemo/Hotcue.qml
new file mode 100644
index 0000000000..1ff2579b49
--- /dev/null
+++ b/res/skins/QMLDemo/Hotcue.qml
@@ -0,0 +1,52 @@
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+import "Theme"
+
+Item {
+    id: root
+
+    property int hotcueNumber // required
+    property string group // required
+    property alias activate: hotcueActivateControl.value
+    property alias clear: hotcueClearControl.value
+    readonly property bool isSet: hotcueStatusControl.value != 0
+    readonly property color color: {
+        if (hotcueColorControl.value < 0)
+            return Theme.deckActiveColor;
+
+        return "#" + hotcueColorControl.value.toString(16).padStart(6, "0");
+    }
+
+    function setColor(newColor) {
+        hotcueColorControl.value = (parseInt(newColor.r * 255) << 16) | (parseInt(newColor.g * 255) << 8) | parseInt(newColor.b * 255);
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueColorControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_color"
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueActivateControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_activate"
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueStatusControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_status"
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueClearControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_clear"
+    }
+
+}
diff --git a/res/skins/QMLDemo/HotcueButton.qml b/res/skins/QMLDemo/HotcueButton.qml
index cf4578e8ab..d7713c741a 100644
--- a/res/skins/QMLDemo/HotcueButton.qml
+++ b/res/skins/QMLDemo/HotcueButton.qml
@@ -1,5 +1,4 @@
 import "." as Skin
-import Mixxx 0.1 as Mixxx
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "Theme"
@@ -13,43 +12,25 @@ Skin.Button {
     text: hotcueNumber
     width: playButton.height
     height: playButton.height
-    activeColor: hotcueColorControl.color
-    highlight: hotcueStatusControl.value
+    activeColor: hotcue.color
+    highlight: hotcue.isSet
 
-    Mixxx.ControlProxy {
-        id: hotcueColorControl
-
-        readonly property color color: {
-            if (hotcueColorControl.value < 0)
-                return Theme.deckActiveColor;
-
-            return "#" + hotcueColorControl.value.toString(16).padStart(6, "0");
-        }
-
-        function setColor(newColor) {
-            value = (parseInt(newColor.r * 255) << 16) | (parseInt(newColor.g * 255) << 8) | parseInt(newColor.b * 255);
-        }
+    Hotcue {
+        id: hotcue
 
         group: root.group
-        key: "hotcue_" + hotcueNumber + "_color"
-    }
+        hotcueNumber: root.hotcueNumber
+        onIsSetChanged: {
+            if (!isSet)
+                popup.close();
 
-    Mixxx.ControlProxy {
-        group: root.group
-        key: "hotcue_" + hotcueNumber + "_activate"
-        value: root.down
+        }
     }
 
-    Mixxx.ControlProxy {
-        id: hotcueStatusControl
-
-        group: root.group
-        key: "hotcue_" + hotcueNumber + "_enabled"
-        onValueChanged: {
-            if (hotcueStatusControl.value == 0)
-                popup.close();
+    HotcuePopup {
+        id: popup
 
-        }
+        hotcue: hotcue
     }
 
     MouseArea {
@@ -58,102 +39,12 @@ Skin.Button {
         anchors.fill: parent
         acceptedButtons: Qt.RightButton
         onClicked: {
-            if (hotcueStatusControl.value == 0)
-                return ;
-
-            popup.x = mouse.x;
-            popup.y = mouse.y;
-            popup.open();
-        }
-    }
-
-    Popup {
-        id: popup
-
-        dim: false
-        modal: true
-        focus: true
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-        contentWidth: colorGrid.implicitWidth
-        contentHeight: colorGrid.implicitHeight + clearButton.implicitHeight
-
-        Grid {
-            id: colorGrid
-
-            columns: 4
-            spacing: 2
-
-            Repeater {
-                model: Mixxx.Config.getHotcueColorPalette()
-
-                Rectangle {
-                    height: 24
-                    width: 24
-                    color: modelData
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            hotcueColorControl.setColor(parent.color);
-                            popup.close();
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-        Skin.ControlButton {
-            id: clearButton
-
-            anchors.top: colorGrid.bottom
-            anchors.left: parent.left
-            anchors.topMargin: 5
-            group: root.group
-            key: "hotcue_" + hotcueNumber + "_clear"
-            text: "Clear"
-            activeColor: Theme.deckActiveColor
-        }
-
-        enter: Transition {
-            NumberAnimation {
-                properties: "opacity"
-                from: 0
-                to: 1
-                duration: 100
+            if (hotcue.isSet) {
+                popup.x = mouse.x;
+                popup.y = mouse.y;
+                popup.open();
             }
-
         }
-
-        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: "images/button.svg"
-
-            border {
-                top: 10
-                left: 20
-                right: 20
-                bottom: 10
-            }
-
-        }
-
     }
 
 }
diff --git a/res/skins/QMLDemo/HotcuePopup.qml b/res/skins/QMLDemo/HotcuePopup.qml
new file mode 100644
index 0000000000..d3d90a29c6
--- /dev/null
+++ b/res/skins/QMLDemo/HotcuePopup.qml
@@ -0,0 +1,95 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+Popup {
+    id: root
+
+    property Hotcue hotcue // required
+
+    dim: false
+    modal: true
+    focus: true
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    contentWidth: colorGrid.implicitWidth
+    contentHeight: colorGrid.implicitHeight + clearButton.implicitHeight
+
+    Grid {
+        id: colorGrid
+
+        columns: 4
+        spacing: 2
+
+        Repeater {
+            model: Mixxx.Config.getHotcueColorPalette()
+
+            Rectangle {
+                height: 24
+                width: 24
+                color: modelData
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        hotcue.setColor(parent.color);
+                        root.close();
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+    Skin.Button {
+        id: clearButton
+
+        anchors.top: colorGrid.bottom
+        anchors.left: parent.left
+        anchors.topMargin: 5
+        text: "Clear"
+        activeColor: Theme.deckActiveColor
+        onDownChanged: hotcue.clear = down
+    }
+
+    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: "images/button.svg"
+
+        border {
+            top: 10
+            left: 20
+            right: 20
+            bottom: 10
+        }
+
+    }
+
+}