shift-shell/containments/homescreens/folio/package/contents/ui/delegate/AppDelegate.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

126 lines
4 KiB
QML

// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: LGPL-2.0-or-later
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import QtQuick.Effects
import org.kde.kirigami 2.20 as Kirigami
import org.kde.private.mobile.homescreen.folio 1.0 as Folio
import org.kde.plasma.private.mobileshell.state as MobileShellState
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.plasma.plasmoid
AbstractDelegate {
id: root
shadow: true
name: application ? application.name : ""
// This may be null for short periods of time due to model changes
property Folio.FolioApplication application
property alias iconItem: icon
property bool turnToFolder: false
property bool turnToFolderAnimEnabled: false
function launchApp() {
if (!application) {
return;
}
if (application.icon !== "" && !root.application.running) {
MobileShellState.ShellDBusClient.openAppLaunchAnimationWithPosition(
Plasmoid.screen,
application.icon,
application.name,
application.storageId,
root.iconItem.Kirigami.ScenePosition.x + root.iconItem.width/2,
root.iconItem.Kirigami.ScenePosition.y + root.iconItem.height/2,
Math.min(root.iconItem.width, root.iconItem.height));
}
application.setMinimizedDelegate(root);
MobileShell.AppLaunch.launchOrActivateApp(application.storageId);
}
onAfterClickAnimation: {
launchApp();
}
contentItem: Item {
height: folio.FolioSettings.delegateIconSize
width: folio.FolioSettings.delegateIconSize
// Background for folder creation animation
Rectangle {
id: rect
radius: Kirigami.Units.cornerRadius
color: Qt.rgba(255, 255, 255, 0.3)
anchors.fill: parent
Component.onCompleted: {
if (maskManager) {
maskManager.assignToMask(this)
}
}
opacity: root.turnToFolder ? 1 : 0
property real scaleAmount: root.turnToFolder ? 1.2 : 1.0
Behavior on scaleAmount {
enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
}
Behavior on opacity {
enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
}
transform: Scale {
origin.x: rect.width / 2
origin.y: rect.height / 2
xScale: rect.scaleAmount
yScale: rect.scaleAmount
}
}
// Application icon
DelegateAppIcon {
id: icon
folio: root.folio
anchors.fill: parent
source: root.application ? root.application.icon : ""
property real scaleAmount: root.turnToFolder ? 0.3 : 1.0
Behavior on scaleAmount {
enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: root.turnToFolderAnimEnabled ? Kirigami.Units.longDuration : 0; easing.type: Easing.InOutQuad }
}
transform: Scale {
origin.x: icon.width / 2
origin.y: icon.height / 2
xScale: icon.scaleAmount
yScale: icon.scaleAmount
}
// Running indicator
Rectangle {
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: -Kirigami.Units.smallSpacing
}
visible: root.application && root.application.running
radius: width
width: Kirigami.Units.smallSpacing
height: width
color: Kirigami.Theme.highlightColor
}
}
}
}