From 068d4b9758da9469cb9a5f1651b451f1b74b1b46 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Sat, 12 Jun 2021 23:54:42 +0200 Subject: [PATCH 01/19] skins/QMLDemo: Move image sources to theme singleton --- res/skins/QMLDemo/Button.qml | 8 ++++---- res/skins/QMLDemo/CrossfaderRow.qml | 4 ++-- res/skins/QMLDemo/Deck.qml | 2 +- res/skins/QMLDemo/HotcuePopup.qml | 2 +- res/skins/QMLDemo/Knob.qml | 4 ++-- res/skins/QMLDemo/MixerColumn.qml | 2 +- res/skins/QMLDemo/Slider.qml | 2 +- res/skins/QMLDemo/Theme/Theme.qml | 10 ++++++++++ 8 files changed, 22 insertions(+), 12 deletions(-) diff --git a/res/skins/QMLDemo/Button.qml b/res/skins/QMLDemo/Button.qml index f667a118512..133ce7e213f 100644 --- a/res/skins/QMLDemo/Button.qml +++ b/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 diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index 1c1c106c7e5..21910e55e39 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -28,8 +28,8 @@ Item { key: "crossfader" barColor: Theme.crossfaderBarColor barStart: 0.5 - fg: "images/slider_handle_crossfader.svg" - bg: "images/slider_crossfader.svg" + fg: Theme.imgCrossfaderHandle + bg: Theme.imgCrossfaderBackground } Item { diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index f30c7edcee8..fb96ba9438f 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -37,7 +37,7 @@ Item { key: "rate" barStart: 0.5 barColor: Theme.bpmSliderBarColor - bg: "images/slider_bpm.svg" + bg: Theme.imgBpmSliderBackground FadeBehavior on visible { fadeTarget: rateSlider diff --git a/res/skins/QMLDemo/HotcuePopup.qml b/res/skins/QMLDemo/HotcuePopup.qml index a6a1159fcaa..7a7a76ad250 100644 --- a/res/skins/QMLDemo/HotcuePopup.qml +++ b/res/skins/QMLDemo/HotcuePopup.qml @@ -81,7 +81,7 @@ Popup { anchors.fill: parent horizontalTileMode: BorderImage.Stretch verticalTileMode: BorderImage.Stretch - source: "images/button.svg" + source: Theme.imgPopupBackground border { top: 10 diff --git a/res/skins/QMLDemo/Knob.qml b/res/skins/QMLDemo/Knob.qml index 0fddb4cd167..e139dfd2848 100644 --- a/res/skins/QMLDemo/Knob.qml +++ b/res/skins/QMLDemo/Knob.qml @@ -24,7 +24,7 @@ MixxxControls.Knob { anchors.right: parent.right height: width * 7 / 6 fillMode: Image.PreserveAspectFit - source: "images/knob_shadow.svg" + source: Theme.imgKnobShadow } background: Image { @@ -34,7 +34,7 @@ MixxxControls.Knob { anchors.left: parent.left anchors.right: parent.right height: width - source: "images/knob.svg" + source: Theme.imgKnob } foreground: Item { diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml index 8ddb5be466f..3bf93154218 100644 --- a/res/skins/QMLDemo/MixerColumn.qml +++ b/res/skins/QMLDemo/MixerColumn.qml @@ -64,7 +64,7 @@ Item { group: root.group key: "volume" barColor: Theme.volumeSliderBarColor - bg: "images/slider_volume.svg" + bg: Theme.imgVolumeSliderBackground } } diff --git a/res/skins/QMLDemo/Slider.qml b/res/skins/QMLDemo/Slider.qml index 7a5d67d0901..750cd0b1461 100644 --- a/res/skins/QMLDemo/Slider.qml +++ b/res/skins/QMLDemo/Slider.qml @@ -20,7 +20,7 @@ MixxxControls.Slider { id: handleImage visible: false - source: "images/slider_handle.svg" + source: Theme.imgSliderHandle fillMode: Image.PreserveAspectFit } diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index 4bf19a9c3b2..dcfe8796cad 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -35,4 +35,14 @@ QtObject { property string fontFamily: "Open Sans" property int textFontPixelSize: 14 property int buttonFontPixelSize: 10 + property string imgButton: "images/button.svg" + property string imgButtonPressed: "images/button_pressed.svg" + property string imgSliderHandle: "images/slider_handle.svg" + property string imgBpmSliderBackground: "images/slider_bpm.svg" + property string imgVolumeSliderBackground: "images/slider_volume.svg" + property string imgCrossfaderHandle: "images/slider_handle_crossfader.svg" + property string imgCrossfaderBackground: "images/slider_crossfader.svg" + property string imgPopupBackground: imgButton + property string imgKnob: "images/knob.svg" + property string imgKnobShadow: "images/knob_shadow.svg" } From a7b827b42010634e727f4432127cb4cbb6cf6f2f Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Sun, 13 Jun 2021 14:55:27 +0200 Subject: [PATCH 02/19] skins/QMLDemo: Add section background --- res/skins/QMLDemo/CrossfaderRow.qml | 42 +++++++++++++++----- res/skins/QMLDemo/Deck.qml | 9 +++++ res/skins/QMLDemo/DeckInfoBar.qml | 13 +++++-- res/skins/QMLDemo/DeckRow.qml | 4 +- res/skins/QMLDemo/Mixer.qml | 51 ++++++++++++++++--------- res/skins/QMLDemo/SectionBackground.qml | 16 ++++++++ res/skins/QMLDemo/Theme/Theme.qml | 2 + res/skins/QMLDemo/images/section.svg | 2 + res/skins/QMLDemo/main.qml | 10 ++--- 9 files changed, 107 insertions(+), 42 deletions(-) create mode 100644 res/skins/QMLDemo/SectionBackground.qml create mode 100644 res/skins/QMLDemo/images/section.svg diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index 21910e55e39..b0bbc07fb05 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -8,36 +8,58 @@ Item { property real crossfaderWidth // required - implicitHeight: crossfaderSlider.height + 5 + implicitHeight: crossfader.height Item { id: effectUnitLeftPlaceholder anchors.top: parent.top anchors.left: parent.left + anchors.right: crossfader.left anchors.bottom: parent.bottom + + Skin.SectionBackground { + anchors.fill: parent + } + } - 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: Theme.imgCrossfaderHandle - bg: Theme.imgCrossfaderBackground + height: crossfaderSlider.height + 20 + + Skin.ControlSlider { + id: crossfaderSlider + + anchors.left: parent.left + anchors.right: parent.right + 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 anchors.top: parent.top + anchors.left: crossfader.right anchors.right: parent.right anchors.bottom: parent.bottom + + Skin.SectionBackground { + anchors.fill: parent + } + } } diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index fb96ba9438f..bc4fa84ccbf 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -13,10 +13,16 @@ Item { property bool minimized: false property var deckPlayer: Mixxx.PlayerManager.getPlayer(group) + Skin.SectionBackground { + anchors.fill: parent + } + Skin.DeckInfoBar { id: infoBar anchors.leftMargin: 5 + anchors.topMargin: 5 + anchors.rightMargin: 5 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -28,6 +34,7 @@ Item { visible: !root.minimized anchors.topMargin: 5 + anchors.rightMargin: 5 anchors.bottomMargin: 5 anchors.top: infoBar.bottom anchors.right: parent.right @@ -298,6 +305,8 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 5 + anchors.rightMargin: 5 + anchors.bottomMargin: 5 height: 56 visible: !root.minimized diff --git a/res/skins/QMLDemo/DeckInfoBar.qml b/res/skins/QMLDemo/DeckInfoBar.qml index de084eaa99d..39698b79071 100644 --- a/res/skins/QMLDemo/DeckInfoBar.qml +++ b/res/skins/QMLDemo/DeckInfoBar.qml @@ -13,6 +13,8 @@ Rectangle { property color textColor: Theme.deckTextColor property color lineColor: Theme.deckLineColor + border.width: 2 + border.color: Theme.deckBackgroundColor radius: 5 height: 56 @@ -226,15 +228,18 @@ Rectangle { orientation: Gradient.Horizontal GradientStop { - position: -0.75 + position: 0 color: { - let trackColor = root.deckPlayer.color; - return trackColor ? trackColor : Theme.deckBackgroundColor; + const trackColor = root.deckPlayer.color; + if (!trackColor.valid) + return Theme.deckBackgroundColor; + + return Qt.darker(root.deckPlayer.color, 2); } } GradientStop { - position: 0.5 + position: 1 color: Theme.deckBackgroundColor } diff --git a/res/skins/QMLDemo/DeckRow.qml b/res/skins/QMLDemo/DeckRow.qml index 22506ecba1a..b4f9cb96a07 100644 --- a/res/skins/QMLDemo/DeckRow.qml +++ b/res/skins/QMLDemo/DeckRow.qml @@ -22,7 +22,7 @@ Item { PropertyChanges { target: root - implicitHeight: 56 + implicitHeight: 66 } AnchorChanges { @@ -75,7 +75,6 @@ Item { anchors.top: parent.top anchors.left: parent.left anchors.bottom: parent.bottom - anchors.rightMargin: 5 group: root.leftDeckGroup } @@ -100,7 +99,6 @@ Item { anchors.top: parent.top anchors.right: parent.right anchors.bottom: parent.bottom - anchors.leftMargin: 5 group: root.rightDeckGroup } diff --git a/res/skins/QMLDemo/Mixer.qml b/res/skins/QMLDemo/Mixer.qml index 9dc04e9591e..3a208f1e3fb 100644 --- a/res/skins/QMLDemo/Mixer.qml +++ b/res/skins/QMLDemo/Mixer.qml @@ -1,35 +1,50 @@ +import "." as Skin import QtQuick 2.12 import QtQuick.Controls 2.12 -Row { +Item { id: mixer property string leftDeckGroup // required property string rightDeckGroup // required property bool show4decks: false - spacing: 5 + implicitWidth: content.width + 10 + implicitHeight: content.height + 10 - EqColumn { - group: root.leftDeckGroup + Skin.SectionBackground { + anchors.fill: parent } - MixerColumn { - width: 56 - height: parent.height - group: root.leftDeckGroup - } + Row { + id: content - MixerColumn { - width: 56 - height: parent.height - group: root.rightDeckGroup - } + spacing: 5 + anchors.centerIn: parent + anchors.margins: 5 + + EqColumn { + group: root.leftDeckGroup + } + + MixerColumn { + width: 56 + height: parent.height + group: root.leftDeckGroup + } + + MixerColumn { + width: 56 + height: parent.height + group: root.rightDeckGroup + } + + EqColumn { + width: 56 + height: parent.height + group: root.rightDeckGroup + } - EqColumn { - width: 56 - height: parent.height - group: root.rightDeckGroup } } diff --git a/res/skins/QMLDemo/SectionBackground.qml b/res/skins/QMLDemo/SectionBackground.qml new file mode 100644 index 00000000000..ba87d98c60b --- /dev/null +++ b/res/skins/QMLDemo/SectionBackground.qml @@ -0,0 +1,16 @@ +import QtQuick 2.12 +import "Theme" + +BorderImage { + horizontalTileMode: BorderImage.Stretch + verticalTileMode: BorderImage.Stretch + source: Theme.imgSectionBackground + + border { + top: 10 + left: 10 + right: 10 + bottom: 10 + } + +} diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index dcfe8796cad..2b07bcd333c 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -29,6 +29,7 @@ QtObject { property color knobBackgroundColor: "#262626" property color deckLineColor: darkGray2 property color deckTextColor: lightGray2 + property color embeddedBackgroundColor: "#a0000000" property color buttonNormalColor: midGray property color textColor: lightGray2 property color toolbarActiveColor: white @@ -45,4 +46,5 @@ QtObject { property string imgPopupBackground: imgButton property string imgKnob: "images/knob.svg" property string imgKnobShadow: "images/knob_shadow.svg" + property string imgSectionBackground: "images/section.svg" } diff --git a/res/skins/QMLDemo/images/section.svg b/res/skins/QMLDemo/images/section.svg new file mode 100644 index 00000000000..d36770819bf --- /dev/null +++ b/res/skins/QMLDemo/images/section.svg @@ -0,0 +1,2 @@ + + diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 9a4a3f643bc..933eee3304c 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -17,7 +17,6 @@ Rectangle { Column { anchors.fill: parent - spacing: 10 Rectangle { id: toolbar @@ -56,8 +55,7 @@ Rectangle { leftDeckGroup: "[Channel1]" rightDeckGroup: "[Channel2]" - width: parent.width - 10 - x: 5 + width: parent.width minimized: root.maximizeLibrary } @@ -65,8 +63,7 @@ Rectangle { id: crossfader crossfaderWidth: decks12.mixer.width - width: parent.width - 10 - x: 5 + width: parent.width visible: !root.maximizeLibrary FadeBehavior on visible { @@ -80,8 +77,7 @@ Rectangle { leftDeckGroup: "[Channel3]" rightDeckGroup: "[Channel4]" - width: parent.width - 10 - x: 5 + width: parent.width minimized: root.maximizeLibrary visible: root.show4decks From 809a57b16642e821f5f080eab72e3f2ef75285ec Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Sun, 13 Jun 2021 16:43:16 +0200 Subject: [PATCH 03/19] skins/QMLDemo: Add sampler row --- res/skins/QMLDemo/ControlMiniKnob.qml | 22 +++ res/skins/QMLDemo/EmbeddedBackground.qml | 10 ++ res/skins/QMLDemo/MiniKnob.qml | 58 +++++++ res/skins/QMLDemo/Sampler.qml | 159 +++++++++++++++++++ res/skins/QMLDemo/SamplerRow.qml | 18 +++ res/skins/QMLDemo/Theme/Theme.qml | 2 + res/skins/QMLDemo/images/miniknob.svg | 2 + res/skins/QMLDemo/images/miniknob_shadow.svg | 2 + res/skins/QMLDemo/main.qml | 21 +++ 9 files changed, 294 insertions(+) create mode 100644 res/skins/QMLDemo/ControlMiniKnob.qml create mode 100644 res/skins/QMLDemo/EmbeddedBackground.qml create mode 100644 res/skins/QMLDemo/MiniKnob.qml create mode 100644 res/skins/QMLDemo/Sampler.qml create mode 100644 res/skins/QMLDemo/SamplerRow.qml create mode 100644 res/skins/QMLDemo/images/miniknob.svg create mode 100644 res/skins/QMLDemo/images/miniknob_shadow.svg diff --git a/res/skins/QMLDemo/ControlMiniKnob.qml b/res/skins/QMLDemo/ControlMiniKnob.qml new file mode 100644 index 00000000000..5cdffcac25a --- /dev/null +++ b/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() + } + +} diff --git a/res/skins/QMLDemo/EmbeddedBackground.qml b/res/skins/QMLDemo/EmbeddedBackground.qml new file mode 100644 index 00000000000..657b3903bbd --- /dev/null +++ b/res/skins/QMLDemo/EmbeddedBackground.qml @@ -0,0 +1,10 @@ +import QtQuick 2.12 +import "Theme" + +Rectangle { + id: root + + border.width: 2 + border.color: Theme.deckBackgroundColor + radius: 5 +} diff --git a/res/skins/QMLDemo/MiniKnob.qml b/res/skins/QMLDemo/MiniKnob.qml new file mode 100644 index 00000000000..1a738428dd2 --- /dev/null +++ b/res/skins/QMLDemo/MiniKnob.qml @@ -0,0 +1,58 @@ +import Mixxx.Controls 0.1 as MixxxControls +import QtQuick 2.12 +import "Theme" + +MixxxControls.Knob { + id: root + + property color color // required + + implicitWidth: background.width + implicitHeight: implicitWidth + arc: true + arcRadius: width * 0.45 + arcOffsetY: width * 0.01 + arcColor: root.color + 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: Theme.imgKnobMiniShadow + } + + background: Image { + id: background + + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + height: width + source: Theme.imgKnobMini + } + + foreground: Item { + 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: 10 + y: height + color: root.color + } + + } + +} diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml new file mode 100644 index 00000000000..02b2a8dcc71 --- /dev/null +++ b/res/skins/QMLDemo/Sampler.qml @@ -0,0 +1,159 @@ +import "." as Skin +import Mixxx 0.1 as Mixxx +import Mixxx.Controls 0.1 as MixxxControls +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.11 +import "Theme" + +Rectangle { + id: root + + property string group // required + property bool minimized: false + property var deckPlayer: Mixxx.PlayerManager.getPlayer(group) + + color: { + const trackColor = root.deckPlayer.color; + if (!trackColor.valid) + return Theme.backgroundColor; + + return Qt.darker(root.deckPlayer.color, 2); + } + implicitHeight: gainKnob.height + 10 + + Skin.SectionBackground { + anchors.fill: parent + } + + Skin.EmbeddedBackground { + id: embedded + + anchors.margins: 5 + anchors.top: parent.top + anchors.left: parent.left + anchors.right: vuMeter.left + anchors.bottom: parent.bottom + color: Theme.deckBackgroundColor + } + + Skin.ControlMiniKnob { + id: gainKnob + + anchors.margins: 5 + anchors.top: parent.top + anchors.right: parent.right + height: 40 + width: 40 + group: root.group + key: "pregain" + color: Theme.gainKnobColor + } + + Skin.ControlButton { + id: playButton + + anchors.top: embedded.top + anchors.left: embedded.left + activeColor: Theme.gainKnobColor + width: 40 + height: 40 + text: "Play" + group: root.group + key: "play" + highlight: playControl.value + + Mixxx.ControlProxy { + id: playControl + + group: root.group + key: "play_indicator" + } + + } + + Text { + id: label + + text: root.deckPlayer.title + anchors.top: embedded.top + anchors.left: playButton.right + anchors.right: embedded.right + anchors.margins: 5 + elide: Text.ElideRight + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + color: Theme.deckTextColor + } + + Rectangle { + id: progressContainer + + anchors.margins: 5 + anchors.left: playButton.right + anchors.right: embedded.right + anchors.bottom: embedded.bottom + height: 5 + radius: height / 2 + color: "transparent" + border.color: Theme.deckLineColor + border.width: 1 + + Rectangle { + antialiasing: false // for performance reasons + width: playPositionControl.value * parent.width + height: parent.height + radius: height / 2 + color: Theme.gainKnobColor + + Mixxx.ControlProxy { + id: playPositionControl + + group: root.group + key: "playposition" + } + + } + + MouseArea { + id: mousearea + + anchors.fill: progressContainer + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onPressed: { + playPositionControl.value = mouse.x / mousearea.width; + } + onPositionChanged: { + if (containsPress) + playPositionControl.value = mouse.x / width; + + } + } + + } + + Skin.VuMeter { + id: vuMeter + + group: root.group + key: "VuMeter" + width: 4 + anchors.margins: 5 + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: gainKnob.left + } + + DropArea { + anchors.fill: parent + onDropped: { + if (drop.hasUrls) { + let url = drop.urls[0]; + console.log("Dropped URL '" + url + "' on deck " + root.group); + root.deckPlayer.loadTrackFromLocationUrl(url); + } + } + } + +} diff --git a/res/skins/QMLDemo/SamplerRow.qml b/res/skins/QMLDemo/SamplerRow.qml new file mode 100644 index 00000000000..5b818c921d3 --- /dev/null +++ b/res/skins/QMLDemo/SamplerRow.qml @@ -0,0 +1,18 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Layouts 1.12 + +RowLayout { + spacing: 0 + + Repeater { + model: 8 + + Skin.Sampler { + Layout.fillWidth: true + group: "[Sampler" + (index + 1) + "]" + } + + } + +} diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index 2b07bcd333c..a34043da011 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -46,5 +46,7 @@ QtObject { property string imgPopupBackground: imgButton property string imgKnob: "images/knob.svg" property string imgKnobShadow: "images/knob_shadow.svg" + property string imgKnobMini: "images/miniknob.svg" + property string imgKnobMiniShadow: "images/miniknob_shadow.svg" property string imgSectionBackground: "images/section.svg" } diff --git a/res/skins/QMLDemo/images/miniknob.svg b/res/skins/QMLDemo/images/miniknob.svg new file mode 100644 index 00000000000..2c08c5bf93c --- /dev/null +++ b/res/skins/QMLDemo/images/miniknob.svg @@ -0,0 +1,2 @@ + + diff --git a/res/skins/QMLDemo/images/miniknob_shadow.svg b/res/skins/QMLDemo/images/miniknob_shadow.svg new file mode 100644 index 00000000000..19d4caa480a --- /dev/null +++ b/res/skins/QMLDemo/images/miniknob_shadow.svg @@ -0,0 +1,2 @@ + + diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 933eee3304c..8447c2cf255 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -8,6 +8,7 @@ Rectangle { id: root property alias show4decks: show4DecksButton.checked + property alias showSamplers: showSamplersButton.checked property alias maximizeLibrary: maximizeLibraryButton.checked width: 1920 @@ -46,6 +47,14 @@ Rectangle { checkable: true } + Skin.Button { + id: showSamplersButton + + text: "Sampler" + activeColor: Theme.white + checkable: true + } + } } @@ -87,6 +96,18 @@ Rectangle { } + SamplerRow { + id: samplers + + width: parent.width + visible: root.showSamplers + + FadeBehavior on visible { + fadeTarget: samplers + } + + } + Library { width: parent.width height: parent.height - y From e04eb9a9670c54f8e813c9c01da7433c9ec33efe Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 00:14:48 +0200 Subject: [PATCH 04/19] QML: Add arcStart property to Knob control --- res/skins/QMLDemo/Mixxx/Controls/Knob.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml index ad7a709b1a3..9b4f1a7bd3e 100644 --- a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml +++ b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml @@ -15,6 +15,7 @@ Item { property real angle: 130 property bool arc: false property real arcRadius: width / 2 + property real arcStart: (max - min) / 2 property real arcOffsetX: 0 property real arcOffsetY: 0 property alias arcColor: arcPath.strokeColor @@ -50,8 +51,8 @@ Item { fillColor: "transparent" PathAngleArc { - startAngle: -90 - sweepAngle: (root.value - (root.max - root.min) / 2) * 2 * root.angle + startAngle: -90 + root.angle * 2 * (root.arcStart - (root.max - root.min) / 2) + sweepAngle: (root.value - root.arcStart) * 2 * root.angle radiusX: root.arcRadius radiusY: root.arcRadius centerX: root.width / 2 + root.arcOffsetX From fb16c6da6517e30ca783604b87270139109ffe23 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 00:16:03 +0200 Subject: [PATCH 05/19] skins/QMLDemo: Add basic effect units --- res/skins/QMLDemo/ComboBox.qml | 65 +++++++++++++++++ res/skins/QMLDemo/CrossfaderRow.qml | 20 ++---- res/skins/QMLDemo/EffectUnit.qml | 104 ++++++++++++++++++++++++++++ res/skins/QMLDemo/Theme/Theme.qml | 2 + 4 files changed, 177 insertions(+), 14 deletions(-) create mode 100644 res/skins/QMLDemo/ComboBox.qml create mode 100644 res/skins/QMLDemo/EffectUnit.qml diff --git a/res/skins/QMLDemo/ComboBox.qml b/res/skins/QMLDemo/ComboBox.qml new file mode 100644 index 00000000000..539de34449e --- /dev/null +++ b/res/skins/QMLDemo/ComboBox.qml @@ -0,0 +1,65 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import "Theme" + +ComboBox { + id: root + + background: Skin.EmbeddedBackground { + color: Theme.embeddedBackgroundColor + } + + 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 { + color: Theme.embeddedBackgroundColor + } + + } + +} diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index b0bbc07fb05..922e42b8047 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -10,18 +10,14 @@ Item { implicitHeight: crossfader.height - Item { - id: effectUnitLeftPlaceholder + Skin.EffectUnit { + id: effectUnit1 anchors.top: parent.top anchors.left: parent.left anchors.right: crossfader.left anchors.bottom: parent.bottom - - Skin.SectionBackground { - anchors.fill: parent - } - + unitNumber: 1 } Skin.SectionBackground { @@ -48,18 +44,14 @@ Item { } - Item { - id: effectUnitRightPlaceholder + Skin.EffectUnit { + id: effectUnit2 anchors.top: parent.top anchors.left: crossfader.right anchors.right: parent.right anchors.bottom: parent.bottom - - Skin.SectionBackground { - anchors.fill: parent - } - + unitNumber: 2 } } diff --git a/res/skins/QMLDemo/EffectUnit.qml b/res/skins/QMLDemo/EffectUnit.qml new file mode 100644 index 00000000000..3961603b9de --- /dev/null +++ b/res/skins/QMLDemo/EffectUnit.qml @@ -0,0 +1,104 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 +import "Theme" + +Item { + property int unitNumber // required + + Skin.SectionBackground { + anchors.fill: parent + } + + RowLayout { + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: effectSuperKnobFrame.left + anchors.rightMargin: 5 + + Repeater { + model: 3 + + Item { + id: effect + + property string group: "[EffectRack1_EffectUnit" + unitNumber + "_Effect" + (index + 1) + "]" + + height: 50 + Layout.fillWidth: true + + Skin.ControlButton { + id: effectEnableButton + + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.margins: 5 + width: 40 + group: parent.group + key: "enabled" + toggleable: true + text: "ON" + activeColor: Theme.effectColor + } + + Skin.ComboBox { + id: effectSelector + + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: effectEnableButton.right + anchors.right: effectMetaKnob.left + anchors.margins: 5 + // TODO: Add a way to retrieve effect names here + model: ["---", "Effect 1", "Effect 2", "Effect 3", "Effect 4"] + } + + Skin.ControlMiniKnob { + id: effectMetaKnob + + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.margins: 5 + arcStart: 0 + width: 40 + group: parent.group + key: "meta" + color: Theme.effectColor + } + + } + + } + + } + + Rectangle { + id: effectSuperKnobFrame + + anchors.margins: 5 + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + width: height + color: Theme.knobBackgroundColor + radius: 5 + + Skin.ControlKnob { + id: effectSuperKnob + + anchors.centerIn: parent + width: 48 + height: 48 + arcStart: 0 + group: "[EffectRack1_EffectUnit" + unitNumber + "]" + key: "super1" + color: Theme.effectUnitColor + } + + } + +} diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index a34043da011..010b654c128 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -16,6 +16,8 @@ QtObject { property color eqMidColor: white property color eqLowColor: white property color eqFxColor: red + property color effectColor: yellow + property color effectUnitColor: red property color bpmSliderBarColor: green property color volumeSliderBarColor: blue property color gainKnobColor: blue From 5fb7a98394985f9f1fd4b43f6605d560d9c0dce4 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 00:48:01 +0200 Subject: [PATCH 06/19] skins/QMLDemo: Move effects to separate row --- res/skins/QMLDemo/CrossfaderRow.qml | 20 -------------------- res/skins/QMLDemo/EffectRow.qml | 26 ++++++++++++++++++++++++++ res/skins/QMLDemo/main.qml | 21 +++++++++++++++++++++ 3 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 res/skins/QMLDemo/EffectRow.qml diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index 922e42b8047..fffedf67e22 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -10,16 +10,6 @@ Item { implicitHeight: crossfader.height - Skin.EffectUnit { - id: effectUnit1 - - anchors.top: parent.top - anchors.left: parent.left - anchors.right: crossfader.left - anchors.bottom: parent.bottom - unitNumber: 1 - } - Skin.SectionBackground { id: crossfader @@ -44,14 +34,4 @@ Item { } - Skin.EffectUnit { - id: effectUnit2 - - anchors.top: parent.top - anchors.left: crossfader.right - anchors.right: parent.right - anchors.bottom: parent.bottom - unitNumber: 2 - } - } diff --git a/res/skins/QMLDemo/EffectRow.qml b/res/skins/QMLDemo/EffectRow.qml new file mode 100644 index 00000000000..b57f926d28f --- /dev/null +++ b/res/skins/QMLDemo/EffectRow.qml @@ -0,0 +1,26 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +Row { + id: root + + height: 60 + + Skin.EffectUnit { + id: effectUnit1 + + width: root.width / 2 + height: root.height + unitNumber: 1 + } + + Skin.EffectUnit { + id: effectUnit2 + + width: root.width / 2 + height: root.height + unitNumber: 2 + } + +} diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 8447c2cf255..5ff7b56db8b 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -8,6 +8,7 @@ Rectangle { id: root property alias show4decks: show4DecksButton.checked + property alias showEffects: showEffectsButton.checked property alias showSamplers: showSamplersButton.checked property alias maximizeLibrary: maximizeLibraryButton.checked @@ -47,6 +48,14 @@ Rectangle { checkable: true } + Skin.Button { + id: showEffectsButton + + text: "Effects" + activeColor: Theme.white + checkable: true + } + Skin.Button { id: showSamplersButton @@ -108,6 +117,18 @@ Rectangle { } + EffectRow { + id: effects + + width: parent.width + visible: root.showEffects + + FadeBehavior on visible { + fadeTarget: effects + } + + } + Library { width: parent.width height: parent.height - y From 2da6388e54cc4e0b9d3e52f2b7030d1066de388b Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 01:32:17 +0200 Subject: [PATCH 07/19] skins/QMLDemo: Add basic microphone/aux inputs to crossfader row --- res/skins/QMLDemo/AuxiliaryUnit.qml | 64 ++++++++++++++++++++++++++ res/skins/QMLDemo/CrossfaderRow.qml | 61 +++++++++++++++++++++++++ res/skins/QMLDemo/MicrophoneUnit.qml | 68 ++++++++++++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 res/skins/QMLDemo/AuxiliaryUnit.qml create mode 100644 res/skins/QMLDemo/MicrophoneUnit.qml diff --git a/res/skins/QMLDemo/AuxiliaryUnit.qml b/res/skins/QMLDemo/AuxiliaryUnit.qml new file mode 100644 index 00000000000..8524919c95f --- /dev/null +++ b/res/skins/QMLDemo/AuxiliaryUnit.qml @@ -0,0 +1,64 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 +import "Theme" + +Row { + id: root + + property string group // required + + 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.ControlButton { + id: pflButton + + group: root.group + key: "pfl" + text: "PFL" + activeColor: Theme.pflActiveButtonColor + toggleable: true + } + + Skin.OrientationToggleButton { + group: root.group + key: "orientation" + color: Theme.crossfaderOrientationColor + } + + } + +} diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index fffedf67e22..e0c7cb08c15 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -10,6 +10,38 @@ Item { implicitHeight: crossfader.height + Skin.SectionBackground { + anchors.fill: microphoneRow + } + + Row { + id: microphoneRow + + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: crossfader.left + padding: 5 + spacing: 20 + + Skin.MicrophoneUnit { + group: "[Microphone]" + } + + Skin.MicrophoneUnit { + group: "[Microphone2]" + } + + Skin.MicrophoneUnit { + group: "[Microphone3]" + } + + Skin.MicrophoneUnit { + group: "[Microphone4]" + } + + } + Skin.SectionBackground { id: crossfader @@ -34,4 +66,33 @@ Item { } + Row { + id: auxiliaryRow + + anchors.left: crossfader.right + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + layoutDirection: Qt.RightToLeft + padding: 5 + spacing: 20 + + Skin.AuxiliaryUnit { + group: "[Auxiliary4]" + } + + Skin.AuxiliaryUnit { + group: "[Auxiliary3]" + } + + Skin.AuxiliaryUnit { + group: "[Auxiliary2]" + } + + Skin.AuxiliaryUnit { + group: "[Auxiliary1]" + } + + } + } diff --git a/res/skins/QMLDemo/MicrophoneUnit.qml b/res/skins/QMLDemo/MicrophoneUnit.qml new file mode 100644 index 00000000000..e562f6d22c0 --- /dev/null +++ b/res/skins/QMLDemo/MicrophoneUnit.qml @@ -0,0 +1,68 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 +import "Theme" + +Row { + id: root + + property string group // required + + 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.ControlButton { + id: pflButton + + group: root.group + key: "pfl" + text: "PFL" + activeColor: Theme.pflActiveButtonColor + toggleable: true + } + + Skin.ControlButton { + id: talkButton + + group: root.group + key: "talkover" + text: "Talk" + activeColor: Theme.pflActiveButtonColor + toggleable: true + } + + } + +} From 2b24fe3b09d7cc41d90d32cea93a967451c00820 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 22:09:49 +0200 Subject: [PATCH 08/19] skins/QMLDemo: Improve microphone/aux units and add ducking controls --- res/skins/QMLDemo/AuxiliaryUnit.qml | 77 ++++++++++++++- res/skins/QMLDemo/CrossfaderRow.qml | 73 ++++++++++++--- res/skins/QMLDemo/MicrophoneUnit.qml | 93 ++++++++++++++++++- res/skins/QMLDemo/Slider.qml | 2 +- res/skins/QMLDemo/Theme/Theme.qml | 2 + .../images/slider_handle_micducking.svg | 2 + .../QMLDemo/images/slider_micducking.svg | 2 + 7 files changed, 232 insertions(+), 19 deletions(-) create mode 100644 res/skins/QMLDemo/images/slider_handle_micducking.svg create mode 100644 res/skins/QMLDemo/images/slider_micducking.svg diff --git a/res/skins/QMLDemo/AuxiliaryUnit.qml b/res/skins/QMLDemo/AuxiliaryUnit.qml index 8524919c95f..61f86dd21a9 100644 --- a/res/skins/QMLDemo/AuxiliaryUnit.qml +++ b/res/skins/QMLDemo/AuxiliaryUnit.qml @@ -7,7 +7,8 @@ import "Theme" Row { id: root - property string group // required + property int unitNumber // required + property string group: "[Auxiliary" + unitNumber + "]" spacing: 5 @@ -43,6 +44,19 @@ Row { } Column { + Text { + width: parent.width + height: root.height / 2 + text: "AUX " + root.unitNumber + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + font.bold: true + color: Theme.buttonNormalColor + } + Skin.ControlButton { id: pflButton @@ -53,12 +67,73 @@ Row { toggleable: true } + } + + Skin.EmbeddedBackground { + id: embedded + + color: Theme.embeddedBackgroundColor + 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: Text { + anchors.centerIn: parent + text: "FX1" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.family: Theme.fontFamily + font.pixelSize: Theme.buttonFontPixelSize + font.bold: true + color: Theme.deckTextColor + } + + } + + 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: Text { + anchors.centerIn: parent + text: "FX2" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.family: Theme.fontFamily + font.pixelSize: Theme.buttonFontPixelSize + font.bold: true + color: Theme.deckTextColor + } + + } + } } diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index e0c7cb08c15..50e0f942057 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/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" @@ -17,27 +18,72 @@ Item { Row { id: microphoneRow - anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom + anchors.left: parent.left anchors.right: crossfader.left + layoutDirection: Qt.RightToLeft padding: 5 - spacing: 20 + spacing: 10 Skin.MicrophoneUnit { - group: "[Microphone]" + unitNumber: 1 } Skin.MicrophoneUnit { - group: "[Microphone2]" + unitNumber: 2 } Skin.MicrophoneUnit { - group: "[Microphone3]" + unitNumber: 3 } Skin.MicrophoneUnit { - group: "[Microphone4]" + unitNumber: 4 + } + + Column { + Skin.ControlSlider { + width: 50 + height: 26 + orientation: Qt.Horizontal + group: "[Master]" + key: "duckStrength" + barColor: Theme.crossfaderBarColor + barStart: 1 + fg: Theme.imgMicDuckingSliderHandle + bg: Theme.imgMicDuckingSlider + } + + Skin.Button { + id: pflButton + + text: { + switch (duckingControl.value) { + case 1: + return "Auto"; + case 2: + return "Manual"; + default: + return "Off"; + } + } + activeColor: Theme.pflActiveButtonColor + highlight: { + let value = duckingControl.value; + return (value == 1 || value == 2); + } + onClicked: duckingControl.value = (duckingControl.value + 1) % 3 + + Mixxx.ControlProxy { + id: duckingControl + + group: "[Master]" + key: "talkoverDucking" + } + + } + } } @@ -73,24 +119,27 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right - layoutDirection: Qt.RightToLeft padding: 5 - spacing: 20 + spacing: 10 Skin.AuxiliaryUnit { - group: "[Auxiliary4]" + layoutDirection: Qt.RightToLeft + unitNumber: 1 } Skin.AuxiliaryUnit { - group: "[Auxiliary3]" + layoutDirection: Qt.RightToLeft + unitNumber: 2 } Skin.AuxiliaryUnit { - group: "[Auxiliary2]" + layoutDirection: Qt.RightToLeft + unitNumber: 3 } Skin.AuxiliaryUnit { - group: "[Auxiliary1]" + layoutDirection: Qt.RightToLeft + unitNumber: 4 } } diff --git a/res/skins/QMLDemo/MicrophoneUnit.qml b/res/skins/QMLDemo/MicrophoneUnit.qml index e562f6d22c0..db70f6e69fc 100644 --- a/res/skins/QMLDemo/MicrophoneUnit.qml +++ b/res/skins/QMLDemo/MicrophoneUnit.qml @@ -7,7 +7,8 @@ import "Theme" Row { id: root - property string group // required + property int unitNumber // required + property string group: unitNumber === 1 ? "[Microphone]" : "[Microphone" + unitNumber + "]" spacing: 5 @@ -43,6 +44,19 @@ Row { } Column { + Text { + width: parent.width + height: root.height / 2 + text: "MIC " + root.unitNumber + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + font.bold: true + color: Theme.buttonNormalColor + } + Skin.ControlButton { id: pflButton @@ -53,14 +67,83 @@ Row { toggleable: true } - Skin.ControlButton { + } + + Skin.EmbeddedBackground { + id: embedded + + color: Theme.embeddedBackgroundColor + height: parent.height + width: 56 + + Skin.InfoBarButton { id: talkButton + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.verticalCenter group: root.group key: "talkover" - text: "Talk" - activeColor: Theme.pflActiveButtonColor - toggleable: true + activeColor: Theme.deckActiveColor + + foreground: Text { + anchors.centerIn: parent + text: "TALK" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.family: Theme.fontFamily + font.pixelSize: Theme.buttonFontPixelSize + font.bold: true + color: Theme.deckTextColor + } + + } + + 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: Text { + anchors.centerIn: parent + text: "FX1" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.family: Theme.fontFamily + font.pixelSize: Theme.buttonFontPixelSize + font.bold: true + color: Theme.deckTextColor + } + + } + + 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: Text { + anchors.centerIn: parent + text: "FX2" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.family: Theme.fontFamily + font.pixelSize: Theme.buttonFontPixelSize + font.bold: true + color: Theme.deckTextColor + } + } } diff --git a/res/skins/QMLDemo/Slider.qml b/res/skins/QMLDemo/Slider.qml index 750cd0b1461..7d7a83006d7 100644 --- a/res/skins/QMLDemo/Slider.qml +++ b/res/skins/QMLDemo/Slider.qml @@ -49,7 +49,7 @@ MixxxControls.Slider { id: backgroundImage anchors.fill: parent - anchors.margins: 10 + anchors.margins: root.barMargin } } diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index 010b654c128..9967bfa959a 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -45,6 +45,8 @@ QtObject { property string imgVolumeSliderBackground: "images/slider_volume.svg" property string imgCrossfaderHandle: "images/slider_handle_crossfader.svg" property string imgCrossfaderBackground: "images/slider_crossfader.svg" + property string imgMicDuckingSliderHandle: "images/slider_handle_micducking.svg" + property string imgMicDuckingSlider: "images/slider_micducking.svg" property string imgPopupBackground: imgButton property string imgKnob: "images/knob.svg" property string imgKnobShadow: "images/knob_shadow.svg" diff --git a/res/skins/QMLDemo/images/slider_handle_micducking.svg b/res/skins/QMLDemo/images/slider_handle_micducking.svg new file mode 100644 index 00000000000..9d13c70fbf8 --- /dev/null +++ b/res/skins/QMLDemo/images/slider_handle_micducking.svg @@ -0,0 +1,2 @@ + + diff --git a/res/skins/QMLDemo/images/slider_micducking.svg b/res/skins/QMLDemo/images/slider_micducking.svg new file mode 100644 index 00000000000..b0bf656deb1 --- /dev/null +++ b/res/skins/QMLDemo/images/slider_micducking.svg @@ -0,0 +1,2 @@ + + From 9d88f9f115268adb412971327da493601632428b Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Mon, 14 Jun 2021 22:13:07 +0200 Subject: [PATCH 09/19] skins/QMLDemo: Fix crossfader margins --- res/skins/QMLDemo/CrossfaderRow.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index 50e0f942057..d429feff4ac 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -100,6 +100,8 @@ Item { anchors.left: parent.left anchors.right: parent.right + anchors.leftMargin: 5 + anchors.rightMargin: 5 anchors.verticalCenter: parent.verticalCenter orientation: Qt.Horizontal group: "[Master]" From f88fb1a2353aead8ac1cabc8ee062bca53ba8758 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 10:13:37 +0200 Subject: [PATCH 10/19] skins/QMLDemo: Use explicit id in EffectUnit instead of "parent" --- res/skins/QMLDemo/EffectUnit.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/skins/QMLDemo/EffectUnit.qml b/res/skins/QMLDemo/EffectUnit.qml index 3961603b9de..02b89d26d2a 100644 --- a/res/skins/QMLDemo/EffectUnit.qml +++ b/res/skins/QMLDemo/EffectUnit.qml @@ -37,7 +37,7 @@ Item { anchors.bottom: parent.bottom anchors.margins: 5 width: 40 - group: parent.group + group: effect.group key: "enabled" toggleable: true text: "ON" @@ -65,7 +65,7 @@ Item { anchors.margins: 5 arcStart: 0 width: 40 - group: parent.group + group: effect.group key: "meta" color: Theme.effectColor } From ca6d7d814a4c3773535bda884f4b3f3ce1e2b9eb Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 10:16:45 +0200 Subject: [PATCH 11/19] skins/QMLDemo: Move EmbeddedBackground color into component --- res/skins/QMLDemo/AuxiliaryUnit.qml | 1 - res/skins/QMLDemo/ComboBox.qml | 2 -- res/skins/QMLDemo/EmbeddedBackground.qml | 1 + res/skins/QMLDemo/MicrophoneUnit.qml | 1 - res/skins/QMLDemo/Sampler.qml | 1 - 5 files changed, 1 insertion(+), 5 deletions(-) diff --git a/res/skins/QMLDemo/AuxiliaryUnit.qml b/res/skins/QMLDemo/AuxiliaryUnit.qml index 61f86dd21a9..e7105c5b9de 100644 --- a/res/skins/QMLDemo/AuxiliaryUnit.qml +++ b/res/skins/QMLDemo/AuxiliaryUnit.qml @@ -72,7 +72,6 @@ Row { Skin.EmbeddedBackground { id: embedded - color: Theme.embeddedBackgroundColor height: parent.height width: 56 diff --git a/res/skins/QMLDemo/ComboBox.qml b/res/skins/QMLDemo/ComboBox.qml index 539de34449e..db2e97e0dc6 100644 --- a/res/skins/QMLDemo/ComboBox.qml +++ b/res/skins/QMLDemo/ComboBox.qml @@ -7,7 +7,6 @@ ComboBox { id: root background: Skin.EmbeddedBackground { - color: Theme.embeddedBackgroundColor } delegate: ItemDelegate { @@ -57,7 +56,6 @@ ComboBox { } background: Skin.EmbeddedBackground { - color: Theme.embeddedBackgroundColor } } diff --git a/res/skins/QMLDemo/EmbeddedBackground.qml b/res/skins/QMLDemo/EmbeddedBackground.qml index 657b3903bbd..85a2e5f17a9 100644 --- a/res/skins/QMLDemo/EmbeddedBackground.qml +++ b/res/skins/QMLDemo/EmbeddedBackground.qml @@ -7,4 +7,5 @@ Rectangle { border.width: 2 border.color: Theme.deckBackgroundColor radius: 5 + color: Theme.embeddedBackgroundColor } diff --git a/res/skins/QMLDemo/MicrophoneUnit.qml b/res/skins/QMLDemo/MicrophoneUnit.qml index db70f6e69fc..a01e0a90841 100644 --- a/res/skins/QMLDemo/MicrophoneUnit.qml +++ b/res/skins/QMLDemo/MicrophoneUnit.qml @@ -72,7 +72,6 @@ Row { Skin.EmbeddedBackground { id: embedded - color: Theme.embeddedBackgroundColor height: parent.height width: 56 diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml index 02b2a8dcc71..33b745cf8b1 100644 --- a/res/skins/QMLDemo/Sampler.qml +++ b/res/skins/QMLDemo/Sampler.qml @@ -34,7 +34,6 @@ Rectangle { anchors.left: parent.left anchors.right: vuMeter.left anchors.bottom: parent.bottom - color: Theme.deckBackgroundColor } Skin.ControlMiniKnob { From f00100ec0d44b2c81ae8dd466bb2a680b6b2f1f4 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 10:42:26 +0200 Subject: [PATCH 12/19] skins/QMLDemo: Move Microphone Ducking panel to separate component --- res/skins/QMLDemo/CrossfaderRow.qml | 43 +------------- res/skins/QMLDemo/MicrophoneDuckingPanel.qml | 62 ++++++++++++++++++++ 2 files changed, 63 insertions(+), 42 deletions(-) create mode 100644 res/skins/QMLDemo/MicrophoneDuckingPanel.qml diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml index d429feff4ac..a3a35530b10 100644 --- a/res/skins/QMLDemo/CrossfaderRow.qml +++ b/res/skins/QMLDemo/CrossfaderRow.qml @@ -42,48 +42,7 @@ Item { unitNumber: 4 } - Column { - Skin.ControlSlider { - width: 50 - height: 26 - orientation: Qt.Horizontal - group: "[Master]" - key: "duckStrength" - barColor: Theme.crossfaderBarColor - barStart: 1 - fg: Theme.imgMicDuckingSliderHandle - bg: Theme.imgMicDuckingSlider - } - - Skin.Button { - id: pflButton - - text: { - switch (duckingControl.value) { - case 1: - return "Auto"; - case 2: - return "Manual"; - default: - return "Off"; - } - } - activeColor: Theme.pflActiveButtonColor - highlight: { - let value = duckingControl.value; - return (value == 1 || value == 2); - } - onClicked: duckingControl.value = (duckingControl.value + 1) % 3 - - Mixxx.ControlProxy { - id: duckingControl - - group: "[Master]" - key: "talkoverDucking" - } - - } - + Skin.MicrophoneDuckingPanel { } } diff --git a/res/skins/QMLDemo/MicrophoneDuckingPanel.qml b/res/skins/QMLDemo/MicrophoneDuckingPanel.qml new file mode 100644 index 00000000000..c209039ada2 --- /dev/null +++ b/res/skins/QMLDemo/MicrophoneDuckingPanel.qml @@ -0,0 +1,62 @@ +import "." as Skin +import Mixxx 0.1 as Mixxx +import QtQuick 2.12 +import "Theme" + +Column { + + enum DuckingMode { + Off, + Auto, + Manual, + NumModes // This always needs to be the last value + } + + Skin.ControlSlider { + width: 50 + height: 26 + orientation: Qt.Horizontal + group: "[Master]" + key: "duckStrength" + barColor: Theme.crossfaderBarColor + barStart: 1 + fg: Theme.imgMicDuckingSliderHandle + bg: Theme.imgMicDuckingSlider + } + + Skin.Button { + id: pflButton + + text: duckingControl.duckingModeName + activeColor: Theme.pflActiveButtonColor + highlight: duckingControl.duckingEnabled + onClicked: duckingControl.nextMode() + + Mixxx.ControlProxy { + id: duckingControl + + property string duckingModeName: { + switch (value) { + case MicrophoneDuckingPanel.DuckingMode.Auto: + return "Auto"; + case MicrophoneDuckingPanel.DuckingMode.Manual: + return "Manual"; + default: + return "Off"; + } + } + property bool duckingEnabled: { + return (value == MicrophoneDuckingPanel.DuckingMode.Auto || value == MicrophoneDuckingPanel.DuckingMode.Manual); + } + + function nextMode() { + value = (value + 1) % MicrophoneDuckingPanel.DuckingMode.NumModes; + } + + group: "[Master]" + key: "talkoverDucking" + } + + } + +} From 4336dc56b4909aa8ce169966d23fa53b3b525961 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 11:15:15 +0200 Subject: [PATCH 13/19] QML: Introduce reusable PlayerDropArea component --- res/skins/QMLDemo/Deck.qml | 10 ++-------- res/skins/QMLDemo/Mixxx/PlayerDropArea.qml | 16 ++++++++++++++++ res/skins/QMLDemo/Mixxx/qmldir | 1 + res/skins/QMLDemo/Sampler.qml | 10 ++-------- 4 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 res/skins/QMLDemo/Mixxx/PlayerDropArea.qml diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index bc4fa84ccbf..3765ef0792e 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -379,15 +379,9 @@ Item { } - DropArea { + Mixxx.PlayerDropArea { anchors.fill: parent - onDropped: { - if (drop.hasUrls) { - let url = drop.urls[0]; - console.log("Dropped URL '" + url + "' on deck " + root.group); - root.deckPlayer.loadTrackFromLocationUrl(url); - } - } + group: root.group } } diff --git a/res/skins/QMLDemo/Mixxx/PlayerDropArea.qml b/res/skins/QMLDemo/Mixxx/PlayerDropArea.qml new file mode 100644 index 00000000000..53a81a93161 --- /dev/null +++ b/res/skins/QMLDemo/Mixxx/PlayerDropArea.qml @@ -0,0 +1,16 @@ +import Mixxx 0.1 as Mixxx +import QtQuick 2.12 + +// Handles drops on decks and samplers +DropArea { + property string group // required + property var player: Mixxx.PlayerManager.getPlayer(group) + + onDropped: { + if (drop.hasUrls) { + let url = drop.urls[0]; + console.log("Dropped URL '" + url + "' on deck " + group); + player.loadTrackFromLocationUrl(url); + } + } +} diff --git a/res/skins/QMLDemo/Mixxx/qmldir b/res/skins/QMLDemo/Mixxx/qmldir index 8b7f31169ca..d2b42c2d4fb 100644 --- a/res/skins/QMLDemo/Mixxx/qmldir +++ b/res/skins/QMLDemo/Mixxx/qmldir @@ -1,2 +1,3 @@ module Mixxx MathUtils 0.1 MathUtils.mjs +PlayerDropArea 0.1 PlayerDropArea.qml diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml index 33b745cf8b1..478404909ec 100644 --- a/res/skins/QMLDemo/Sampler.qml +++ b/res/skins/QMLDemo/Sampler.qml @@ -144,15 +144,9 @@ Rectangle { anchors.right: gainKnob.left } - DropArea { + Mixxx.PlayerDropArea { anchors.fill: parent - onDropped: { - if (drop.hasUrls) { - let url = drop.urls[0]; - console.log("Dropped URL '" + url + "' on deck " + root.group); - root.deckPlayer.loadTrackFromLocationUrl(url); - } - } + group: root.group } } From 365e47082e0f630a8dbb4ed583b2e458aa01cfee Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 11:16:11 +0200 Subject: [PATCH 14/19] skins/QMLDemo: Fix typo in MiniKnob foreground id --- res/skins/QMLDemo/MiniKnob.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/skins/QMLDemo/MiniKnob.qml b/res/skins/QMLDemo/MiniKnob.qml index 1a738428dd2..b55bbc411bf 100644 --- a/res/skins/QMLDemo/MiniKnob.qml +++ b/res/skins/QMLDemo/MiniKnob.qml @@ -38,8 +38,6 @@ MixxxControls.Knob { } foreground: Item { - id: inidicator - anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right From cc6150bbc058ca068b038758ba7ca810aac6f432 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 11:33:13 +0200 Subject: [PATCH 15/19] skins/QMLDemo: Remove unnecessary mousearea id from sampler --- res/skins/QMLDemo/Sampler.qml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml index 478404909ec..df80c211349 100644 --- a/res/skins/QMLDemo/Sampler.qml +++ b/res/skins/QMLDemo/Sampler.qml @@ -115,13 +115,11 @@ Rectangle { } MouseArea { - id: mousearea - anchors.fill: progressContainer cursorShape: Qt.PointingHandCursor hoverEnabled: true onPressed: { - playPositionControl.value = mouse.x / mousearea.width; + playPositionControl.value = mouse.x / width; } onPositionChanged: { if (containsPress) From c2785e43b94128eb42151ed3ae8270ed995ea7c8 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 11:38:17 +0200 Subject: [PATCH 16/19] skins/QMLDemo: Introduce samplerColor --- res/skins/QMLDemo/Sampler.qml | 6 +++--- res/skins/QMLDemo/Theme/Theme.qml | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml index df80c211349..05b85c4a57c 100644 --- a/res/skins/QMLDemo/Sampler.qml +++ b/res/skins/QMLDemo/Sampler.qml @@ -46,7 +46,7 @@ Rectangle { width: 40 group: root.group key: "pregain" - color: Theme.gainKnobColor + color: Theme.samplerColor } Skin.ControlButton { @@ -54,7 +54,7 @@ Rectangle { anchors.top: embedded.top anchors.left: embedded.left - activeColor: Theme.gainKnobColor + activeColor: Theme.samplerColor width: 40 height: 40 text: "Play" @@ -103,7 +103,7 @@ Rectangle { width: playPositionControl.value * parent.width height: parent.height radius: height / 2 - color: Theme.gainKnobColor + color: Theme.samplerColor Mixxx.ControlProxy { id: playPositionControl diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml index 9967bfa959a..23301140a0b 100644 --- a/res/skins/QMLDemo/Theme/Theme.qml +++ b/res/skins/QMLDemo/Theme/Theme.qml @@ -21,6 +21,7 @@ QtObject { property color bpmSliderBarColor: green property color volumeSliderBarColor: blue property color gainKnobColor: blue + property color samplerColor: blue property color crossfaderOrientationColor: lightGray property color crossfaderBarColor: red property color toolbarBackgroundColor: darkGray2 From 9c687d453812cc67e81e0c1d0beb9cd9337afd16 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 11:53:23 +0200 Subject: [PATCH 17/19] skins/QMLDemo: Use shared text components on samplers/decks/mic/aux --- res/skins/QMLDemo/AuxiliaryUnit.qml | 25 ++------------- res/skins/QMLDemo/Deck.qml | 23 ++------------ res/skins/QMLDemo/DeckInfoBar.qml | 44 +++++++------------------- res/skins/QMLDemo/EmbeddedText.qml | 6 ++++ res/skins/QMLDemo/MicrophoneUnit.qml | 33 +++---------------- res/skins/QMLDemo/SectionText.qml | 12 +++++++ res/skins/QMLDemo/WaveformOverview.qml | 6 ++-- 7 files changed, 41 insertions(+), 108 deletions(-) create mode 100644 res/skins/QMLDemo/EmbeddedText.qml create mode 100644 res/skins/QMLDemo/SectionText.qml diff --git a/res/skins/QMLDemo/AuxiliaryUnit.qml b/res/skins/QMLDemo/AuxiliaryUnit.qml index e7105c5b9de..a433cfab3f2 100644 --- a/res/skins/QMLDemo/AuxiliaryUnit.qml +++ b/res/skins/QMLDemo/AuxiliaryUnit.qml @@ -44,17 +44,10 @@ Row { } Column { - Text { + Skin.SectionText { width: parent.width height: root.height / 2 text: "AUX " + root.unitNumber - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - font.bold: true - color: Theme.buttonNormalColor } Skin.ControlButton { @@ -98,15 +91,9 @@ Row { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX1" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.buttonFontPixelSize - font.bold: true - color: Theme.deckTextColor } } @@ -120,15 +107,9 @@ Row { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX2" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.buttonFontPixelSize - font.bold: true - color: Theme.deckTextColor } } diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index 3765ef0792e..0d10bc96ee9 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -105,15 +105,9 @@ Item { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX 1" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.bold: true - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor } } @@ -138,15 +132,9 @@ Item { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX 2" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.bold: true - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor } } @@ -162,18 +150,13 @@ Item { color: infoBar.lineColor } - Text { + Skin.EmbeddedText { id: waveformBarPosition anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: waveformBarHSeparator2.right anchors.leftMargin: 5 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor text: { const positionSeconds = samplesControl.value / 2 / sampleRateControl.value * playPositionControl.value; if (isNaN(positionSeconds)) diff --git a/res/skins/QMLDemo/DeckInfoBar.qml b/res/skins/QMLDemo/DeckInfoBar.qml index 39698b79071..6d43f93cd4b 100644 --- a/res/skins/QMLDemo/DeckInfoBar.qml +++ b/res/skins/QMLDemo/DeckInfoBar.qml @@ -10,7 +10,6 @@ Rectangle { property string group // required property var deckPlayer: Mixxx.PlayerManager.getPlayer(group) - property color textColor: Theme.deckTextColor property color lineColor: Theme.deckLineColor border.width: 2 @@ -93,7 +92,7 @@ Rectangle { } - Text { + Skin.EmbeddedText { id: infoBarTitle text: root.deckPlayer.title @@ -101,11 +100,9 @@ Rectangle { anchors.left: infoBarVSeparator.left anchors.right: infoBarHSeparator1.left anchors.bottom: infoBarVSeparator.bottom - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - font.family: Theme.fontFamily + horizontalAlignment: Text.AlignLeft + font.bold: false font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor } Rectangle { @@ -119,7 +116,7 @@ Rectangle { color: infoBar.lineColor } - Text { + Skin.EmbeddedText { id: infoBarArtist text: root.deckPlayer.artist @@ -128,11 +125,8 @@ Rectangle { anchors.right: infoBarHSeparator1.left anchors.bottom: infoBarHSeparator1.bottom horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - font.family: Theme.fontFamily + font.bold: false font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor } Rectangle { @@ -147,19 +141,14 @@ Rectangle { color: infoBar.lineColor } - Text { + Skin.EmbeddedText { id: infoBarKey + text: root.deckPlayer.keyText anchors.top: infoBarHSeparator1.top anchors.bottom: infoBarVSeparator.top - width: rateSlider.width anchors.right: infoBarHSeparator2.left - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - text: root.deckPlayer.keyText - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor + width: rateSlider.width } Rectangle { @@ -174,20 +163,14 @@ Rectangle { color: infoBar.lineColor } - Text { + Skin.EmbeddedText { id: infoBarRate anchors.top: infoBarHSeparator2.top anchors.bottom: infoBarVSeparator.top - width: rateSlider.width anchors.right: infoBar.right anchors.rightMargin: 5 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - text: bpmControl.value.toFixed(2) - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor + width: rateSlider.width Mixxx.ControlProxy { id: bpmControl @@ -198,7 +181,7 @@ Rectangle { } - Text { + Skin.EmbeddedText { id: infoBarRateRatio property real ratio: ((rateRatioControl.value - 1) * 100).toPrecision(2) @@ -208,11 +191,6 @@ Rectangle { width: rateSlider.width anchors.right: infoBar.right anchors.rightMargin: 5 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - color: infoBar.textColor text: (ratio > 0) ? "+" + ratio.toFixed(2) : ratio.toFixed(2) Mixxx.ControlProxy { diff --git a/res/skins/QMLDemo/EmbeddedText.qml b/res/skins/QMLDemo/EmbeddedText.qml new file mode 100644 index 00000000000..2902af70490 --- /dev/null +++ b/res/skins/QMLDemo/EmbeddedText.qml @@ -0,0 +1,6 @@ +import "." as Skin +import "Theme" + +Skin.SectionText { + font.pixelSize: Theme.buttonFontPixelSize +} diff --git a/res/skins/QMLDemo/MicrophoneUnit.qml b/res/skins/QMLDemo/MicrophoneUnit.qml index a01e0a90841..aef83afb799 100644 --- a/res/skins/QMLDemo/MicrophoneUnit.qml +++ b/res/skins/QMLDemo/MicrophoneUnit.qml @@ -44,17 +44,10 @@ Row { } Column { - Text { + SectionText { width: parent.width height: root.height / 2 text: "MIC " + root.unitNumber - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - font.bold: true - color: Theme.buttonNormalColor } Skin.ControlButton { @@ -86,15 +79,9 @@ Row { key: "talkover" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "TALK" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.buttonFontPixelSize - font.bold: true - color: Theme.deckTextColor } } @@ -110,15 +97,9 @@ Row { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX1" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.buttonFontPixelSize - font.bold: true - color: Theme.deckTextColor } } @@ -132,15 +113,9 @@ Row { key: "group_" + root.group + "_enable" activeColor: Theme.deckActiveColor - foreground: Text { + foreground: Skin.EmbeddedText { anchors.centerIn: parent text: "FX2" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font.family: Theme.fontFamily - font.pixelSize: Theme.buttonFontPixelSize - font.bold: true - color: Theme.deckTextColor } } diff --git a/res/skins/QMLDemo/SectionText.qml b/res/skins/QMLDemo/SectionText.qml new file mode 100644 index 00000000000..804fabb06e7 --- /dev/null +++ b/res/skins/QMLDemo/SectionText.qml @@ -0,0 +1,12 @@ +import QtQuick 2.12 +import "Theme" + +Text { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + font.family: Theme.fontFamily + font.pixelSize: Theme.textFontPixelSize + font.bold: true + color: Theme.buttonNormalColor +} diff --git a/res/skins/QMLDemo/WaveformOverview.qml b/res/skins/QMLDemo/WaveformOverview.qml index 47da4f7770c..7eb30228c75 100644 --- a/res/skins/QMLDemo/WaveformOverview.qml +++ b/res/skins/QMLDemo/WaveformOverview.qml @@ -1,3 +1,4 @@ +import "." as Skin import Mixxx 0.1 as Mixxx import Mixxx.Controls 0.1 as MixxxControls import QtQuick 2.12 @@ -141,11 +142,8 @@ Item { anchors.fill: parent color: "transparent" - Text { + Skin.SectionText { anchors.centerIn: parent - font.family: Theme.fontFamily - font.pixelSize: Theme.textFontPixelSize - color: Theme.deckTextColor text: "Passthrough Enabled" } From 314c4748fd21653364908c887765611b30c92f5e Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 12:07:13 +0200 Subject: [PATCH 18/19] QML: Make Knob arc calculation more readable --- res/skins/QMLDemo/Mixxx/Controls/Knob.qml | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml index 9b4f1a7bd3e..303ef760774 100644 --- a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml +++ b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml @@ -22,9 +22,14 @@ Item { property alias arcWidth: arcPath.strokeWidth property alias arcStyle: arcPath.strokeStyle property alias arcStylePattern: arcPath.dashPattern + readonly property real valueCenter: (max - min) / 2 signal turned(real value) + function angleFrom(targetValue) { + return targetValue * 2 * root.angle; + } + Item { id: background @@ -35,7 +40,7 @@ Item { id: foreground anchors.fill: parent - rotation: (root.value - (root.max - root.min) / 2) * 2 * root.angle + rotation: root.angleFrom(root.value - root.valueCenter) } Shape { @@ -51,8 +56,8 @@ Item { fillColor: "transparent" PathAngleArc { - startAngle: -90 + root.angle * 2 * (root.arcStart - (root.max - root.min) / 2) - sweepAngle: (root.value - root.arcStart) * 2 * root.angle + startAngle: root.angleFrom(root.arcStart - root.valueCenter) - 90 + sweepAngle: root.angleFrom(root.value - root.arcStart) radiusX: root.arcRadius radiusY: root.arcRadius centerX: root.width / 2 + root.arcOffsetX From 5d0d7d0deb26a8e0a2061c29b13a41b6d6cb6fcf Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Tue, 15 Jun 2021 13:44:34 +0200 Subject: [PATCH 19/19] skins/QMLDemo: Play on click, stop/eject on doubleclick --- res/skins/QMLDemo/Sampler.qml | 46 +++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/res/skins/QMLDemo/Sampler.qml b/res/skins/QMLDemo/Sampler.qml index 05b85c4a57c..ca56973c389 100644 --- a/res/skins/QMLDemo/Sampler.qml +++ b/res/skins/QMLDemo/Sampler.qml @@ -59,16 +59,8 @@ Rectangle { height: 40 text: "Play" group: root.group - key: "play" - highlight: playControl.value - - Mixxx.ControlProxy { - id: playControl - - group: root.group - key: "play_indicator" - } - + key: "cue_gotoandplay" + highlight: playControl.playing } Text { @@ -142,6 +134,40 @@ Rectangle { anchors.right: gainKnob.left } + Mixxx.ControlProxy { + id: playControl + + readonly property bool playing: value != 0 + + function stop() { + value = 0; + } + + group: root.group + key: "play" + } + + Mixxx.ControlProxy { + id: ejectControl + + function trigger() { + value = 1; + value = 0; + } + + group: root.group + key: "eject" + } + + TapHandler { + onDoubleTapped: { + if (playControl.playing) + playControl.stop(); + else + ejectControl.trigger(); + } + } + Mixxx.PlayerDropArea { anchors.fill: parent group: root.group