popout: decouple shadow from content layer

quickshell/Modules/DankBar/Widgets/RunningApps.qml

@@ -155,6 +155,7 @@ BasePill {
     property real touchpadThreshold: 500
 
     onWheel: function (wheelEvent) {
+        wheelEvent.accepted = true;
         const deltaY = wheelEvent.angleDelta.y;
         const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
 

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -22,6 +22,8 @@ PanelWindow {
     property bool _isDestroying: false
     property bool _finalized: false
     property real _lastReportedAlignedHeight: -1
+    property real _storedTopMargin: 0
+    property real _storedBottomMargin: 0
     readonly property string clearText: I18n.tr("Dismiss")
     property bool descriptionExpanded: false
     readonly property bool hasExpandableBody: (notificationData?.htmlBody || "").replace(/<[^>]*>/g, "").trim().length > 0
@@ -146,6 +148,8 @@ PanelWindow {
     }
     Component.onCompleted: {
         _lastReportedAlignedHeight = Theme.px(implicitHeight, dpr);
+        _storedTopMargin = getTopMargin();
+        _storedBottomMargin = getBottomMargin();
         if (SettingsData.notificationPopupPrivacyMode)
             descriptionExpanded = false;
         if (hasValidData) {
@@ -179,14 +183,30 @@ PanelWindow {
     property bool isBottomCenter: SettingsData.notificationPopupPosition === SettingsData.Position.BottomCenter
     property bool isCenterPosition: isTopCenter || isBottomCenter
 
-    anchors.top: isTopCenter || SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Left
-    anchors.bottom: isBottomCenter || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom || SettingsData.notificationPopupPosition === SettingsData.Position.Right
+    anchors.top: true
+    anchors.bottom: true
     anchors.left: SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom
     anchors.right: SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Right
 
+    mask: contentInputMask
+
+    Region {
+        id: contentInputMask
+        item: contentMaskRect
+    }
+
+    Item {
+        id: contentMaskRect
+        visible: false
+        x: content.x
+        y: content.y
+        width: alignedWidth
+        height: alignedHeight
+    }
+
     margins {
-        top: getTopMargin()
-        bottom: getBottomMargin()
+        top: _storedTopMargin
+        bottom: _storedBottomMargin
         left: getLeftMargin()
         right: getRightMargin()
     }
@@ -263,7 +283,14 @@ PanelWindow {
         id: content
 
         x: Theme.snap((win.width - alignedWidth) / 2, dpr)
-        y: Theme.snap((win.height - alignedHeight) / 2, dpr)
+        y: {
+            const isTop = isTopCenter || SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Left;
+            if (isTop) {
+                return Theme.snap(screenY, dpr);
+            } else {
+                return Theme.snap(win.height - alignedHeight - screenY, dpr);
+            }
+        }
         width: alignedWidth
         height: alignedHeight
         visible: !win._finalized
@@ -311,7 +338,7 @@ PanelWindow {
             id: bgShadowLayer
             anchors.fill: parent
             anchors.margins: Theme.snap(4, win.dpr)
-            layer.enabled: !win._isDestroying && win.screenValid && !implicitHeightAnim.running
+            layer.enabled: !win._isDestroying && win.screenValid
             layer.smooth: false
             layer.textureSize: Qt.size(Math.round(width * win.dpr), Math.round(height * win.dpr))
             layer.textureMirroring: ShaderEffectSource.MirrorVertically

quickshell/Widgets/DankPopout.qml

@@ -469,6 +469,44 @@ Item {
                 }
             }
 
+            Rectangle {
+                id: shadowSource
+                anchors.centerIn: parent
+                width: parent.width
+                height: parent.height
+                radius: Theme.cornerRadius
+                color: "black"
+                visible: false
+                opacity: contentWrapper.opacity
+                scale: contentWrapper.scale
+                x: contentWrapper.x
+                y: contentWrapper.y
+
+                property real shadowBlurPx: 10
+                property real shadowSpreadPx: 0
+                property real shadowBaseAlpha: 0.60
+                readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
+                readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
+                readonly property int blurMax: 64
+
+                layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+                layer.smooth: false
+
+                layer.effect: MultiEffect {
+                    id: shadowFx
+                    autoPaddingEnabled: true
+                    shadowEnabled: true
+                    blurEnabled: false
+                    maskEnabled: false
+                    shadowBlur: Math.max(0, Math.min(1, shadowSource.shadowBlurPx / shadowSource.blurMax))
+                    shadowScale: 1 + (2 * shadowSource.shadowSpreadPx) / Math.max(1, Math.min(shadowSource.width, shadowSource.height))
+                    shadowColor: {
+                        const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
+                        return Theme.withAlpha(baseColor, shadowSource.effectiveShadowAlpha);
+                    }
+                }
+            }
+
             Item {
                 id: contentWrapper
                 anchors.centerIn: parent
@@ -480,31 +518,10 @@ Item {
                 x: Theme.snap(contentContainer.animX + (parent.width - width) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
                 y: Theme.snap(contentContainer.animY + (parent.height - height) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
 
-                property real shadowBlurPx: 10
-                property real shadowSpreadPx: 0
-                property real shadowBaseAlpha: 0.60
-                readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
-                readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
-                readonly property int blurMax: 64
-
-                layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+                layer.enabled: contentWrapper.opacity < 1
                 layer.smooth: false
                 layer.textureSize: root.dpr > 1 ? Qt.size(Math.ceil(width * root.dpr), Math.ceil(height * root.dpr)) : Qt.size(0, 0)
 
-                layer.effect: MultiEffect {
-                    id: shadowFx
-                    autoPaddingEnabled: true
-                    shadowEnabled: true
-                    blurEnabled: false
-                    maskEnabled: false
-                    shadowBlur: Math.max(0, Math.min(1, contentWrapper.shadowBlurPx / contentWrapper.blurMax))
-                    shadowScale: 1 + (2 * contentWrapper.shadowSpreadPx) / Math.max(1, Math.min(contentWrapper.width, contentWrapper.height))
-                    shadowColor: {
-                        const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
-                        return Theme.withAlpha(baseColor, contentWrapper.effectiveShadowAlpha);
-                    }
-                }
-
                 Behavior on opacity {
                     NumberAnimation {
                         duration: animationDuration