From fcdf2dc7f6dc4e678f1bf568d0b2e396250fd117 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Tue, 20 May 2025 12:58:39 +0200 Subject: [PATCH] use multieffect for shadows --- .../modules/cheatsheet/Cheatsheet.qml | 23 +++++++------ .../quickshell/modules/common/Appearance.qml | 2 +- .../common/widgets/NotificationWidget.qml | 25 +++++++------- .../notificationPopup/NotificationPopup.qml | 2 +- .../onScreenDisplay/OsdValueIndicator.qml | 24 +++++++------- .../modules/overview/OverviewWidget.qml | 23 +++++++------ .../modules/overview/SearchWidget.qml | 21 ++++++------ .../modules/sidebarLeft/SidebarLeft.qml | 22 ++++++------- .../modules/sidebarLeft/anime/BooruImage.qml | 33 +++++++------------ .../modules/sidebarRight/SidebarRight.qml | 22 ++++++------- .../modules/sidebarRight/todo/TodoWidget.qml | 28 +++++----------- 11 files changed, 100 insertions(+), 125 deletions(-) diff --git a/.config/quickshell/modules/cheatsheet/Cheatsheet.qml b/.config/quickshell/modules/cheatsheet/Cheatsheet.qml index 2474430a..587e4715 100644 --- a/.config/quickshell/modules/cheatsheet/Cheatsheet.qml +++ b/.config/quickshell/modules/cheatsheet/Cheatsheet.qml @@ -5,8 +5,8 @@ import "root:/modules/common/widgets" import "root:/modules/common/functions/color_utils.js" as ColorUtils import QtQuick import QtQuick.Controls +import QtQuick.Effects import QtQuick.Layouts -import Qt5Compat.GraphicalEffects import Quickshell.Io import Quickshell import Quickshell.Widgets @@ -65,6 +65,16 @@ Scope { // Scope implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2 implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2 + layer.enabled: true + layer.effect: MultiEffect { + source: cheatsheetBackground + anchors.fill: cheatsheetBackground + shadowEnabled: true + shadowVerticalOffset: 1 + shadowColor: Appearance.colors.colShadow + shadowBlur: 0.5 + } + Keys.onPressed: (event) => { // Esc to close if (event.key === Qt.Key_Escape) { cheatsheetRoot.hide() @@ -124,17 +134,6 @@ Scope { // Scope } } - // Shadow - DropShadow { - anchors.fill: cheatsheetBackground - horizontalOffset: 0 - verticalOffset: 2 - radius: Appearance.sizes.elevationMargin - samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs - color: Appearance.colors.colShadow - source: cheatsheetBackground - } - } } diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 0c26b342..381bfcab 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -261,7 +261,7 @@ Singleton { property real searchWidthCollapsed: 260 property real searchWidth: 450 property real hyprlandGapsOut: 5 - property real elevationMargin: 7 + property real elevationMargin: 8 property real fabShadowRadius: 5 property real fabHoveredShadowRadius: 7 } diff --git a/.config/quickshell/modules/common/widgets/NotificationWidget.qml b/.config/quickshell/modules/common/widgets/NotificationWidget.qml index fd7106ba..cb94c95c 100644 --- a/.config/quickshell/modules/common/widgets/NotificationWidget.qml +++ b/.config/quickshell/modules/common/widgets/NotificationWidget.qml @@ -5,6 +5,7 @@ import "root:/modules/common/functions/color_utils.js" as ColorUtils import Qt5Compat.GraphicalEffects import QtQuick import QtQuick.Controls +import QtQuick.Effects import QtQuick.Layouts import Quickshell import Quickshell.Io @@ -191,6 +192,16 @@ Item { ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2 radius: Appearance.rounding.normal + layer.enabled: true + layer.effect: MultiEffect { + source: notificationBackground + anchors.fill: notificationBackground + shadowEnabled: popup + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + Behavior on x { enabled: enableAnimation NumberAnimation { @@ -208,20 +219,6 @@ Item { } } } - - Loader { - active: popup - anchors.fill: notificationBackground - sourceComponent: DropShadow { - id: notificationShadow - source: notificationBackground - radius: 5 - samples: radius * 2 + 1 - color: Appearance.colors.colShadow - verticalOffset: 2 - horizontalOffset: 0 - } - } } diff --git a/.config/quickshell/modules/notificationPopup/NotificationPopup.qml b/.config/quickshell/modules/notificationPopup/NotificationPopup.qml index 79e855c2..f4373f14 100644 --- a/.config/quickshell/modules/notificationPopup/NotificationPopup.qml +++ b/.config/quickshell/modules/notificationPopup/NotificationPopup.qml @@ -99,7 +99,7 @@ Scope { ColumnLayout { // Scrollable window content id: columnLayout anchors.horizontalCenter: parent.horizontalCenter - width: parent.width - Appearance.sizes.hyprlandGapsOut * 2 + width: parent.width - Appearance.sizes.elevationMargin * 2 spacing: 0 // The widgets themselves have margins for spacing // Notifications are added by the above signal handlers diff --git a/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml b/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml index 36a9748b..58d4ac5c 100644 --- a/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml +++ b/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml @@ -3,10 +3,11 @@ import "root:/modules/common" import "root:/modules/common/widgets" import QtQuick import QtQuick.Controls +import QtQuick.Effects import QtQuick.Layouts import Quickshell import Quickshell.Widgets -import Qt5Compat.GraphicalEffects +// import Qt5Compat.GraphicalEffects Item { id: root @@ -31,6 +32,16 @@ Item { color: Appearance.colors.colLayer0 implicitWidth: valueRow.implicitWidth + layer.enabled: true + layer.effect: MultiEffect { + source: valueIndicator + anchors.fill: valueIndicator + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + RowLayout { // Icon on the left, stuff on the right id: valueRow Layout.margins: 10 @@ -94,15 +105,4 @@ Item { } } } - - DropShadow { - id: valueShadow - anchors.fill: valueIndicator - source: valueIndicator - radius: Appearance.sizes.elevationMargin - samples: radius * 2 + 1 - color: Appearance.colors.colShadow - verticalOffset: 2 - horizontalOffset: 0 - } } \ No newline at end of file diff --git a/.config/quickshell/modules/overview/OverviewWidget.qml b/.config/quickshell/modules/overview/OverviewWidget.qml index 4de7beed..f4498408 100644 --- a/.config/quickshell/modules/overview/OverviewWidget.qml +++ b/.config/quickshell/modules/overview/OverviewWidget.qml @@ -3,8 +3,8 @@ import "root:/services/" import "root:/modules/common" import "root:/modules/common/widgets" import "root:/modules/common/functions/color_utils.js" as ColorUtils -import Qt5Compat.GraphicalEffects import QtQuick +import QtQuick.Effects import QtQuick.Layouts import Quickshell import Quickshell.Io @@ -59,6 +59,16 @@ Item { color: Appearance.colors.colLayer0 radius: Appearance.rounding.screenRounding * root.scale + 5 * 2 + layer.enabled: true + layer.effect: MultiEffect { + source: overviewBackground + anchors.fill: overviewBackground + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + ColumnLayout { id: workspaceColumnLayout @@ -210,15 +220,4 @@ Item { } } } - - DropShadow { - z: -9999 - anchors.fill: overviewBackground - horizontalOffset: 0 - verticalOffset: 2 - radius: Appearance.sizes.elevationMargin - samples: radius * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs - color: Appearance.colors.colShadow - source: overviewBackground - } } diff --git a/.config/quickshell/modules/overview/SearchWidget.qml b/.config/quickshell/modules/overview/SearchWidget.qml index 887480de..4320a96a 100644 --- a/.config/quickshell/modules/overview/SearchWidget.qml +++ b/.config/quickshell/modules/overview/SearchWidget.qml @@ -7,6 +7,7 @@ import Qt5Compat.GraphicalEffects import Qt.labs.platform import QtQuick import QtQuick.Controls +import QtQuick.Effects import QtQuick.Layouts import Quickshell import Quickshell.Io @@ -160,6 +161,15 @@ Item { // Wrapper implicitHeight: columnLayout.implicitHeight radius: Appearance.rounding.large color: Appearance.colors.colLayer0 + layer.enabled: true + layer.effect: MultiEffect { + source: searchWidgetContent + anchors.fill: searchWidgetContent + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } ColumnLayout { id: columnLayout @@ -366,15 +376,4 @@ Item { // Wrapper } } - - DropShadow { - id: searchWidgetShadow - anchors.fill: searchWidgetContent - source: searchWidgetContent - radius: Appearance.sizes.elevationMargin - samples: radius * 2 + 1 - color: Appearance.colors.colShadow - verticalOffset: 2 - horizontalOffset: 0 - } } \ No newline at end of file diff --git a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml index 2f1bad74..a17e7f58 100644 --- a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml +++ b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml @@ -5,6 +5,7 @@ import "root:/modules/common/widgets" import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Effects import Qt5Compat.GraphicalEffects import Quickshell.Io import Quickshell @@ -80,6 +81,16 @@ Scope { // Scope radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 focus: sidebarRoot.visible + layer.enabled: true + layer.effect: MultiEffect { + source: sidebarLeftBackground + anchors.fill: sidebarLeftBackground + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + Behavior on width { animation: Appearance.animation.elementMove.numberAnimation.createObject(this) } @@ -161,17 +172,6 @@ Scope { // Scope } } - // Shadow - DropShadow { - anchors.fill: sidebarLeftBackground - horizontalOffset: 0 - verticalOffset: 2 - radius: Appearance.sizes.elevationMargin - samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs - color: Appearance.colors.colShadow - source: sidebarLeftBackground - } - } } diff --git a/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml b/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml index 3bc9b461..4a754f81 100644 --- a/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml +++ b/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml @@ -8,10 +8,11 @@ import Qt.labs.platform import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Effects +import Qt5Compat.GraphicalEffects import Quickshell import Quickshell.Io import Quickshell.Hyprland -import Qt5Compat.GraphicalEffects Button { id: root @@ -137,6 +138,16 @@ Button { implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2 implicitWidth: contextMenuColumnLayout.implicitWidth + layer.enabled: true + layer.effect: MultiEffect { + source: contextMenu + anchors.fill: contextMenu + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + Behavior on opacity { NumberAnimation { duration: Appearance.animation.elementMoveFast.duration @@ -185,26 +196,6 @@ Button { } } } - - DropShadow { - opacity: root.showActions ? 1 : 0 - visible: opacity > 0 - anchors.fill: contextMenu - source: contextMenu - radius: Appearance.sizes.elevationMargin - samples: radius * 2 + 1 - color: Appearance.colors.colShadow - verticalOffset: 2 - horizontalOffset: 0 - - Behavior on opacity { - NumberAnimation { - duration: Appearance.animation.elementMoveFast.duration - easing.type: Appearance.animation.elementMoveFast.type - easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve - } - } - } } } } diff --git a/.config/quickshell/modules/sidebarRight/SidebarRight.qml b/.config/quickshell/modules/sidebarRight/SidebarRight.qml index e7dd4d9e..a8013e87 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarRight.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarRight.qml @@ -7,6 +7,7 @@ import "./quickToggles/" import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Effects import Qt5Compat.GraphicalEffects import Quickshell.Io import Quickshell @@ -65,6 +66,16 @@ Scope { color: Appearance.colors.colLayer0 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 + layer.enabled: true + layer.effect: MultiEffect { + source: sidebarRightBackground + anchors.fill: sidebarRightBackground + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + Keys.onPressed: (event) => { if (event.key === Qt.Key_Escape) { sidebarRoot.hide(); @@ -164,17 +175,6 @@ Scope { } } - // Shadow - DropShadow { - anchors.fill: sidebarRightBackground - horizontalOffset: 0 - verticalOffset: 2 - radius: Appearance.sizes.elevationMargin - samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs - color: Appearance.colors.colShadow - source: sidebarRightBackground - } - } } diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml index b18e03fb..8b32fd85 100644 --- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml +++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml @@ -4,8 +4,8 @@ import "root:/services" import "root:/modules/common/functions/color_utils.js" as ColorUtils import QtQuick import QtQuick.Controls +import QtQuick.Effects import QtQuick.Layouts -import Qt5Compat.GraphicalEffects Item { id: root @@ -173,25 +173,15 @@ Item { Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) } - } - DropShadow { - id: fabShadow - anchors.fill: fabBackground - source: fabBackground - horizontalOffset: 0 - verticalOffset: fabButton.hovered ? 4 : 2 - radius: fabButton.hovered ? Appearance.sizes.fabHoveredShadowRadius : Appearance.sizes.fabShadowRadius - samples: fabShadow.radius * 2 + 1 - color: Appearance.colors.colShadow - z: fabBackground.z - 1 - - Behavior on verticalOffset { - NumberAnimation { - duration: Appearance.animation.elementMoveFast.duration - easing.type: Appearance.animation.elementMoveFast.type - easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve - } + layer.enabled: true + layer.effect: MultiEffect { + source: fabBackground + anchors.fill: fabBackground + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowBlur: 0.6 + shadowVerticalOffset: fabButton.hovered ? 4 : 2 } }