Adapt list setting pages to new style

imports/NeoChat/Settings/AccountsPage.qml

@@ -11,14 +11,9 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 import NeoChat.Dialog 1.0
 
-Kirigami.Page {
+Kirigami.ScrollablePage {
     title: i18n("Accounts")
 
-    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-
     actions.main: Kirigami.Action {
         text: i18n("Add an account")
         icon.name: "list-add-user"
@@ -26,82 +21,59 @@ Kirigami.Page {
         visible: !pageSettingStack.wideMode
     }
 
-    Connections {
+    ListView {
-        target: pageSettingStack
+        model: AccountRegistry
-        function onWideModeChanged() {
+        delegate: Kirigami.SwipeListItem {
-            scroll.background.visible = pageSettingStack.wideMode
+            leftPadding: 0
-        }
+            rightPadding: 0
-    }
+            Kirigami.BasicListItem {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
 
-    Controls.ScrollView {
+                text: model.connection.localUser.displayName
-        id: scroll
+                labelItem.textFormat: Text.PlainText
-        Component.onCompleted: background.visible = pageSettingStack.wideMode
+                subtitle: model.connection.localUserId
+                icon: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : "im-user"
 
-        anchors.fill: parent
+                onClicked: {
-
+                    Controller.activeConnection = model.connection
-        Controls.ScrollBar.horizontal.policy: Controls.ScrollBar.AlwaysOff
+                    pageStack.layers.pop()
-        ListView {
-            clip: true
-            model: AccountRegistry
-            delegate: Kirigami.SwipeListItem {
-                leftPadding: 0
-                rightPadding: 0
-                Kirigami.BasicListItem {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-
-                    text: model.connection.localUser.displayName
-                    labelItem.textFormat: Text.PlainText
-                    subtitle: model.connection.localUserId
-                    icon: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.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()
-                        }
-                    }
-                ]
             }
-        }
-    }
-
-    footer: Column {
-        height: visible ? implicitHeight : 0
-        Kirigami.ActionToolBar {
-            alignment: Qt.AlignRight
-            visible: pageSettingStack.wideMode
-            rightPadding: Kirigami.Units.smallSpacing
-            width: parent.width
-            flat: false
             actions: [
                 Kirigami.Action {
-                    text: i18n("Add an account")
+                    text: i18n("Edit this account")
-                    icon.name: "list-add-user"
+                    iconName: "document-edit"
-                    onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+                    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()
+                    }
                 }
             ]
         }
-        Item {
+    }
+
+    footer: Controls.ToolBar {
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+        Kirigami.ActionToolBar {
+            alignment: Qt.AlignRight
+            rightPadding: Kirigami.Units.smallSpacing
             width: parent.width
-            height: Kirigami.Units.smallSpacing
+            flat: false
+            actions: Kirigami.Action {
+                text: i18n("Add an account")
+                icon.name: "list-add-user"
+                onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+            }
         }
     }
     Connections {

imports/NeoChat/Settings/DevicesPage.qml

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

imports/NeoChat/Settings/Emoticons.qml

@@ -13,92 +13,100 @@ import NeoChat.Settings 1.0
 import NeoChat.Component 1.0 as Components
 import NeoChat.Dialog 1.0
 
-Kirigami.Page {
+Kirigami.ScrollablePage {
     title: i18nc('@title:window', 'Custom Emojis')
 
-    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
+    ListView {
-    topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
+        model: CustomEmojiModel {
-    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
+            id: emojiModel
-    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
 
-    ColumnLayout {
+            connection: Controller.activeConnection
-        id: column
-        anchors.fill: parent
-
-        Connections {
-            target: pageSettingStack
-            function onWideModeChanged() {
-                scroll.background.visible = pageSettingStack.wideMode
-            }
         }
 
-        QQC2.ScrollView {
+        Kirigami.PlaceholderMessage {
-            id: scroll
+            anchors.centerIn: parent
-            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            text: i18n("No custom inline stickers found")
-            Layout.fillWidth: true
+            visible: parent.model.count === 0
-            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 {
+        delegate: Kirigami.BasicListItem {
-            active: pageSettingStack.wideMode
+            id: del
-            sourceComponent: addEmojiComponent
+
-            Layout.fillWidth: true
+            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)
+            }
         }
     }
 
     footer: QQC2.ToolBar {
-        id: toolbar
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
-        width: parent.width
+        Kirigami.ActionToolBar {
-        visible: !pageSettingStack.wideMode
+            id: emojiCreator
-        height: visible ? implicitHeight : 0
+            alignment: Qt.AlignRight
-        contentItem: Loader {
+            rightPadding: Kirigami.Units.smallSpacing
-            active: !pageSettingStack.wideMode
+            width: parent.width
-            sourceComponent: addEmojiComponent
+            flat: false
+            property string name
+            actions: [
+                Kirigami.Action {
+                    displayComponent: QQC2.TextField {
+                        id: emojiField
+                        placeholderText: i18n("new_emoji_name_here")
+
+                        validator: RegularExpressionValidator {
+                            regularExpression: /[a-zA-Z_0-9]*/
+                        }
+                        onTextChanged: emojiCreator.name = text
+                    }
+                },
+                Kirigami.Action {
+                    text: i18n("Add Emoji...")
+
+                    enabled: emojiCreator.name.length > 0
+                    property var fileDialog: null
+                    icon.name: 'list-add'
+
+                    onTriggered: {
+                        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()
+                    }
+                }
+            ]
         }
     }
 
@@ -109,48 +117,4 @@ Kirigami.Page {
             folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
         }
     }
-
-    property Component addEmojiComponent: RowLayout {
-        Item {
-            Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
-        }
-
-        QQC2.TextField {
-            id: emojiField
-            placeholderText: i18n("new_emoji_name_here")
-
-            validator: RegularExpressionValidator {
-                regularExpression: /[a-zA-Z_0-9]*/
-            }
-        }
-
-        QQC2.Button {
-            text: i18n("Add Emoji...")
-
-            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
-        }
-    }
 }