From 980533052bc7c89b09e38e3340c240dc992bf1e7 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Mon, 18 Aug 2025 21:47:55 +0700 Subject: [PATCH] wallpaper selector: remove some useless layout crap --- .../wallpaperSelector/WallpaperSelector.qml | 356 +++++++++--------- 1 file changed, 173 insertions(+), 183 deletions(-) diff --git a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml index 91a9dbc04..effd880ce 100644 --- a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml +++ b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml @@ -12,17 +12,20 @@ import Quickshell.Wayland import Quickshell.Hyprland Scope { - id: scope + id: root + property int thumbnailWidth: 128 + property int thumbnailHeight: 72 Loader { active: GlobalStates.wallpaperSelectorOpen sourceComponent: PanelWindow { - id: root - readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen) + id: panelWindow + readonly property HyprlandMonitor monitor: Hyprland.monitorFor(panelWindow.screen) property bool monitorIsFocused: (Hyprland.focusedMonitor?.id == monitor?.id) property var filteredWallpapers: Wallpapers.wallpapers + exclusionMode: ExclusionMode.Ignore WlrLayershell.namespace: "quickshell:wallpaperSelector" WlrLayershell.layer: WlrLayer.Overlay WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand @@ -35,6 +38,10 @@ Scope { right: true } + margins { + top: Appearance.sizes.barHeight + Appearance.sizes.hyprlandGapsOut + } + ColumnLayout { id: layout anchors.horizontalCenter: parent.horizontalCenter @@ -43,9 +50,9 @@ Scope { TextField { id: filterField - Layout.preferredWidth: bg.implicitWidth - Layout.alignment: Qt.AlignHcenter + Layout.alignment: Qt.AlignHCenter implicitHeight: 40 + implicitWidth: Appearance.sizes.searchWidth padding: 10 placeholderText: "Search wallpapers..." placeholderTextColor: Appearance.colors.colSubtext @@ -68,9 +75,9 @@ Scope { newModel.push(wallpaperPath); } } - root.filteredWallpapers = newModel; + panelWindow.filteredWallpapers = newModel; } else { - root.filteredWallpapers = Wallpapers.wallpapers; + panelWindow.filteredWallpapers = Wallpapers.wallpapers; } } @@ -114,24 +121,25 @@ Scope { border.width: 1 border.color: Appearance.colors.colLayer0Border radius: Appearance.rounding.screenRounding + // Layout.alignment: Qt.AlignHCenter property int calculatedRows: Math.ceil(grid.count / grid.columns) implicitWidth: { - if (root.filteredWallpapers.length === 0) { + if (panelWindow.filteredWallpapers.length === 0) { return 300; - } else if (root.filteredWallpapers.length < grid.columns) { - return root.filteredWallpapers.length * grid.cellWidth + 16; + } else if (panelWindow.filteredWallpapers.length < grid.columns) { + return panelWindow.filteredWallpapers.length * grid.cellWidth + 16; } else { - return Math.min(root.width * 0.7, 900); + return Math.min(panelWindow.width * 0.7, 900); } } implicitHeight: { - if (root.filteredWallpapers.length === 0) { + if (panelWindow.filteredWallpapers.length === 0) { return 100; } else { - return Math.min(root.height * 0.6, Math.min(calculatedRows, 3) * grid.cellHeight + 16); + return Math.min(panelWindow.height * 0.6, Math.min(calculatedRows, 3) * grid.cellHeight + 16); } } @@ -182,204 +190,186 @@ Scope { } } - ColumnLayout { + GridView { + id: grid + visible: panelWindow.filteredWallpapers.length > 0 + + readonly property int columns: 7 + property int currentIndex: 0 + readonly property int rows: Math.max(1, Math.ceil(count / columns)) + anchors.fill: parent - anchors.margins: 8 - spacing: 8 + cellWidth: root.thumbnailWidth + cellHeight: root.thumbnailHeight + clip: true + interactive: true + keyNavigationWraps: true + boundsBehavior: Flickable.StopAtBounds - GridView { - id: grid - visible: root.filteredWallpapers.length > 0 + cacheBuffer: cellHeight * 2 + ScrollBar.horizontal: ScrollBar { + policy: ScrollBar.AsNeeded + } + ScrollBar.vertical: ScrollBar { + policy: ScrollBar.AsNeeded + } - readonly property int columns: 4 - property int currentIndex: 0 - readonly property int rows: Math.max(1, Math.ceil(count / columns)) + model: panelWindow.filteredWallpapers + onModelChanged: currentIndex = 0 - Layout.preferredWidth: columns * cellWidth - Layout.alignment: Qt.AlignHCenter - Layout.fillHeight: true - cellWidth: 128 - cellHeight: 72 - clip: true - interactive: true - keyNavigationWraps: true - boundsBehavior: Flickable.StopAtBounds - - cacheBuffer: cellHeight * 2 - ScrollBar.horizontal: ScrollBar { - policy: ScrollBar.AsNeeded - visible: false - } - ScrollBar.vertical: ScrollBar { - policy: ScrollBar.AsNeeded - visible: false - } - - model: root.filteredWallpapers - onModelChanged: currentIndex = 0 - - function moveSelection(delta) { - for (let i = 0; i < count; i++) { - const item = itemAtIndex(i); - if (item) { - item.isHovered = false; - } + function moveSelection(delta) { + for (let i = 0; i < count; i++) { + const item = itemAtIndex(i); + if (item) { + item.isHovered = false; } - currentIndex = Math.max(0, Math.min(count - 1, currentIndex + delta)); - positionViewAtIndex(currentIndex, GridView.Contain); } - function activateCurrent() { - const path = model[currentIndex]; - if (!path) - return; - GlobalStates.wallpaperSelectorOpen = false; - filterField.text = ""; - Wallpapers.apply(path); + currentIndex = Math.max(0, Math.min(count - 1, currentIndex + delta)); + positionViewAtIndex(currentIndex, GridView.Contain); + } + function activateCurrent() { + const path = model[currentIndex]; + if (!path) + return; + GlobalStates.wallpaperSelectorOpen = false; + filterField.text = ""; + Wallpapers.apply(path); + } + + delegate: Item { + width: grid.cellWidth + height: grid.cellHeight + property bool isHovered: false + + Rectangle { + anchors.fill: parent + radius: Appearance.rounding.windowRounding + color: Appearance.colors.colLayer1 + border.width: (index === grid.currentIndex || parent.isHovered) ? 3 : 0 + border.color: Appearance.colors.colSecondary } - delegate: Item { - width: grid.cellWidth - height: grid.cellHeight - property bool isHovered: false + Rectangle { + anchors.fill: parent + anchors.margins: 8 + color: Appearance.colors.colLayer2 + radius: Appearance.rounding.elementRounding Rectangle { - anchors.fill: parent - radius: Appearance.rounding.windowRounding - color: Appearance.colors.colLayer1 - border.width: (index === grid.currentIndex || parent.isHovered) ? 3 : 0 - border.color: Appearance.colors.colSecondary - } - - Rectangle { - anchors.fill: parent - anchors.margins: 8 - color: Appearance.colors.colLayer2 + anchors.centerIn: parent + width: Math.min(parent.width * 0.4, 32) + height: Math.min(parent.height * 0.4, 32) radius: Appearance.rounding.elementRounding + color: Appearance.colors.colLayer3 + visible: thumbnailImage.status !== Image.Ready - Rectangle { - anchors.centerIn: parent - width: Math.min(parent.width * 0.4, 32) - height: Math.min(parent.height * 0.4, 32) - radius: Appearance.rounding.elementRounding - color: Appearance.colors.colLayer3 - visible: thumbnailImage.status !== Image.Ready - - opacity: 0.3 - SequentialAnimation on opacity { - running: parent.visible - loops: Animation.Infinite - NumberAnimation { - to: 1.0 - duration: 800 - easing.type: Easing.InOutSine - } - NumberAnimation { - to: 0.3 - duration: 800 - easing.type: Easing.InOutSine - } + opacity: 0.3 + SequentialAnimation on opacity { + running: parent.visible + loops: Animation.Infinite + NumberAnimation { + to: 1.0 + duration: 800 + easing.type: Easing.InOutSine } - } - - Image { - id: thumbnailImage - anchors.fill: parent - source: { - const resolvedUrl = Qt.resolvedUrl(modelData); - const md5Hash = Qt.md5(resolvedUrl); - const cacheSize = "normal" - const thumbnailPath = `${Directories.genericCache}/thumbnails/${cacheSize}/${md5Hash}.png`; - return thumbnailPath - } - fillMode: Image.PreserveAspectCrop - asynchronous: true - cache: false - smooth: true - - sourceSize.width: Math.min(128, grid.cellWidth - 16) - sourceSize.height: Math.min(96, grid.cellHeight - 16) - - mipmap: false - - opacity: status === Image.Ready ? 1 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + NumberAnimation { + to: 0.3 + duration: 800 + easing.type: Easing.InOutSine } } } - MouseArea { + Image { + id: thumbnailImage anchors.fill: parent - hoverEnabled: true - onEntered: { - for (let i = 0; i < grid.count; i++) { - const item = grid.itemAtIndex(i); - if (item && item !== parent) { - item.isHovered = false; - } + source: { + const resolvedUrl = Qt.resolvedUrl(modelData); + const md5Hash = Qt.md5(resolvedUrl); + const cacheSize = "normal" + const thumbnailPath = `${Directories.genericCache}/thumbnails/${cacheSize}/${md5Hash}.png`; + return thumbnailPath + } + fillMode: Image.PreserveAspectCrop + asynchronous: true + cache: false + smooth: true + + sourceSize.width: Math.min(128, grid.cellWidth - 16) + sourceSize.height: Math.min(96, grid.cellHeight - 16) + + mipmap: false + + opacity: status === Image.Ready ? 1 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: { + for (let i = 0; i < grid.count; i++) { + const item = grid.itemAtIndex(i); + if (item && item !== parent) { + item.isHovered = false; } - parent.isHovered = true; - grid.currentIndex = index; - } - onExited: { - parent.isHovered = false; - } - onClicked: { - GlobalStates.wallpaperSelectorOpen = false; - filterField.text = ""; - Wallpapers.apply(modelData); } + parent.isHovered = true; + grid.currentIndex = index; } - } - - add: Transition { - from: "*" - to: "*" - ParallelAnimation { - PropertyAnimation { - property: "x" - from: grid.contentX + (grid.width / 2) - width / 2 - } - PropertyAnimation { - property: "y" - from: grid.contentY + (grid.height / 2) - height / 2 - } - NumberAnimation { - property: "scale" - from: 0.0 - to: 1.0 - duration: animationCurves.expressiveDefaultSpatialDuration - easing.bezierCurve: animationCurves.expressiveDefaultSpatial - } - NumberAnimation { - property: "opacity" - from: 0.0 - to: 1.0 - duration: animationCurves.expressiveDefaultSpatialDuration - easing.bezierCurve: animationCurves.expressiveDefaultSpatial - } + onExited: { + parent.isHovered = false; + } + onClicked: { + GlobalStates.wallpaperSelectorOpen = false; + filterField.text = ""; + Wallpapers.apply(modelData); } } } - // show when no wallpaper found - ColumnLayout { - id: noWallpapersFoundLayout - visible: root.filteredWallpapers.length === 0 - anchors.centerIn: parent - implicitHeight: noWallpapersFoundLabel.implicitHeight - implicitWidth: noWallpapersFoundLabel.implicitWidth - - Label { - id: noWallpapersFoundLabel - text: "No wallpapers found" - font.family: Appearance.font.family.main - font.pixelSize: Appearance.font.pixelSize.normal - color: Appearance.colors.colSubtext - Layout.alignment: Qt.AlignHcenter | Qt.AlignVCenter + add: Transition { + from: "*" + to: "*" + ParallelAnimation { + PropertyAnimation { + property: "x" + from: grid.contentX + (grid.width / 2) - width / 2 + } + PropertyAnimation { + property: "y" + from: grid.contentY + (grid.height / 2) - height / 2 + } + NumberAnimation { + property: "scale" + from: 0.0 + to: 1.0 + duration: animationCurves.expressiveDefaultSpatialDuration + easing.bezierCurve: animationCurves.expressiveDefaultSpatial + } + NumberAnimation { + property: "opacity" + from: 0.0 + to: 1.0 + duration: animationCurves.expressiveDefaultSpatialDuration + easing.bezierCurve: animationCurves.expressiveDefaultSpatial + } } } } + + Label { + id: noWallpapersFoundLabel + visible: panelWindow.filteredWallpapers.length === 0 + anchors.centerIn: parent + text: "No wallpapers found" + font.family: Appearance.font.family.main + font.pixelSize: Appearance.font.pixelSize.normal + color: Appearance.colors.colSubtext + } } }