Convert more uses of QtGraphicalEffects to MultiEffect

components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml

@@ -1,10 +1,8 @@
-/*
+// SPDX-FileCopyrightText: 2021-2023 Devin Lin <devin@kde.org>
- *  SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
- *
- *  SPDX-License-Identifier: LGPL-2.0-or-later
- */
 
-import QtQuick 2.15
+import QtQuick
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
@@ -21,6 +19,7 @@ Item {
         maskSource: Item {
             width: img.width
             height: img.height
+
             Rectangle {
                 anchors.centerIn: parent
                 width: img.width
@@ -46,18 +45,15 @@ Item {
         
         // apply lighten, saturate and blur effect
         layer.enabled: true
-        layer.effect: HueSaturation {
+        layer.effect: MultiEffect {
-            cached: true
+            brightness: 0.2
-
-            lightness: 0.2
             saturation: 1.5
 
-            layer.enabled: true
+            blurEnabled: true
-            layer.effect: FastBlur {
+            blurMax: 32
-                cached: true
+            blur: 1.0
-                radius: 64
+            blurMultiplier: 2
-                transparentBorder: false
+            autoPaddingEnabled: false
-            }
         }
     }
 }

components/mobileshell/qml/widgets/mediacontrols/MediaControlsSource.qml

@@ -5,7 +5,7 @@
  *  SPDX-License-Identifier: LGPL-2.0-or-later
  */
 
-import QtQuick 2.15
+import QtQuick
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.plasma5support 2.0 as P5Support

components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml

@@ -5,11 +5,11 @@
  *  SPDX-License-Identifier: LGPL-2.0-or-later
  */
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Controls as QQC2
 
-import org.kde.kirigami 2.12 as Kirigami
+import org.kde.kirigami as Kirigami
 
 import org.kde.plasma.private.mobileshell.state 1.0 as MobileShellState
 import org.kde.plasma.core 2.0 as PlasmaCore

components/mobileshell/qml/widgets/notifications/BaseNotificationItem.qml

@@ -5,10 +5,9 @@
  * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
 */
 
-import QtQuick 2.8
+import QtQuick
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
-import QtQuick.Window 2.2
+import QtQuick.Window
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.plasma5support 2.0 as P5Support

components/mobileshell/qml/widgets/notifications/NotificationCard.qml

@@ -1,11 +1,8 @@
-/*
+// SPDX-FileCopyrightText: 2021-2023 Devin Lin <devin@kde.org>
- * SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
- * 
- * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
-*/
 
-import QtQuick 2.15
+import QtQuick
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
 import org.kde.kirigami 2.12 as Kirigami
 
@@ -46,16 +43,16 @@ Item {
         }
     }
     
-    // glow
+    // shadow
-    RectangularGlow {
+    MultiEffect {
-        visible: Math.abs(dragOffset) !== root.width
-        anchors.topMargin: 1
-        anchors.leftMargin: 1
         anchors.fill: mainCard
-        cornerRadius: mainCard.radius * 2
+        visible: Math.abs(dragOffset) !== root.width
-        glowRadius: 2
+        source: mainCard
-        spread: 0.2
+        blurMax: 16
-        color: Qt.lighter(PlasmaCore.Theme.backgroundColor, 0.1)
+        shadowEnabled: true
+        shadowVerticalOffset: 1
+        shadowOpacity: 0.5
+        shadowColor: Qt.lighter(PlasmaCore.Theme.backgroundColor, 0.1)
     }
 
     // shadow

components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml

@@ -57,9 +57,10 @@ RowLayout {
         id: applicationNameLabel
         Layout.leftMargin: PlasmaCore.Units.smallSpacing
         Layout.fillWidth: true
-        opacity: 0.8
+        opacity: 0.6
         textFormat: Text.PlainText
         elide: Text.ElideLeft
+        font.bold: true
         text: notificationHeading.applicationName + (notificationHeading.originName ? " · " + notificationHeading.originName : "")
     }
 

components/mobileshell/qml/widgets/notifications/ThumbnailStrip.qml

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: LGPL-2.0-or-later
 */
 
-import QtQuick 2.0
+import QtQuick
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 3.0 as PlasmaComponents3
@@ -62,13 +62,16 @@ MouseArea {
         id: previewBackground
         anchors.fill: parent
         fillMode: Image.PreserveAspectCrop
-        layer.enabled: true
         opacity: 0.25
         pixmap: thumbnailer.pixmap
-        layer.effect: FastBlur {
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
             source: previewBackground
             anchors.fill: parent
-            radius: 30
+            autoPaddingEnabled: false
+            blurEnabled: true
+            blur: 1.0
         }
     }
 

containments/taskpanel/package/contents/ui/main.qml

@@ -8,7 +8,6 @@
 import QtQuick 2.4
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.15
-import Qt5Compat.GraphicalEffects
 
 import org.kde.taskmanager 0.1 as TaskManager
 import org.kde.plasma.plasmoid 2.0

kwin/mobiletaskswitcher/qml/Task.qml

@@ -226,9 +226,8 @@ Item {
                         wId: delegate.window.internalId
                         anchors.fill: parent
 
-                        layer {
+                        layer.enabled: true
-                            enabled: true
+                        layer.effect: ColorOverlay {
-                            effect: ColorOverlay {
                             color: Qt.rgba(0, 0, 0, delegate.darken)
                         }
                     }
@@ -236,7 +235,6 @@ Item {
             }
         }
     }
-    }
 }
 
 

kwin/mobiletaskswitcher/qml/TaskList.qml

@@ -120,8 +120,8 @@ MouseArea {
 
             // darken effect as task gets away from the centre of the screen
             darken: {
-                let distFromCentreProgress = Math.abs(x - repeater.leftMargin) / taskSwitcherState.taskWidth;
+                const distFromCentreProgress = Math.abs(x - repeater.leftMargin) / taskSwitcherState.taskWidth;
-                let upperBoundAdjust = Math.min(0.5, distFromCentreProgress) - 0.2;
+                const upperBoundAdjust = Math.min(0.5, distFromCentreProgress) - 0.2;
                 return Math.max(0, upperBoundAdjust);
             }
 

kwin/mobiletaskswitcher/qml/TaskSwitcher.qml

@@ -4,7 +4,6 @@
 
 import QtQuick
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core as PlasmaCore
 import org.kde.plasma.components 3.0 as PlasmaComponents

lookandfeel/contents/lockscreen/Clock.qml

@@ -7,7 +7,6 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.plasma5support 2.0 as P5Support
@@ -29,19 +28,8 @@ Item {
         intervalAlignment: P5Support.Types.AlignToMinute
     }
     
-    DropShadow {
-        anchors.fill: parent
-        source: clockColumn
-        cached: true
-        verticalOffset: 1
-        radius: 4
-        samples: 6
-        color: Qt.rgba(0, 0, 0, 0.4)
-    }
-    
     ColumnLayout {
         id: clockColumn
-        opacity: 0.8
         spacing: PlasmaCore.Units.gridUnit
         
         anchors.top: parent.top
@@ -55,6 +43,11 @@ Item {
             Layout.alignment: root.layoutAlignment
             font.weight: Font.Bold
             font.pointSize: 36
+
+            layer.enabled: true
+            layer.effect: MobileShell.TextDropShadow {
+                blurMax: 16
+            }
         }
         
         PC3.Label {
@@ -64,6 +57,11 @@ Item {
             Layout.alignment: root.layoutAlignment
             font.weight: Font.Bold
             font.pointSize: 10
+
+            layer.enabled: true
+            layer.effect: MobileShell.TextDropShadow {
+                blurMax: 16
+            }
         }
     }
 }

lookandfeel/contents/lockscreen/Keypad.qml

@@ -1,13 +1,10 @@
-/*
+// SPDX-FileCopyrightText: 2020-2023 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- * 
- * SPDX-License-Identifier: GPL-2.0-or-later
-*/
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.1
+import QtQuick.Controls
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
 import org.kde.plasma.components 3.0 as PlasmaComponents
 import org.kde.plasma.core 2.0 as PlasmaCore
@@ -58,16 +55,6 @@ Rectangle {
         id: haptics
     }
 
-    RectangularGlow {
-        anchors.topMargin: 1
-        anchors.fill: passwordBar
-        cached: true
-        glowRadius: 4
-        spread: 0.2
-        color: keypadRoot.dropShadowColor
-        opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
-    }
-    
     // pin display and bar
     PasswordBar {
         id: passwordBar
@@ -83,6 +70,15 @@ Rectangle {
         
         keypadOpen: swipeProgress === 1
         previewCharIndex: -2
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            blurMax: 16
+            shadowEnabled: true
+            shadowVerticalOffset: 1
+            shadowOpacity: 0.3
+            shadowColor: keypadRoot.dropShadowColor
+        }
     }
     
     // actual number keys
@@ -135,18 +131,15 @@ Rectangle {
                         id: keyRect
                         radius: grid.keyRadius
                         color: button.pressed ? keypadRoot.buttonPressedColor : keypadRoot.buttonColor
-                        
-                        RectangularGlow {
-                            anchors.topMargin: 1
-                            anchors.fill: parent
-                            
-                            z: -1
-                            cornerRadius: keyRect.radius * 2
-                            cached: true
-                            glowRadius: 2
-                            spread: 0.2
-                            color: button.pressed ? keypadRoot.buttonPressedColor : keypadRoot.dropShadowColor
                     }
+
+                    layer.enabled: true
+                    layer.effect: MultiEffect {
+                        blurMax: 16
+                        shadowEnabled: true
+                        shadowVerticalOffset: 1
+                        shadowOpacity: 0.3
+                        shadowColor: button.pressed ? keypadRoot.buttonPressedColor : keypadRoot.dropShadowColor
                     }
 
                     onPressedChanged: {

lookandfeel/contents/lockscreen/LockScreen.qml

@@ -1,14 +1,10 @@
-/*
+// SPDX-FileCopyrightText: 2019 Nicolas Fella <nicolas.fella@gmx.de>
- * SPDX-FileCopyrightText: 2019 Nicolas Fella <nicolas.fella@gmx.de>
+// SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- *
- * SPDX-License-Identifier: GPL-2.0-or-later
- */
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.notificationmanager 1.1 as Notifications
@@ -47,7 +43,7 @@ Item {
         asynchronous: true
         sourceComponent: WallpaperBlur {
             source: wallpaper
-            blur: root.notificationsShown || root.drawerOpen // only blur once animation finished for performance
+            shouldBlur: root.notificationsShown || root.drawerOpen // only blur once animation finished for performance
         }
     }
 

lookandfeel/contents/lockscreen/LockScreenNarrowContent.qml

@@ -1,10 +1,9 @@
-/*
+// SPDX-FileCopyrightText: 2021-2023 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- * SPDX-License-Identifier: GPL-2.0-or-later
- */
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
+import QtQuick.Effects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.workspace.keyboardlayout 1.0
@@ -64,6 +63,15 @@ Loader {
                 Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
                 Layout.leftMargin: PlasmaCore.Units.gridUnit
                 Layout.rightMargin: PlasmaCore.Units.gridUnit
+
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    blurMax: 16
+                    shadowEnabled: true
+                    shadowVerticalOffset: 1
+                    shadowOpacity: 0.5
+                    shadowColor: Qt.lighter(PlasmaCore.Theme.backgroundColor, 0.1)
+                }
             }
 
             NotificationsComponent {

lookandfeel/contents/lockscreen/LockScreenState.qml

@@ -1,8 +1,8 @@
 // SPDX-FileCopyrightText: 2022 Devin Lin <espidev@gmail.com>
 // SPDX-License-Identifier: GPL-2.0-or-later
 
-import QtQml 2.15
+import QtQml
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
     id: root

lookandfeel/contents/lockscreen/LockScreenWideScreenContent.qml

@@ -1,10 +1,9 @@
-/*
+// SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- * SPDX-License-Identifier: GPL-2.0-or-later
- */
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
+import QtQuick.Effects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.workspace.keyboardlayout 1.0
@@ -49,6 +48,15 @@ Loader {
                     Layout.alignment: Qt.AlignLeft
                     Layout.fillWidth: true
                     Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
+
+                    layer.enabled: true
+                    layer.effect: MultiEffect {
+                        blurMax: 16
+                        shadowEnabled: true
+                        shadowVerticalOffset: 1
+                        shadowOpacity: 0.5
+                        shadowColor: Qt.lighter(PlasmaCore.Theme.backgroundColor, 0.1)
+                    }
                 }
             }
         }

lookandfeel/contents/lockscreen/NotificationsComponent.qml

@@ -1,12 +1,8 @@
-/*
+// SPDX-FileCopyrightText: 2022 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- *
- * SPDX-License-Identifier: GPL-2.0-or-later
- */
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.notificationmanager 1.1 as Notifications

lookandfeel/contents/lockscreen/PasswordBar.qml

@@ -1,12 +1,9 @@
-/*
+// SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
- * SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
- * SPDX-License-Identifier: GPL-2.0-or-later
- */
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.1
+import QtQuick.Controls
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.workspace.keyboardlayout 1.0

lookandfeel/contents/lockscreen/WallpaperBlur.qml

@@ -3,16 +3,17 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import QtQuick 2.12
+import QtQuick
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
-FastBlur {
+MultiEffect {
-    id: fastBlur
+    autoPaddingEnabled: false
-    cached: true
+    blurEnabled: true
-    radius: 50
+    blurMax: 50
+    blur: 1.0
     
-    property bool blur
+    property bool shouldBlur
-    opacity: blur ? 1 : 0
+    opacity: shouldBlur ? 1 : 0
     
     Behavior on opacity {
         NumberAnimation {