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

136 lines
5.1 KiB
QML

// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: LGPL-2.0-or-later
import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import org.kde.plasma.components 3.0 as PC3
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.kirigami 2.10 as Kirigami
import org.kde.private.mobile.homescreen.folio 1.0 as Folio
MouseArea {
id: root
property Folio.HomeScreen folio
property MobileShell.MaskManager maskManager
property var homeScreen
readonly property real verticalMargin: Math.round((folio.HomeScreenState.pageHeight - folio.HomeScreenState.pageContentHeight) / 2)
readonly property real horizontalMargin: Math.round((folio.HomeScreenState.pageWidth - folio.HomeScreenState.pageContentWidth) / 2)
onPressAndHold: {
folio.HomeScreenState.openSettingsView()
haptics.buttonVibrate();
}
onDoubleClicked: {
if (folio.FolioSettings.doubleTapToLock) {
deviceLock.triggerLock();
}
}
MobileShell.HapticsEffect {
id: haptics
}
MobileShell.DeviceLock {
id: deviceLock
}
Repeater {
model: folio.PageListModel
delegate: HomeScreenPage {
id: homeScreenPage
folio: root.folio
maskManager: root.maskManager
pageNum: model.index
pageModel: model.delegate
homeScreen: root.homeScreen
anchors.fill: root
anchors.leftMargin: root.horizontalMargin
anchors.rightMargin: root.horizontalMargin
anchors.topMargin: root.verticalMargin
anchors.bottomMargin: root.verticalMargin
// animation so that full opacity is only when the page is in view
readonly property real distanceToCenter: Math.abs(-folio.HomeScreenState.pageViewX - root.width * pageNum)
readonly property real positionX: root.width * index + folio.HomeScreenState.pageViewX
readonly property real progressToCenter: 1 - Math.min(1, Math.max(0, distanceToCenter / root.width))
visible: opacity > 0
opacity: {
switch (folio.FolioSettings.pageTransitionEffect) {
case Folio.FolioSettings.StackTransition:
return (positionX < 0) ? progressToCenter :
((progressToCenter < 0.3) ? 0 : ((1 / 0.7) * (progressToCenter - 0.3)))
default:
return progressToCenter;
}
}
// x position of page
transform: {
switch (folio.FolioSettings.pageTransitionEffect) {
case Folio.FolioSettings.SlideTransition:
return [translate];
case Folio.FolioSettings.CubeTransition:
return [translate, cubeTransitionRotation];
case Folio.FolioSettings.FadeTransition:
return [];
case Folio.FolioSettings.StackTransition:
return [stackScale, stackTranslate];
case Folio.FolioSettings.RotationTransition:
return [translate, rotationTransitionRotation];
default:
return [translate];
}
}
Translate {
id: translate
x: homeScreenPage.positionX
}
Scale {
id: stackScale
origin.x: folio.HomeScreenState.pageWidth / 2
origin.y: folio.HomeScreenState.pageHeight / 2
xScale: (homeScreenPage.positionX < 0) ? 1 : 0.5 + homeScreenPage.progressToCenter * 0.5
yScale: (homeScreenPage.positionX < 0) ? 1 : 0.5 + homeScreenPage.progressToCenter * 0.5
}
Translate {
id: stackTranslate
x: Math.min(0, homeScreenPage.positionX)
}
Rotation {
id: cubeTransitionRotation
origin.x: (positionX < 0) ?
(folio.HomeScreenState.pageWidth / 2) * homeScreenPage.progressToCenter :
(folio.HomeScreenState.pageWidth / 2) + (folio.HomeScreenState.pageWidth / 2) * (1 - homeScreenPage.progressToCenter);
origin.y: folio.HomeScreenState.pageHeight / 2;
axis { x: 0; y: 1; z: 0 }
angle: {
return Math.min(1, Math.max(0, distanceToCenter / root.width)) * 90 * ((positionX > 0) ? 1 : -1)
}
}
Rotation {
id: rotationTransitionRotation
origin.x: (positionX < 0) ?
(folio.HomeScreenState.pageWidth / 2) * homeScreenPage.progressToCenter :
(folio.HomeScreenState.pageWidth / 2) + (folio.HomeScreenState.pageWidth / 2) * (1 - homeScreenPage.progressToCenter);
origin.y: 0
axis { x: -0.2; y: 0.3; z: 0.5 }
angle: {
return Math.min(1, Math.max(0, distanceToCenter / root.width)) * 90 * ((positionX > 0) ? 1 : -1)
}
}
}
}
}