Make UserStatusSelector a dismissible page pushed onto the tray window

resources.qrc

@@ -1,7 +1,7 @@
 <RCC>
     <qresource prefix="/qml">
         <file>src/gui/UserStatusSelector.qml</file>
-        <file>src/gui/UserStatusSelectorDialog.qml</file>
+        <file>src/gui/UserStatusSelectorPage.qml</file>
         <file>src/gui/EmojiPicker.qml</file>
         <file>src/gui/UserStatusSelectorButton.qml</file>
         <file>src/gui/PredefinedStatusButton.qml</file>

src/gui/UserStatusSelectorPage.qml

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2022 by Claudio Cambra <claudio.cambra@nextcloud.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
+ * for more details.
+ */
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Style 1.0
+
+import com.nextcloud.desktopclient 1.0 as NC
+
+Page {
+    id: page
+
+    signal finished
+
+    property int userIndex: -1
+    property NC.UserStatusSelectorModel model: NC.UserStatusSelectorModel {
+        userIndex: page.userIndex
+        onFinished: page.finished()
+    }
+
+    padding: Style.standardSpacing * 2
+
+    background: Rectangle {
+        color: Style.backgroundColor
+        radius: Style.trayWindowRadius
+    }
+
+    contentItem: UserStatusSelector {
+        id: userStatusSelector
+        userStatusSelectorModel: model
+        onImplicitHeightChanged: implicitHeight > page.availableHeight ?
+            spacing = Style.standardSpacing : spacing = Style.standardSpacing * 2
+    }
+}

src/gui/tray/UserLine.qml

