Use a page for invitation instead of popup

This generally work better on a mobile device

imports/NeoChat/Dialog/InviteUserDialog.qml

@@ -1,175 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
- *
- * SPDX-License-Identifier: GPL-3.0-only
- */
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import org.kde.kirigami 2.13 as Kirigami
-
-import NeoChat.Component 1.0
-import NeoChat.Effect 1.0
-import NeoChat.Setting 1.0
-
-import org.kde.neochat 1.0
-
-Dialog {
-    property var room
-
-    anchors.centerIn: parent
-    width: 360
-    height: Math.min(window.height - 100, 640)
-
-    id: root
-
-    title: "Invite a User"
-
-    contentItem: ColumnLayout {
-        spacing: 0
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            AutoTextField {
-                property bool isUserID: text.match(/@(.+):(.+)/g)
-
-                Layout.fillWidth: true
-
-                id: identifierField
-
-                placeholderText: "Find a user..."
-
-                onAccepted: {
-                    userDictListModel.search()
-                }
-            }
-
-            Button {
-                visible: identifierField.isUserID
-
-                text: "Add"
-                highlighted: true
-
-                onClicked: {
-                    room.inviteToRoom(identifierField.text)
-                }
-            }
-        }
-
-        MenuSeparator {
-            Layout.fillWidth: true
-        }
-
-        AutoListView {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            id: userDictListView
-
-            clip: true
-
-            spacing: 4
-
-            model: UserDirectoryListModel {
-                id: userDictListModel
-
-                connection: root.room.connection
-                keyword: identifierField.text
-            }
-
-            delegate: Control {
-                property bool inRoom: room && room.containsUser(userID)
-
-                width: userDictListView.width
-                height: 48
-
-                id: delegate
-
-                padding: 8
-
-                contentItem: RowLayout {
-                    spacing: 8
-
-                    Kirigami.Avatar {
-                        Layout.preferredWidth: height
-                        Layout.fillHeight: true
-
-                        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
-                        name: name
-                    }
-
-                    ColumnLayout {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        spacing: 0
-
-                        Label {
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-
-                            text: name
-                            color: MPalette.foreground
-                            font.pixelSize: 13
-                            textFormat: Text.PlainText
-                            elide: Text.ElideRight
-                            wrapMode: Text.NoWrap
-                        }
-
-                        Label {
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-
-                            text: userID
-                            color: MPalette.lighter
-                            font.pixelSize: 10
-                            textFormat: Text.PlainText
-                            elide: Text.ElideRight
-                            wrapMode: Text.NoWrap
-                        }
-                    }
-
-                    Control {
-                        Layout.preferredWidth: 32
-                        Layout.preferredHeight: 32
-
-                        visible: inRoom
-
-                        background: RippleEffect {
-                            circular: true
-                        }
-                    }
-
-                    Control {
-                        Layout.preferredWidth: 32
-                        Layout.preferredHeight: 32
-
-                        visible: !inRoom
-
-                        background: RippleEffect {
-                            circular: true
-
-                            onClicked: {
-                                room.inviteToRoom(userID)
-                            }
-                        }
-                    }
-                }
-            }
-
-            ScrollBar.vertical: ScrollBar {}
-
-            Label {
-                anchors.centerIn: parent
-
-                visible: userDictListView.count < 1
-
-                text: "No users available"
-                color: MPalette.foreground
-            }
-        }
-    }
-
-    onClosed: destroy()
-}

imports/NeoChat/Page/InviteUserPage.qml

