qml: Blurred indicator & menu drop downs

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)
 

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: {

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

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)