From 7af6d3041c48ed5e1223dd9235e6f86e5021ce1f Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Sun, 30 May 2021 20:37:25 +0200 Subject: [PATCH] skins/QMLDemo: Move styling to Theme singleton --- res/skins/QMLDemo/Button.qml | 8 +++-- res/skins/QMLDemo/CrossfaderRow.qml | 3 +- res/skins/QMLDemo/Deck.qml | 21 +++++++------ res/skins/QMLDemo/DeckInfoBar.qml | 22 +++++++++----- res/skins/QMLDemo/EqColumn.qml | 12 ++++---- res/skins/QMLDemo/InfoBarButton.qml | 4 ++- res/skins/QMLDemo/Knob.qml | 3 +- res/skins/QMLDemo/Library.qml | 8 +++-- res/skins/QMLDemo/MixerColumn.qml | 7 +++-- res/skins/QMLDemo/Slider.qml | 4 ++- res/skins/QMLDemo/Theme/Theme.qml | 41 ++++++++++++++++++++++++++ res/skins/QMLDemo/Theme/qmldir | 1 + res/skins/QMLDemo/WaveformOverview.qml | 17 +++++------ res/skins/QMLDemo/main.qml | 11 ++++--- 14 files changed, 112 insertions(+), 50 deletions(-) create mode 100644 res/skins/QMLDemo/Theme/Theme.qml create mode 100644 res/skins/QMLDemo/Theme/qmldir diff --git a/res/skins/QMLDemo/Button.qml b/res/skins/QMLDemo/Button.qml index 64cb1d85dda1..b2c7ba81c3d1 100644 --- 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 index e6208aacaa0c..c3e9fe970335 100644 --- 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 index 54cc8e3e6fa0..0827aa93be36 100644 --- 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 index d54ae617ad87..71e0ac0eaa42 100644 --- 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 index c9232e1be71a..686bde929b30 100644 --- 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,20 +12,19 @@ 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 { @@ -32,13 +32,13 @@ Column { 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 index ce45dc1fad51..add5aed06528 100644 --- 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 index 15e376f9b9a2..a4b7758de24a 100644 --- 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 index ee0ad35b48da..a093271fe9d3 100644 --- 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 index 51931883fe7d..624ac4a420e4 100644 --- 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 index e02a212403bd..52e9c79c57ed 100644 --- a/res/skins/QMLDemo/Slider.qml +++ b/res/skins/QMLDemo/Slider.qml @@ -1,3 +1,5 @@ +import "Theme" +import "." as Skin import Mixxx.Controls 0.1 as MixxxControls import QtQuick 2.12 @@ -5,7 +7,7 @@ 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 new file mode 100644 index 000000000000..74bdd718246b --- /dev/null +++ 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 new file mode 100644 index 000000000000..5023b9dc1c4c --- /dev/null +++ b/res/skins/QMLDemo/Theme/qmldir @@ -0,0 +1 @@ +singleton Theme 0.1 Theme.qml diff --git a/res/skins/QMLDemo/WaveformOverview.qml b/res/skins/QMLDemo/WaveformOverview.qml index 8ed1da2f1706..fa16270f4df1 100644 --- a/res/skins/QMLDemo/WaveformOverview.qml +++ b/res/skins/QMLDemo/WaveformOverview.qml @@ -1,3 +1,4 @@ +import "Theme" import Mixxx 0.1 as Mixxx import QtQuick 2.12 import QtQuick.Shapes 1.12 @@ -119,14 +120,13 @@ Item { id: waveformContainer anchors.fill: parent - color: "#121213" + color: Theme.deckBackgroundColor Text { anchors.centerIn: parent - font.family: "Open Sans" - font.bold: true - font.pixelSize: 11 - color: "#777777" + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + color: Theme.deckTextColor text: "Waveform Placeholder" } @@ -140,10 +140,9 @@ Item { Text { anchors.centerIn: parent - font.family: "Open Sans" - font.bold: true - font.pixelSize: 11 - color: "#777777" + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + color: Theme.deckTextColor text: "Passthrough Enabled" } diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index a44054bedd0c..6cfb31974b2a 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -1,4 +1,5 @@ import "." as Skin +import "Theme" import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.11 @@ -8,7 +9,7 @@ Rectangle { width: 1920 height: 1080 - color: "#1e1e20" + color: Theme.backgroundColor visible: true property alias show4decks: show4DecksButton.checked @@ -22,9 +23,7 @@ Rectangle { width: parent.width height: 36 - color: "#151517" - border.color: "#020202" - border.width: 1 + color: Theme.toolbarBackgroundColor radius: 1 Row { @@ -33,8 +32,8 @@ Rectangle { Skin.Button { id: show4DecksButton - text: "4 DECKS" - activeColor: "#e3d7fb" + text: "4 Decks" + activeColor: Theme.white checkable: true } }