actiondrawer: Dismiss on click on empty background area

components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml

@@ -54,85 +54,94 @@ PlasmaCore.ColorScope {
         interval: 60 * 1000
     }
     
-    // left side
+    MouseArea {
-    ColumnLayout {
+        anchors.fill: parent
-        opacity: applyMinMax(root.actionDrawer.offset / root.maximizedQuickSettingsOffset)
-        spacing: 0
-        anchors {
-            top: parent.top
-            topMargin: Math.min(root.width, root.height) * 0.06
-            bottom: parent.bottom
-            bottomMargin: Math.min(root.width, root.height) * 0.06
-            right: quickSettings.left
-            rightMargin: Math.min(root.width, root.height) * 0.06
-            left: parent.left
-            leftMargin: Math.min(root.width, root.height) * 0.06
-        }
         
-        PlasmaComponents.Label {
+        // dismiss drawer when background is clicked
-            id: clock
+        onClicked: root.actionDrawer.close();
-            text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
-            verticalAlignment: Qt.AlignTop
-            Layout.fillWidth: true
-
-            font.pixelSize: Math.min(40, Math.min(root.width, root.height) * 0.1)
-            font.weight: Font.ExtraLight
-            elide: Text.ElideRight
-        }
         
-        PlasmaComponents.Label {
+        // left side 
-            id: date
+        ColumnLayout {
-            text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
+            opacity: applyMinMax(root.actionDrawer.offset / root.maximizedQuickSettingsOffset)
-            verticalAlignment: Qt.AlignTop
+            spacing: 0
-            color: PlasmaCore.ColorScope.disabledTextColor
+            anchors {
-            Layout.fillWidth: true
+                top: parent.top
-            Layout.topMargin: PlasmaCore.Units.smallSpacing
+                topMargin: Math.min(root.width, root.height) * 0.06
-
+                bottom: parent.bottom
-            font.pixelSize: Math.min(20, Math.min(root.width, root.height) * 0.05)
+                bottomMargin: Math.min(root.width, root.height) * 0.06
-            font.weight: Font.Light
+                right: quickSettings.left
-        }
+                rightMargin: Math.min(root.width, root.height) * 0.06
-        
+                left: parent.left
-        MobileShell.NotificationsWidget {
+                leftMargin: Math.min(root.width, root.height) * 0.06
-            id: notificationWidget
-            historyModel: root.actionDrawer.notificationModel
-            historyModelType: root.actionDrawer.notificationModelType
-            notificationSettings: root.actionDrawer.notificationSettings
-            actionsRequireUnlock: root.actionDrawer.restrictedPermissions
-            onUnlockRequested: root.actionDrawer.permissionsRequested()
-            
-            Connections {
-                target: root.actionDrawer
-                
-                function onRunPendingNotificationAction() {
-                    notificationWidget.runPendingAction();
-                }
             }
             
-            // don't allow notifications widget to get too wide
+            PlasmaComponents.Label {
-            Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
+                id: clock
-            Layout.fillHeight: true
+                text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
-            Layout.fillWidth: true
+                verticalAlignment: Qt.AlignTop
-            Layout.topMargin: Math.min(root.width, root.height) * 0.02
+                Layout.fillWidth: true
+
+                font.pixelSize: Math.min(40, Math.min(root.width, root.height) * 0.1)
+                font.weight: Font.ExtraLight
+                elide: Text.ElideRight
+            }
+            
+            PlasmaComponents.Label {
+                id: date
+                text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
+                verticalAlignment: Qt.AlignTop
+                color: PlasmaCore.ColorScope.disabledTextColor
+                Layout.fillWidth: true
+                Layout.topMargin: PlasmaCore.Units.smallSpacing
+
+                font.pixelSize: Math.min(20, Math.min(root.width, root.height) * 0.05)
+                font.weight: Font.Light
+            }
+            
+            MobileShell.NotificationsWidget {
+                id: notificationWidget
+                historyModel: root.actionDrawer.notificationModel
+                historyModelType: root.actionDrawer.notificationModelType
+                notificationSettings: root.actionDrawer.notificationSettings
+                actionsRequireUnlock: root.actionDrawer.restrictedPermissions
+                onUnlockRequested: root.actionDrawer.permissionsRequested()
+                
+                Connections {
+                    target: root.actionDrawer
+                    
+                    function onRunPendingNotificationAction() {
+                        notificationWidget.runPendingAction();
+                    }
+                }
+                
+                onBackgroundClicked: root.actionDrawer.close();
+                
+                // don't allow notifications widget to get too wide
+                Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.topMargin: Math.min(root.width, root.height) * 0.02
+            }
         }
-    }
-    
-    // right sidebar
-    QuickSettingsPanel {
-        id: quickSettings
-        height: Math.min(root.height, Math.max(quickSettings.minimizedHeight, actionDrawer.offset))
-        width: intendedWidth
         
-        readonly property real intendedWidth: 360
+        // right sidebar
-        
+        QuickSettingsPanel {
-        anchors.top: parent.top
+            id: quickSettings
-        anchors.right: parent.right
+            height: Math.min(root.height, Math.max(quickSettings.minimizedHeight, actionDrawer.offset))
-        
+            width: intendedWidth
-        actionDrawer: root.actionDrawer
+            
-        fullHeight: root.height
+            readonly property real intendedWidth: 360
-        
+            
-        transform: Translate {
+            anchors.top: parent.top
-            id: translate
+            anchors.right: parent.right
-            y: Math.min(root.actionDrawer.offset - quickSettings.minimizedHeight, 0)
+            
+            actionDrawer: root.actionDrawer
+            fullHeight: root.height
+            
+            transform: Translate {
+                id: translate
+                y: Math.min(root.actionDrawer.offset - quickSettings.minimizedHeight, 0)
+            }
         }
     }
 }

components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml

@@ -92,6 +92,8 @@ PlasmaCore.ColorScope {
             }
         }
         
+        onBackgroundClicked: root.actionDrawer.close();
+        
         anchors {
             top: quickSettings.top
             topMargin: quickSettings.height + translate.y

components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml

@@ -68,6 +68,11 @@ Item {
      */
     signal unlockRequested()
     
+    /**
+     * Emitted when the background is clicked (not a notification or other element).
+     */
+    signal backgroundClicked()
+    
     /**
      * Run pending action that was pending for authentication when unlockRequested() was emitted.
      */
@@ -119,6 +124,11 @@ Item {
             criteria: ViewSection.FullString
         }
 
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.backgroundClicked()
+        }
+        
         PlasmaExtras.PlaceholderMessage {
             anchors.centerIn: parent
             width: parent.width - (PlasmaCore.Units.largeSpacing * 4)