diff --git a/.config/quickshell/ii/modules/common/Appearance.qml b/.config/quickshell/ii/modules/common/Appearance.qml index 870bbfe36..e1f0853a5 100644 --- a/.config/quickshell/ii/modules/common/Appearance.qml +++ b/.config/quickshell/ii/modules/common/Appearance.qml @@ -343,6 +343,8 @@ Singleton { property real baseVerticalBarWidth: 46 property real verticalBarWidth: Config.options.bar.cornerStyle === 1 ? (baseVerticalBarWidth + root.sizes.hyprlandGapsOut * 2) : baseVerticalBarWidth + property real wallpaperSelectorWidth: 1000 + property real wallpaperSelectorHeight: 580 } syntaxHighlightingTheme: root.m3colors.darkmode ? "Monokai" : "ayu Light" diff --git a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml index 0a9abab5f..76923705f 100644 --- a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml +++ b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelector.qml @@ -28,12 +28,7 @@ Scope { WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand color: "transparent" - anchors { - top: true - bottom: true - left: true - right: true - } + anchors.top: true margins { top: Appearance.sizes.barHeight + Appearance.sizes.hyprlandGapsOut } @@ -42,6 +37,9 @@ Scope { item: content } + implicitHeight: Appearance.sizes.wallpaperSelectorHeight + implicitWidth: Appearance.sizes.wallpaperSelectorWidth + HyprlandFocusGrab { // Click outside to close id: grab windows: [ panelWindow ] @@ -54,8 +52,7 @@ Scope { WallpaperSelectorContent { id: content anchors { - top: parent.top - horizontalCenter: parent.horizontalCenter + fill: parent } } } diff --git a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml index 670fcabce..52a75658b 100644 --- a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml +++ b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml @@ -15,8 +15,7 @@ import Quickshell.Hyprland Item { id: root property int columns: 4 - property int thumbnailWidth: 256 - property int thumbnailHeight: 144 + property real previewAspectRatio: 16 / 9 implicitHeight: columnLayout.implicitHeight implicitWidth: columnLayout.implicitWidth property var filteredWallpapers: Wallpapers.wallpapers @@ -63,13 +62,13 @@ Item { ColumnLayout { id: columnLayout - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - spacing: 8 + anchors.fill: parent + spacing: -Appearance.sizes.elevationMargin - Item { // Search box - implicitHeight: filterField.implicitHeight - implicitWidth: filterField.implicitWidth + Item { + // Search box + implicitHeight: filterField.implicitHeight + Appearance.sizes.elevationMargin * 2 + implicitWidth: filterField.implicitWidth + Appearance.sizes.elevationMargin * 2 Layout.alignment: Qt.AlignHCenter StyledRectangularShadow { @@ -78,7 +77,11 @@ Item { TextField { id: filterField - implicitHeight: 40 + anchors { + fill: parent + margins: Appearance.sizes.elevationMargin + } + implicitHeight: 44 implicitWidth: Appearance.sizes.searchWidth padding: 10 placeholderText: "Search wallpapers..." @@ -94,7 +97,7 @@ Item { font.pixelSize: Appearance.font.pixelSize.normal onTextChanged: { - root.filterQuery = text + root.filterQuery = text; } Keys.onPressed: event => { @@ -133,48 +136,38 @@ Item { Item { // The grid id: wallpaperGrid - Layout.alignment: Qt.AlignHCenter - implicitWidth: wallpaperGridBackground.implicitWidth - implicitHeight: wallpaperGridBackground.implicitHeight + Layout.fillWidth: true + Layout.fillHeight: true + implicitWidth: wallpaperGridBackground.implicitWidth + Appearance.sizes.elevationMargin * 2 + implicitHeight: wallpaperGridBackground.implicitHeight + Appearance.sizes.elevationMargin * 2 StyledRectangularShadow { target: wallpaperGridBackground } Rectangle { id: wallpaperGridBackground - color: Appearance.colors.colLayer0 - radius: Appearance.rounding.screenRounding + anchors { + fill: parent + margins: Appearance.sizes.elevationMargin + } + focus: true border.width: 1 border.color: Appearance.colors.colLayer0Border - focus: true + color: Appearance.colors.colLayer0 + radius: Appearance.rounding.screenRounding + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: wallpaperGridBackground.width + height: wallpaperGridBackground.height + radius: wallpaperGridBackground.radius + } + } property int calculatedRows: Math.ceil(grid.count / grid.columns) - implicitWidth: { - if (root.filteredWallpapers.length === 0) { - return 300; - } else if (root.filteredWallpapers.length < grid.columns) { - return root.filteredWallpapers.length * grid.cellWidth + 16; - } else { - return Math.min(panelWindow.width * 0.7, 900); - } - } - - implicitHeight: { - if (root.filteredWallpapers.length === 0) { - return 100; - } else { - return Math.min(panelWindow.height * 0.6, Math.min(calculatedRows, 3) * grid.cellHeight + 16); - } - } - - Behavior on implicitWidth { - animation: Appearance.animation.elementMove.numberAnimation.createObject(this) - } - - Behavior on implicitHeight { - animation: Appearance.animation.elementMove.numberAnimation.createObject(this) - } + implicitWidth: grid.implicitWidth + implicitHeight: grid.implicitHeight GridView { id: grid @@ -185,8 +178,8 @@ Item { readonly property int rows: Math.max(1, Math.ceil(count / columns)) anchors.fill: parent - cellWidth: root.thumbnailWidth - cellHeight: root.thumbnailHeight + cellWidth: width / root.columns + cellHeight: cellWidth / root.previewAspectRatio clip: true interactive: true keyNavigationWraps: true @@ -202,9 +195,7 @@ Item { model: ScriptModel { values: { - return root.filteredWallpapers.filter(w => ( - w.toLowerCase().includes(root.filterQuery.toLowerCase()) - )); + return root.filteredWallpapers.filter(w => (w.toLowerCase().includes(root.filterQuery.toLowerCase()))); } } onModelChanged: currentIndex = 0 @@ -233,61 +224,49 @@ Item { 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 - } + Image { + id: thumbnailImage + anchors { + fill: parent + margins: 8 + } + 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 + mipmap: false - Rectangle { - anchors.fill: parent - anchors.margins: 8 - color: Appearance.colors.colLayer2 - radius: Appearance.rounding.small + sourceSize.width: Math.min(128, grid.cellWidth - 16) + sourceSize.height: Math.min(96, grid.cellHeight - 16) - 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 - mipmap: false + opacity: status === Image.Ready ? 1 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } - sourceSize.width: Math.min(128, grid.cellWidth - 16) - sourceSize.height: Math.min(96, grid.cellHeight - 16) - - opacity: status === Image.Ready ? 1 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: thumbnailImage.width - height: thumbnailImage.height - radius: Appearance.rounding.small - } - } - - Rectangle { - anchors.fill: parent - color: "transparent" - border.width: 1 - border.color: Appearance.colors.colOutlineVariant + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: thumbnailImage.width + height: thumbnailImage.height radius: Appearance.rounding.small } } + + Rectangle { + anchors.fill: parent + color: "transparent" + radius: Appearance.rounding.small + border.width: (index === grid.currentIndex || parent.isHovered) ? 2 : 1 + border.color: (index === grid.currentIndex || parent.isHovered) ? Appearance.colors.colSecondary : Appearance.colors.colOutlineVariant + } } MouseArea { @@ -313,35 +292,6 @@ Item { } } } - - 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: Appearance.animationCurves.expressiveDefaultSpatialDuration - easing.bezierCurve: Appearance.animationCurves.expressiveDefaultSpatial - } - NumberAnimation { - property: "opacity" - from: 0.0 - to: 1.0 - duration: Appearance.animationCurves.expressiveDefaultSpatialDuration - easing.bezierCurve: Appearance.animationCurves.expressiveDefaultSpatial - } - } - } } Label {