Merge pull request #16690 from xARSENICx/LateNightQML/mixer-common-controls

Add shared QML mixer control primitives

Author: JoergAtGithub

res/qml/ControlFader.qml

@@ -10,7 +10,7 @@ Skin.Fader {
 
     value: control.parameter
 
-    onMoved: function(value) {
+    onMoved: function (value) {
         control.parameter = value;
     }
 
@@ -25,6 +25,7 @@ Skin.Fader {
     }
     TapHandler {
         acceptedButtons: Qt.RightButton
+
         onTapped: control.reset()
     }
 }

res/qml/ControlKnob.qml

@@ -9,17 +9,18 @@ Skin.Knob {
     property alias key: control.key
 
     value: control.parameter
+
     onTurned: control.parameter = value
 
     Mixxx.ControlProxy {
         id: control
     }
-
     TapHandler {
         onDoubleTapped: control.reset()
     }
     TapHandler {
         acceptedButtons: Qt.RightButton
+
         onTapped: control.reset()
     }
 }

res/qml/CrossfaderRow.qml

@@ -53,8 +53,8 @@ Item {
             anchors.right: parent.right
             anchors.rightMargin: 5
             anchors.verticalCenter: parent.verticalCenter
-            barColor: Theme.crossfaderBarColor
-            barStart: 0.5
+            bar.color: Theme.crossfaderBarColor
+            bar.start: 0.5
             bg: Theme.imgCrossfaderBackground
             fg: Theme.imgCrossfaderHandle
             group: "[Master]"

res/qml/Deck/HotcueAndStem.qml

@@ -423,7 +423,7 @@ Item {
                                 id: volumeSlider
 
                                 anchors.fill: parent
-                                barColor: Theme.volumeSliderBarColor
+                                bar.color: Theme.volumeSliderBarColor
                                 bg: Theme.imgVolumeSliderBackground
                                 group: stem.group
                                 implicitWidth: 10

res/qml/Deck/TempoColumn.qml

@@ -177,9 +177,9 @@ ColumnLayout {
 
         Layout.fillHeight: true
         Layout.fillWidth: true
-        barColor: Theme.bpmSliderBarColor
-        barMargin: 0
-        barStart: 0.5
+        bar.color: Theme.bpmSliderBarColor
+        bar.margin: 0
+        bar.start: 0.5
         bg: Theme.imgBpmSliderBackground
         group: root.group
         key: "rate"

res/qml/Fader.qml

@@ -11,16 +11,16 @@ MixxxControls.Fader {
     property alias handleImage: handleImage
     property bool showDefaultHandle: true
 
-    bar: true
-    barMargin: 10
+    bar.enabled: true
+    bar.margin: 10
     implicitHeight: backgroundImage.implicitHeight
     implicitWidth: backgroundImage.implicitWidth
 
     background: Image {
         id: backgroundImage
 
         anchors.fill: parent
-        anchors.margins: root.barMargin
+        anchors.margins: root.bar.margin
     }
     handle: Item {
         id: handleItem

res/qml/Knob.qml

@@ -5,52 +5,56 @@ import "Theme"
 MixxxControls.Knob {
     id: root
 
+    property url backgroundSource: Theme.imgKnob
     required property color color
     property url shadowSource: Theme.imgKnobShadow
-    property url backgroundSource: Theme.imgKnob
+    property bool showDefaultBackground: true
+    property bool showDefaultForeground: true
 
-    implicitWidth: background.width
-    implicitHeight: implicitWidth
+    angle: 116
     arc: true
-    arcRadius: width * 0.45
-    arcOffsetY: width * 0.01
     arcColor: root.color
+    arcOffsetY: width * 0.01
+    arcRadius: width * 0.45
     arcWidth: 2
-    angle: 116
-
-    Image {
-        id: shadow
-
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: width * 7 / 6
-        fillMode: Image.PreserveAspectFit
-        source: root.shadowSource
-    }
+    implicitHeight: implicitWidth
+    implicitWidth: background.width
 
     background: Image {
         id: background
 
-        anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.top: parent.top
         height: width
         source: root.backgroundSource
+        visible: root.showDefaultBackground
     }
-
     foreground: Item {
-        anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.top: parent.top
         height: width
+        visible: root.showDefaultForeground
 
         Rectangle {
             anchors.horizontalCenter: parent.horizontalCenter
-            width: 2
+            color: root.color
             height: root.width / 5
+            width: 2
             y: height
-            color: root.color
         }
     }
+
+    Image {
+        id: shadow
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        fillMode: Image.PreserveAspectFit
+        height: width * 7 / 6
+        source: root.shadowSource
+        visible: root.showDefaultBackground
+    }
 }

res/qml/MicrophoneDuckingPanel.qml

@@ -12,8 +12,8 @@ Column {
     }
 
     Skin.ControlFader {
-        barColor: Theme.crossfaderBarColor
-        barStart: 1
+        bar.color: Theme.crossfaderBarColor
+        bar.start: 1
         bg: Theme.imgMicDuckingSlider
         fg: Theme.imgMicDuckingSliderHandle
         group: "[Master]"

res/qml/Mixer.qml

@@ -240,8 +240,8 @@ Item {
                 Skin.ControlFader {
                     id: crossfaderSlider
 
-                    barColor: Theme.crossfaderBarColor
-                    barStart: 0.5
+                    bar.color: Theme.crossfaderBarColor
+                    bar.start: 0.5
                     bg: Theme.imgCrossfaderBackground
                     fg: Theme.imgCrossfaderHandle
                     group: "[Master]"

res/qml/MixerColumn.qml

@@ -56,7 +56,7 @@ Item {
             id: volumeSlider
 
             anchors.fill: parent
-            barColor: Theme.volumeSliderBarColor
+            bar.color: Theme.volumeSliderBarColor
             bg: Theme.imgVolumeSliderBackground
             group: root.group
             key: "volume"