From 62b2df421a12bd8c6ee7a61fd434a8a9e38f835e Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Sat, 17 Oct 2026 10:28:56 +0200 Subject: wallpaper: the preview above the list The mock screens took a third of the width beside the list, which left both cramped in the settings window. They now sit on top, sized to half the width and capped so the upright screen stays under 200px, with the notes and the actions beside them; the folder list takes the full width and the rest of the height below. The actions are a Flow, so they wrap instead of clipping in a narrow window. Co-Authored-By: Claude Opus 5.5 --- desktop/modules/appearance/README.md | 2 +- desktop/modules/appearance/WallpaperTab.qml | 217 ++++++++++++++-------------- 2 files changed, 108 insertions(+), 111 deletions(-) (limited to 'desktop/modules/appearance') diff --git a/desktop/modules/appearance/README.md b/desktop/modules/appearance/README.md index 2863184..51e5f09 100644 --- a/desktop/modules/appearance/README.md +++ b/desktop/modules/appearance/README.md @@ -66,7 +66,7 @@ waybar-theme-udt's `install.sh` or signals waybar. Clicking a thumbnail **stages** it rather than setting it, so both screens can be composed before anything changes, and Apply then makes a single -`wallp --set H=… V=…` call. The mock screens on the right show what the desk +`wallp --set H=… V=…` call. The mock screens above the list show what the desk would look like: the staged pick where there is one, what is currently set where there is not, and the hovered thumbnail on the targeted screen while the pointer is over it. diff --git a/desktop/modules/appearance/WallpaperTab.qml b/desktop/modules/appearance/WallpaperTab.qml index 72d4dfe..9788ba2 100644 --- a/desktop/modules/appearance/WallpaperTab.qml +++ b/desktop/modules/appearance/WallpaperTab.qml @@ -14,11 +14,11 @@ import QtQuick import "../.." // Wallpapers by folder, staged per screen and set together with Apply, beside -// a mock of the two screens. Sized by its host: the thumbnail list scrolls +// a mock of the two screens above them. Sized by its host: the thumbnail list scrolls // itself, so it needs a height rather than the page's scroll. -Row { +Column { id: tab - spacing: 20 + spacing: 16 // What the mock screens show. Hovering a thumbnail previews it on the // targeted screen; the other keeps whatever is currently set. @@ -36,9 +36,111 @@ Row { } } + // The two screens as they sit on the desk: DP-3 rotated upright on + // the left, DP-1 wide on the right, centred against each other the + // way Hyprland has them. Hovering a thumbnail fills the screen it + // would be set on; the other keeps what is on it now. Beside them, + // what the image under consideration will look like, and the actions. + Item { + id: mockPane + width: parent.width + height: screens.height + + // Half the width for the two panels side by side plus the gap, + // capped so the upright DP-3 stays under 200px and the list keeps + // the room; the bezels and stands are drawn outside that. + readonly property real scale: Math.min(width * 0.5 / (1080 + 2560 + 160), 200 / 1920) + + Row { + id: screens + spacing: Math.round(160 * mockPane.scale) + + MockScreen { + anchors.verticalCenter: parent.verticalCenter + label: "DP-3" + targeted: Wallpapers.target === "V" + source: (targeted && tab.hovering !== "") + ? tab.hovering : Wallpapers.shown("V") + // DP-3 has transform=1, so it stands upright. + panelWidth: Math.round(1080 * mockPane.scale) + panelHeight: Math.round(1920 * mockPane.scale) + } + + MockScreen { + anchors.verticalCenter: parent.verticalCenter + label: "DP-1" + targeted: Wallpapers.target === "H" + source: (targeted && tab.hovering !== "") + ? tab.hovering : Wallpapers.shown("H") + panelWidth: Math.round(2560 * mockPane.scale) + panelHeight: Math.round(1080 * mockPane.scale) + } + } + + Column { + anchors { left: screens.right; leftMargin: 24; right: parent.right; verticalCenter: parent.verticalCenter } + spacing: 10 + + Text { + width: parent.width + wrapMode: Text.Wrap + text: tab.hovering !== "" ? Wallpapers.label(tab.hovering) + : Wallpapers.dirty ? "click Apply to set" + : "click a wallpaper to stage it" + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } + color: Theme.overlay + } + + // Why the image under consideration, hovered or else the + // one staged for the target screen, will look worse than + // its thumbnail. + Text { + readonly property string subject: tab.hovering !== "" ? tab.hovering + : Wallpapers.target === "V" ? Wallpapers.pendingV : Wallpapers.pendingH + width: parent.width + visible: text !== "" + wrapMode: Text.Wrap + text: subject !== "" ? Wallpapers.qualityNote(subject, Wallpapers.target) : "" + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 } + color: Wallpapers.qualityColor(subject, Wallpapers.target) + } + + // A Flow, not a Row: a Row overflows its width and clipped the + // last button in a narrow window (AGENTS.md). + Flow { + width: parent.width + spacing: 8 + + Tab { + text: Wallpapers.applying ? "applying…" : "Apply" + selected: Wallpapers.dirty && !Wallpapers.applying + enabled: Wallpapers.dirty && !Wallpapers.applying + onClicked: Wallpapers.apply() + } + Tab { + text: "Reset" + enabled: Wallpapers.dirty && !Wallpapers.applying + onClicked: Wallpapers.clearPending() + } + // wallhaven-dl searches wallhaven.cc and finds larger + // copies of low-res wallpapers. Launched through its + // desktop entry, which needs no ~/bin on quickshell's PATH + // and keeps the app's own taskbar icon. The window closes + // so the app is not opened underneath it. + Tab { + text: "Open wallhaven-dl" + onClicked: { + Quickshell.execDetached(["gtk-launch", "wallhaven-dl"]); + tab.dismiss(); + } + } + } + } + } + Column { - width: parent.width - mockPane.width - parent.spacing - height: parent.height + width: parent.width + height: parent.height - mockPane.height - parent.spacing spacing: 12 Text { @@ -249,109 +351,4 @@ Row { } } } - - // The two screens as they sit on the desk: DP-3 rotated upright on - // the left, DP-1 wide on the right, centred against each other the - // way Hyprland has them. Hovering a thumbnail fills the screen it - // would be set on; the other keeps what is on it now. - Item { - id: mockPane - // A third of the panel rather than a fixed width, so the - // preview keeps its share when the panel is resized. - width: Math.round(parent.width * 0.33) - height: parent.height - - // Divisor is the two panels side by side plus the gap; the - // bezels and stands are drawn outside that, hence the margin. - readonly property real scale: (width * 0.92) / (1080 + 2560 + 160) - - Column { - anchors.centerIn: parent - spacing: 14 - - Row { - spacing: Math.round(160 * mockPane.scale) - - MockScreen { - anchors.verticalCenter: parent.verticalCenter - label: "DP-3" - targeted: Wallpapers.target === "V" - source: (targeted && tab.hovering !== "") - ? tab.hovering : Wallpapers.shown("V") - // DP-3 has transform=1, so it stands upright. - panelWidth: Math.round(1080 * mockPane.scale) - panelHeight: Math.round(1920 * mockPane.scale) - } - - MockScreen { - anchors.verticalCenter: parent.verticalCenter - label: "DP-1" - targeted: Wallpapers.target === "H" - source: (targeted && tab.hovering !== "") - ? tab.hovering : Wallpapers.shown("H") - panelWidth: Math.round(2560 * mockPane.scale) - panelHeight: Math.round(1080 * mockPane.scale) - } - } - - Text { - anchors.horizontalCenter: parent.horizontalCenter - width: mockPane.width - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.Wrap - text: tab.hovering !== "" ? Wallpapers.label(tab.hovering) - : Wallpapers.dirty ? "click Apply to set" - : "click a wallpaper to stage it" - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } - color: Theme.overlay - } - - // Why the image under consideration, hovered or else the - // one staged for the target screen, will look worse than - // its thumbnail. - Text { - readonly property string subject: tab.hovering !== "" ? tab.hovering - : Wallpapers.target === "V" ? Wallpapers.pendingV : Wallpapers.pendingH - anchors.horizontalCenter: parent.horizontalCenter - width: mockPane.width - visible: text !== "" - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.Wrap - text: subject !== "" ? Wallpapers.qualityNote(subject, Wallpapers.target) : "" - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 } - color: Wallpapers.qualityColor(subject, Wallpapers.target) - } - - // wallhaven-dl searches wallhaven.cc and finds larger - // copies of low-res wallpapers. Launched through its - // desktop entry, which needs no ~/bin on quickshell's PATH - // and keeps the app's own taskbar icon. The panel closes - // so the app window is not opened under the overlay. - Tab { - anchors.horizontalCenter: parent.horizontalCenter - text: "Open wallhaven-dl" - onClicked: { - Quickshell.execDetached(["gtk-launch", "wallhaven-dl"]); - tab.dismiss(); - } - } - - Row { - anchors.horizontalCenter: parent.horizontalCenter - spacing: 8 - - Tab { - text: Wallpapers.applying ? "applying…" : "Apply" - selected: Wallpapers.dirty && !Wallpapers.applying - enabled: Wallpapers.dirty && !Wallpapers.applying - onClicked: Wallpapers.apply() - } - Tab { - text: "Reset" - enabled: Wallpapers.dirty && !Wallpapers.applying - onClicked: Wallpapers.clearPending() - } - } - } - } } -- cgit v1.2.3