diff options
Diffstat (limited to 'desktop/modules/appearance')
| -rw-r--r-- | desktop/modules/appearance/README.md | 2 | ||||
| -rw-r--r-- | desktop/modules/appearance/WallpaperTab.qml | 217 |
2 files changed, 108 insertions, 111 deletions
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() - } - } - } - } } |