Make UserStatusSelector a modal popup

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>

Author: claucambra

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/UserStatusSelectorPopup.qml</file>
         <file>src/gui/EmojiPicker.qml</file>
         <file>src/gui/UserStatusSelectorButton.qml</file>
         <file>src/gui/PredefinedStatusButton.qml</file>

src/gui/UserStatusSelectorDialog.qml

@@ -0,0 +1,63 @@
+/*
+ * 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
+
+Popup {
+    id: popup
+    
+    property NC.UserStatusSelectorModel model: NC.UserStatusSelectorModel {
+        onFinished: popup.close()
+    }
+
+    property int userIndex
+    onUserIndexChanged: model.load(userIndex)
+
+    property int totalImplicitWidth: userStatusSelector.implicitHeight +
+                                     scrollView.leftPadding +
+                                     scrollView.rightPadding +
+                                     leftPadding +
+                                     rightPadding
+
+    property int totalImplicitHeight: userStatusSelector.implicitHeight +
+                                      scrollView.topPadding +
+                                      scrollView.bottomPadding +
+                                      topPadding +
+                                      bottomPadding
+
+    width: Math.min(totalImplicitWidth, Style.trayModalWidth)
+    height: Math.min(totalImplicitHeight, Style.trayModalHeight)
+    modal: true
+    clip: true
+
+    background: Rectangle {
+        color: Style.backgroundColor
+        radius: Style.trayWindowRadius
+    }
+    
+    contentItem: ScrollView {
+        id: scrollView
+        contentWidth: availableWidth
+
+        UserStatusSelector {
+            id: userStatusSelector
+            width: scrollView.availableWidth
+            userStatusSelectorModel: model
+        }
+    }
+}

src/gui/UserStatusSelectorPopup.qml

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

src/gui/tray/UserLine.qml

@@ -108,6 +108,19 @@ Window {
         }
     }
 
+    UserStatusSelectorPopup {
+        id: userStatusSelectorPopup
+        anchors.centerIn: parent
+
+        function openPopup(newUserIndex) {
+            console.log(`About to show popup for user with index ${newUserIndex}`);
+            userIndex = newUserIndex;
+            model.load(userIndex);
+            accountMenu.close();
+            open();
+        }
+    }
+
     Rectangle {
         id: trayWindowBackground
 
@@ -206,37 +219,11 @@ 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);
-                                    accountMenu.close();
-                                }
+                                onShowUserStatusSelectorPopup: userStatusSelectorPopup.openPopup(model.index);
                             }
                             onObjectAdded: accountMenu.insertItem(index, object)
                             onObjectRemoved: accountMenu.removeItem(object)

src/gui/tray/Window.qml

@@ -34,6 +34,8 @@ QtObject {
     property int trayWindowBorderWidth: variableSize(1)
     property int trayWindowHeaderHeight: variableSize(60)
     property int trayHorizontalMargin: 10
+    property int trayModalWidth: trayWindowWidth * 0.85
+    property int trayModalHeight: trayWindowHeight * 0.85
     property int trayListItemIconSize: accountAvatarSize
     property real thumbnailImageSizeReduction: 0.2  // We reserve some space within the thumbnail "item", here about 20%.
                                                     // This is because we need to also add the added/modified icon and we