Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

skins/QMLSkin: Add support for maximized library #3937

Merged
merged 5 commits into from
Jun 4, 2021
Merged

skins/QMLSkin: Add support for maximized library #3937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5071692
skins/QMLSkin: Add support for maximized library
Holzhaus Jun 3, 2021
e792d2b
skins/QMLDemo: Fix button getting out of sync
Holzhaus Jun 3, 2021
ba09cf9
skins/QMLDemo: Minify actual decks and introduce FadeBehavior
Holzhaus Jun 4, 2021
03e28a0
skins/QMLDemo: Rename ControlButton toggle property to toggleable
Holzhaus Jun 4, 2021
c0e727a
skins/QMLDemo: Factor out toggle() method for buttons
Holzhaus Jun 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion res/skins/QMLDemo/ControlButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

}
38 changes: 26 additions & 12 deletions res/skins/QMLDemo/Deck.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -24,6 +26,7 @@ Item {
Skin.Slider {
id: rateSlider

visible: !root.minimized
anchors.topMargin: 5
anchors.bottomMargin: 5
anchors.top: infoBar.bottom
Expand All @@ -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
Expand Down Expand Up @@ -87,7 +96,6 @@ Item {
width: rateSlider.width
group: "[EffectRack1_EffectUnit1]"
key: "group_" + root.group + "_enable"
checkable: true
activeColor: Theme.deckActiveColor

foreground: Text {
Expand Down Expand Up @@ -121,7 +129,6 @@ Item {
width: rateSlider.width
group: "[EffectRack1_EffectUnit2]"
key: "group_" + root.group + "_enable"
checkable: true
activeColor: Theme.deckActiveColor

foreground: Text {
Expand Down Expand Up @@ -231,7 +238,6 @@ Item {
anchors.right: waveformBarRightSpace.right
group: root.group
key: "quantize"
checkable: true
activeColor: Theme.deckActiveColor

foreground: Image {
Expand Down Expand Up @@ -268,7 +274,6 @@ Item {
anchors.right: waveformBarLeftSpace.right
group: root.group
key: "passthrough"
checkable: true
activeColor: Theme.deckActiveColor

foreground: Image {
Expand All @@ -280,6 +285,10 @@ Item {

}

FadeBehavior on visible {
fadeTarget: overview
}

}

Item {
Expand All @@ -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"
Expand All @@ -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

Expand Down Expand Up @@ -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
}

}

}
87 changes: 85 additions & 2 deletions res/skins/QMLDemo/DeckRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it possible to deduplicate this State by making the first one reversible?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a comment why this is not possible.

// 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
Expand All @@ -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
}

}

}

}
36 changes: 36 additions & 0 deletions res/skins/QMLDemo/FadeBehavior.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assuming you don't need to access the opacity during the animation, you can try to use an OpacityAnimator instead. Not sure if that works when used as a value interceptor like in this case though...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want to try that out, feel free to do that in a follow up. I struggled far too long with these animations (I initially planned to reanchor the cue/play button and the overview, too), but didn't manage to make it look good.

target: root.fadeTarget
property: "opacity"
from: 1
to: 0
easing.type: Easing.InQuad
duration: 150
}

// Actually change the property value (i.e. "visible")
PropertyAction {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know you've taken this code from some example code on the Behavior Type but I still struggle to understand it...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some comments.

}

// 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
}

}

}
15 changes: 0 additions & 15 deletions res/skins/QMLDemo/HiddenState.qml
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions res/skins/QMLDemo/HiddenTransition.qml
View file
Open in desktop

This file was deleted.

Loading