Float convergence drawer content

Size the left drawer surface against the quick settings pane,\nkeep click-away gutters, and align notifications, media, and\ncalendar within the same framed area.

components/mobileshell/qml/actiondrawer/private/ContentContainer.qml

@@ -35,7 +35,16 @@ Item {
     readonly property real convergenceSurfaceSideInset: 0
     readonly property real convergenceSurfaceWidth: Math.max(0, width - convergenceSurfaceSideInset * 2)
     readonly property real convergenceSurfaceHeight: Math.max(0, height - convergenceSurfaceTopInset - convergenceSurfaceBottomInset)
-    readonly property real convergenceNotificationRightMargin: Math.max(convergenceSurfaceSideInset, width - (convergenceSurfaceSideInset + convergenceSurfaceWidth * 0.5))
+    readonly property real convergenceFloatingMargin: Kirigami.Units.gridUnit
+    readonly property real convergenceClickAwayGutter: Kirigami.Units.largeSpacing
+    readonly property real convergenceBottomClickAwayHeight: Kirigami.Units.gridUnit * 2
+    readonly property real convergenceLeftSurfaceBottomInset: convergenceSurfaceBottomInset + convergenceBottomClickAwayHeight
+    readonly property real convergenceQuickSettingsLeft: contentContainerLoader.item ? contentContainerLoader.item.quickSettingsPanelLeft : convergenceSurfaceWidth * 0.5
+    readonly property real convergenceNotificationRightMargin: Math.max(convergenceSurfaceSideInset, width - Math.max(convergenceSurfaceSideInset, convergenceQuickSettingsLeft - convergenceClickAwayGutter))
+    readonly property real convergenceLeftSurfaceTopInset: convergenceSurfaceTopInset + convergenceFloatingMargin
+    readonly property real convergenceLeftSurfaceLeftInset: convergenceSurfaceSideInset + convergenceFloatingMargin
+    readonly property real convergenceLeftSurfaceRightInset: convergenceNotificationRightMargin + convergenceFloatingMargin
+    readonly property real convergenceLeftSurfaceBottomMargin: convergenceLeftSurfaceBottomInset + convergenceFloatingMargin
 
     Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
     Kirigami.Theme.inherit: false
@@ -101,6 +110,28 @@ Item {
             LayoutItemProxy { target: contentContainerLoader }
         }
 
+        Item {
+            id: convergenceLeftSurface
+
+            visible: root.isConvergence && actionDrawer.mode != MobileShell.ActionDrawer.Portrait
+            opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                topMargin: root.convergenceLeftSurfaceTopInset
+                leftMargin: root.convergenceLeftSurfaceLeftInset
+                rightMargin: root.convergenceLeftSurfaceRightInset
+                bottomMargin: root.convergenceLeftSurfaceBottomMargin
+            }
+
+            MobileShell.PanelBackground {
+                anchors.fill: parent
+                panelType: MobileShell.PanelBackground.PanelType.Drawer
+            }
+        }
+
         // Mouse area for dismissing action drawer in portrait mode when background is clicked.
         MouseArea {
             anchors.fill: parent
@@ -120,8 +151,8 @@ Item {
 
             anchors {
                 topMargin: notificationDrawer.y + notificationDrawer.height + 1
-                leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (notificationDrawer.isConvergence ? root.convergenceSurfaceSideInset : 10)
+                leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (notificationDrawer.isConvergence ? root.convergenceLeftSurfaceLeftInset : 10)
-                rightMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (notificationDrawer.isConvergence ? root.convergenceNotificationRightMargin : notificationDrawer.notificationWidget.anchors.rightMargin + Kirigami.Units.gridUnit - notificationDrawer.anchors.leftMargin + 370)
+                rightMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (notificationDrawer.isConvergence ? root.convergenceLeftSurfaceRightInset : notificationDrawer.notificationWidget.anchors.rightMargin + Kirigami.Units.gridUnit - notificationDrawer.anchors.leftMargin + 370)
                 top: parent.top
                 left: parent.left
                 right: parent.right
@@ -168,6 +199,32 @@ Item {
             }
         }
 
+        Item {
+            id: convergenceMediaPanel
+
+            visible: root.isConvergence
+                     && actionDrawer.mode != MobileShell.ActionDrawer.Portrait
+                     && root.mediaControlsWidget.visible
+            opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
+            height: visible ? root.mediaControlsWidget.implicitHeight : 0
+
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                topMargin: notificationDrawer.hasNotifications
+                    ? toolButtons.y + toolButtons.height + Kirigami.Units.smallSpacing
+                    : notificationDrawer.y + notificationDrawer.height + Kirigami.Units.largeSpacing
+                leftMargin: root.convergenceLeftSurfaceLeftInset + Kirigami.Units.largeSpacing
+                rightMargin: root.convergenceLeftSurfaceRightInset + Kirigami.Units.largeSpacing
+            }
+
+            LayoutItemProxy {
+                anchors.fill: parent
+                target: root.mediaControlsWidget
+            }
+        }
+
         Item {
             id: convergenceCalendarPanel
 
@@ -180,22 +237,19 @@ Item {
                 left: parent.left
                 right: parent.right
                 bottom: parent.bottom
-                topMargin: notificationDrawer.hasNotifications
+                topMargin: convergenceMediaPanel.visible
-                    ? toolButtons.y + toolButtons.height + Kirigami.Units.smallSpacing
+                    ? convergenceMediaPanel.y + convergenceMediaPanel.height + Kirigami.Units.largeSpacing
-                    : notificationDrawer.y + notificationDrawer.height + Kirigami.Units.largeSpacing
+                    : notificationDrawer.hasNotifications
-                leftMargin: root.convergenceSurfaceSideInset + Kirigami.Units.gridUnit
+                        ? toolButtons.y + toolButtons.height + Kirigami.Units.largeSpacing
-                rightMargin: root.convergenceNotificationRightMargin + Kirigami.Units.gridUnit
+                        : notificationDrawer.y + notificationDrawer.height + Kirigami.Units.largeSpacing
-                bottomMargin: root.convergenceSurfaceBottomInset + Kirigami.Units.largeSpacing
+                    leftMargin: root.convergenceLeftSurfaceLeftInset + Kirigami.Units.largeSpacing
+                    rightMargin: root.convergenceLeftSurfaceRightInset + Kirigami.Units.largeSpacing
+                    bottomMargin: root.convergenceLeftSurfaceBottomMargin + Kirigami.Units.largeSpacing
             }
 
             Kirigami.Theme.colorSet: Kirigami.Theme.View
             Kirigami.Theme.inherit: false
 
-            MobileShell.PanelBackground {
-                anchors.fill: parent
-                panelType: MobileShell.PanelBackground.PanelType.Drawer
-            }
-
             PlasmaCalendar.MonthView {
                 anchors.fill: parent
                 anchors.margins: Kirigami.Units.smallSpacing
@@ -226,13 +280,12 @@ Item {
             top: parent.top
             left: parent.left
             right: parent.right
-            topMargin: isConvergence ? root.convergenceSurfaceTopInset : 0
+            topMargin: isConvergence ? root.convergenceLeftSurfaceTopInset : 0
-            rightMargin: root.actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceNotificationRightMargin : 360)
+            rightMargin: root.actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceLeftSurfaceRightInset : 360)
-            leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceSurfaceSideInset : notificationDrawer.minWidthHeight * 0.06)
+            leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceLeftSurfaceLeftInset : notificationDrawer.minWidthHeight * 0.06)
         }
 