@@ -0,0 +1,134 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.14 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    property var room
+
+    parent: applicationWindow().overlay
+
+    title: i18n("Invite a User")
+
+    actions {
+        main: Kirigami.Action {
+            icon.name: "dialog-close"
+            text: i18nc("@action", "Cancel")
+            onTriggered: applicationWindow().pageStack.pop()
+        }
+    }
+    header: RowLayout {
+        Layout.fillWidth: true
+        Layout.margins: Kirigami.Units.largeSpacing
+
+        Kirigami.SearchField {
+            id: identifierField
+            property bool isUserID: text.match(/@(.+):(.+)/g)
+            Layout.fillWidth: true
+
+            placeholderText: i18n("Find a user...")
+            onAccepted: userDictListModel.search()
+        }
+
+        Button {
+            visible: identifierField.isUserID
+
+            text: i18n("Add")
+            highlighted: true
+
+            onClicked: {
+                room.inviteToRoom(identifierField.text)
+            }
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        id: userDictListView
+
+        clip: true
+
+        model: UserDirectoryListModel {
+            id: userDictListModel
+
+            connection: root.room.connection
+            keyword: identifierField.text
+        }
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+
+            visible: userDictListView.count < 1
+
+            text: i18n("No users available")
+        }
+
+        delegate: Kirigami.AbstractListItem {
+            id: delegate
+            property bool inRoom: room && room.containsUser(userID)
+
+            topPadding: Kirigami.Units.largeSpacing
+            bottomPadding: Kirigami.Units.largeSpacing
+
+            contentItem: RowLayout {
+                Kirigami.Avatar {
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+
+                    source: avatar ? "image://mxc/" + avatar : ""
+                    name: name
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    spacing: 0
+
+                    Kirigami.Heading {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        level: 3
+
+                        text: name
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        text: userID
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+                }
+
+                ToolButton {
+                    visible: !inRoom
+                    icon.name: "document-send"
+                    text: i18n("Send invitation")
+
+                    onClicked: {
+                        room.inviteToRoom(userID);
+                        applicationWindow().pageStack.pop();
+                    }
+                }
+            }
+        }
+    }
+}

imports/NeoChat/Page/qmldir

@@ -4,3 +4,5 @@ LoginPage 1.0 LoginPage.qml
 RoomListPage 1.0 RoomListPage.qml
 RoomPage 1.0 RoomPage.qml
 JoinRoomPage 1.0 JoinRoomPage.qml
+InviteUserPage 1.0 InviteUserPage.qml
+

imports/NeoChat/Panel/RoomDrawer.qml

@@ -130,7 +130,10 @@ Kirigami.OverlayDrawer {
                     ToolButton {
                         icon.name: "list-add-user"
                         text: i18n("Invite")
-                        onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
+                        onClicked: {
+                            applicationWindow().pageStack.push("qrc:/imports/NeoChat/Page/InviteUserPage.qml", {"room": room})
+                            roomDrawer.close();
+                        }
                     }
                 }
             }
@@ -222,10 +225,4 @@ Kirigami.OverlayDrawer {
 
         UserDetailDialog {}
     }
-
-    Component {
-        id: inviteUserDialog
-
-        InviteUserDialog {}
-    }
 }

res.qrc

@@ -10,6 +10,7 @@
         <file>imports/NeoChat/Page/RoomPage.qml</file>
         <file>imports/NeoChat/Page/AccountsPage.qml</file>
         <file>imports/NeoChat/Page/JoinRoomPage.qml</file>
+        <file>imports/NeoChat/Page/InviteUserPage.qml</file>
         <file>imports/NeoChat/Component/qmldir</file>
         <file>imports/NeoChat/Component/ChatTextInput.qml</file>
         <file>imports/NeoChat/Component/AutoMouseArea.qml</file>
@@ -47,7 +48,6 @@
         <file>imports/NeoChat/Dialog/UserDetailDialog.qml</file>
         <file>imports/NeoChat/Dialog/MessageSourceDialog.qml</file>
         <file>imports/NeoChat/Dialog/CreateRoomDialog.qml</file>
-        <file>imports/NeoChat/Dialog/InviteUserDialog.qml</file>
         <file>imports/NeoChat/Dialog/AcceptInvitationDialog.qml</file>
         <file>imports/NeoChat/Dialog/StartChatDialog.qml</file>
         <file>imports/NeoChat/Dialog/FontFamilyDialog.qml</file>