shift-shell/components/mobileshell/qml/homescreen/WallpaperSelector.qml
Micah Stanley d4eaf693c6 Folio/Halcyon: Expand Background Blur Effect using a MaskLayer
This merge request expands upon the folio and halcyon background blur effects, making the folio background blur include the backgrounds of folder icons, the favorites bar, and wallpaper selector, and for halcyon, it now includes the folder icons, app library, search, and wallpaper selector. To accomplish this, a mask layer plugin was created to easily attach to these elements. This way, we can use a `OpacityMask` to cut out from the existing blur layer, thus hopefully keeping the performance cost low. And with my limited testing, it does at least seems to run about the same on my oneplus 6t, though it is not really a low end device, so I can not fairly judge the impact for something slower (eg. PinePhone). To be on the safe side, a third option was also added to the folio settings, allowing for the ability to toggle back to the old functionality if needed.

![Screenshot_20250613_135521](/uploads/d5aa81d6589b61fbba675e4a6e621b55/Screenshot_20250613_135521.png)
![Screenshot_20250613_135536](/uploads/bd726459a131f736e2711ced3fe90d4f/Screenshot_20250613_135536.png)
![Screenshot_20250613_135505](/uploads/c603627b4e65d4b956a1e0b6463d28f3/Screenshot_20250613_135505.png)
![Screenshot_20250627_093729](/uploads/e5f1ad672361c2b9bae23e57905336eb/Screenshot_20250627_093729.png)
2025-06-27 14:27:30 -04:00

164 lines
5.9 KiB
QML

// SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
// SPDX-FileCopyrightText: 2022-2024 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls as Controls
import org.kde.kirigami 2.20 as Kirigami
import org.kde.plasma.wallpapers.image 2.0 as Wallpaper
import org.kde.kquickcontrolsaddons 2.0 as Addons
import org.kde.plasma.private.mobileshell.wallpaperimageplugin as WallpaperImagePlugin
import org.kde.plasma.private.mobileshell as MobileShell
Controls.Drawer {
id: imageWallpaperDrawer
dragMargin: 0
property MobileShell.MaskManager maskManager
required property bool horizontal
signal wallpaperSettingsRequested()
onOpened: {
wallpapersView.forceActiveFocus()
}
implicitWidth: Kirigami.Units.gridUnit * 10
implicitHeight: Kirigami.Units.gridUnit * 8
width: imageWallpaperDrawer.horizontal ? implicitWidth : parent.width
height: imageWallpaperDrawer.horizontal ? parent.height : implicitHeight
Wallpaper.ImageBackend {
id: imageWallpaper
}
background: null
ListView {
id: wallpapersView
anchors.fill: parent
anchors.leftMargin: imageWallpaperDrawer.leftMargin
anchors.rightMargin: imageWallpaperDrawer.rightMargin
anchors.bottomMargin: imageWallpaperDrawer.bottomMargin
orientation: imageWallpaperDrawer.horizontal ? ListView.Vertical : ListView.Horizontal
keyNavigationEnabled: true
highlightFollowsCurrentItem: true
snapMode: ListView.SnapToItem
model: imageWallpaper.wallpaperModel
headerPositioning: ListView.InlineHeader
header: Controls.ItemDelegate {
id: openSettings
width: imageWallpaperDrawer.horizontal ? wallpapersView.width : height * (imageWallpaperDrawer.width / imageWallpaperDrawer.Screen.height)
height: imageWallpaperDrawer.horizontal ? width / (imageWallpaperDrawer.Screen.width / imageWallpaperDrawer.Screen.height) : wallpapersView.height
padding: Kirigami.Units.gridUnit / 2
leftPadding: padding
topPadding: padding
rightPadding: padding
bottomPadding: padding
background: Rectangle {
radius: Kirigami.Units.cornerRadius
color: Qt.rgba(255, 255, 255, (openSettings.down || openSettings.highlighted) ? 0.3 : 0.2)
Component.onCompleted: {
if (maskManager) {
maskManager.assignToMask(this)
}
}
}
contentItem: Item {
Kirigami.Icon {
anchors.centerIn: parent
implicitHeight: Kirigami.Units.iconSizes.large
implicitWidth: Kirigami.Units.iconSizes.large
source: 'list-add'
color: 'white'
}
}
onClicked: imageWallpaperDrawer.wallpaperSettingsRequested()
Keys.onReturnPressed: clicked();
}
delegate: Controls.ItemDelegate {
id: delegate
width: imageWallpaperDrawer.horizontal ? wallpapersView.width : height * (imageWallpaperDrawer.width / imageWallpaperDrawer.Screen.height)
height: imageWallpaperDrawer.horizontal ? width / (imageWallpaperDrawer.Screen.width / imageWallpaperDrawer.Screen.height) : (wallpapersView ? wallpapersView.height : 0)
padding: Kirigami.Units.largeSpacing - (wallpapersView.currentIndex === index ? Kirigami.Units.smallSpacing : 0)
property real scaleAmount: wallpapersView.currentIndex === index ? 0 : Kirigami.Units.smallSpacing
Behavior on scaleAmount {
NumberAnimation {
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}
Behavior on padding {
NumberAnimation {
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}
leftPadding: padding
topPadding: padding
rightPadding: padding
bottomPadding: padding
topInset: scaleAmount
bottomInset: scaleAmount
leftInset: scaleAmount
rightInset: scaleAmount
property bool isCurrent: WallpaperImagePlugin.WallpaperPlugin.homescreenWallpaperPath == model.path
onIsCurrentChanged: {
if (isCurrent) {
wallpapersView.currentIndex = index;
}
}
z: wallpapersView.currentIndex === index ? 2 : 0
contentItem: Item {
Kirigami.Icon {
anchors.centerIn: parent
width: Kirigami.Units.iconSizes.large
height: width
source: "view-preview"
visible: !walliePreview.visible
}
Addons.QPixmapItem {
id: walliePreview
visible: model.screenshot != null
anchors.fill: parent
smooth: true
pixmap: model.screenshot
fillMode: Image.PreserveAspectCrop
}
}
onClicked: {
WallpaperImagePlugin.WallpaperPlugin.setHomescreenWallpaper(model.path);
}
Keys.onReturnPressed: {
clicked();
}
background: Rectangle {
color: Qt.rgba(255, 255, 255, (delegate.down || delegate.highlighted) ? 0.4 : 0.2)
radius: Kirigami.Units.cornerRadius
Component.onCompleted: {
if (maskManager) {
maskManager.assignToMask(this)
}
}
}
}
}
}