Merge pull request #3955 from Holzhaus/qml-control-refactor

QML: Refactor Knob/Slider controls
mixxxdj · Jun 6, 2021 · 937658a · 937658a
2 parents 901bb59 + f68c1fe
commit 937658a
Show file tree

Hide file tree

Showing 23 changed files with 283 additions and 667 deletions.
diff --git a/res/skins/QMLDemo/ControlKnob.qml b/res/skins/QMLDemo/ControlKnob.qml
@@ -0,0 +1,17 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+
+Skin.Knob {
+    id: root
+
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onTurned: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+}
diff --git a/res/skins/QMLDemo/ControlSlider.qml b/res/skins/QMLDemo/ControlSlider.qml
@@ -0,0 +1,15 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+
+Skin.Slider {
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onMoved: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+}
diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml
@@ -8,7 +8,7 @@ Item {
 
     property real crossfaderWidth // required
 
-    implicitHeight: crossfaderSlider.width
+    implicitHeight: crossfaderSlider.height + 5
 
     Item {
         id: effectUnitLeftPlaceholder
@@ -18,24 +18,18 @@ Item {
         anchors.bottom: parent.bottom
     }
 
-    Skin.Slider {
+    Skin.ResettableControlSlider {
         id: crossfaderSlider
 
+        orientation: Qt.Horizontal
         anchors.centerIn: parent
-        height: root.crossfaderWidth
+        width: root.crossfaderWidth
         group: "[Master]"
         key: "crossfader"
         barColor: Theme.crossfaderBarColor
         barStart: 0.5
         fg: "images/slider_handle_crossfader.svg"
         bg: "images/slider_crossfader.svg"
-
-        transform: Rotation {
-            origin.x: crossfaderSlider.width / 2
-            origin.y: crossfaderSlider.height / 2
-            angle: 90
-        }
-
     }
 
     Item {

diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml
@@ -22,7 +22,7 @@ Item {
         group: root.group
     }
 
-    Skin.Slider {
+    Skin.ResettableControlSlider {
         id: rateSlider
 
         visible: !root.minimized

diff --git a/res/skins/QMLDemo/EqColumn.qml b/res/skins/QMLDemo/EqColumn.qml
@@ -12,34 +12,34 @@ Column {
     spacing: 4
 
     EqKnob {
-        group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        key: "parameter3"
         statusKey: "button_parameter3"
-        color: Theme.eqHighColor
+        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        knob.key: "parameter3"
+        knob.color: Theme.eqHighColor
     }
 
     EqKnob {
-        group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        key: "parameter2"
         statusKey: "button_parameter2"
-        color: Theme.eqMidColor
+        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        knob.key: "parameter2"
+        knob.color: Theme.eqMidColor
     }
 
     EqKnob {
-        group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        key: "parameter1"
+        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        knob.key: "parameter1"
         statusKey: "button_parameter1"
-        color: Theme.eqLowColor
+        knob.color: Theme.eqLowColor
     }
 
     EqKnob {
-        group: "[QuickEffectRack1_" + root.group + "]"
-        key: "super1"
+        knob.group: "[QuickEffectRack1_" + root.group + "]"
+        knob.key: "super1"
         statusGroup: "[QuickEffectRack1_" + root.group + "_Effect1]"
         statusKey: "enabled"
-        arcStyle: ShapePath.DashLine
-        arcStylePattern: [2, 2]
-        color: Theme.eqFxColor
+        knob.arcStyle: ShapePath.DashLine
+        knob.arcStylePattern: [2, 2]
+        knob.color: Theme.eqFxColor
     }
 
     Skin.OrientationToggleButton {

diff --git a/res/skins/QMLDemo/EqKnob.qml b/res/skins/QMLDemo/EqKnob.qml
@@ -4,12 +4,26 @@ import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
 import "Theme"
 
-Skin.Knob {
+Rectangle {
     id: root
 
-    property string statusGroup: root.group // required
+    property alias knob: knob
+    property string statusGroup: root.knob.group // required
     property string statusKey // required
 
+    color: Theme.knobBackgroundColor
+    width: 56
+    height: 56
+    radius: 5
+
+    Skin.ResettableControlKnob {
+        id: knob
+
+        anchors.centerIn: root
+        width: 48
+        height: 48
+    }
+
     Mixxx.ControlProxy {
         id: statusControl
 
@@ -22,18 +36,17 @@ Skin.Knob {
 
         anchors.left: root.left
         anchors.bottom: root.bottom
-        anchors.leftMargin: 6
-        anchors.bottomMargin: 2
+        anchors.leftMargin: 4
+        anchors.bottomMargin: 4
         width: 8
         height: width
         radius: width / 2
         border.width: 1
         border.color: Theme.buttonNormalColor
-        color: statusControl.value ? root.color : "transparent"
+        color: statusControl.value ? knob.color : "transparent"
 
-        MouseArea {
-            anchors.fill: parent
-            onClicked: statusControl.value = !statusControl.value
+        TapHandler {
+            onTapped: statusControl.value = !statusControl.value
         }
 
     }

diff --git a/res/skins/QMLDemo/Knob.qml b/res/skins/QMLDemo/Knob.qml
@@ -7,29 +7,49 @@ MixxxControls.Knob {
 
     property color color // required
 
-    implicitWidth: 56
+    implicitWidth: background.width
     implicitHeight: implicitWidth
     arc: true
-    arcRadius: 20
+    arcRadius: width * 0.45
+    arcOffsetY: width * 0.01
     arcColor: root.color
     arcWidth: 2
-    angle: 117
+    angle: 116
 
-    background: Image {
+    Image {
+        id: shadow
+
+        anchors.top: parent.top
         anchors.left: parent.left
+        anchors.right: parent.right
+        height: width * 7 / 6
+        fillMode: Image.PreserveAspectFit
+        source: "images/knob_shadow.svg"
+    }
+
+    background: Image {
+        id: background
+
         anchors.top: parent.top
+        anchors.left: parent.left
         anchors.right: parent.right
+        height: width
         source: "images/knob.svg"
     }
 
     foreground: Item {
-        anchors.fill: parent
+        id: inidicator
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: width
 
         Rectangle {
             anchors.horizontalCenter: parent.horizontalCenter
             width: root.width / 30
-            height: root.width / 7
-            y: parent.height / 4
+            height: 10
+            y: height
             color: root.color
         }
 

diff --git a/res/skins/QMLDemo/Mixer.qml b/res/skins/QMLDemo/Mixer.qml
@@ -8,6 +8,8 @@ Row {
     property string rightDeckGroup // required
     property bool show4decks: false
 
+    spacing: 5
+
     EqColumn {
         group: root.leftDeckGroup
     }

diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml
@@ -8,26 +8,38 @@ Item {
 
     property string group // required
 
-    Knob {
-        id: gainKnob
+    Rectangle {
+        id: gainKnobFrame
 
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         height: width
-        group: root.group
-        key: "pregain"
-        color: Theme.gainKnobColor
+        color: Theme.knobBackgroundColor
+        radius: 5
+
+        Skin.ResettableControlKnob {
+            id: gainKnob
+
+            anchors.centerIn: parent
+            width: 48
+            height: 48
+            group: root.group
+            key: "pregain"
+            color: Theme.gainKnobColor
+        }
+
     }
 
     Item {
-        anchors.top: gainKnob.bottom
+        anchors.top: gainKnobFrame.bottom
         anchors.topMargin: 5
+        anchors.bottomMargin: 5
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: pflButton.top
 
-        VuMeter {
+        Skin.VuMeter {
             x: 15
             y: (parent.height - height) / 2
             width: 4
@@ -36,7 +48,7 @@ Item {
             key: "VuMeterL"
         }
 
-        VuMeter {
+        Skin.VuMeter {
             x: parent.width - width - 15
             y: (parent.height - height) / 2
             width: 4
@@ -45,7 +57,7 @@ Item {
             key: "VuMeterR"
         }
 
-        Slider {
+        Skin.ResettableControlSlider {
             id: volumeSlider
 
             anchors.fill: parent