diff options
author | Jan Holthuis <jan.holthuis@ruhr-uni-bochum.de> | 2021-06-08 22:44:22 +0200 |
---|---|---|
committer | Jan Holthuis <jan.holthuis@ruhr-uni-bochum.de> | 2021-06-08 22:44:22 +0200 |
commit | 69f88cd03ff99da867f1583c0dad4c17d5af65c0 (patch) | |
tree | 30df1cedb2817a9618e39ce8bc924dac825bb597 | |
parent | e6ff46f8838d60b0677e8bfcb4cde060d94314a3 (diff) |
skins/QMLDemo: Move Hotcue and HotcuePopup to separate components
-rw-r--r-- | res/skins/QMLDemo/Hotcue.qml | 52 | ||||
-rw-r--r-- | res/skins/QMLDemo/HotcueButton.qml | 141 | ||||
-rw-r--r-- | res/skins/QMLDemo/HotcuePopup.qml | 95 |
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 + } + + } + +} |