-        // In convergence, cap the height so it doesn't stretch full-screen
+        maximumHeight: isConvergence ? root.convergenceSurfaceHeight * 0.32 : -1
-        maximumHeight: isConvergence ? root.convergenceSurfaceHeight * 0.6 : -1
         toolButtonsItem: toolButtons
     }
 

components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml

@@ -37,6 +37,7 @@ Item {
     readonly property real convergenceSurfaceHeight: Math.max(0, height - convergenceSurfaceTopInset - convergenceSurfaceBottomInset)
     readonly property bool isOnLargeScreen: width > quickSettingsPanel.width * 2.5
     readonly property real minWidthHeight: Math.min(root.width, root.height)
+    readonly property real quickSettingsPanelLeft: quickSettingsPanel.x
     readonly property real opacityValue: Math.max(0, Math.min(1, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
     readonly property double brightnessPressedValue: quickSettings.brightnessPressedValue
 

components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml

@@ -83,6 +83,7 @@ Item {
         onUnlockRequested: actionDrawer.permissionsRequested()
         topPadding: root.topPadding
         showHeader: actionDrawer.mode != MobileShell.ActionDrawer.Portrait
+                && !ShellSettings.Settings.convergenceModeEnabled
         emptyText: ShellSettings.Settings.convergenceModeEnabled ? i18n("No notifications") : ""
         listView.interactive: !actionDrawer.dragging && root.listOverflowing
 

tests/check-convergence-dock-invariant.sh

@@ -107,10 +107,21 @@ fi
 require_line "$action_content" "readonly property real convergenceSurfaceTopInset: MobileShell.Constants.topPanelHeight + convergenceFrameThickness"
 require_line "$action_content" "readonly property real convergenceSurfaceBottomInset: MobileShell.Constants.convergenceDockHeight + convergenceFrameThickness"
 require_line "$action_content" "readonly property real convergenceSurfaceSideInset: 0"
+require_line "$action_content" "readonly property real convergenceFloatingMargin: Kirigami.Units.gridUnit"
+require_line "$action_content" "readonly property real convergenceClickAwayGutter: Kirigami.Units.largeSpacing"
+require_line "$action_content" "readonly property real convergenceLeftSurfaceBottomInset: convergenceSurfaceBottomInset + convergenceBottomClickAwayHeight"
+require_line "$action_content" "readonly property real convergenceQuickSettingsLeft: contentContainerLoader.item ? contentContainerLoader.item.quickSettingsPanelLeft"
+require_line "$action_content" "readonly property real convergenceLeftSurfaceTopInset: convergenceSurfaceTopInset + convergenceFloatingMargin"
+require_line "$action_content" "readonly property real convergenceLeftSurfaceLeftInset: convergenceSurfaceSideInset + convergenceFloatingMargin"
+require_line "$action_content" "readonly property real convergenceLeftSurfaceRightInset: convergenceNotificationRightMargin + convergenceFloatingMargin"
+require_line "$action_content" "readonly property real convergenceLeftSurfaceBottomMargin: convergenceLeftSurfaceBottomInset + convergenceFloatingMargin"
+require_line "$action_content" "id: convergenceLeftSurface"
+require_line "$action_content" "id: convergenceMediaPanel"
+require_line "$action_content" "PlasmaCalendar.MonthView {"
 require_line "$action_content" "visible: actionDrawer.intendedToBeVisible"
-require_line "$action_content" "topMargin: isConvergence ? root.convergenceSurfaceTopInset : 0"
+require_line "$action_content" "topMargin: isConvergence ? root.convergenceLeftSurfaceTopInset : 0"
-require_line "$action_content" "leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceSurfaceSideInset"
+require_line "$action_content" "leftMargin: actionDrawer.mode == MobileShell.ActionDrawer.Portrait ? 0 : (isConvergence ? root.convergenceLeftSurfaceLeftInset"
-require_line "$action_content" "maximumHeight: isConvergence ? root.convergenceSurfaceHeight * 0.6 : -1"
+require_line "$action_content" "maximumHeight: isConvergence ? root.convergenceSurfaceHeight * 0.32 : -1"
 
 if grep -Fq "visible: !isConvergence" "$action_content"; then
     echo "NotificationDrawer must remain visible in convergence so the action drawer shows notification history" >&2
@@ -124,6 +135,7 @@ fi
 require_line "$action_landscape" "readonly property real convergenceSurfaceTopInset: MobileShell.Constants.topPanelHeight + convergenceFrameThickness"
 require_line "$action_landscape" "readonly property real convergenceSurfaceBottomInset: MobileShell.Constants.convergenceDockHeight + convergenceFrameThickness"
 require_line "$action_landscape" "readonly property real convergenceSurfaceSideInset: 0"
+require_line "$action_landscape" "readonly property real quickSettingsPanelLeft: quickSettingsPanel.x"
 require_line "$action_landscape" "import QtQuick.Shapes 1.8"
 require_line "$action_landscape" "id: actionDrawerSurface"
 require_line "$action_landscape" "x: quickSettingsPanel.x - cornerRadius"
@@ -169,6 +181,7 @@ require_line "$notification_popup" "? (Screen.height - convergenceBottomInset -
 require_line "$notification_popup_item" "icon.name: \"window-close\""
 require_line "$notification_popup_item" "text: i18n(\"Dismiss\")"
 require_line "$notification_card" "if (!contentItem) {"
+require_line "$notification_drawer" "&& !ShellSettings.Settings.convergenceModeEnabled"
 require_line "$notification_drawer" "emptyText: ShellSettings.Settings.convergenceModeEnabled ? i18n(\"No notifications\") : \"\""
 require_line "$notifications_widget" "property string emptyText: \"\""