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,22 +21,7 @@ Kirigami.Page {
         visible: !pageSettingStack.wideMode
     }
 
-    Connections {
-        target: pageSettingStack
-        function onWideModeChanged() {
-            scroll.background.visible = pageSettingStack.wideMode
-        }
-    }
-
-    Controls.ScrollView {
-        id: scroll
-        Component.onCompleted: background.visible = pageSettingStack.wideMode
-
-        anchors.fill: parent
-
-        Controls.ScrollBar.horizontal.policy: Controls.ScrollBar.AlwaysOff
     ListView {
-            clip: true
         model: AccountRegistry
         delegate: Kirigami.SwipeListItem {
             leftPadding: 0
@@ -81,27 +61,19 @@ Kirigami.Page {
             ]
         }
     }
-    }
 
-    footer: Column {
+    footer: Controls.ToolBar {
-        height: visible ? implicitHeight : 0
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
         Kirigami.ActionToolBar {
             alignment: Qt.AlignRight
-            visible: pageSettingStack.wideMode
             rightPadding: Kirigami.Units.smallSpacing
             width: parent.width
             flat: false
-            actions: [
+            actions: Kirigami.Action {
-                Kirigami.Action {
                 text: i18n("Add an account")
                 icon.name: "list-add-user"
                 onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
             }
-            ]
-        }
-        Item {
-            width: parent.width
-            height: Kirigami.Units.smallSpacing
         }
     }
     Connections {

imports/NeoChat/Settings/DevicesPage.qml

@@ -9,27 +9,10 @@ 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
-    topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-
-    Connections {
-        target: pageSettingStack
-        function onWideModeChanged() {
-            scroll.background.visible = pageSettingStack.wideMode
-        }
-    }
-
-    Controls.ScrollView {
-        id: scroll
-        Component.onCompleted: background.visible = pageSettingStack.wideMode
-        anchors.fill: parent
     ListView {
-            clip: true
         model: DevicesModel {
             id: devices
         }
@@ -75,7 +58,6 @@ Kirigami.Page {
             ]
         }
     }
-    }
 
     Kirigami.OverlaySheet {
         id: passwordSheet

imports/NeoChat/Settings/Emoticons.qml

@@ -13,33 +13,10 @@ 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
-    topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
-
-    ColumnLayout {
-        id: column
-        anchors.fill: parent
-
-        Connections {
-            target: pageSettingStack
-            function 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
 
@@ -82,56 +59,37 @@ Kirigami.Page {
             }
         }
     }
-        }
-
-        Loader {
-            active: pageSettingStack.wideMode
-            sourceComponent: addEmojiComponent
-            Layout.fillWidth: true
-        }
-    }
 
     footer: QQC2.ToolBar {
-        id: toolbar
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+        Kirigami.ActionToolBar {
+            id: emojiCreator
+            alignment: Qt.AlignRight
+            rightPadding: Kirigami.Units.smallSpacing
             width: parent.width
-        visible: !pageSettingStack.wideMode
+            flat: false
-        height: visible ? implicitHeight : 0
+            property string name
-        contentItem: Loader {
+            actions: [
-            active: !pageSettingStack.wideMode
+                Kirigami.Action {
-            sourceComponent: addEmojiComponent
+                    displayComponent: QQC2.TextField {
-        }
-    }
-
-    Component {
-        id: openFileDialog
-
-        OpenFileDialog {
-            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]*/
                         }
+                        onTextChanged: emojiCreator.name = text
                     }
-
+                },
-        QQC2.Button {
+                Kirigami.Action {
                     text: i18n("Add Emoji...")
 
-            enabled: emojiField.text != ""
+                    enabled: emojiCreator.name.length > 0
                     property var fileDialog: null
+                    icon.name: 'list-add'
 
-            onClicked: {
+                    onTriggered: {
-                if (this.fileDialog != null) {
+                        if (this.fileDialog !== null) {
                             return;
                         }
 
@@ -148,9 +106,15 @@ Kirigami.Page {
                         this.fileDialog.open()
                     }
                 }
+            ]
+        }
+    }
 
-        Item {
+    Component {
-            Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
+        id: openFileDialog
+
+        OpenFileDialog {
+            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
         }
     }
 }