skins/QML: Add library placeholder and 4 deck toggle

mixxxdj · May 24, 2021 · c69c72c · c69c72c
1 parent 6812266
commit c69c72c
Show file tree

Hide file tree

Showing 3 changed files with 280 additions and 115 deletions.
diff --git a/res/skins/QMLDemo/DeckRow.qml b/res/skins/QMLDemo/DeckRow.qml
@@ -0,0 +1,137 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.11
+import Mixxx 0.1
+
+Item {
+    required property string leftDeck;
+    required property string rightDeck;
+
+    id: root
+
+    RowLayout {
+        anchors.fill: parent
+
+        Rectangle {
+            width: childrenRect.width
+            height: childrenRect.height
+            color: "#121213"
+
+            ToggleButton {
+                id: playButtonDeck1
+                group: root.leftDeck
+                key: "play"
+                width: 68
+                height: 26
+                icon.width: 50
+                icon.height: 24
+                background: Rectangle {
+                    anchors.fill: parent
+                    data: Image {
+                        id: playButtonDeck1BgImage
+                        anchors.fill: parent
+                    }
+                }
+
+                State {
+                    name: "0"
+                    PropertyChanges {
+                        target: playButtonDeck1
+                        icon.source: "../LateNight/palemoon/buttons/btn__play_deck.svg"
+                        icon.color: "#777777"
+                        background.color: "transparent"
+                        background.border.width: 2
+                    }
+                    PropertyChanges {
+                        target: playButtonDeck1BgImage
+                        source: "../LateNight/palemoon/buttons/btn_embedded_play.svg"
+                    }
+                }
+
+                State {
+                    name: "1"
+                    PropertyChanges {
+                        target: playButtonDeck1
+                        icon.source: "../LateNight/palemoon/buttons/btn__play_deck_active.svg"
+                        icon.color: "transparent"
+                        background.color: "#b24c12"
+                        background.border.width: 2
+                    }
+                    PropertyChanges {
+                        target: playButtonDeck1BgImage
+                        source: "../LateNight/palemoon/buttons/btn_embedded_play_active.svg"
+                    }
+                }
+            }
+        }
+
+        EqColumn {
+            group: root.leftDeck
+        }
+
+        MixerColumn {
+            group: root.leftDeck
+        }
+
+        MixerColumn {
+            group: root.rightDeck
+        }
+
+        EqColumn {
+            group: root.rightDeck
+        }
+
+        Rectangle {
+            width: childrenRect.width
+            height: childrenRect.height
+            color: "#121213"
+
+            ToggleButton {
+                id: playButtonDeck2
+                group: root.rightDeck
+                key: "play"
+                width: 68
+                height: 26
+                icon.width: 50
+                icon.height: 24
+                background: Rectangle {
+                    anchors.fill: parent
+                    data: Image {
+                        id: playButtonDeck2BgImage
+                        anchors.fill: parent
+                    }
+                }
+
+                State {
+                    name: "0"
+                    PropertyChanges {
+                        target: playButtonDeck2
+                        icon.source: "../LateNight/palemoon/buttons/btn__play_deck.svg"
+                        icon.color: "#777777"
+                        background.color: "transparent"
+                        background.border.width: 2
+                    }
+                    PropertyChanges {
+                        target: playButtonDeck2BgImage
+                        source: "../LateNight/palemoon/buttons/btn_embedded_play.svg"
+                    }
+                }
+
+                State {
+                    name: "1"
+                    PropertyChanges {
+                        target: playButtonDeck2
+                        icon.source: "../LateNight/palemoon/buttons/btn__play_deck_active.svg"
+                        icon.color: "transparent"
+                        background.color: "#b24c12"
+                        background.border.width: 2
+                    }
+                    PropertyChanges {
+                        target: playButtonDeck2BgImage
+                        source: "../LateNight/palemoon/buttons/btn_embedded_play_active.svg"
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/res/skins/QMLDemo/Library.qml b/res/skins/QMLDemo/Library.qml
@@ -0,0 +1,16 @@
+import QtQuick 2.15
+import QtQuick.Controls 1.4
+import Qt.labs.qmlmodels 1.0
+
+Item {
+    Rectangle {
+        color: "#121213"
+        anchors.fill: parent
+
+        Text {
+            text: "Library Placeholder"
+            color: "white"
+            anchors.centerIn: parent
+        }
+    }
+}