QML demo skin additions

res/skins/QMLDemo/AuxiliaryUnit.qml

@@ -0,0 +1,119 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "Theme"
+
+Row {
+    id: root
+
+    property int unitNumber // required
+    property string group: "[Auxiliary" + unitNumber + "]"
+
+    spacing: 5
+
+    Skin.VuMeter {
+        id: vuMeter
+
+        group: root.group
+        key: "VuMeter"
+        width: 4
+        height: parent.height
+    }
+
+    Rectangle {
+        id: gainKnobFrame
+
+        width: 52
+        height: width
+        color: Theme.knobBackgroundColor
+        radius: 5
+
+        Skin.ControlKnob {
+            id: gainKnob
+
+            anchors.centerIn: parent
+            width: 48
+            height: width
+            arcStart: 0
+            group: root.group
+            key: "pregain"
+            color: Theme.gainKnobColor
+        }
+
+    }
+
+    Column {
+        Skin.SectionText {
+            width: parent.width
+            height: root.height / 2
+            text: "AUX " + root.unitNumber
+        }
+
+        Skin.ControlButton {
+            id: pflButton
+
+            group: root.group
+            key: "pfl"
+            text: "PFL"
+            activeColor: Theme.pflActiveButtonColor
+            toggleable: true
+        }
+
+    }
+
+    Skin.EmbeddedBackground {
+        id: embedded
+
+        height: parent.height
+        width: 56
+
+        Skin.OrientationToggleButton {
+            id: orientationButton
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.verticalCenter
+            group: root.group
+            key: "orientation"
+            color: Theme.crossfaderOrientationColor
+        }
+
+        Skin.InfoBarButton {
+            id: fx1Button
+
+            anchors.left: parent.left
+            anchors.right: parent.horizontalCenter
+            anchors.top: parent.verticalCenter
+            anchors.bottom: parent.bottom
+            group: "[EffectRack1_EffectUnit1]"
+            key: "group_" + root.group + "_enable"
+            activeColor: Theme.deckActiveColor
+
+            foreground: Skin.EmbeddedText {
+                anchors.centerIn: parent
+                text: "FX1"
+            }
+
+        }
+
+        Skin.InfoBarButton {
+            group: "[EffectRack1_EffectUnit2]"
+            anchors.left: parent.horizontalCenter
+            anchors.right: parent.right
+            anchors.top: parent.verticalCenter
+            anchors.bottom: parent.bottom
+            key: "group_" + root.group + "_enable"
+            activeColor: Theme.deckActiveColor
+
+            foreground: Skin.EmbeddedText {
+                anchors.centerIn: parent
+                text: "FX2"
+            }
+
+        }
+
+    }
+
+}

res/skins/QMLDemo/Button.qml

@@ -22,7 +22,7 @@ AbstractButton {
 
             PropertyChanges {
                 target: backgroundImage
-                source: "images/button_pressed.svg"
+                source: Theme.imgButtonPressed
             }
 
             PropertyChanges {
@@ -42,7 +42,7 @@ AbstractButton {
 
             PropertyChanges {
                 target: backgroundImage
-                source: "images/button.svg"
+                source: Theme.imgButton
             }
 
             PropertyChanges {
@@ -62,7 +62,7 @@ AbstractButton {
 
             PropertyChanges {
                 target: backgroundImage
-                source: "images/button.svg"
+                source: Theme.imgButton
             }
 
             PropertyChanges {
@@ -84,7 +84,7 @@ AbstractButton {
         anchors.fill: parent
         horizontalTileMode: BorderImage.Stretch
         verticalTileMode: BorderImage.Stretch
-        source: "images/button.svg"
+        source: Theme.imgButton
 
         border {
             top: 10

res/skins/QMLDemo/ComboBox.qml

@@ -0,0 +1,63 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+ComboBox {
+    id: root
+
+    background: Skin.EmbeddedBackground {
+    }
+
+    delegate: ItemDelegate {
+        width: parent.width
+        highlighted: root.highlightedIndex === index
+
+        contentItem: Text {
+            text: modelData
+            color: Theme.deckTextColor
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        background: Rectangle {
+            radius: 5
+            border.width: highlighted ? 1 : 0
+            border.color: Theme.deckLineColor
+            color: "transparent"
+        }
+
+    }
+
+    contentItem: Text {
+        leftPadding: 5
+        rightPadding: root.indicator.width + root.spacing
+        text: root.displayText
+        font: root.font
+        color: Theme.deckTextColor
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    popup: Popup {
+        y: root.height
+        width: root.width
+        implicitHeight: contentItem.implicitHeight
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: root.popup.visible ? root.delegateModel : null
+            currentIndex: root.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator {
+            }
+
+        }
+
+        background: Skin.EmbeddedBackground {
+        }
+
+    }
+
+}

res/skins/QMLDemo/ControlMiniKnob.qml

@@ -0,0 +1,22 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+
+Skin.MiniKnob {
+    id: root
+
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onTurned: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+    TapHandler {
+        onDoubleTapped: control.reset()
+    }
+
+}

res/skins/QMLDemo/CrossfaderRow.qml

@@ -1,4 +1,5 @@
 import "." as Skin
+import Mixxx 0.1 as Mixxx
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "Theme"
@@ -8,36 +9,100 @@ Item {
 
     property real crossfaderWidth // required
 
-    implicitHeight: crossfaderSlider.height + 5
+    implicitHeight: crossfader.height
 
-    Item {
-        id: effectUnitLeftPlaceholder
+    Skin.SectionBackground {
+        anchors.fill: microphoneRow
+    }
+
+    Row {
+        id: microphoneRow
 
         anchors.top: parent.top
-        anchors.left: parent.left
         anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: crossfader.left
+        layoutDirection: Qt.RightToLeft
+        padding: 5
+        spacing: 10
+
+        Skin.MicrophoneUnit {
+            unitNumber: 1
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 2
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 3
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 4
+        }
+
+        Skin.MicrophoneDuckingPanel {
+        }
+
     }
 
-    Skin.ControlSlider {
-        id: crossfaderSlider
+    Skin.SectionBackground {
+        id: crossfader
 
-        orientation: Qt.Horizontal
         anchors.centerIn: parent
         width: root.crossfaderWidth
-        group: "[Master]"
-        key: "crossfader"
-        barColor: Theme.crossfaderBarColor
-        barStart: 0.5
-        fg: "images/slider_handle_crossfader.svg"
-        bg: "images/slider_crossfader.svg"
+        height: crossfaderSlider.height + 20
+
+        Skin.ControlSlider {
+            id: crossfaderSlider
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 5
+            anchors.rightMargin: 5
+            anchors.verticalCenter: parent.verticalCenter
+            orientation: Qt.Horizontal
+            group: "[Master]"
+            key: "crossfader"
+            barColor: Theme.crossfaderBarColor
+            barStart: 0.5
+            fg: Theme.imgCrossfaderHandle
+            bg: Theme.imgCrossfaderBackground
+        }
+
     }
 
-    Item {
-        id: effectUnitRightPlaceholder
+    Row {
+        id: auxiliaryRow
 
+        anchors.left: crossfader.right
         anchors.top: parent.top
-        anchors.right: parent.right
         anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        padding: 5
+        spacing: 10
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 1
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 2
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 3
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 4
+        }
+
     }
 
 }