never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WallpaperSelect: fix thumbnails rounded corner with a mask

Browse source
This commit is contained in:
quadbyte 2025-08-06 21:10:14 -04:00
parent b7f103cc99
commit 27059b9bac
1 changed files with 50 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

63
Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
View file

@ -1,12 +1,21 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts import QtQuick.Layouts
import qs.Settings
import qs.Components import qs.Components
import qs.Services import qs.Services
import qs.Settings
Rectangle { Rectangle {
id: wallpaperOverlay id: wallpaperOverlay
// Function to show the overlay and load wallpapers
function show() {
// Ensure wallpapers are loaded
WallpaperManager.loadWallpapers();
wallpaperOverlay.visible = true;
}
anchors.fill: parent anchors.fill: parent
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
visible: false visible: false
@ -22,10 +31,11 @@ Rectangle {
// Content area that stops event propagation // Content area that stops event propagation
MouseArea { MouseArea {
// Stop event propagation
anchors.fill: parent anchors.fill: parent
anchors.margins: 24 anchors.margins: 24
onClicked: { onClicked: {
// Stop event propagation
} }
ColumnLayout { ColumnLayout {
@ -46,6 +56,7 @@ Rectangle {
GridView { GridView {
id: wallpaperGrid id: wallpaperGrid
anchors.fill: parent anchors.fill: parent
cellWidth: Math.max(120, (parent.width / 3) - 12) cellWidth: Math.max(120, (parent.width / 3) - 12)
cellHeight: cellWidth * 0.6 cellHeight: cellWidth * 0.6
@ -62,8 +73,9 @@ Rectangle {
Rectangle { Rectangle {
id: wallpaperItem id: wallpaperItem
anchors.fill: parent anchors.fill: parent
anchors.margins: 4 anchors.margins: 3
color: Theme.surface color: Theme.surface
radius: 12 radius: 12
border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
@ -71,25 +83,49 @@ Rectangle {
Image { Image {
id: wallpaperImage id: wallpaperImage
anchors.fill: parent anchors.fill: parent
anchors.margins: 4 anchors.margins: 2
source: modelData source: modelData
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
asynchronous: true asynchronous: true
cache: true cache: true
smooth: true smooth: true
mipmap: true mipmap: true
sourceSize.width: Math.min(width, 480) sourceSize.width: Math.min(width, 480)
sourceSize.height: Math.min(height, 270) sourceSize.height: Math.min(height, 270)
opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0
// Apply circular mask for rounded corners
layer.enabled: true
opacity: (wallpaperImage.status == Image.Ready) ? 1.0 : 0.0
Behavior on opacity { Behavior on opacity {
NumberAnimation { NumberAnimation {
duration: 300 duration: 300
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }
layer.effect: MultiEffect {
maskEnabled: true
maskSource: mask
}
}
Item {
id: mask
anchors.fill: wallpaperImage
layer.enabled: true
visible: false
Rectangle {
width: wallpaperImage.width
height: wallpaperImage.height
radius: 12
}
} }
MouseArea { MouseArea {
@ -101,18 +137,19 @@ Rectangle {
wallpaperOverlay.visible = false; wallpaperOverlay.visible = false;
} }
} }
} }
} }
} }
} }
} }
} }
} }
// Function to show the overlay and load wallpapers }
function show() {
// Ensure wallpapers are loaded
WallpaperManager.loadWallpapers();
wallpaperOverlay.visible = true;
}
}