Port devtools to FormCard

src/qml/Component/Devtools/RoomData.qml

@@ -6,109 +6,96 @@ 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.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
 ColumnLayout {
-    MobileForm.FormCard {
+    id: root
-        Layout.fillWidth: true
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormComboBoxDelegate {
-                text: i18n("Room")
-                textRole: "displayName"
-                valueRole: "id"
-                model: RoomListModel {
-                    id: roomListModel
-                    connection: Controller.activeConnection
-                }
-                Component.onCompleted: currentIndex = indexOfValue(room.id)
-                onCurrentValueChanged: room = roomListModel.roomByAliasOrId(currentValue)
-            }
-            MobileForm.FormCheckDelegate {
-                text: i18n("Show m.room.member events")
-                checked: true
-                onToggled: {
-                    if (checked) {
-                        stateEventFilterModel.removeStateEventTypeFiltered("m.room.member");
-                    } else {
-                        stateEventFilterModel.addStateEventTypeFiltered("m.room.member");
-                    }
-                }
-            }
-            MobileForm.FormCheckDelegate {
-                id: roomAccoutnDataVisibleCheck
-                text: i18n("Show room account data")
-                checked: false
-            }
-        }
-    }
-    MobileForm.FormCard {
-        Layout.fillWidth: true
-        visible: roomAccoutnDataVisibleCheck.checked
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormCardHeader {
-                title: i18n("Room Account Data for %1 - %2", room.displayName, room.id)
-            }
 
-            Repeater {
+    required property NeoChatRoom room
-                model: room.accountDataEventTypes
+
-                delegate: MobileForm.FormTextDelegate {
+    FormCard.FormHeader {
-                    text: modelData
+        title: i18nc("@title", "Choose Room")
-                    onClicked: applicationWindow().pageStack.pushDialogLayer("qrc:/MessageSourceSheet.qml", {
+    }
-                        "sourceText": room.roomAcountDataJson(text)
+    FormCard.FormCard {
-                    }, {
+        FormCard.FormComboBoxDelegate {
-                        "title": i18n("Event Source"),
+            id: roomComboBox
-                        "width": Kirigami.Units.gridUnit * 25
+            text: i18n("Room")
-                    })
+            textRole: "displayName"
+            valueRole: "roomId"
+            model: RoomListModel {
+                id: roomListModel
+                connection: Controller.activeConnection
+            }
+            currentIndex: -1
+            Component.onCompleted: currentIndex = roomListModel.rowForRoom(root.room)
+            onCurrentValueChanged: root.room = roomListModel.roomByAliasOrId(roomComboBox.currentValue)
+        }
+        FormCard.FormTextDelegate {
+            text: i18n("Room Id: %1", root.room.id)
+        }
+        FormCard.FormCheckDelegate {
+            text: i18n("Show m.room.member events")
+            checked: true
+            onToggled: {
+                if (checked) {
+                    stateEventFilterModel.removeStateEventTypeFiltered("m.room.member");
+                } else {
+                    stateEventFilterModel.addStateEventTypeFiltered("m.room.member");
                 }
             }
         }
+        FormCard.FormCheckDelegate {
+            id: roomAccountDataVisibleCheck
+            text: i18n("Show room account data")
+            checked: false
+        }
     }
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
+        visible: roomAccountDataVisibleCheck.checked
-        Layout.fillHeight: true
+        title: i18n("Room Account Data")
-        contentItem: ColumnLayout {
+    }
-            spacing: 0
+    FormCard.FormCard {
-            MobileForm.FormCardHeader {
+        visible: roomAccountDataVisibleCheck.checked
-                id: stateEventListHeader
+        Repeater {
-                title: i18n("Room State for %1", room.displayName)
+            model: root.room.accountDataEventTypes
-                subtitle: room.id
+            delegate: FormCard.FormButtonDelegate {
+                text: modelData
+                onClicked: applicationWindow().pageStack.pushDialogLayer("qrc:/MessageSourceSheet.qml", {
+                    "sourceText": root.room.roomAcountDataJson(text)
+                }, {
+                    "title": i18n("Event Source"),
+                    "width": Kirigami.Units.gridUnit * 25
+                })
             }
-            QQC2.ScrollView {
+        }
-                Layout.fillWidth: true
+    }
-                Layout.fillHeight: true
+    FormCard.FormHeader {
-
+        id: stateEventListHeader
-                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+        title: i18n("Room State")
-                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+    }
-
+    FormCard.FormCard {
-                ListView {
+        Repeater {
-                    id: stateEventListView
+            model: StateFilterModel {
-                    clip: true
+                id: stateEventFilterModel
-
+                sourceModel: StateModel {
-                    model: StateFilterModel {
+                    id: stateModel
-                        id: stateEventFilterModel
+                    room: root.room
-                        sourceModel: StateModel {
-                            id: stateModel
-                            room: devtoolsPage.room
-                        }
-                    }
-
-                    delegate: MobileForm.FormTextDelegate {
-                        text: model.type
-                        description: model.stateKey
-                        onClicked: applicationWindow().pageStack.pushDialogLayer('qrc:/MessageSourceSheet.qml', {
-                            sourceText: stateModel.stateEventJson(stateEventFilterModel.mapToSource(stateEventFilterModel.index(model.index, 0)))
-                        }, {
-                            title: i18n("Event Source"),
-                            width: Kirigami.Units.gridUnit * 25
-                        });
-                    }
                 }
             }
+
+            delegate: FormCard.FormButtonDelegate {
+                text: model.type
+                description: model.stateKey
+                onClicked: applicationWindow().pageStack.pushDialogLayer('qrc:/MessageSourceSheet.qml', {
+                    sourceText: stateModel.stateEventJson(stateEventFilterModel.mapToSource(stateEventFilterModel.index(model.index, 0)))
+                }, {
+                    title: i18n("Event Source"),
+                    width: Kirigami.Units.gridUnit * 25
+                });
+            }
         }
     }
 }

src/qml/Component/Devtools/ServerData.qml

@@ -6,58 +6,43 @@ 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.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
 ColumnLayout {
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
+        title: i18n("Server Capabilities")
-        contentItem: ColumnLayout {
+    }
-            spacing: 0
+    FormCard.FormCard {
-            MobileForm.FormCardHeader {
+        FormCard.FormTextDelegate {
-                title: i18n("Server Capabilities")
+            text: i18n("Can change password")
-            }
+            description: Controller.activeConnection.canChangePassword
-            MobileForm.FormTextDelegate {
-                text: i18n("Can change password")
-                description: Controller.activeConnection.canChangePassword
-            }
         }
     }
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
+        title: i18n("Default Room Version")
-        contentItem: ColumnLayout {
+    }
-            spacing: 0
+    FormCard.FormCard {
-            MobileForm.FormCardHeader {
+        FormCard.FormTextDelegate {
-                title: i18n("Default Room Version")
+            text: Controller.activeConnection.defaultRoomVersion
-            }
-            MobileForm.FormTextDelegate {
-                text: Controller.activeConnection.defaultRoomVersion
-            }
         }
     }
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
+        title: i18n("Available Room Versions")
-        contentItem: ColumnLayout {
+    }
-            spacing: 0
+    FormCard.FormCard {
-            MobileForm.FormCardHeader {
+        Repeater {
-                title: i18n("Available Room Versions")
+            model: room.connection.getSupportedRoomVersions()
-            }
-            Repeater {
-                model: Controller.getSupportedRoomVersions(room.connection)
 
-                delegate: MobileForm.FormTextDelegate {
+            delegate: FormCard.FormTextDelegate {
-                    text: modelData.id
+                text: modelData.id
-                    contentItem.children: QQC2.Label {
+                contentItem.children: QQC2.Label {
-                        text: modelData.status
+                    text: modelData.status
-                        color: Kirigami.Theme.disabledTextColor
+                    color: Kirigami.Theme.disabledTextColor
-                    }
                 }
             }
         }
     }
-    Item {
-        Layout.fillHeight: true
-    }
 }

src/qml/Page/DevtoolsPage.qml

@@ -6,11 +6,12 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 
 import org.kde.neochat 1.0
 
-Kirigami.Page {
+FormCard.FormCardPage {
-    id: devtoolsPage
+    id: root
 
     property NeoChatRoom room
 
@@ -32,11 +33,12 @@ Kirigami.Page {
 
     StackLayout {
         id: swipeView
-        anchors.fill: parent
 
         currentIndex: tabBar.currentIndex
 
-        RoomData {}
+        RoomData {
+            room: root.room
+        }
         ServerData {}
     }
 }