From 21dfdc7bd555fcb507fdf6d671ff55729683c3bf Mon Sep 17 00:00:00 2001
From: Alfred Neumayer <dev.beidl@gmail.com>
Date: Fri, 11 Nov 2022 20:06:59 +0100
Subject: [PATCH] qml: Blurred indicator & menu drop downs

Since blurring the stage & dragging it's source rectangle
is cheap now, blur the drop-down indicator & app menus!

This moves the BackgroundBlur component to a common place
and makes the panel use it with additional shading applied
on top for readability with light backgrounds and app windows.
---
 .../BackgroundBlur.qml                        |  0
 qml/Panel/MenuContent.qml                     |  4 +---
 qml/Panel/Panel.qml                           | 15 +++++++++++++++
 qml/Panel/PanelMenu.qml                       | 19 +++++++++++++++++++
 qml/Shell.qml                                 |  1 +
 5 files changed, 36 insertions(+), 3 deletions(-)
 rename qml/{Launcher => Components}/BackgroundBlur.qml (100%)

diff --git a/qml/Launcher/BackgroundBlur.qml b/qml/Components/BackgroundBlur.qml
similarity index 100%
rename from qml/Launcher/BackgroundBlur.qml
rename to qml/Components/BackgroundBlur.qml
diff --git a/qml/Panel/MenuContent.qml b/qml/Panel/MenuContent.qml
index 46a7111f0..9652c1fa8 100644
--- a/qml/Panel/MenuContent.qml
+++ b/qml/Panel/MenuContent.qml
@@ -22,15 +22,13 @@ import Utils 0.1
 import "../Components"
 import "Indicators"
 
-Rectangle {
+Item {
     id: content
 
     property QtObject model: null
     property int currentMenuIndex: -1
     property Component pageDelegate
 
-    color: theme.palette.normal.background
-
     width: units.gu(40)
     height: units.gu(42)
 
diff --git a/qml/Panel/Panel.qml b/qml/Panel/Panel.qml
index 219ad9b72..366040efb 100644
--- a/qml/Panel/Panel.qml
+++ b/qml/Panel/Panel.qml
@@ -33,6 +33,7 @@ import "Indicators"
 
 Item {
     id: root
+
     readonly property real panelHeight: panelArea.y + minimizedPanelHeight
     readonly property bool fullyClosed: indicators.fullyClosed && applicationMenus.fullyClosed
 
@@ -49,6 +50,8 @@ Item {
     property bool hasKeyboard: false
     property bool supportsMultiColorLed: true
 
+    property var blurSource : null
+
     // Whether our expanded menus should take up the full width of the panel
     property bool partialWidth: width >= units.gu(60)
 
@@ -273,6 +276,11 @@ Item {
             enableHint: !callHint.active && !fullscreenMode
             showOnClick: false
             panelColor: panelAreaBackground.color
+            blurSource: root.blurSource
+            blurRect: Qt.rect(x,
+                              0,
+                              root.width,
+                              root.height)
 
             onShowTapped: {
                 if (callHint.active) {
@@ -322,6 +330,7 @@ Item {
             enabled: d.enableTouchMenus
             opacity: d.showTouchMenu ? 1 : 0
             visible: opacity != 0
+            clip: true
             Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
 
             onEnabledChanged: {
@@ -395,6 +404,11 @@ Item {
             enableHint: !callHint.active && !fullscreenMode
             showOnClick: !callHint.visible
             panelColor: panelAreaBackground.color
+            blurSource: root.blurSource
+            blurRect: Qt.rect(x,
+                              0,
+                              root.width,
+                              root.height)
 
             // On small screens, the Indicators' handle area is the entire top
             // bar unless there is an application menu. In that case, our handle
@@ -463,6 +477,7 @@ Item {
 
             enabled: !applicationMenus.expanded
             opacity: !callHint.visible && !applicationMenus.expanded ? 1 : 0
+            clip: true
             Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
 
             onEnabledChanged: {
diff --git a/qml/Panel/PanelMenu.qml b/qml/Panel/PanelMenu.qml
index d19dfe1e8..36256adea 100644
--- a/qml/Panel/PanelMenu.qml
+++ b/qml/Panel/PanelMenu.qml
@@ -41,6 +41,9 @@ Showable {
     property alias rowItemDelegate: bar.rowItemDelegate
     property alias pageDelegate: content.pageDelegate
 
+    property var blurSource : null
+    property rect blurRect : Qt.rect(0, 0, 0, 0)
+
     readonly property real unitProgress: Math.max(0, (height - minimizedPanelHeight) / (openedHeight - minimizedPanelHeight))
     readonly property bool fullyOpened: unitProgress >= 1
     readonly property bool partiallyOpened: unitProgress > 0 && unitProgress < 1.0
@@ -89,6 +92,17 @@ Showable {
 
     onUnitProgressChanged: d.updateState()
 
+    BackgroundBlur {
+        x: 0
+        y: 0
+        width: root.blurRect.width
+        height: root.blurRect.height
+        visible: root.height > root.minimizedPanelHeight
+        sourceItem: root.blurSource
+        blurRect: root.blurRect
+        occluding: false
+    }
+
     Item {
         anchors {
             left: parent.left
@@ -98,6 +112,11 @@ Showable {
         }
         clip: root.partiallyOpened
 
+        Rectangle {
+            color: "#BF000000"
+            anchors.fill: parent
+        }
+
         // eater
         MouseArea {
             anchors.fill: content
diff --git a/qml/Shell.qml b/qml/Shell.qml
index 81a798c70..e489d6f44 100644
--- a/qml/Shell.qml
+++ b/qml/Shell.qml
@@ -541,6 +541,7 @@ StyledItem {
             id: panel
             objectName: "panel"
             anchors.fill: parent //because this draws indicator menus
+            blurSource: greeter.shown ? greeter : stages
 
             mode: shell.usageScenario == "desktop" ? "windowed" : "staged"
             minimizedPanelHeight: units.gu(3)