Unify look of scrolling setting page

* Add frame on desktop
* Remove frame on mobile
* Use actions.main when needed on mobile
* Don't push a new setting page on mobile

imports/NeoChat/Page/AccountsPage.qml

@@ -11,49 +11,91 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 import NeoChat.Dialog 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
     title: i18n("Accounts")
 
-    ListView {
-        model: AccountListModel { }
-        delegate: Kirigami.SwipeListItem {
-            leftPadding: 0
-            rightPadding: 0
-            action: Kirigami.Action {
-                onTriggered: Controller.activeConnection = model.connection
-            }
-            Kirigami.BasicListItem {
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
 
-                text: model.user.displayName
-                subtitle: model.user.id
-                icon: model.user.avatarMediaId ? ("image://mxc/" + model.user.avatarMediaId) : "im-user"
+    actions.main: Kirigami.Action {
+        text: i18n("Add an account")
+        icon.name: "list-add-user"
+        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+        visible: !pageSettingStack.wideMode
+    }
 
-                onClicked: {
-                    Controller.activeConnection = model.connection
-                    pageStack.layers.pop()
-                }
-            }
-            actions: [
-                Kirigami.Action {
-                    text: i18n("Edit this account")
-                    iconName: "document-edit"
-                    onTriggered: {
-                        userEditSheet.connection = model.connection
-                        userEditSheet.open()
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            ListView {
+                clip: true
+                model: AccountListModel { }
+                delegate: Kirigami.SwipeListItem {
+                    leftPadding: 0
+                    rightPadding: 0
+                    action: Kirigami.Action {
+                        onTriggered: Controller.activeConnection = model.connection
                     }
-                },
-                Kirigami.Action {
-                    text: i18n("Logout")
-                    iconName: "im-kick-user"
-                    onTriggered: {
-                        Controller.logout(model.connection, true)
-                        if(Controller.accountCount === 1)
+                    Kirigami.BasicListItem {
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+
+                        text: model.user.displayName
+                        subtitle: model.user.id
+                        icon: model.user.avatarMediaId ? ("image://mxc/" + model.user.avatarMediaId) : "im-user"
+
+                        onClicked: {
+                            Controller.activeConnection = model.connection
                             pageStack.layers.pop()
+                        }
                     }
+                    actions: [
+                        Kirigami.Action {
+                            text: i18n("Edit this account")
+                            iconName: "document-edit"
+                            onTriggered: {
+                                userEditSheet.connection = model.connection
+                                userEditSheet.open()
+                            }
+                        },
+                        Kirigami.Action {
+                            text: i18n("Logout")
+                            iconName: "im-kick-user"
+                            onTriggered: {
+                                Controller.logout(model.connection, true)
+                                if(Controller.accountCount === 1)
+                                    pageStack.layers.pop()
+                            }
+                        }
+                    ]
                 }
-            ]
+            }
+        }
+
+
+        RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+            Controls.Button {
+                visible: pageSettingStack.wideMode
+                text: i18n("Add an account")
+                icon.name: "list-add-user"
+                onClicked: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+            }
         }
     }
 
@@ -73,12 +115,6 @@ Kirigami.ScrollablePage {
         }
     }
 
-    actions.main: Kirigami.Action {
-        text: i18n("Add an account")
-        iconName: "list-add-user"
-        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
-    }
-
     Component {
         id: openFileDialog
 

imports/NeoChat/Page/DevicesPage.qml

@@ -9,43 +9,74 @@ import org.kde.kirigami 2.15 as Kirigami
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
     title: i18n("Devices")
 
-    ListView {
-        model: DevicesModel {
-            id: devices
-        }
-        delegate: Kirigami.SwipeListItem {
-            leftPadding: 0
-            rightPadding: 0
-            Kirigami.BasicListItem {
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
 
-                text: model.displayName
-                subtitle: model.id
-                icon: "network-connect"
-            }
-            actions: [
-                Kirigami.Action {
-                    text: i18n("Edit device name")
-                    iconName: "document-edit"
-                    onTriggered: {
-                        renameSheet.index = model.index
-                        renameSheet.name = model.displayName
-                        renameSheet.open()
-                    }
-                },
-                Kirigami.Action {
-                    text: i18n("Logout device")
-                    iconName: "edit-delete-remove"
-                    onTriggered: {
-                        passwordSheet.index = index
-                        passwordSheet.open()
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            ListView {
+                clip: true
+                model: DevicesModel {
+                    id: devices
+                }
+
+                Kirigami.PlaceholderMessage {
+                    visible: parent.model.count === 0 // We can assume 0 means loading since there is at least one device
+                    anchors.centerIn: parent
+                    text: i18n("Loading")
+                    Controls.BusyIndicator {
+                        running: parent.visible
                     }
                 }
-            ]
+
+                delegate: Kirigami.SwipeListItem {
+                    leftPadding: 0
+                    rightPadding: 0
+                    Kirigami.BasicListItem {
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+
+                        text: model.displayName
+                        subtitle: model.id
+                        icon: "network-connect"
+                    }
+                    actions: [
+                        Kirigami.Action {
+                            text: i18n("Edit device name")
+                            iconName: "document-edit"
+                            onTriggered: {
+                                renameSheet.index = model.index
+                                renameSheet.name = model.displayName
+                                renameSheet.open()
+                            }
+                        },
+                        Kirigami.Action {
+                            text: i18n("Logout device")
+                            iconName: "edit-delete-remove"
+                            onTriggered: {
+                                passwordSheet.index = index
+                                passwordSheet.open()
+                            }
+                        }
+                    ]
+                }
+            }
         }
     }
 

imports/NeoChat/Page/RoomListPage.qml

@@ -17,6 +17,8 @@ import NeoChat.Menu 1.0
 Kirigami.ScrollablePage {
     id: page
 
+    title: i18n("Rooms")
+
     property var enteredRoom
     property bool collapsedMode: Config.roomListPageWidth === applicationWindow().collapsedPageWidth && applicationWindow().shouldUseSidebars
 

imports/NeoChat/Page/SettingsPage.qml

@@ -36,7 +36,9 @@ Kirigami.ScrollablePage {
             topPadding: 0
             Kirigami.Theme.colorSet: Kirigami.Theme.View
             ListView {
-                Component.onCompleted: actions[0].trigger();
+                Component.onCompleted: if (pageSettingStack.wideMode) {
+                    actions[0].trigger();
+                }
                 property list<Kirigami.Action> actions: [
                     Kirigami.Action {
                         text: i18n("General")
@@ -58,6 +60,11 @@ Kirigami.ScrollablePage {
                         icon.name: "preferences-desktop-emoticons"
                         onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Settings/Emoticons.qml")
                     },
+                    Kirigami.Action {
+                        text: i18n("Devices")
+                        iconName: "network-connect"
+                        onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Page/DevicesPage.qml")
+                    },
                     Kirigami.Action {
                         text: i18n("About NeoChat")
                         icon.name: "help-about"

imports/NeoChat/Settings/Emoticons.qml

@@ -13,7 +13,92 @@ import NeoChat.Settings 1.0
 import NeoChat.Component 1.0 as Components
 import NeoChat.Dialog 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
+
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    ColumnLayout {
+        id: column
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        QQC2.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            ListView {
+                clip: true
+                model: CustomEmojiModel {
+                    id: emojiModel
+
+                    connection: Controller.activeConnection
+                }
+
+                Kirigami.PlaceholderMessage {
+                    anchors.centerIn: parent
+                    text: i18n("No custom inline stickers found")
+                    visible: parent.model.count === 0
+                }
+
+                delegate: Kirigami.BasicListItem {
+                    id: del
+
+                    required property string name
+                    required property url imageURL
+
+                    text: name
+                    reserveSpaceForSubtitle: true
+
+                    leading: Image {
+                        width: height
+                        sourceSize.width: width
+                        sourceSize.height: height
+                        source: imageURL
+
+                        Rectangle {
+                            anchors.fill: parent
+                            visible: parent.status === Image.Loading
+                            radius: height/2
+                            gradient: Components.ShimmerGradient { }
+                        }
+                    }
+
+                    trailing: QQC2.ToolButton {
+                        width: height
+                        icon.name: "delete"
+                        onClicked: emojiModel.removeEmoji(del.name)
+                    }
+                }
+            }
+        }
+
+        Loader {
+            active: pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+            Layout.fillWidth: true
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        id: toolbar
+        width: parent.width
+        visible: !pageSettingStack.wideMode
+        height: visible ? implicitHeight : 0
+        contentItem: Loader {
+            active: !pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+        }
+    }
+
     Component {
         id: openFileDialog
 
@@ -22,83 +107,47 @@ Kirigami.ScrollablePage {
         }
     }
 
-    ListView {
-        header: QQC2.ToolBar {
-            width: parent.width
-            contentItem: RowLayout {
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
-                }
-                QQC2.TextField {
-                    id: emojiField
-                    placeholderText: i18n("new_emoji_name_here")
+    property Component addEmojiComponent: RowLayout {
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
+        }
 
-                    validator: RegularExpressionValidator {
-                        regularExpression: /[a-zA-Z_0-9]*/
-                    }
-                }
-                QQC2.Button {
-                    text: i18n("Add Emoji...")
+        QQC2.TextField {
+            id: emojiField
+            placeholderText: i18n("new_emoji_name_here")
 
-                    enabled: emojiField.text != ""
-                    property var fileDialog: null
-
-                    onClicked: {
-                        if (this.fileDialog != null) {
-                            return;
-                        }
-
-                        this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
-
-                        this.fileDialog.chosen.connect((url) => {
-                            emojiModel.addEmoji(emojiField.text, url)
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.onRejected.connect(() => {
-                            rej()
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.open()
-                    }
-                }
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
-                }
+            validator: RegularExpressionValidator {
+                regularExpression: /[a-zA-Z_0-9]*/
             }
         }
-        model: CustomEmojiModel {
-            id: emojiModel
 
-            connection: Controller.activeConnection
-        }
-        delegate: Kirigami.BasicListItem {
-            id: del
+        QQC2.Button {
+            text: i18n("Add Emoji...")
 
-            required property string name
-            required property url imageURL
+            enabled: emojiField.text != ""
+            property var fileDialog: null
 
-            text: name
-            reserveSpaceForSubtitle: true
-
-            leading: Image {
-                width: height
-                sourceSize.width: width
-                sourceSize.height: height
-                source: imageURL
-
-                Rectangle {
-                    anchors.fill: parent
-                    visible: parent.status === Image.Loading
-                    radius: height/2
-                    gradient: Components.ShimmerGradient { }
+            onClicked: {
+                if (this.fileDialog != null) {
+                    return;
                 }
-            }
 
-            trailing: QQC2.ToolButton {
-                width: height
-                icon.name: "delete"
-                onClicked: emojiModel.removeEmoji(del.name)
+                this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
+
+                this.fileDialog.chosen.connect((url) => {
+                    emojiModel.addEmoji(emojiField.text, url)
+                    this.fileDialog = null
+                })
+                this.fileDialog.onRejected.connect(() => {
+                    rej()
+                    this.fileDialog = null
+                })
+                this.fileDialog.open()
             }
         }
+
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
+        }
     }
 }