@@ -18,7 +18,7 @@ MenuItem {
     property variant comp;
     activeFocusOnTab: false
 
-    signal showUserStatusSelectorDialog(int id)
+    signal showUserStatusSelector(int id)
 
     RowLayout {
         id: userLineLayout
@@ -183,7 +183,7 @@ MenuItem {
                     font.pixelSize: Style.topLinePixelSize
                     palette.windowText: Style.ncTextColor
                     hoverEnabled: true
-                    onClicked: showUserStatusSelectorDialog(index)
+                    onClicked: showUserStatusSelector(index)
 
                     background: Item {
                         height: parent.height

src/gui/tray/Window.qml

@@ -1,5 +1,3 @@
-import QtQml 2.12
-import QtQml.Models 2.1
 import QtQuick 2.15
 import QtQuick.Window 2.3
 import QtQuick.Controls 2.3
@@ -13,7 +11,7 @@ import Style 1.0
 
 import com.nextcloud.desktopclient 1.0
 
-Window {
+ApplicationWindow {
     id:         trayWindow
 
     title:      Systray.windowTitle
@@ -53,6 +51,13 @@ Window {
         syncStatus.model.load();
     }
 
+    background: Rectangle {
+        radius: Systray.useNormalWindow ? 0.0 : Style.trayWindowRadius
+        border.width: Style.trayWindowBorderWidth
+        border.color: Style.menuBorder
+        color: Style.backgroundColor
+    }
+
     Connections {
         target: UserModel
         function onCurrentUserChanged() {
@@ -78,6 +83,8 @@ Window {
         target: Systray
 
         function onIsOpenChanged() {
+            userStatusDrawer.close()
+
             if(Systray.isOpen) {
                 accountMenu.close();
                 appsMenu.close();
@@ -98,39 +105,72 @@ Window {
     OpacityMask {
         anchors.fill: parent
         source: ShaderEffectSource {
-            sourceItem: trayWindowBackground
+            sourceItem: trayWindowMainItem
             hideSource: true
         }
         maskSource: Rectangle {
-            width: trayWindowBackground.width
-            height: trayWindowBackground.height
+            width: trayWindow.width
+            height: trayWindow.height
             radius: Systray.useNormalWindow ? 0.0 : Style.trayWindowRadius
         }
     }
 
-    Rectangle {
-        id: trayWindowBackground
+    Drawer {
+        id: userStatusDrawer
+        width: parent.width
+        height: parent.height
+        padding: 0
+        edge: Qt.BottomEdge
+        modal: false
+        visible: false
+
+        background: Rectangle {
+            radius: Systray.useNormalWindow ? 0.0 : Style.trayWindowRadius
+            border.width: Style.trayWindowBorderWidth
+            border.color: Style.menuBorder
+            color: Style.backgroundColor
+        }
+
+        property int userIndex: 0
+
+        function openUserStatusDrawer(index) {
+            console.log(`About to show dialog for user with index ${index}`);
+            userIndex = index;
+            open();
+        }
+
+        Loader {
+            id: userStatusContents
+            anchors.fill: parent
+            active: userStatusDrawer.visible
+            sourceComponent: UserStatusSelectorPage {
+                anchors.fill: parent
+                userIndex: userStatusDrawer.userIndex
+                onFinished: userStatusDrawer.close()
+            }
+        }
+    }
+
+    Item {
+        id: trayWindowMainItem
 
         property bool isUnifiedSearchActive: unifiedSearchResultsListViewSkeletonLoader.active
                                              || unifiedSearchResultNothingFound.visible
                                              || unifiedSearchResultsErrorLabel.visible
                                              || unifiedSearchResultsListView.visible
 
         anchors.fill:   parent
-        radius: Systray.useNormalWindow ? 0.0 : Style.trayWindowRadius
-        border.width:   Style.trayWindowBorderWidth
-        border.color:   Style.menuBorder
-        color: Style.backgroundColor
+        clip: true
 
         Accessible.role: Accessible.Grouping
         Accessible.name: qsTr("Nextcloud desktop main dialog")
 
         Rectangle {
             id: trayWindowHeaderBackground
 
-            anchors.left:   trayWindowBackground.left
-            anchors.right:  trayWindowBackground.right
-            anchors.top:    trayWindowBackground.top
+            anchors.left:   trayWindowMainItem.left
+            anchors.right:  trayWindowMainItem.right
+            anchors.top:    trayWindowMainItem.top
             height:         Style.trayWindowHeaderHeight
             color:          UserModel.currentUser.headerColor
 
@@ -206,35 +246,12 @@ Window {
                             userLineInstantiator.active = true;
                         }
 
-                        Loader {
-                            id: userStatusSelectorDialogLoader
-
-                            property int userIndex
-
-                            function openDialog(newUserIndex) {
-                                console.log(`About to show dialog for user with index ${newUserIndex}`);
-                                userIndex = newUserIndex;
-                                active = true;
-                                item.show();
-                            }
-
-                            active: false
-                            sourceComponent: UserStatusSelectorDialog {
-                                userIndex: userStatusSelectorDialogLoader.userIndex
-                            }
-
-                            onLoaded: {
-                                item.model.load(userIndex);
-                                item.show();
-                            }
-                        }
-
                         Instantiator {
                             id: userLineInstantiator
                             model: UserModel
                             delegate: UserLine {
-                                onShowUserStatusSelectorDialog: {
-                                    userStatusSelectorDialogLoader.openDialog(model.index);
+                                onShowUserStatusSelector: {
+                                    userStatusDrawer.openUserStatusDrawer(model.index);
                                     accountMenu.close();
                                 }
                             }
@@ -661,8 +678,8 @@ Window {
 
             anchors {
                 top: trayWindowHeaderBackground.bottom
-                left: trayWindowBackground.left
-                right: trayWindowBackground.right
+                left: trayWindowMainItem.left
+                right: trayWindowMainItem.right
 
                 topMargin: Style.trayHorizontalMargin + controlRoot.padding
                 leftMargin: Style.trayHorizontalMargin + controlRoot.padding
@@ -681,17 +698,17 @@ Window {
             visible:  UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId
             text:  UserModel.currentUser.unifiedSearchResultsListModel.errorString
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
             anchors.margins: Style.trayHorizontalMargin
         }
 
         UnifiedSearchResultNothingFound {
             id: unifiedSearchResultNothingFound
             visible: false
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
             anchors.topMargin: Style.trayHorizontalMargin
 
             text: UserModel.currentUser.unifiedSearchResultsListModel.searchTerm
@@ -724,9 +741,9 @@ Window {
         Loader {
             id: unifiedSearchResultsListViewSkeletonLoader
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
-            anchors.bottom: trayWindowBackground.bottom
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
+            anchors.bottom: trayWindowMainItem.bottom
 
             active: !unifiedSearchResultNothingFound.visible &&
                     !unifiedSearchResultsListView.visible &&
@@ -752,9 +769,9 @@ Window {
             visible: unifiedSearchResultsListView.count > 0
 
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
-            anchors.bottom: trayWindowBackground.bottom
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
+            anchors.bottom: trayWindowMainItem.bottom
 
             ListView {
                 id: unifiedSearchResultsListView
@@ -791,19 +808,19 @@ Window {
         SyncStatus {
             id: syncStatus
 
-            visible: !trayWindowBackground.isUnifiedSearchActive
+            visible: !trayWindowMainItem.isUnifiedSearchActive
 
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
         }
 
         ActivityList {
-            visible: !trayWindowBackground.isUnifiedSearchActive
+            visible: !trayWindowMainItem.isUnifiedSearchActive
             anchors.top: syncStatus.bottom
-            anchors.left: trayWindowBackground.left
-            anchors.right: trayWindowBackground.right
-            anchors.bottom: trayWindowBackground.bottom
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
+            anchors.bottom: trayWindowMainItem.bottom
 
             activeFocusOnTab: true
             model: activityModel
@@ -833,5 +850,5 @@ Window {
 
             onLoaded: refresh()
         }
-    } // Rectangle trayWindowBackground
+    } // Item trayWindowMainItem
 }