diff --git a/res/skins/QMLDemo/ControlButton.qml b/res/skins/QMLDemo/ControlButton.qml index eb7a15ddf6a..6a44ef06e2f 100644 --- a/res/skins/QMLDemo/ControlButton.qml +++ b/res/skins/QMLDemo/ControlButton.qml @@ -6,11 +6,30 @@ Skin.Button { property string group // required property string key // required + property bool toggleable: false + + function toggle() { + control.value = !control.value; + } + + highlight: control.value + onPressed: { + if (toggleable) + toggle(); + else + control.value = 1; + } + onReleased: { + if (!toggleable) + control.value = 0; + + } Mixxx.ControlProxy { + id: control + group: root.group key: root.key - value: root.checked || root.down } } diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index 58a86a615f8..899c1f0ecb5 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -10,10 +10,12 @@ Item { id: root property string group // required + property bool minimized: false Skin.DeckInfoBar { id: infoBar + anchors.leftMargin: 5 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -24,6 +26,7 @@ Item { Skin.Slider { id: rateSlider + visible: !root.minimized anchors.topMargin: 5 anchors.bottomMargin: 5 anchors.top: infoBar.bottom @@ -35,15 +38,21 @@ Item { barStart: 0.5 barColor: Theme.bpmSliderBarColor bg: "images/slider_bpm.svg" + + FadeBehavior on visible { + fadeTarget: rateSlider + } + } Rectangle { id: overview - anchors.topMargin: 5 - anchors.bottomMargin: 5 + visible: !root.minimized + anchors.leftMargin: 5 anchors.rightMargin: 5 - anchors.top: infoBar.bottom + anchors.bottomMargin: 5 + anchors.top: rateSlider.top anchors.bottom: buttonBar.top anchors.left: parent.left anchors.right: rateSlider.left @@ -87,7 +96,6 @@ Item { width: rateSlider.width group: "[EffectRack1_EffectUnit1]" key: "group_" + root.group + "_enable" - checkable: true activeColor: Theme.deckActiveColor foreground: Text { @@ -121,7 +129,6 @@ Item { width: rateSlider.width group: "[EffectRack1_EffectUnit2]" key: "group_" + root.group + "_enable" - checkable: true activeColor: Theme.deckActiveColor foreground: Text { @@ -231,7 +238,6 @@ Item { anchors.right: waveformBarRightSpace.right group: root.group key: "quantize" - checkable: true activeColor: Theme.deckActiveColor foreground: Image { @@ -268,7 +274,6 @@ Item { anchors.right: waveformBarLeftSpace.right group: root.group key: "passthrough" - checkable: true activeColor: Theme.deckActiveColor foreground: Image { @@ -280,6 +285,10 @@ Item { } + FadeBehavior on visible { + fadeTarget: overview + } + } Item { @@ -288,13 +297,16 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right + anchors.leftMargin: 5 height: 56 + visible: !root.minimized Skin.ControlButton { id: cueButton anchors.left: parent.left - anchors.top: parent.top + anchors.bottom: playButton.top + anchors.bottomMargin: 5 group: root.group key: "cue_default" text: "Cue" @@ -304,21 +316,19 @@ Item { Skin.ControlButton { id: playButton - anchors.top: cueButton.bottom anchors.left: parent.left anchors.bottom: parent.bottom anchors.topMargin: 5 group: root.group key: "play" text: "Play" - checkable: true + toggleable: true activeColor: Theme.deckActiveColor } Row { anchors.left: cueButton.right anchors.top: parent.top - anchors.bottom: parent.bottom anchors.leftMargin: 10 spacing: -1 @@ -350,10 +360,14 @@ Item { text: "Sync" group: root.group key: "sync_enabled" - checkable: true + toggleable: true activeColor: Theme.deckActiveColor } + FadeBehavior on visible { + fadeTarget: buttonBar + } + } } diff --git a/res/skins/QMLDemo/DeckRow.qml b/res/skins/QMLDemo/DeckRow.qml index e33d8e7d30d..22506ecba1a 100644 --- a/res/skins/QMLDemo/DeckRow.qml +++ b/res/skins/QMLDemo/DeckRow.qml @@ -7,15 +7,73 @@ Item { property string leftDeckGroup // required property string rightDeckGroup // required property alias mixer: mixer + property bool minimized: false implicitHeight: mixer.height + states: [ + State { + when: root.minimized + name: "minimized" + + PropertyChanges { + target: mixer + visible: false + } + + PropertyChanges { + target: root + implicitHeight: 56 + } + + AnchorChanges { + target: leftDeck + anchors.right: mixer.horizontalCenter + } + + AnchorChanges { + target: rightDeck + anchors.left: mixer.horizontalCenter + } + + }, + State { + // This State can't be deduplicated by making the first one + // reversible, because for decks 3/4 the mixer may already be + // hidden (since the whole deck row is already hidden). In that + // case, disabling the minimized state would not show the mixer + // again. + when: !root.minimized + name: "maximized" + + PropertyChanges { + target: mixer + visible: true + } + + PropertyChanges { + target: root + implicitHeight: mixer.height + } + + AnchorChanges { + target: leftDeck + anchors.right: mixer.left + } + + AnchorChanges { + target: rightDeck + anchors.left: mixer.right + } + + } + ] Deck { id: leftDeck + minimized: root.minimized anchors.top: parent.top anchors.left: parent.left - anchors.right: mixer.left anchors.bottom: parent.bottom anchors.rightMargin: 5 group: root.leftDeckGroup @@ -28,17 +86,42 @@ Item { anchors.horizontalCenter: parent.horizontalCenter leftDeckGroup: root.leftDeckGroup rightDeckGroup: root.rightDeckGroup + + FadeBehavior on visible { + fadeTarget: mixer + } + } Deck { id: rightDeck + minimized: root.minimized anchors.top: parent.top - anchors.left: mixer.right anchors.right: parent.right anchors.bottom: parent.bottom anchors.leftMargin: 5 group: root.rightDeckGroup } + transitions: Transition { + to: "minimized" + reversible: true + + SequentialAnimation { + AnchorAnimation { + targets: [leftDeck, rightDeck] + duration: 150 + } + + PropertyAnimation { + target: root + property: "implicitHeight" + duration: 150 + } + + } + + } + } diff --git a/res/skins/QMLDemo/FadeBehavior.qml b/res/skins/QMLDemo/FadeBehavior.qml new file mode 100644 index 00000000000..4978b8525c4 --- /dev/null +++ b/res/skins/QMLDemo/FadeBehavior.qml @@ -0,0 +1,36 @@ +import QtQuick 2.12 + +Behavior { + id: root + + // Starting with QtQuick 2.15, we can use targetProperty.object here + property Item fadeTarget + + SequentialAnimation { + // If the opacity is 1, animate it down to 0 + NumberAnimation { + target: root.fadeTarget + property: "opacity" + from: 1 + to: 0 + easing.type: Easing.InQuad + duration: 150 + } + + // Actually change the property value (i.e. "visible") + PropertyAction { + } + + // If the opacity is 0, animate it up to 1 + NumberAnimation { + target: root.fadeTarget + from: 0 + to: 1 + property: "opacity" + easing.type: Easing.OutQuad + duration: 150 + } + + } + +} diff --git a/res/skins/QMLDemo/HiddenState.qml b/res/skins/QMLDemo/HiddenState.qml deleted file mode 100644 index 19435a9b3e3..00000000000 --- a/res/skins/QMLDemo/HiddenState.qml +++ /dev/null @@ -1,15 +0,0 @@ -import QtQuick 2.12 - -State { - property alias target: changes.target - - name: "hidden" - - PropertyChanges { - id: changes - - opacity: 0 - visible: false - } - -} diff --git a/res/skins/QMLDemo/HiddenTransition.qml b/res/skins/QMLDemo/HiddenTransition.qml deleted file mode 100644 index 65379d70b53..00000000000 --- a/res/skins/QMLDemo/HiddenTransition.qml +++ /dev/null @@ -1,25 +0,0 @@ -import QtQuick 2.12 - -Transition { - id: root - - property var target // required - - to: "hidden" - reversible: true - - SequentialAnimation { - NumberAnimation { - target: root.target - property: "opacity" - duration: 150 - } - - PropertyAction { - target: root.target - property: "visible" - } - - } - -} diff --git a/res/skins/QMLDemo/InfoBarButton.qml b/res/skins/QMLDemo/InfoBarButton.qml index c252b57066f..51962df1e61 100644 --- a/res/skins/QMLDemo/InfoBarButton.qml +++ b/res/skins/QMLDemo/InfoBarButton.qml @@ -14,7 +14,13 @@ AbstractButton { property color normalColor: Theme.buttonNormalColor property color activeColor // required property color pressedColor: activeColor + property alias highlight: control.value + function toggle() { + control.value = !control.value; + } + + onPressed: toggle() states: [ State { name: "pressed" @@ -28,7 +34,7 @@ AbstractButton { }, State { name: "active" - when: root.checked && !root.pressed + when: root.highlight && !root.pressed PropertyChanges { target: colorOverlay @@ -38,7 +44,7 @@ AbstractButton { }, State { name: "inactive" - when: !root.checked && !root.pressed + when: !root.highlight && !root.pressed PropertyChanges { target: colorOverlay @@ -49,9 +55,10 @@ AbstractButton { ] Mixxx.ControlProxy { + id: control + group: root.group key: root.key - value: root.checked || root.down } Item { diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml index b1733874adf..97ae8383c63 100644 --- a/res/skins/QMLDemo/MixerColumn.qml +++ b/res/skins/QMLDemo/MixerColumn.qml @@ -67,7 +67,7 @@ Item { anchors.bottom: parent.bottom text: "PFL" activeColor: Theme.pflActiveButtonColor - checkable: true + toggleable: true } } diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 1369972ccda..9a4a3f643bc 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 maximizeLibrary: maximizeLibraryButton.checked width: 1920 height: 1080 @@ -38,6 +39,14 @@ Rectangle { checkable: true } + Skin.Button { + id: maximizeLibraryButton + + text: "Library" + activeColor: Theme.white + checkable: true + } + } } @@ -49,6 +58,7 @@ Rectangle { rightDeckGroup: "[Channel2]" width: parent.width - 10 x: 5 + minimized: root.maximizeLibrary } Skin.CrossfaderRow { @@ -57,6 +67,12 @@ Rectangle { crossfaderWidth: decks12.mixer.width width: parent.width - 10 x: 5 + visible: !root.maximizeLibrary + + FadeBehavior on visible { + fadeTarget: crossfader + } + } Skin.DeckRow { @@ -66,14 +82,11 @@ Rectangle { rightDeckGroup: "[Channel4]" width: parent.width - 10 x: 5 + minimized: root.maximizeLibrary + visible: root.show4decks - states: Skin.HiddenState { - when: !root.show4decks - target: decks34 - } - - transitions: Skin.HiddenTransition { - target: decks34 + FadeBehavior on visible { + fadeTarget: decks34 } }