skins/QMLDemo: Move styling to Theme singleton

mixxxdj · May 30, 2021 · 7af6d30 · 7af6d30
1 parent e99b85d
commit 7af6d30
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 50 deletions.
diff --git a/res/skins/QMLDemo/Button.qml b/res/skins/QMLDemo/Button.qml
@@ -1,3 +1,5 @@
+import "Theme"
+import "." as Skin
 import QtQml 2.12
 import QtQuick 2.12
 import QtQuick.Controls 2.12
@@ -9,7 +11,7 @@ AbstractButton {
     implicitWidth: 52
     implicitHeight: 26
 
-    property color normalColor: "#696969"
+    property color normalColor: Theme.buttonNormalColor
     required property color activeColor
     property color pressedColor: activeColor
 
@@ -47,10 +49,10 @@ AbstractButton {
             text: root.text
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.family: "Open Sans"
+            font.family: Theme.fontFamily
             font.capitalization: Font.AllUppercase
             font.bold: true
-            font.pixelSize: 10
+            font.pixelSize: Theme.buttonFontPixelSize
             color: root.normalColor
         }
     }

diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml
@@ -1,3 +1,4 @@
+import "Theme"
 import "." as Skin
 import QtQuick 2.12
 import QtQuick.Controls 2.12
@@ -21,7 +22,7 @@ Item {
         height: root.crossfaderWidth
         group: "[Master]"
         key: "crossfader"
-        barColor: "#ea2a4e"
+        barColor: Theme.crossfaderBarColor
         barStart: 0.5
         fg: "images/slider_handle_crossfader.svg"
         bg: "images/slider_crossfader.svg"

diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml
@@ -1,3 +1,4 @@
+import "Theme"
 import "." as Skin
 import Mixxx 0.1 as Mixxx
 import Mixxx.Controls 0.1 as MixxxControls
@@ -16,7 +17,7 @@ Item {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        color: "#0f0f0f"
+        color: Theme.deckBackgroundColor
         group: root.group
     }
 
@@ -32,7 +33,7 @@ Item {
         group: root.group
         key: "rate"
         barStart: 0.5
-        barColor: "#85c85b"
+        barColor: Theme.bpmSliderBarColor
         bg: "images/slider_bpm.svg"
     }
 
@@ -47,7 +48,7 @@ Item {
         anchors.left: parent.left
         anchors.right: rateSlider.left
         radius: 5
-        color: "#0f0f0f"
+        color: Theme.deckBackgroundColor
         height: 56
 
         Skin.WaveformOverview {
@@ -75,6 +76,9 @@ Item {
                 anchors.leftMargin: 5
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.textFontPixelSize
+                color: infoBar.textColor
                 text: {
                     let positionSeconds = samplesControl.value / 2 / sampleRateControl.value * playPositionControl.value;
                     if (isNaN(positionSeconds))
@@ -95,7 +99,6 @@ Item {
 
                     return minutes + ':' + seconds + "." + subSeconds;
                 }
-                color: infoBar.textColor
 
                 Mixxx.ControlProxy {
                     id: playPositionControl
@@ -160,7 +163,7 @@ Item {
                 group: root.group
                 key: "quantize"
                 checkable: true
-                activeColor: "#85c85b"
+                activeColor: Theme.deckActiveColor
                 foreground: "images/icon_quantize.svg"
             }
 
@@ -192,7 +195,7 @@ Item {
                 group: root.group
                 key: "passthrough"
                 checkable: true
-                activeColor: "#85c85b"
+                activeColor: Theme.deckActiveColor
                 foreground: "images/icon_passthrough.svg"
             }
 
@@ -218,7 +221,7 @@ Item {
             group: root.group
             key: "play"
             checkable: true
-            activeColor: "#85c85b"
+            activeColor: Theme.deckActiveColor
         }
 
         Skin.ControlButton {
@@ -231,7 +234,7 @@ Item {
             text: "cue"
             group: root.group
             key: "cue_default"
-            activeColor: "#85c85b"
+            activeColor: Theme.deckActiveColor
         }
 
         Skin.ControlButton {
@@ -244,7 +247,7 @@ Item {
             group: root.group
             key: "sync_enabled"
             checkable: true
-            activeColor: "#85c85b"
+            activeColor: Theme.deckActiveColor
         }
 
     }

diff --git a/res/skins/QMLDemo/DeckInfoBar.qml b/res/skins/QMLDemo/DeckInfoBar.qml
@@ -1,3 +1,5 @@
+import "Theme"
+import "." as Skin
 import Mixxx 0.1 as Mixxx
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
@@ -6,9 +8,8 @@ Rectangle {
     id: root
 
     required property string group
-    property color textColor: "#b0b0b0"
-    property color lineColor: "#2e2e2e"
-
+    property color textColor: Theme.deckTextColor
+    property color lineColor: Theme.deckLineColor
     radius: 5
     height: 56
 
@@ -20,7 +21,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.margins: 5
         width: height
-        color: "black"
+        color: Theme.deckLineColor
     }
 
     Item {
@@ -64,7 +65,8 @@ Rectangle {
         anchors.bottom: infoBarVSeparator.bottom
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
-
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
         color: infoBar.textColor
     }
 
@@ -89,7 +91,8 @@ Rectangle {
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
-
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
         color: infoBar.textColor
     }
 
@@ -102,6 +105,8 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: bpmControl.value.toFixed(2)
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
         color: infoBar.textColor
 
         Mixxx.ControlProxy {
@@ -119,6 +124,9 @@ Rectangle {
         anchors.right: infoBarRightSpace.right
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
 
         property real ratio: ((rateRatioControl.value - 1) * 100).toPrecision(2)
         text: (ratio > 0) ? "+" + ratio.toFixed(2) : ratio.toFixed(2)
@@ -128,8 +136,6 @@ Rectangle {
             group: root.group
             key: "rate_ratio"
         }
-
-        color: infoBar.textColor
     }
 
     Item {

diff --git a/res/skins/QMLDemo/EqColumn.qml b/res/skins/QMLDemo/EqColumn.qml
@@ -1,3 +1,4 @@
+import "Theme"
 import "." as Skin
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
@@ -11,34 +12,33 @@ Column {
     Knob {
         group: "[EqualizerRack1_" + root.group + "_Effect1]"
         key: "parameter3"
-        color: "#e3d7fb"
+        color: Theme.eqHighColor
     }
 
     Knob {
         group: "[EqualizerRack1_" + root.group + "_Effect1]"
         key: "parameter2"
-        //color: "#fca001"
-        color: "#e3d7fb"
+        color: Theme.eqMidColor
     }
 
     Knob {
         group: "[EqualizerRack1_" + root.group + "_Effect1]"
         key: "parameter1"
-        color: "#e3d7fb"
+        color: Theme.eqLowColor
     }
 
     Knob {
         group: "[QuickEffectRack1_" + root.group + "]"
         arcStyle: ShapePath.DashLine
         arcStylePattern: [2, 2]
         key: "super1"
-        color: "#ea2a4e"
+        color: Theme.eqFxColor
     }
 
     Skin.OrientationToggleButton {
         group: root.group
         key: "orientation"
-        color: "#747474"
+        color: Theme.crossfaderOrientationColor
     }
 
 }
diff --git a/res/skins/QMLDemo/InfoBarButton.qml b/res/skins/QMLDemo/InfoBarButton.qml
@@ -1,3 +1,5 @@
+import "Theme"
+import "." as Skin
 import Mixxx 0.1 as Mixxx
 import QtGraphicalEffects 1.12
 import QtQuick 2.12
@@ -9,7 +11,7 @@ AbstractButton {
     required property string group
     required property string key
     property alias foreground: foregroundImage.source
-    property color normalColor: "#2e2e2e"
+    property color normalColor: Theme.buttonNormalColor
     required property color activeColor
     property color pressedColor: activeColor
 

diff --git a/res/skins/QMLDemo/Knob.qml b/res/skins/QMLDemo/Knob.qml
@@ -1,10 +1,11 @@
+import "Theme"
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
 
 MixxxControls.Knob {
     id: root
 
-    property color color: "#858585"
+    required property color color
 
     implicitWidth: 56
     implicitHeight: width

diff --git a/res/skins/QMLDemo/Library.qml b/res/skins/QMLDemo/Library.qml
@@ -1,15 +1,19 @@
+import "Theme"
+import "." as Skin
 import Qt.labs.qmlmodels 1.0
 import QtQuick 2.12
 import QtQuick.Controls 1.4
 
 Item {
     Rectangle {
-        color: "#121213"
+        color: Theme.deckBackgroundColor
         anchors.fill: parent
 
         Text {
             text: "Library Placeholder"
-            color: "white"
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.textFontPixelSize
+            color: Theme.deckTextColor
             anchors.centerIn: parent
         }
 

diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml
@@ -1,3 +1,4 @@
+import "Theme"
 import "." as Skin
 import QtQuick 2.12
 import QtQuick.Layouts 1.11
@@ -16,7 +17,7 @@ Item {
         height: width
         group: root.group
         key: "pregain"
-        color: "#01dcfc"
+        color: Theme.gainKnobColor
     }
 
     Slider {
@@ -29,7 +30,7 @@ Item {
         anchors.bottom: pflButton.top
         group: root.group
         key: "volume"
-        barColor: "#257b82"
+        barColor: Theme.volumeSliderBarColor
         bg: "images/slider_volume.svg"
     }
 
@@ -41,7 +42,7 @@ Item {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         text: "PFL"
-        activeColor: "#257b82"
+        activeColor: Theme.pflActiveButtonColor
         checkable: true
     }
 }
diff --git a/res/skins/QMLDemo/Slider.qml b/res/skins/QMLDemo/Slider.qml
@@ -1,11 +1,13 @@
+import "Theme"
+import "." as Skin
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
 
 MixxxControls.Slider {
     id: root
 
     bar: true
-    barColor: "#257b82"
+    barColor: Theme.sliderBarColor
     barMargin: 10
     implicitWidth: handleImage.implicitWidth + 10
     implicitHeight: handleImage.implicitHeight + 10

diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml
@@ -0,0 +1,41 @@
+pragma Singleton
+import QtQuick 2.12
+
+QtObject {
+    property color white: "#e3d7fb"
+    property color yellow: "#fca001"
+    property color red: "#ea2a4e"
+    property color blue: "#01dcfc"
+    property color green: "#85c85b"
+    property color lightGray: "#747474"
+    property color lightGray2: "#b0b0b0"
+    property color midGray: "#696969"
+    property color darkGray: "#0f0f0f"
+    property color darkGray2: "#2e2e2e"
+
+    property color eqHighColor: white
+    property color eqMidColor: white
+    property color eqLowColor: white
+    property color eqFxColor: red
+
+    property color bpmSliderBarColor: green
+    property color volumeSliderBarColor: blue
+    property color gainKnobColor: blue
+    property color crossfaderOrientationColor: lightGray
+    property color crossfaderBarColor: red
+
+    property color toolbarBackgroundColor: darkGray2
+    property color pflActiveButtonColor: blue
+    property color backgroundColor: "#1e1e20"
+    property color deckActiveColor: green
+    property color deckBackgroundColor: darkGray
+    property color deckLineColor: darkGray2
+    property color deckTextColor: lightGray2
+    property color buttonNormalColor: midGray
+    property color textColor: lightGray2
+    property color toolbarActiveColor: white
+
+    property string fontFamily: "Open Sans"
+    property int textFontPixelSize: 14
+    property int buttonFontPixelSize: 10
+}
diff --git a/res/skins/QMLDemo/Theme/qmldir b/res/skins/QMLDemo/Theme/qmldir
@@ -0,0 +1 @@
+singleton Theme 0.1 Theme.qml