[GSoC] LateNightQML: Deck Layouts by xARSENICx · Pull Request #17014 · mixxxdj/mixxx

xARSENICx · 2026-09-04T23:43:28Z

This PR continues the LateNightQML skin work by completing the responsive deck layouts with feature and visual parity for the Classic and PaleMoon color schemes.

Testing the Experimental Skin

Since this is an experimental milestone, first run Mixxx with the developer flag:

./build/mixxx --developer

Once Mixxx is open, switch to:

Preferences -> Interface -> LateNight QML (Experimental)

You can dynamically toggle between the Classic and PaleMoon color schemes under preferences.

Previews

Classic

Full:
Compact:
Mini

PaleMoon

Full:
Compact:
Mini:

Scope of Changes

New Styling

The menus now get resized with available options according to the selected state:

Full
Compact
Mini

Implemented in this PR

Adds Mini, Compact, and Full deck layouts.
Centralizes responsive layout state across mixer visibility, Big Library mode, deck count, and saved deck size.
Integrates the layouts with the responsive library and mixer arrangement.
Preserves a minimum usable deck height when resizing the library splitter.
Integrates deck transport, cue, loop, beatjump, key, sync, rate, vinyl, and FX controls according to the Deck Layout

Tracking

GSoC: LateNightQML PR-14

xARSENICx · 2026-09-05T21:13:31Z

There are some stray changes in Toolbar and Waveforms solving visual regression which were overlooked. Since, the scope of the changes are very small and should not cause a burden to review, I did not open a separate PR for them.

JoergAtGithub

This PR is far to big to review! Furthermore it contains several unrelated changes.

Please move the commits for:

Waverform changes
Toolbar indicators
Key indicators

each into an seperate PR!

xARSENICx · 2026-09-07T13:24:51Z

Will do so.

JoergAtGithub · 2026-09-07T18:56:14Z

+    // The derived controls choose the slot size, but the two source toggles
+    // remain the authority for whether a slot exists at all. This prevents a
+    // stale derived value from leaving an empty layout gap.
+    readonly property bool showSpinnyOrCover: (showSpinniesProxy.value > 0 || showCoverArtProxy.value > 0)
+            && (!showSpinnyOrCoverProxy.initialized || showSpinnyOrCoverProxy.value > 0)
+    readonly property bool showSmallSpinnyOrCover: root.showSpinnyOrCover
+            && (!showSmallSpinnyOrCoverProxy.initialized
+                    ? selectBigSpinnyProxy.value <= 0
+                    : showSmallSpinnyOrCoverProxy.value > 0)
+    readonly property bool showBigSpinnyOrCover: root.showSpinnyOrCover
+            && (!showBigSpinnyOrCoverProxy.initialized
+                    ? selectBigSpinnyProxy.value > 0
+                    : showBigSpinnyOrCoverProxy.value > 0)
+    readonly property bool showCover: root.showSpinnyOrCover && showCoverArtProxy.value > 0
+    readonly property bool showSpinny: root.showSpinnyOrCover && showSpinniesProxy.value > 0


// The derived controls choose the slot size, but the two source toggles // remain the authority for whether a slot exists at all. This prevents a // stale derived value from leaving an empty layout gap. readonly property bool showSpinnyOrCover: (showSpinniesProxy.value > 0 || showCoverArtProxy.value > 0) && (!showSpinnyOrCoverProxy.initialized || showSpinnyOrCoverProxy.value > 0) readonly property bool showSmallSpinnyOrCover: root.showSpinnyOrCover && (!showSmallSpinnyOrCoverProxy.initialized ? selectBigSpinnyProxy.value <= 0 : showSmallSpinnyOrCoverProxy.value > 0) readonly property bool showBigSpinnyOrCover: root.showSpinnyOrCover && (!showBigSpinnyOrCoverProxy.initialized ? selectBigSpinnyProxy.value > 0 : showBigSpinnyOrCoverProxy.value > 0) readonly property bool showCover: root.showSpinnyOrCover && showCoverArtProxy.value > 0 readonly property bool showSpinny: root.showSpinnyOrCover && showSpinniesProxy.value > 0

Wouldn't it make sense to move this code into a singleton and reuse it in CompactDeck.qml, and FullDeck.qml.
It's always good to have a single point where the decision is taken.

JoergAtGithub · 2026-09-07T19:04:39Z

+    function formatTime(seconds) {
+        const value = Math.max(0, Math.floor(seconds));
+        return Math.floor(value / 60).toString() + ":" + (value % 60).toString().padStart(2, "0");
+    }


Wouldn't it make sense to move this to DurationFormatter.qml and share it?

JoergAtGithub · 2026-09-07T19:05:32Z

@@ -0,0 +1,94 @@
+import QtQuick
