From 851dbc76b3ba533b128e4d42d25560a95d6d3722 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 25 Sep 2026 20:12:48 +0200 Subject: feat(keybinds): draw the macropad beside the list The pad glyph on each row was too small to read. The left fifth of the overlay now draws the pad at size, each key labelled with its plain action; hovering a key or an encoder lists everything it does, held keys and turn direction spelled out. padActions() in Binds.js inverts the grouped rows into that per-key list, and PAD's turn values became words for it. The panel is pinned at a fixed height: centred, it moved whenever the hovered key's list changed length. Co-Authored-By: Claude Opus 5.5 --- keybinds/Keybinds.qml | 83 ++++++++++++--------------------------------------- 1 file changed, 19 insertions(+), 64 deletions(-) (limited to 'keybinds/Keybinds.qml') diff --git a/keybinds/Keybinds.qml b/keybinds/Keybinds.qml index 532ae86..c94a871 100644 --- a/keybinds/Keybinds.qml +++ b/keybinds/Keybinds.qml @@ -24,6 +24,7 @@ Scope { // Non-empty while loading or after a failure; the grid shows only when // this is empty, so a stale list from the last opening never shows. property string status: "Loading..." + readonly property var padActions: Binds.padActions(root.groups) readonly property var screenObj: Quickshell.screens.find(s => s.name === root.monitor) ?? Quickshell.screens[0] @@ -104,6 +105,22 @@ Scope { font.pixelSize: 22 } + // The left fifth is the macropad; the list centres in the + // rest. + Item { + id: listArea + x: parent.width * 0.2 + width: parent.width * 0.8 + height: parent.height + } + + PadPanel { + width: parent.width * 0.2 + height: parent.height + visible: root.status === "" + actions: root.padActions + } + // Groups fill a column down to the screen's height, then // start the next one, so a long group never leaves a row // of short ones sitting on empty space. The width is left @@ -111,7 +128,7 @@ Scope { // ponytail: a single group taller than the screen clips; // split it in keybindings.lua if one ever gets there. Flow { - anchors.centerIn: parent + anchors.centerIn: listArea height: parent.height * 0.9 flow: Flow.TopToBottom spacing: 28 @@ -122,7 +139,7 @@ Scope { Column { required property var modelData - width: 552 + width: 440 spacing: 4 Text { @@ -159,68 +176,6 @@ Scope { font.family: Theme.fontFamily font.pixelSize: 14 } - - // The macropad, drawn small: its 4x3 - // keys and two encoders, the one to - // use lit. Empty but still 100 wide - // on a row the pad has no part in, so - // the column keeps its width. - Item { - id: padGlyph - readonly property var pad: modelData.pad ?? null - width: 100 - height: 17 - anchors.verticalCenter: parent.verticalCenter - - Grid { - visible: padGlyph.pad !== null - columns: 4 - spacing: 1 - - Repeater { - model: 12 - - Rectangle { - required property int index - width: 5 - height: 5 - radius: 1 - color: padGlyph.pad?.key === index + 1 - ? Theme.accent : Theme.surfaceAlt - } - } - } - - Column { - x: 26 - visible: padGlyph.pad !== null - spacing: 3 - - Repeater { - model: ["top", "bottom"] - - Rectangle { - required property string modelData - width: 7 - height: 7 - radius: 3.5 - color: padGlyph.pad?.knob === modelData - ? Theme.accent : Theme.surfaceAlt - } - } - } - - Text { - x: 38 - anchors.verticalCenter: parent.verticalCenter - visible: padGlyph.pad !== null - text: [padGlyph.pad?.turn, padGlyph.pad?.mod] - .filter(Boolean).join(" ") - color: Theme.subtext - font.family: Theme.fontFamily - font.pixelSize: 12 - } - } } } } -- cgit v1.2.3