Skip to content

QML: add basic screen responsiveness #15483

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

Merged
JoergAtGithub merged 1 commit into from
Feb 7, 2026
Merged

QML: add basic screen responsiveness #15483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions res/qml/Button.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ AbstractButton {

anchors.fill: parent
color: '#2B2B2B'
radius: 2
}
DropShadow {
id: effect1
Expand Down
21 changes: 13 additions & 8 deletions res/qml/Deck.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,12 @@ Item {
"type": "row",
"items": [
{
"type": "hotcueAndStem"
"type": "hotcueAndStem",
"minWidth": 520
},
{
"type": "beatjump"
"type": "beatjump",
"minWidth": 650
},
{
"type": "loop"
Expand All @@ -117,6 +119,7 @@ Item {
},
{
"type": "column",
"minWidth": 800,
"items": [
{
"type": "spinny"
Expand All @@ -127,7 +130,8 @@ Item {
]
},
{
"type": "tempo"
"type": "tempo",
"minWidth": 270
}
]
}
Expand Down Expand Up @@ -188,6 +192,7 @@ Item {
ListModel {
id: itemModel

dynamicRoles: true
}
ListModel {
id: minimizedItemModel
Expand Down Expand Up @@ -359,14 +364,14 @@ Item {
roleValue: "spinny"

LayoutItem {
Layout.alignment: Qt.AlignCenter
Layout.alignment: Qt.AlignTop
editLabel.color: Theme.midGray
editLabel.font.pixelSize: 14
editLabel.text: "Spinny"
editOverlay.color: "#BDBDBD"
editOverlay.radius: height
height: 130
width: 130
height: 140
width: 140

DeckComponent.Spinny {
anchors.fill: parent
Expand Down Expand Up @@ -662,8 +667,6 @@ Item {
property var beginDrag: null
property var disposition: GridLayout.TopToBottom
property alias editOverlay: overlay
required property int index
required property var items
property var move: null
property bool selected: false

Expand Down Expand Up @@ -696,6 +699,7 @@ Item {
Drag.active: mouseArea.drag.active
Drag.hotSpot: Qt.point(width / 2, height / 2)
columns: disposition == GridLayout.TopToBottom ? 1 : items.count
visible: typeof minWidth !== 'number' || root.width <= 0 || minWidth < root.width

Behavior on x {
SpringAnimation {
Expand Down Expand Up @@ -781,6 +785,7 @@ Item {

Drag.active: mouseArea.drag.active
Drag.hotSpot: Qt.point(width / 2, height / 2)
visible: typeof minWidth !== 'number' || root.width <= 0 || minWidth < root.width

Behavior on x {
SpringAnimation {
Expand Down
2 changes: 1 addition & 1 deletion res/qml/Deck/FXAssign.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Item {
when: holder.index != 0

AnchorChanges {
anchors.bottom: parent.bottom
// anchors.bottom: parent.bottom
anchors.top: undefined
target: root
}
Expand Down
35 changes: 20 additions & 15 deletions res/qml/Deck/InfoBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Rectangle {
id: root

property list<string> availableData: ["none", "title", "year", "remaining", "artist", "rating"]
readonly property var currentTrack: deckPlayer.currentTrack
readonly property var currentTrack: deckPlayer?.currentTrack
property var deckPlayer: Mixxx.PlayerManager.getPlayer(group)
property bool editMode: false
required property string group
Expand All @@ -27,11 +27,11 @@ Rectangle {

GradientStop {
color: {
const trackColor = root.currentTrack.color;
const trackColor = root.currentTrack?.color;
if (!trackColor.valid)
return Theme.deckInfoBarBackgroundColor;

return Qt.darker(root.currentTrack.color, 2);
return Qt.darker(root.currentTrack?.color, 2);
}
position: 0
}
Expand All @@ -48,7 +48,7 @@ Rectangle {
anchors.left: parent.left
anchors.top: parent.top
asynchronous: true
source: root.currentTrack.coverArtUrl
source: root.currentTrack?.coverArtUrl
visible: false
width: height
}
Expand All @@ -58,15 +58,15 @@ Rectangle {
anchors.fill: coverArt
color: Theme.deckEmptyCoverArt
radius: 4
visible: !root.deckPlayer.isLoaded && !root.minimized
visible: !root.deckPlayer?.isLoaded && !root.minimized
}
OpacityMask {
id: coverArtMask

anchors.fill: coverArt
maskSource: coverArtCircle
source: coverArt
visible: root.deckPlayer.isLoaded && !root.minimized
visible: root.deckPlayer?.isLoaded && !root.minimized

Skin.FadeBehavior on visible {
fadeTarget: coverArtMask
Expand All @@ -82,29 +82,31 @@ Rectangle {

Cell {
item.font.bold: false
item.font.weight: root.deckPlayer.isLoaded ? Font.DemiBold : Font.Thin
item.text: root.deckPlayer.isLoaded ? root.currentTrack.title : "No track loaded"
item.font.weight: root.deckPlayer?.isLoaded ? Font.DemiBold : Font.Thin
item.text: root.deckPlayer?.isLoaded ? root.currentTrack?.title : "No track loaded"
item.visible: true
}
}
DelegateChoice {
roleValue: "artist"

Cell {
item.text: root.currentTrack.artist
item.text: root.currentTrack?.artist
}
}
DelegateChoice {
roleValue: "year"

Cell {
item.text: root.currentTrack.year
visible: root.width > 500 && root.currentTrack?.year
item.text: root.currentTrack?.year
}
}
DelegateChoice {
roleValue: "remaining"

Cell {
visible: root.width > 450
readonly property real remaining: durationControl.value * (1 - playPositionControl.value)

item.text: `-${parseInt(remaining / 60).toString().padStart(2, '0')}:${parseInt(remaining % 60).toString().padStart(2, '0')}.${(remaining % 1).toFixed(1)}`
Expand All @@ -131,11 +133,12 @@ Rectangle {

required property int index
property real ratio: ((rateRatioControl.value - 1) * 100).toPrecision(2)
property bool showSeparator: index != parent.model.count - 1 && root.deckPlayer.isLoaded
property bool showSeparator: index != parent.model.count - 1 && root.deckPlayer?.isLoaded

Layout.fillHeight: true
Layout.fillWidth: index == 0
Layout.preferredWidth: index == 0 ? 0 : rightColumnWidth
visible: root.width > 400

Mixxx.ControlProxy {
id: rateRatioControl
Expand All @@ -148,7 +151,7 @@ Rectangle {

anchors.centerIn: parent
spacing: 0
visible: root.deckPlayer.isLoaded
visible: root.deckPlayer?.isLoaded

Repeater {
model: 5
Expand Down Expand Up @@ -220,12 +223,14 @@ Rectangle {
hoverEnabled: true

onClicked: event => {
if (!root.currentTrack) {
return;
}
let selectedStars = Math.ceil((mouseX - stars.x) / 16);
if (event.button === Qt.RightButton) {
root.currentTrack.stars = 0;
} else if (selectedStars >= 0 && selectedStars <= 5) {
root.currentTrack.stars = selectedStars;
console.warn(root.currentTrack.stars);
}
}
}
Expand Down Expand Up @@ -341,7 +346,7 @@ Rectangle {
required property int index
readonly property bool isTop: !!parent.isTop
property alias item: data
property bool showSeparator: index != parent.model.count - 1 && root.deckPlayer.isLoaded
property bool showSeparator: index != parent.model.count - 1 && root.deckPlayer?.isLoaded

Layout.fillHeight: true
Layout.fillWidth: index == 0
Expand All @@ -356,7 +361,7 @@ Rectangle {
font.bold: isTop
font.pixelSize: isTop ? 18 : Theme.textFontPixelSize
horizontalAlignment: index == 0 ? Text.AlignLeft : Text.AlignHCenter
visible: root.deckPlayer.isLoaded
visible: root.deckPlayer?.isLoaded

Skin.FadeBehavior on visible {
fadeTarget: data
Expand Down
4 changes: 2 additions & 2 deletions res/qml/Deck/Spinny.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ Item {
id: spinner

color: '#BDBDBD'
height: 130
height: 140
radius: width / 2
width: 130
width: 140

transform: Rotation {
angle: 45
Expand Down
6 changes: 4 additions & 2 deletions res/qml/Deck/Toolbar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ Item {
strokeColor: 'transparent'

PathLine {
x: 18
x: 20
y: 4
}
PathLine {
x: 18
x: 20
y: 18
}
PathLine {
Expand All @@ -59,6 +59,7 @@ Item {
anchors.rightMargin: 5
implicitHeight: 22
text: "Beatgrid"
visible: root.width > 165
}
Skin.Button {
id: keylockButton
Expand All @@ -67,6 +68,7 @@ Item {
anchors.rightMargin: 5
implicitHeight: 22
text: "Keylock"
visible: root.width > 105
}
Skin.ControlButton {
id: ejectButton
Expand Down
Loading
Loading