Port Settings to new Kirigami Form components

CMakeLists.txt

@@ -80,6 +80,8 @@ else()
     ecm_find_qmlmodule(org.kde.syntaxhighlighting 1.0)
 endif()
 
+ecm_find_qmlmodule(org.kde.kirigamiaddons.labs.mobileform 0.1)
+
 if (NOT ANDROID AND NOT WIN32 AND NOT APPLE)
     find_package(KF5DBusAddons ${KF5_MIN_VERSION} REQUIRED)
 endif()

src/qml/Settings/AccountEditorPage.qml

@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15
 import Qt.labs.platform 1.1
 
 import org.kde.kirigami 2.15 as Kirigami
-
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
@@ -16,9 +16,20 @@ Kirigami.ScrollablePage {
     title: i18n("Edit Account")
     property var connection
 
+    readonly property bool compact: width > Kirigami.Units.gridUnit * 30 ? 2 : 1
+
     ColumnLayout {
-        Kirigami.FormLayout {
+        MobileForm.FormCard {
-            RowLayout {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("User information")
+                }
+                MobileForm.AbstractFormDelegate {
+                    Layout.fillWidth: true
+                    contentItem: RowLayout {
                         Kirigami.Avatar {
                             id: avatar
                             source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : ""
@@ -34,7 +45,6 @@ Kirigami.ScrollablePage {
                                     }
 
                                     fileDialog = openFileDialog.createObject(QQC2.ApplicationWindow.Overlay)
-
                                     fileDialog.chosen.connect(function(receivedSource) {
                                         mouseArea.fileDialog = null;
                                         if (!receivedSource) {
@@ -55,45 +65,28 @@ Kirigami.ScrollablePage {
 
                             onClicked: avatar.source = ""
                         }
-                Kirigami.FormData.label: i18n("Avatar:")
-            }
-            QQC2.TextField {
-                id: name
-                text: root.connection ? root.connection.localUser.displayName : ""
-                Kirigami.FormData.label: i18n("Name:")
-            }
-            QQC2.TextField {
-                id: accountLabel
-                text: root.connection ? root.connection.localUser.accountLabel : ""
-                Kirigami.FormData.label: i18n("Label:")
-            }
-            QQC2.TextField {
-                id: currentPassword
-                Kirigami.FormData.label: i18n("Current Password:")
-                enabled: root.connection !== undefined && root.connection.canChangePassword !== false
-                echoMode: TextInput.Password
-            }
-            QQC2.TextField {
-                id: newPassword
-                Kirigami.FormData.label: i18n("New Password:")
-                enabled: root.connection !== undefined && root.connection.canChangePassword !== false
-                echoMode: TextInput.Password
-
-            }
-            QQC2.TextField {
-                id: confirmPassword
-                Kirigami.FormData.label: i18n("Confirm new Password:")
-                enabled: root.connection !== undefined && root.connection.canChangePassword !== false
-                echoMode: TextInput.Password
-            }
-        }
-    }
-
-    footer: RowLayout {
                         Item {
                             Layout.fillWidth: true
                         }
-
+                    }
+                }
+                MobileForm.FormTextFieldDelegate {
+                    id: name
+                    label: i18n("Name:")
+                    text: root.connection ? root.connection.localUser.displayName : ""
+                }
+                MobileForm.FormTextFieldDelegate {
+                    id: accountLabel
+                    label: i18n("Label:")
+                    text: root.connection ? root.connection.localUser.accountLabel : ""
+                }
+                MobileForm.AbstractFormDelegate {
+                    Layout.fillWidth: true
+                    background: Item {}
+                    contentItem: RowLayout {
+                        Item {
+                            Layout.fillWidth: true
+                        }
                         QQC2.Button {
                             text: i18n("Save")
                             Layout.bottomMargin: Kirigami.Units.smallSpacing
@@ -108,16 +101,69 @@ Kirigami.ScrollablePage {
                                 if (root.connection.localUser.accountLabel !== accountLabel.text) {
                                     root.connection.localUser.setAccountLabel(accountLabel.text);
                                 }
-                if(currentPassword.text !== "" && newPassword.text !== "" && confirmPassword.text !== "") {
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Password")
+                }
+                MobileForm.FormTextDelegate {
+                    visible: root.connection !== undefined && root.connection.canChangePassword === false
+                    text: i18n("Your server doesn't support changing your password")
+                }
+                MobileForm.FormTextFieldDelegate {
+                    id: currentPassword
+                    label: i18n("Current Password:")
+                    enabled: root.connection !== undefined && root.connection.canChangePassword !== false
+                    echoMode: TextInput.Password
+                }
+                MobileForm.FormTextFieldDelegate {
+                    id: newPassword
+                    label: i18n("New Password:")
+                    enabled: root.connection !== undefined && root.connection.canChangePassword !== false
+                    echoMode: TextInput.Password
+                }
+                MobileForm.FormTextFieldDelegate {
+                    id: confirmPassword
+                    label: i18n("Confirm new Password:")
+                    enabled: root.connection !== undefined && root.connection.canChangePassword !== false
+                    echoMode: TextInput.Password
+                    onTextChanged: if (newPassword.text !== confirmPassword.text && confirmPassword.text.length > 0) {
+                        confirmPassword.status = MobileForm.AbstractFormDelegate.Status.Error;
+                        confirmPassword.statusMessage = i18n("Passwords don't match");
+                    } else {
+                        confirmPassword.status = MobileForm.AbstractFormDelegate.Status.Default;
+                        confirmPassword.statusMessage = '';
+                    }
+                }
+                MobileForm.AbstractFormDelegate {
+                    Layout.fillWidth: true
+                    background: Item {}
+                    contentItem: RowLayout {
+                        Item {
+                            Layout.fillWidth: true
+                        }
+                        QQC2.Button {
+                            text: i18n("Save")
+                            Layout.bottomMargin: Kirigami.Units.smallSpacing
+                            Layout.topMargin: Kirigami.Units.smallSpacing
+                            enabled: currentPassword.text.length > 0 && newPassword.text.length > 0 && confirmPassword.text.length > 0
+                            onClicked: {
                                 if (newPassword.text === confirmPassword.text) {
                                     Controller.changePassword(root.connection, currentPassword.text, newPassword.text);
                                 } else {
                                     showPassiveNotification(i18n("Passwords do not match"));
-                        return;
                                 }
                             }
-                root.closeDialog();
-            }
                         }
                         QQC2.Button {
                             text: i18n("Cancel")
@@ -127,6 +173,63 @@ Kirigami.ScrollablePage {
                             onClicked: root.closeDialog();
                         }
                     }
+                }
+            }
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Server Information")
+                }
+                MobileForm.FormTextDelegate {
+                    text: i18n("Homeserver url")
+                    description: root.connection.homeserver
+                }
+
+                /** TODO but needs first some api in Quotient
+                MobileForm.FormTextDelegate {
+                    text: i18n("Server file upload limit")
+                    description: root.connection.homeserver
+                }
+
+                MobileForm.FormTextDelegate {
+                    text: i18n("Server name")
+                    description: root.connection.homeserver
+                }
+
+                MobileForm.FormTextDelegate {
+                    text: i18n("Server version")
+                    description: root.connection.homeserver
+                }*/
+            }
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Sign out")
+                }
+                MobileForm.FormButtonDelegate {
+                    Layout.fillWidth: true
+                    text: i18n("Sign out")
+                    onClicked: {
+                        Controller.logout(model.connection, true);
+                        root.closeDialog();
+                        if (Controller.accountCount === 1) {
+                            pageStack.layers.pop();
+                        }
+                    }
+                }
+            }
+        }
+    }
     Component {
         id: openFileDialog
 

src/qml/Settings/AccountsPage.qml

@@ -6,86 +6,83 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import Qt.labs.platform 1.1
 
-import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18n("Accounts")
+    leftPadding: 0
+    rightPadding: 0
 
-    actions.main: Kirigami.Action {
+    ColumnLayout {
-        text: i18n("Add an account")
+        MobileForm.FormCard {
-        icon.name: "list-add-user"
+            Layout.topMargin: Kirigami.Units.largeSpacing
-        onTriggered: pageStack.layers.push("qrc:/WelcomePage.qml")
+            Layout.fillWidth: true
-        visible: !pageSettingStack.wideMode
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Accounts")
                 }
 
-    ListView {
+                Repeater {
                     model: AccountRegistry
-        anchors.fill: parent
+                    delegate: MobileForm.FormButtonDelegate {
-        delegate: Kirigami.BasicListItem {
+                        onClicked: pageSettingStack.pushDialogLayer("qrc:/AccountEditorPage.qml", {
-            text: model.connection.localUser.displayName
-            labelItem.textFormat: Text.PlainText
-            subtitle: model.connection.localUserId
-
-            leading: Kirigami.Avatar {
-                name: model.connection.localUser.displayName ?? model.connection.localUser.id
-                source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : ""
-                width: height
-            }
-
-            onClicked: {
-                Controller.activeConnection = model.connection;
-                pageStack.layers.pop();
-            }
-
-            trailing: RowLayout {
-                QQC2.ToolButton {
-                    display: QQC2.AbstractButton.IconOnly
-                    QQC2.ToolTip {
-                        text: parent.action.text
-                    }
-                    action: Kirigami.Action {
-                        text: i18n("Edit this account")
-                        iconName: "document-edit"
-                        onTriggered: pageSettingStack.pushDialogLayer(Qt.resolvedUrl('./AccountEditorPage.qml'), {
                             connection: model.connection
                         }, {
                             title: i18n("Account editor")
-                        });
+                        })
-                    }
+
-                }
+                        contentItem: RowLayout {
-                QQC2.ToolButton {
+                            Kirigami.Avatar {
-                    display: QQC2.AbstractButton.IconOnly
+                                name: model.connection.localUser.displayName ?? model.connection.localUser.id
-                    QQC2.ToolTip {
+                                source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : ""
-                        text: parent.action.text
+
-                    }
+                                Layout.rightMargin: Kirigami.Units.largeSpacing
-                    action: Kirigami.Action {
+                                implicitWidth: Kirigami.Units.iconSizes.medium
-                        text: i18n("Logout")
+                                implicitHeight: Kirigami.Units.iconSizes.medium
-                        iconName: "im-kick-user"
-                        onTriggered: {
-                            Controller.logout(model.connection, true);
-                            if (Controller.accountCount === 1) {
-                                pageStack.layers.pop();
-                            }
-                        }
-                    }
                             }
+
+                            ColumnLayout {
+                                Layout.fillWidth: true
+                                spacing: Kirigami.Units.smallSpacing
+
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    text: model.connection.localUser.displayName
+                                    textFormat: Text.PlainText
+                                    elide: Text.ElideRight
+                                    wrapMode: Text.Wrap
+                                    maximumLineCount: 2
+                                    color: Kirigami.Theme.textColor
                                 }
+
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    text: model.connection.localUserId
+                                    color: Kirigami.Theme.disabledTextColor
+                                    font: Kirigami.Theme.smallFont
+                                    elide: Text.ElideRight
                                 }
                             }
 
-    footer: QQC2.ToolBar {
+                            MobileForm.FormArrow {
-        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+                                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-        Kirigami.ActionToolBar {
+                                direction: MobileForm.FormArrow.Right
-            alignment: Qt.AlignRight
+                            }
-            rightPadding: Kirigami.Units.smallSpacing
+                        }
-            width: parent.width
+                    }
-            flat: false
+                }
-            actions: Kirigami.Action {
+                MobileForm.FormDelegateSeparator { below: addAccountDelegate }
-                text: i18n("Add an account")
+
-                icon.name: "list-add-user"
+                MobileForm.FormButtonDelegate {
-                onTriggered: pageStack.layers.push("qrc:/WelcomePage.qml")
+                    id: addAccountDelegate
+                    text: i18n("Add Account")
+                    icon.name: "list-add"
+                    onClicked: pageStack.layers.push("qrc:/WelcomePage.qml")
+                }
             }
         }
     }
@@ -93,9 +90,10 @@ Kirigami.ScrollablePage {
     Connections {
         target: Controller
         function onConnectionAdded() {
-            if (pageStack.layers.depth > 2)
+            if (pageStack.layers.depth > 2) {
                 pageStack.layers.pop()
             }
+        }
         function onPasswordStatus(status) {
             if (status === Controller.Success) {
                 showPassiveNotification(i18n("Password changed successfully"));

src/qml/Settings/AppearanceSettingsPage.qml

@@ -7,13 +7,28 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18nc("@title:window", "Appearance")
+    leftPadding: 0
+    rightPadding: 0
     ColumnLayout {
-        RowLayout {
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+            spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("General theme")
+                }
+
+                MobileForm.AbstractFormDelegate {
+                    Layout.fillWidth: true
+                    background: Item {}
+                    contentItem: RowLayout {
                         Layout.alignment: Qt.AlignCenter
                         spacing: Kirigami.Units.gridUnit * 2
                         QQC2.ButtonGroup { id: themeGroup }
@@ -106,6 +121,7 @@ Kirigami.ScrollablePage {
                             }
                         }
                         ThemeRadioButton {
+                            Layout.alignment: Qt.AlignRight
                             innerObject: [
                                 RowLayout {
                                     Layout.fillWidth: true
@@ -173,28 +189,19 @@ Kirigami.ScrollablePage {
                             }
                         }
                     }
-        Kirigami.FormLayout {
-            Layout.maximumWidth: parent.width
-            QQC2.CheckBox {
-                Kirigami.FormData.label: i18n("Show Avatar:")
-                text: i18n("In Chat")
-                checked: Config.showAvatarInTimeline
-                onToggled: {
-                    Config.showAvatarInTimeline = checked
-                    Config.save()
-                }
-                enabled: !Config.isShowAvatarInTimelineImmutable
-            }
-            QQC2.CheckBox {
-                text: i18n("In Sidebar")
-                checked: Config.showAvatarInRoomDrawer
-                enabled: !Config.isShowAvatarInRoomDrawerImmutable
-                onToggled: {
-                    Config.showAvatarInRoomDrawer = checked
-                    Config.save()
                 }
             }
-            QQC2.CheckBox {
+        }
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Timeline")
+                }
+                MobileForm.FormCheckDelegate {
+                    id: showFancyEffectsDelegate
                     text: i18n("Show Fancy Effects")
                     checked: Config.showFancyEffects
                     enabled: !Config.isShowFancyEffectsImmutable
@@ -203,12 +210,24 @@ Kirigami.ScrollablePage {
                         Config.save();
                     }
                 }
+
+                MobileForm.FormDelegateSeparator { above: showFancyEffectsDelegate ; below: colorSchemeDelegate }
+
                 Loader {
+                    id: colorSchemeDelegate
                     visible: item !== null
-                Kirigami.FormData.label: item ? i18n("Theme:") : ""
                     source: "qrc:/ColorScheme.qml"
+                    Layout.fillWidth: true
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator {
+                    above: colorSchemeDelegate
+                    below: hasWindowSystemDelegate
+                    visible: colorSchemeDelegate.visible
+                }
+
+                MobileForm.FormCheckDelegate {
+                    id: hasWindowSystemDelegate
                     visible: Controller.hasWindowSystem
                     text: i18n("Use transparent chat page")
                     enabled: !Config.compactLayout && !Config.isBlurImmutable
@@ -218,10 +237,19 @@ Kirigami.ScrollablePage {
                         Config.save();
                     }
                 }
-            RowLayout {
+
+                MobileForm.FormDelegateSeparator { above: hasWindowSystemDelegate; below: transparencyDelegate }
+
+                MobileForm.AbstractFormDelegate {
+                    id: transparencyDelegate
+                    Layout.fillWidth: true
                     visible: Controller.hasWindowSystem && Config.blur
                     enabled: !Config.isTransparancyImmutable
-                Kirigami.FormData.label: i18n("Transparency:")
+                    contentItem: ColumnLayout {
+                        QQC2.Label {
+                            text: i18n("Transparency")
+                            Layout.fillWidth: true
+                        }
                         QQC2.Slider {
                             enabled: !Config.compactLayout && Config.blur
                             from: 0
@@ -232,17 +260,23 @@ Kirigami.ScrollablePage {
                                 Config.transparency = value;
                                 Config.save();
                             }
+                            Layout.fillWidth: true
 
                             HoverHandler { id: sliderHover }
                             QQC2.ToolTip.visible: sliderHover.hovered && !enabled
                             QQC2.ToolTip.text: i18n("Only enabled if the transparent chat page is enabled.")
-                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
                         }
                         QQC2.Label {
                             text: Math.round(Config.transparency * 100) + "%"
+                            Layout.fillWidth: true
                         }
                     }
-            QQC2.CheckBox {
+                }
+
+                MobileForm.FormDelegateSeparator { above: transparencyDelegate; below: showLocalMessagesOnRightDelegate; visible: transparencyDelegate.visible }
+
+                MobileForm.FormCheckDelegate {
+                    id: showLocalMessagesOnRightDelegate
                     text: i18n("Show your messages on the right")
                     checked: Config.showLocalMessagesOnRight
                     enabled: !Config.isShowLocalMessagesOnRightImmutable && !Config.compactLayout
@@ -251,7 +285,11 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: showLocalMessagesOnRightDelegate; below: showLinkPreviewDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: showLinkPreviewDelegate
                     text: i18n("Show links preview in the chat messages")
                     checked: Config.showLinkPreview
                     onToggled: {
@@ -259,6 +297,34 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
+
+                MobileForm.FormDelegateSeparator { above: showLinkPreviewDelegate; below: showAvatarDelegate }
+
+                MobileForm.FormSectionText {
+                    id: showAvatarDelegate
+                    text: i18n("Show Avatar")
+                }
+
+                MobileForm.FormCheckDelegate {
+                    text: i18n("In Chat")
+                    checked: Config.showAvatarInTimeline
+                    onToggled: {
+                        Config.showAvatarInTimeline = checked
+                        Config.save()
+                    }
+                    enabled: !Config.isShowAvatarInTimelineImmutable
+                }
+
+                MobileForm.FormCheckDelegate {
+                    text: i18n("In Sidebar")
+                    checked: Config.showAvatarInRoomDrawer
+                    enabled: !Config.isShowAvatarInRoomDrawerImmutable
+                    onToggled: {
+                        Config.showAvatarInRoomDrawer = checked
+                        Config.save()
+                    }
+                }
+            }
         }
     }
 }

src/qml/Settings/ColorScheme.qml

@@ -6,14 +6,18 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 import org.kde.neochat 1.0
 
-QQC2.ComboBox {
+MobileForm.FormComboBoxDelegate {
+    Layout.fillWidth: true
+    text: i18n("Themes")
     textRole: "display"
+    valueRole: "display"
     model: ColorSchemer.model
     Component.onCompleted: currentIndex = ColorSchemer.indexForScheme(Config.colorScheme);
-    onActivated: {
+    onCurrentValueChanged: {
         ColorSchemer.apply(currentIndex);
         Config.colorScheme = ColorSchemer.nameForIndex(currentIndex);
         Config.save();

src/qml/Settings/GeneralSettingsPage.qml

@@ -7,16 +7,26 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18nc("@title:window", "General")
+    leftPadding: 0
+    rightPadding: 0
     ColumnLayout {
-        Kirigami.FormLayout {
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
-            QQC2.CheckBox {
+            contentItem: ColumnLayout {
-                Kirigami.FormData.label: i18n("General settings:")
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("General settings")
+                }
+
+                MobileForm.FormCheckDelegate {
+                    id: closeDelegate
                     text: i18n("Close to system tray")
                     checked: Config.systemTray
                     visible: Controller.supportSystemTray
@@ -26,7 +36,11 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: closeDelegate; below: minimizeDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: minimizeDelegate
                     text: i18n("Minimize to system tray on startup")
                     checked: Config.minimizeToSystemTrayOnStartup
                     visible: Controller.supportSystemTray && !Kirigami.Settings.isMobile
@@ -36,20 +50,47 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: minimizeDelegate; below: automaticallyDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: automaticallyDelegate
+                    text: i18n("Automatically hide/unhide the room information when resizing the window")
+                    checked: Config.autoRoomInfoDrawer
+                    enabled: !Config.isAutoRoomInfoDrawerImmutable
+                    onToggled: {
+                        Config.autoRoomInfoDrawer = checked
+                        Config.save()
+                    }
+                }
+            }
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Notifications and events")
+                }
+                MobileForm.FormCheckDelegate {
+                    id: showNotificationsDelegate
                     // TODO: When there are enough notification and timeline event
                     // settings, make 2 separate groups with FormData labels.
-                Kirigami.FormData.label: i18n("Notifications and events:")
                     text: i18n("Show notifications")
                     checked: Config.showNotifications
                     enabled: !Config.isShowNotificationsImmutable
                     onToggled: {
                         Config.showNotifications = checked
                         Config.save()
-                    NotificationsManager.globalNotificationsEnabled = checked
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: showNotificationsDelegate; below: showLeaveJoinEventDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: showLeaveJoinEventDelegate
                     text: i18n("Show leave and join events")
                     checked: Config.showLeaveJoinEvent
                     enabled: !Config.isShowLeaveJoinEventImmutable
@@ -58,7 +99,11 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: showLeaveJoinEventDelegate; below: showNameDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: showNameDelegate
                     text: i18n("Show name change events")
                     checked: Config.showRename
                     enabled: !Config.isShowRenameImmutable
@@ -67,7 +112,11 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+
+                MobileForm.FormDelegateSeparator { above: showNameDelegate; below: showAvatarChangeDelegate }
+
+                MobileForm.FormCheckDelegate {
+                    id: showAvatarChangeDelegate
                     text: i18n("Show avatar update events")
                     checked: Config.showAvatarUpdate
                     enabled: !Config.isShowAvatarUpdateImmutable
@@ -76,8 +125,18 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.RadioButton {
+            }
-                Kirigami.FormData.label: i18n("Rooms and private chats:")
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Rooms and private chats")
+                }
+                MobileForm.FormRadioDelegate {
                     text: i18n("Separated")
                     checked: !Config.mergeRoomList
                     enabled: !Config.isMergeRoomListImmutable
@@ -86,7 +145,7 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.RadioButton {
+                MobileForm.FormRadioDelegate {
                     text: i18n("Intermixed")
                     checked: Config.mergeRoomList
                     enabled: !Config.isMergeRoomListImmutable
@@ -95,9 +154,19 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
+            }
+        }
+
+        MobileForm.FormCard {
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18nc("Chat Editor", "Editor:")
+                }
+                MobileForm.FormCheckDelegate {
                     id: quickEditCheckbox
-                Layout.maximumWidth: parent.width
                     text: i18n("Use s/text/replacement syntax to edit your last message")
                     checked: Config.allowQuickEdit
                     enabled: !Config.isAllowQuickEditImmutable
@@ -105,11 +174,10 @@ Kirigami.ScrollablePage {
                         Config.allowQuickEdit = checked
                         Config.save()
                     }
-
-                // TODO KF5.97 remove this line
-                Component.onCompleted: this.contentItem.wrap = QQC2.Label.Wrap
                 }
-            QQC2.CheckBox {
+                MobileForm.FormDelegateSeparator { above: quickEditCheckbox; below: typingNotificationsDelegate }
+                MobileForm.FormCheckDelegate {
+                    id: typingNotificationsDelegate
                     text: i18n("Send Typing Notifications")
                     checked: Config.typingNotifications
                     enabled: !Config.isTypingNotificationsImmutable
@@ -118,18 +186,6 @@ Kirigami.ScrollablePage {
                         Config.save()
                     }
                 }
-            QQC2.CheckBox {
-                text: i18n("Automatically hide/unhide the room information when resizing the window")
-                Layout.maximumWidth: parent.width
-                checked: Config.autoRoomInfoDrawer
-                enabled: !Config.isAutoRoomInfoDrawerImmutable
-                onToggled: {
-                    Config.autoRoomInfoDrawer = checked
-                    Config.save()
-                }
-
-                // TODO KF5.97 remove this line
-                Component.onCompleted: this.contentItem.wrap = QQC2.Label.Wrap
             }
         }
     }