noctalia-shell/Widgets/Sidebar/Panel/WallpaperPanel.qml
Quadbyte de94d94265
Wallpaper refining (#81)
* Wallpaper refining

- Swww: allow all images formats supported by Swww but only show the one
we can render in the panel
- Fix: timer should be restarted when selecting a wallpaper
- Fix: avoid recomputing selected thumbnail by altering the border width
- Removed LazyLoader as it was not helping

* Wallpapers changes

- revert: maintaining a single list all wallpapers, support only basic
images format.
- settings: reordered wallpapers settings and made the Swww settings
conditionals to activating the useSWWW toggle

* Fix broken avatar display in Panel, Settings and LockScreen

---------

Co-authored-by: Sébastien Atoch <sebastien@atracktiv.com>
2025-08-03 20:37:13 +01:00

170 lines
6.4 KiB
QML

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell
import Quickshell.Io
import Quickshell.Widgets
import Quickshell.Wayland
import qs.Settings
import qs.Services
PanelWindow {
id: wallpaperPanelModal
implicitWidth: 480
implicitHeight: 780
visible: false
color: "transparent"
anchors.top: true
anchors.right: true
margins.right: 0
margins.top: 0
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
property var wallpapers: []
Connections {
target: WallpaperManager
function onWallpaperListChanged() {
wallpapers = WallpaperManager.wallpaperList
}
}
onVisibleChanged: {
if (wallpaperPanel.visible) {
wallpapers = WallpaperManager.wallpaperList
} else {
wallpapers = []
}
}
Rectangle {
anchors.fill: parent
color: Theme.backgroundPrimary
radius: 24
ColumnLayout {
anchors.fill: parent
anchors.margins: 32
spacing: 0
RowLayout {
Layout.fillWidth: true
spacing: 20
Layout.preferredHeight: 48
Text {
text: "image"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader
color: Theme.accentPrimary
}
Text {
text: "Wallpapers"
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeHeader
font.bold: true
color: Theme.textPrimary
Layout.fillWidth: true
}
Rectangle {
width: 36
height: 36
radius: 18
color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1
Text {
anchors.centerIn: parent
text: "close"
font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
}
MouseArea {
id: closeButtonArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
wallpaperPanel.visible = false;
}
cursorShape: Qt.PointingHandCursor
}
}
}
Rectangle {
Layout.fillWidth: true
height: 1
color: Theme.outline
opacity: 0.12
}
// Wallpaper grid area
Item {
Layout.fillWidth: true
Layout.fillHeight: true
anchors.topMargin: 16
anchors.bottomMargin: 16
anchors.leftMargin: 0
anchors.rightMargin: 0
anchors.margins: 0
clip: true
ScrollView {
id: scrollView
anchors.fill: parent
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
GridView {
id: wallpaperGrid
anchors.fill: parent
cellWidth: Math.max(120, (scrollView.width / 3) - 12)
cellHeight: cellWidth * 0.6
model: wallpapers
cacheBuffer: 64
leftMargin: 8
rightMargin: 8
topMargin: 8
bottomMargin: 8
delegate: Item {
width: wallpaperGrid.cellWidth - 8
height: wallpaperGrid.cellHeight - 8
ClippingRectangle {
id: wallpaperItem
anchors.fill: parent
anchors.margins: 4
color: Qt.darker(Theme.backgroundPrimary, 1.1)
radius: 12
border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
border.width: 2
Image {
id: wallpaperImage
anchors.fill: parent
source: modelData
fillMode: Image.PreserveAspectCrop
asynchronous: true
cache: true
smooth: true
mipmap: true
// Limit memory usage - FullHD/4 on width and height
sourceSize.width: Math.min(width, 480)
sourceSize.height: Math.min(height, 270)
// Opacity animation once image is ready
opacity: (wallpaperImage.status == Image.Ready) ? 1.0 : 0.0
Behavior on opacity {
NumberAnimation {
duration: 300
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
WallpaperManager.changeWallpaper(modelData);
}
}
}
}
}
}
}
}
}
}