cellularnetwork-kcm: Port to FormCard

kcms/cellularnetwork/ui/ModemPage.qml

@@ -1,309 +1,279 @@
 // SPDX-FileCopyrightText: 2021-2022 Devin Lin <devin@kde.org>
 // SPDX-License-Identifier: GPL-2.0-or-later
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Layouts 1.2
+import QtQuick.Layouts
-import QtQuick.Controls 2.12 as Controls
+import QtQuick.Controls as Controls
 
-import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigami 2 as Kirigami
 import org.kde.kcmutils
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
-import cellularnetworkkcm 1.0
+import cellularnetworkkcm
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: modemPage
-    title: i18n("Modem %1", modem.displayId)
-    
-    leftPadding: 0
-    rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
 
     property Modem modem
     property bool showExtra: false
 
-    ColumnLayout {
+    title: i18n("Modem %1", modem.displayId)
-        MessagesList {
+
-            Layout.fillWidth: true
+    MessagesList {
-            Layout.margins: Kirigami.Units.smallSpacing
+        Layout.fillWidth: true
-            visible: count != 0
+        Layout.margins: Kirigami.Units.smallSpacing
-            model: kcm.messages
+        visible: count != 0
+        model: kcm.messages
+    }
+
+    FormCard.FormHeader {
+        title: i18n("Modem Control")
+    }
+
+    FormCard.FormCard {
+        FormCard.FormButtonDelegate {
+            id: modemRestartButton
+            text: i18n("Force Modem Restart")
+            onClicked: modem.reset()
         }
+    }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
+        title: i18n("Modem Details")
+    }
 
+    FormCard.FormCard {
+        FormCard.AbstractFormDelegate {
+            id: accessTechnologiesText
+
+            background: null
             contentItem: ColumnLayout {
-                spacing: 0
+                Layout.fillWidth: true
-                
+                spacing: Kirigami.Units.smallSpacing
-                MobileForm.FormCardHeader {
+                Controls.Label {
-                    title: i18n("Modem Control")
-                }
-                
-                MobileForm.AbstractFormDelegate {
-                    id: modemRestartButton
                     Layout.fillWidth: true
-                    contentItem: RowLayout {
+                    text: i18n("Access Technologies")
-                        Controls.Label {
+                    elide: Text.ElideRight
-                            Layout.fillWidth: true
+                }
-                            text: i18n("Modem Restart")
+                Repeater {
-                        }
+                    model: modem.details.accessTechnologies
-                        Controls.Button {
+                    Controls.Label {
-                            text: i18n("Force Modem Restart")
+                        Layout.fillWidth: true
-                            onClicked: modem.reset()
+                        text: modelData
-                        }
+                        color: Kirigami.Theme.disabledTextColor
+                        font: Kirigami.Theme.smallFont
+                        elide: Text.ElideRight
                     }
                 }
             }
         }
 
-        MobileForm.FormCard {
+        FormCard.FormDelegateSeparator {}
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
 
+        FormCard.FormTextDelegate {
+            id: imeiText
+            text: i18n("IMEI")
+            description: modem.details.equipmentIdentifier
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: enabledText
+            text: i18n("Enabled")
+            description: modem.details.isEnabled
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: manufacturerText
+            text: i18n("Manufacturer")
+            description: modem.details.manufacturer
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: modelText
+            text: i18n("Model")
+            description: modem.details.model
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.AbstractFormDelegate {
+            id: ownedNumbersText
+
+            background: null
             contentItem: ColumnLayout {
-                spacing: 0
+                spacing: Kirigami.Units.smallSpacing
 
-                MobileForm.FormCardHeader {
+                Controls.Label {
-                    title: i18n("Modem Details")
-                }
-                
-                MobileForm.AbstractFormDelegate {
-                    id: accessTechnologiesText
                     Layout.fillWidth: true
+                    text: i18n("Owned Numbers:")
+                    elide: Text.ElideRight
+                }
 
-                    background: Item {}
+                Repeater {
-                    contentItem: ColumnLayout {
+                    model: modem.details.ownNumbers
+                    Controls.Label {
                         Layout.fillWidth: true
-                        spacing: Kirigami.Units.smallSpacing
+                        text: modelData
-                        Controls.Label {
+                        color: Kirigami.Theme.disabledTextColor
-                            Layout.fillWidth: true
+                        font: Kirigami.Theme.smallFont
-                            text: i18n("Access Technologies")
+                        elide: Text.ElideRight
-                            elide: Text.ElideRight
-                        }
-                        Repeater {
-                            model: modem.details.accessTechnologies
-                            Controls.Label {
-                                Layout.fillWidth: true
-                                text: modelData
-                                color: Kirigami.Theme.disabledTextColor
-                                font: Kirigami.Theme.smallFont
-                                elide: Text.ElideRight
-                            }
-                        }
                     }
                 }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: imeiText
-                    text: i18n("IMEI")
-                    description: modem.details.equipmentIdentifier
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: enabledText
-                    text: i18n("Enabled")
-                    description: modem.details.isEnabled
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: manufacturerText
-                    text: i18n("Manufacturer")
-                    description: modem.details.manufacturer
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: modelText
-                    text: i18n("Model")
-                    description: modem.details.model
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.AbstractFormDelegate {
-                    id: ownedNumbersText
-                    Layout.fillWidth: true
-                    
-                    background: Item {}
-                    contentItem: ColumnLayout {
-                        Layout.fillWidth: true
-                        spacing: Kirigami.Units.smallSpacing
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            text: i18n("Owned Numbers:")
-                            elide: Text.ElideRight
-                        }
-                        Repeater {
-                            model: modem.details.ownNumbers
-                            Controls.Label {
-                                Layout.fillWidth: true
-                                text: modelData
-                                color: Kirigami.Theme.disabledTextColor
-                                font: Kirigami.Theme.smallFont
-                                elide: Text.ElideRight
-                            }
-                        }
-                    }
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-
-                MobileForm.FormTextDelegate {
-                    id: revisionText
-                    text: i18n("Revision")
-                    description: modem.details.revision
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: signalQualityText
-                    text: i18n("Signal Quality")
-                    description: modem.details.signalQuality
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: stateText
-                    text: i18n("State")
-                    description: modem.details.state
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: failureReasonText
-                    text: i18n("Failure Reason")
-                    description: modem.details.stateFailedReason
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: registrationStateText
-                    text: i18n("Registration State")
-                    description: modem.details.registrationState
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: roamingText
-                    text: i18n("Roaming")
-                    description: modem.isRoaming ? i18n("Yes") : i18n("No")
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: firmwareVersionText
-                    text: i18n("Firmware Version")
-                    description: modem.details.firmwareVersion
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: interfaceNameText
-                    text: i18n("Interface Name")
-                    description: modem.details.interfaceName
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: meteredText
-                    text: i18n("Metered")
-                    description: modem.details.metered
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: activeNMConnectionText
-                    text: i18n("Active NetworkManager Connection")
-                    description: modem.activeConnectionUni
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: deviceText
-                    text: i18n("Device")
-                    description: modem.details.device
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: deviceIdText
-                    text: i18n("Device ID")
-                    description: modem.details.deviceIdentifier
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.AbstractFormDelegate {
-                    id: driversText
-                    Layout.fillWidth: true
-                    
-                    background: Item {}
-                    contentItem: ColumnLayout {
-                        Layout.fillWidth: true
-                        spacing: Kirigami.Units.smallSpacing
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            text: i18n("Drivers:")
-                            elide: Text.ElideRight
-                        }
-                        Repeater {
-                            model: modem.details.drivers
-                            Controls.Label {
-                                Layout.fillWidth: true
-                                text: modelData
-                                color: Kirigami.Theme.disabledTextColor
-                                font: Kirigami.Theme.smallFont
-                                elide: Text.ElideRight
-                            }
-                        }
-                    }
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: pluginText
-                    text: i18n("Plugin")
-                    description: modem.details.plugin
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: powerStateText
-                    text: i18n("Power State")
-                    description: modem.details.powerState
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: simPathText
-                    text: i18n("SIM Path")
-                    description: modem.details.simPath
-                }
             }
         }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: revisionText
+            text: i18n("Revision")
+            description: modem.details.revision
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: signalQualityText
+            text: i18n("Signal Quality")
+            description: modem.details.signalQuality
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: stateText
+            text: i18n("State")
+            description: modem.details.state
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: failureReasonText
+            text: i18n("Failure Reason")
+            description: modem.details.stateFailedReason
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: registrationStateText
+            text: i18n("Registration State")
+            description: modem.details.registrationState
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: roamingText
+            text: i18n("Roaming")
+            description: modem.isRoaming ? i18n("Yes") : i18n("No")
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: firmwareVersionText
+            text: i18n("Firmware Version")
+            description: modem.details.firmwareVersion
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: interfaceNameText
+            text: i18n("Interface Name")
+            description: modem.details.interfaceName
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: meteredText
+            text: i18n("Metered")
+            description: modem.details.metered
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: activeNMConnectionText
+            text: i18n("Active NetworkManager Connection")
+            description: modem.activeConnectionUni
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: deviceText
+            text: i18n("Device")
+            description: modem.details.device
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: deviceIdText
+            text: i18n("Device ID")
+            description: modem.details.deviceIdentifier
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.AbstractFormDelegate {
+            id: driversText
+
+            background: null
+            contentItem: ColumnLayout {
+                Layout.fillWidth: true
+                spacing: Kirigami.Units.smallSpacing
+                Controls.Label {
+                    Layout.fillWidth: true
+                    text: i18n("Drivers:")
+                    elide: Text.ElideRight
+                }
+                Repeater {
+                    model: modem.details.drivers
+                    Controls.Label {
+                        Layout.fillWidth: true
+                        text: modelData
+                        color: Kirigami.Theme.disabledTextColor
+                        font: Kirigami.Theme.smallFont
+                        elide: Text.ElideRight
+                    }
+                }
+            }
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: pluginText
+            text: i18n("Plugin")
+            description: modem.details.plugin
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: powerStateText
+            text: i18n("Power State")
+            description: modem.details.powerState
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: simPathText
+            text: i18n("SIM Path")
+            description: modem.details.simPath
+        }
     }
 }
 

kcms/cellularnetwork/ui/SimLockPage.qml

@@ -7,112 +7,99 @@ import QtQuick.Controls 2.12 as Controls
 
 import org.kde.kirigami 2.19 as Kirigami
 import org.kde.kcmutils
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 
 import cellularnetworkkcm 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: root
-    title: i18n("SIM Lock")
-    
-    leftPadding: 0
-    rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
 
     property Sim sim
 
+    title: i18n("SIM Lock")
+
+    MessagesList {
+        Layout.fillWidth: true
+        Layout.margins: Kirigami.Units.gridUnit
+        model: kcm.messages
+    }
+
     ColumnLayout {
-        spacing: 0
+        id: unlockSimPlaceholder
-        width: root.width
+        visible: sim.locked
 
-        MessagesList {
+        // HACK: prevent infinite binding loop?
+        Component.onCompleted: unlockSimPlaceholder.Layout.preferredHeight = root.height
+
+        Kirigami.PlaceholderMessage {
+            Layout.margins: Kirigami.Units.gridUnit * 2
             Layout.fillWidth: true
-            Layout.margins: Kirigami.Units.gridUnit
+            Layout.fillHeight: true
-            model: kcm.messages
+            text: i18n("SIM is locked")
-        }
+            explanation: i18n("In order to use this SIM, you must first unlock it.")
-
+            icon.name: "lock"
-        ColumnLayout {
+            helpfulAction: Kirigami.Action {
-            id: unlockSimPlaceholder
-            visible: sim.locked
-            Layout.fillWidth: true
-            
-            // HACK: prevent infinite binding loop?
-            Component.onCompleted: unlockSimPlaceholder.Layout.preferredHeight = root.height
-            
-            Kirigami.PlaceholderMessage {
-                Layout.margins: Kirigami.Units.gridUnit * 2
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                text: i18n("SIM is locked")
-                explanation: i18n("In order to use this SIM, you must first unlock it.")
-                icon.name: "lock"
-                helpfulAction: Kirigami.Action {
-                    icon.name: "unlock"
-                    text: "Unlock SIM"
-                    onTriggered: unlockPinDialog.open() // TODO replace custom unlock pin dialog with just opening the system unlock PIN dialog
-                }
-            }
-        }
-        
-        ColumnLayout {
-            id: notLockedSimPlaceholder
-            visible: !sim.pinEnabled && !unlockSimPlaceholder.visible
-            Layout.fillWidth: true
-            
-            // HACK: prevent infinite binding loop?
-            Component.onCompleted: notLockedSimPlaceholder.Layout.preferredHeight = root.height
-            
-            Kirigami.PlaceholderMessage {
-                Layout.margins: Kirigami.Units.gridUnit * 2
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                text: i18n("SIM is not locked")
-                explanation: i18n("You can lock your SIM to require a set PIN code for phone calls and mobile data.")
                 icon.name: "unlock"
-                helpfulAction: Kirigami.Action {
+                text: "Unlock SIM"
-                    icon.name: "lock"
+                onTriggered: unlockPinDialog.open() // TODO replace custom unlock pin dialog with just opening the system unlock PIN dialog
-                    text: i18n("Lock SIM")
-                    onTriggered: createPinDialog.open()
-                }
             }
         }
+    }
 
-        MobileForm.FormCard {
+    ColumnLayout {
-            visible: !notLockedSimPlaceholder.visible && !unlockSimPlaceholder.visible
+        id: notLockedSimPlaceholder
+        visible: !sim.pinEnabled && !unlockSimPlaceholder.visible
+        Layout.fillWidth: true
+
+        // HACK: prevent infinite binding loop?
+        Component.onCompleted: notLockedSimPlaceholder.Layout.preferredHeight = root.height
+
+        Kirigami.PlaceholderMessage {
+            Layout.margins: Kirigami.Units.gridUnit * 2
             Layout.fillWidth: true
-            
+            Layout.fillHeight: true
-            contentItem: ColumnLayout {
+            text: i18n("SIM is not locked")
-                spacing: 0
+            explanation: i18n("You can lock your SIM to require a set PIN code for phone calls and mobile data.")
-                MobileForm.FormButtonDelegate {
+            icon.name: "unlock"
-                    id: disableSimLockButton
+            helpfulAction: Kirigami.Action {
-                    text: i18n("Disable SIM Lock") 
+                icon.name: "lock"
-                    description: i18n("Disable the SIM lock feature and remove the passcode on the SIM.")
+                text: i18n("Lock SIM")
-                    onClicked: removePinDialog.open();
+                onTriggered: createPinDialog.open()
-                }
-                
-                Kirigami.Separator {
-                    Layout.leftMargin: Kirigami.Units.gridUnit
-                    Layout.rightMargin: Kirigami.Units.gridUnit
-                    Layout.fillWidth: true
-                    opacity: (!disableSimLockButton.controlHovered && !changePinButton.controlHovered) ? 0.5 : 0
-                }
-                
-                MobileForm.FormButtonDelegate {
-                    id: changePinButton
-                    text: i18n("Change PIN")
-                    description: i18n("Change the passcode set on the SIM.")
-                    onClicked: changePinDialog.open()
-                }
             }
         }
+    }
 
-        // dialogs
+    FormCard.FormCard {
+        visible: !notLockedSimPlaceholder.visible && !unlockSimPlaceholder.visible
+        Layout.fillWidth: true
 
+        FormCard.FormButtonDelegate {
+            id: disableSimLockButton
+            text: i18n("Disable SIM Lock")
+            description: i18n("Disable the SIM lock feature and remove the passcode on the SIM.")
+            onClicked: removePinDialog.open();
+        }
+
+        Kirigami.Separator {
+            Layout.leftMargin: Kirigami.Units.gridUnit
+            Layout.rightMargin: Kirigami.Units.gridUnit
+            opacity: (!disableSimLockButton.controlHovered && !changePinButton.controlHovered) ? 0.5 : 0
+        }
+
+        FormCard.FormButtonDelegate {
+            id: changePinButton
+            text: i18n("Change PIN")
+            description: i18n("Change the passcode set on the SIM.")
+            onClicked: changePinDialog.open()
+        }
+    }
+
+    data: [
         RegExpValidator {
             id: pinValidator
             regExp: /[0-9]+/
-        }
+        },
+        // dialogs
 
         Kirigami.Dialog {
             id: unlockPinDialog
@@ -132,7 +119,7 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
 
         Kirigami.Dialog {
             id: changePinDialog
@@ -180,7 +167,7 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
 
         Kirigami.Dialog {
             id: removePinDialog
@@ -197,7 +184,7 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
 
         Kirigami.Dialog {
             id: createPinDialog

kcms/cellularnetwork/ui/SimPage.qml

@@ -1,20 +1,20 @@
 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
 // SPDX-License-Identifier: GPL-2.0-or-later
 
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Layouts 1.2
+import QtQuick.Layouts
-import QtQuick.Controls 2.12 as Controls
+import QtQuick.Controls as Controls
 
-import org.kde.kirigami 2.12 as Kirigami
+import org.kde.plasma.networkmanagement as PlasmaNM
-import org.kde.plasma.networkmanagement 0.2 as PlasmaNM
 import org.kde.kcmutils
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigami as Kirigami
+import org.kde.kirigamiaddons.formcard 1 as FormCard
+import org.kde.kirigamiaddons.components 1 as Components
 
 import cellularnetworkkcm 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: simPage
-    title: i18n("SIM") + " " + displayId
 
     property Sim sim: null
 
@@ -32,196 +32,172 @@ Kirigami.ScrollablePage {
     property string simIdentifier: sim ? sim.simIdentifier : ""
     property var simEmergencyNumbers: sim ? sim.emergencyNumbers : []
 
-    leftPadding: 0
+    title: i18n("SIM") + " " + displayId
-    rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
 
-    PlasmaNM.EnabledConnections {
+    data: PlasmaNM.EnabledConnections {
         id: enabledConnections
     }
 
-    ColumnLayout {
+    header: Components.Banner {
-        spacing: 0
+        width: parent.width
-        width: simPage.width
+        visible: !simEnabled
+        type: Kirigami.MessageType.Error
+        text: i18n("This SIM slot is empty, a SIM card needs to be inserted in order for it to be used.")
+    }
 
-        Kirigami.InlineMessage {
+    MessagesList {
-            Layout.fillWidth: true
+        id: messagesList
-            Layout.margins: Kirigami.Units.gridUnit
+        Layout.fillWidth: true
-            Layout.bottomMargin: visible && !messagesList.visible ? Kirigami.Units.gridUnit : 0
+        Layout.margins: Kirigami.Units.gridUnit
-            visible: !simEnabled
+        model: kcm.messages
-            type: Kirigami.MessageType.Error
+    }
-            text: qsTr("This SIM slot is empty, a SIM card needs to be inserted in order for it to be used.")
+
+    FormCard.FormCard {
+        FormCard.FormSwitchDelegate {
+            id: dataRoamingCheckBox
+            text: i18n("Data Roaming")
+            description: i18n("Allow your device to use networks other than your carrier.")
+            enabled: simEnabled
+            checked: isRoaming
+            onCheckedChanged: sim.modem.isRoaming = checked
         }
 
-        MessagesList {
+        FormCard.FormDelegateSeparator { above: dataRoamingCheckBox; below: apnButton }
-            id: messagesList
+
-            Layout.fillWidth: true
+        FormCard.FormButtonDelegate {
-            Layout.margins: Kirigami.Units.gridUnit
+            id: apnButton
-            model: kcm.messages
+            icon.name: "globe"
+            text: i18n("Modify APNs")
+            description: i18n("Configure access point names for your carrier.")
+            enabled: simEnabled && enabledConnections.wwanEnabled
+            onClicked: kcm.push("ProfileList.qml", { "modem": sim.modem });
         }
 
-        MobileForm.FormCard {
+        FormCard.FormDelegateSeparator { above: apnButton; below: networksButton }
-            Layout.fillWidth: true
 
+        FormCard.FormButtonDelegate {
+            id: networksButton
+            icon.name: "network-mobile-available"
+            text: i18n("Networks")
+            description: i18n("Select a network operator.")
+            enabled: simEnabled
+            onClicked: kcm.push("AvailableNetworks.qml", { "modem": sim.modem, "sim": sim });
+        }
+
+        FormCard.FormDelegateSeparator { above: networksButton; below: simLockButton }
+
+        FormCard.FormButtonDelegate {
+            id: simLockButton
+            icon.name: "unlock"
+            text: i18n("SIM Lock")
+            description: i18n("Modify SIM lock settings.")
+            enabled: simEnabled
+            onClicked: kcm.push("SimLockPage.qml", { "sim": sim });
+        }
+
+        FormCard.FormDelegateSeparator { above: simLockButton; below: modemDetailsButton }
+
+        FormCard.FormButtonDelegate {
+            id: modemDetailsButton
+            icon.name: "network-modem"
+            text: i18n("Modem Details")
+            description: i18n("View the details of the modem this SIM is connected to.")
+            onClicked: kcm.push("ModemPage.qml", { "modem": sim.modem })
+        }
+    }
+
+    FormCard.FormHeader {
+        title: i18n("SIM Details")
+    }
+
+    FormCard.FormCard {
+        FormCard.FormTextDelegate {
+            id: lockedText
+            text: i18n("Locked")
+            description: simLocked ? i18n("Yes") : i18n("No")
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate  {
+            id: imsiText
+            text: i18n("IMSI")
+            description: simImsi
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate  {
+            id: eidText
+            text: i18n("EID")
+            description: simEid
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: opCodeModemText
+            text: i18n("Operator Code (modem)")
+            description: operatorCode
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate  {
+            id: opNameModemText
+            text: i18n("Operator Name (modem)")
+            description: operatorName
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate  {
+            id: opCodeSimText
+            text: i18n("Operator Code (provided by SIM)")
+            description: simOperatorIdentifier
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: opNameSimText
+            text: i18n("Operator Name (provided by SIM)")
+            description: simOperatorName
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextDelegate {
+            id: simIdText
+            text: i18n("SIM ID")
+            description: simIdentifier
+        }
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.AbstractFormDelegate {
+            id: emergencyNumbersText
+
+            background: null
             contentItem: ColumnLayout {
-                spacing: 0
+                Layout.fillWidth: true
+                spacing: Kirigami.Units.smallSpacing
 
-                MobileForm.FormSwitchDelegate {
+                Controls.Label {
-                    id: dataRoamingCheckBox
-                    text: i18n("Data Roaming")
-                    description: i18n("Allow your device to use networks other than your carrier.")
-                    enabled: simEnabled
-                    checked: isRoaming
-                    onCheckedChanged: sim.modem.isRoaming = checked
-                }
-                
-                MobileForm.FormDelegateSeparator { above: dataRoamingCheckBox; below: apnButton }
-                
-                MobileForm.FormButtonDelegate {
-                    id: apnButton
-                    icon.name: "globe"
-                    text: i18n("Modify APNs")
-                    description: i18n("Configure access point names for your carrier.")
-                    enabled: simEnabled && enabledConnections.wwanEnabled
-                    onClicked: kcm.push("ProfileList.qml", { "modem": sim.modem });
-                }
-                
-                MobileForm.FormDelegateSeparator { above: apnButton; below: networksButton }
-                
-                MobileForm.FormButtonDelegate {
-                    id: networksButton
-                    icon.name: "network-mobile-available"
-                    text: i18n("Networks")
-                    description: i18n("Select a network operator.")
-                    enabled: simEnabled
-                    onClicked: kcm.push("AvailableNetworks.qml", { "modem": sim.modem, "sim": sim });
-                }
-                
-                MobileForm.FormDelegateSeparator { above: networksButton; below: simLockButton }
-                
-                MobileForm.FormButtonDelegate {
-                    id: simLockButton
-                    icon.name: "unlock"
-                    text: i18n("SIM Lock")
-                    description: i18n("Modify SIM lock settings.")
-                    enabled: simEnabled
-                    onClicked: kcm.push("SimLockPage.qml", { "sim": sim });
-                }
-                
-                MobileForm.FormDelegateSeparator { above: simLockButton; below: modemDetailsButton }
-                
-                MobileForm.FormButtonDelegate {
-                    id: modemDetailsButton
-                    icon.name: "network-modem"
-                    text: i18n("Modem Details")
-                    description: i18n("View the details of the modem this SIM is connected to.")
-                    onClicked: kcm.push("ModemPage.qml", { "modem": sim.modem })
-                }
-            }
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("SIM Details")
-                }
-                
-                MobileForm.FormTextDelegate {
-                    id: lockedText
-                    text: i18n("Locked")
-                    description: simLocked ? i18n("Yes") : i18n("No")
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate  {
-                    id: imsiText
-                    text: i18n("IMSI")
-                    description: simImsi
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate  {
-                    id: eidText
-                    text: i18n("EID")
-                    description: simEid
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: opCodeModemText
-                    text: i18n("Operator Code (modem)")
-                    description: operatorCode
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate  {
-                    id: opNameModemText
-                    text: i18n("Operator Name (modem)")
-                    description: operatorName
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate  {
-                    id: opCodeSimText
-                    text: i18n("Operator Code (provided by SIM)")
-                    description: simOperatorIdentifier
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: opNameSimText
-                    text: i18n("Operator Name (provided by SIM)")
-                    description: simOperatorName
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.FormTextDelegate {
-                    id: simIdText
-                    text: i18n("SIM ID")
-                    description: simIdentifier
-                }
-                
-                MobileForm.FormDelegateSeparator {}
-                
-                MobileForm.AbstractFormDelegate {
-                    id: emergencyNumbersText
                     Layout.fillWidth: true
+                    text: i18n("Emergency Numbers")
+                    elide: Text.ElideRight
+                }
 
-                    background: Item {}
+                Repeater {
-                    contentItem: ColumnLayout {
+                    model: simEmergencyNumbers
+
+                    Controls.Label {
                         Layout.fillWidth: true
-                        spacing: Kirigami.Units.smallSpacing
+                        text: modelData
-                        
+                        color: Kirigami.Theme.disabledTextColor
-                        Controls.Label {
+                        font: Kirigami.Theme.smallFont
-                            Layout.fillWidth: true
+                        elide: Text.ElideRight
-                            text: i18n("Emergency Numbers")
-                            elide: Text.ElideRight
-                        }
-                        
-                        Repeater {
-                            model: simEmergencyNumbers
-                            
-                            Controls.Label {
-                                Layout.fillWidth: true
-                                text: modelData
-                                color: Kirigami.Theme.disabledTextColor
-                                font: Kirigami.Theme.smallFont
-                                elide: Text.ElideRight
-                            }
-                        }
                     }
                 }
             }

kcms/cellularnetwork/ui/main.qml

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2018 Martin Kacej <m.kacej@atlas.sk>
 // SPDX-FileCopyrightText: 2020 Dimitris Kardarakos <dimkard@posteo.net>
 // SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
+// SPDX-FileCopyrightText: 2023 Carl Schwan <carl@carlschwan.eu>
 // SPDX-License-Identifier: GPL-2.0-or-later
 
 import QtQuick 2.12
@@ -8,27 +9,26 @@ import QtQuick.Layouts 1.2
 import QtQuick.Controls 2.12 as Controls
 
 import org.kde.plasma.networkmanagement 0.2 as PlasmaNM
-import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigami as Kirigami
 import org.kde.kcmutils as KCM
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
 import cellularnetworkkcm 1.0
 
 KCM.SimpleKCM {
     id: root
+
     objectName: "mobileDataMain"
 
     leftPadding: 0
     rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
+    topPadding: 0
-    bottomPadding: Kirigami.Units.gridUnit
+    bottomPadding: 0
 
     Kirigami.PlaceholderMessage {
         id: noModem
         anchors.centerIn: parent
-        anchors.left: parent.left
+        width: parent.width - Kirigami.Units.gridUnit * 4
-        anchors.right: parent.right
-        anchors.margins: Kirigami.Units.gridUnit
 
         visible: !enabledConnections.wwanHwEnabled || !availableDevices.modemDeviceAvailable || !kcm.modemFound
         icon.name: "auth-sim-missing"
@@ -63,101 +63,88 @@ KCM.SimpleKCM {
             model: kcm.messages
         }
 
-        MobileForm.FormCard {
+        FormCard.FormCard {
-            Layout.fillWidth: true
+            FormCard.FormSwitchDelegate {
-            
+                id: mobileDataSwitch
-            contentItem: ColumnLayout {
+                text: i18n("Mobile data")
-                spacing: 0
+                description: {
-                
+                    if (!kcm.modemFound) {
-                MobileForm.FormSwitchDelegate {
+                        return "";
-                    id: mobileDataSwitch
+                    } else if (!kcm.selectedModem.hasSim) {
-                    text: i18n("Mobile data")
+                        return i18n("No SIM is inserted.")
-                    description: {
+                    } if (!kcm.selectedModem.mobileDataSupported) {
-                        if (!kcm.modemFound) {
+                        return i18n("Mobile data is not available with this modem.")
-                            return "";
+                    } else if (kcm.selectedModem.needsAPNAdded) {
-                        } else if (!kcm.selectedModem.hasSim) {
+                        return i18n("An APN needs to be configured to have mobile data.");
-                            return i18n("No SIM is inserted.")
+                    } else {
-                        } if (!kcm.selectedModem.mobileDataSupported) {
+                        return i18n("Whether mobile data is enabled.");
-                            return i18n("Mobile data is not available with this modem.")
-                        } else if (kcm.selectedModem.needsAPNAdded) {
-                            return i18n("An APN needs to be configured to have mobile data.");
-                        } else {
-                            return i18n("Whether mobile data is enabled.");
-                        }
-                    }
-                    
-                    property bool manuallySet: false
-                    property bool shouldBeChecked: kcm.selectedModem && kcm.selectedModem.mobileDataEnabled
-                    onShouldBeCheckedChanged: {
-                        checked = shouldBeChecked;
-                    }
-                    
-                    enabled: kcm.selectedModem.mobileDataSupported && !kcm.selectedModem.needsAPNAdded
-                    checked: shouldBeChecked
-                    
-                    onCheckedChanged: {
-                        // prevent binding loops
-                        if (manuallySet) {
-                            manuallySet = false;
-                            return;
-                        }
-                        
-                        if (kcm.selectedModem.mobileDataEnabled != checked) {
-                            manuallySet = true;
-                            kcm.selectedModem.mobileDataEnabled = checked;
-                        }
                     }
                 }
 
-                MobileForm.FormDelegateSeparator { above: mobileDataSwitch; below: dataUsageButton }
+                property bool manuallySet: false
-                
+                property bool shouldBeChecked: kcm.selectedModem && kcm.selectedModem.mobileDataEnabled
-                MobileForm.FormButtonDelegate {
+                onShouldBeCheckedChanged: {
-                    id: dataUsageButton
+                    checked = shouldBeChecked;
-                    text: i18n("Data Usage")
-                    description: i18n("View data usage.")
-                    icon.name: "office-chart-bar"
-                    
-                    enabled: false
                 }
+
+                enabled: kcm.selectedModem.mobileDataSupported && !kcm.selectedModem.needsAPNAdded
+                checked: shouldBeChecked
+
+                onCheckedChanged: {
+                    // prevent binding loops
+                    if (manuallySet) {
+                        manuallySet = false;
+                        return;
+                    }
+
+                    if (kcm.selectedModem.mobileDataEnabled != checked) {
+                        manuallySet = true;
+                        kcm.selectedModem.mobileDataEnabled = checked;
+                    }
+                }
+            }
+
+            FormCard.FormDelegateSeparator { above: mobileDataSwitch; below: dataUsageButton }
+
+            FormCard.FormButtonDelegate {
+                id: dataUsageButton
+                text: i18n("Data Usage")
+                description: i18n("View data usage.")
+                icon.name: "office-chart-bar"
+
+                enabled: false
             }
         }
 
-        MobileForm.FormCard {
+        FormCard.FormHeader {
-            Layout.fillWidth: true
+            title: i18np("SIM", "SIMs", kcm.sims.count)
-            Layout.topMargin: Kirigami.Units.gridUnit
+            visible: repeater.count > 0
+        }
 
-            contentItem: ColumnLayout {
+        FormCard.FormCard {
-                spacing: 0
+            visible: repeater.count > 0
 
-                MobileForm.FormCardHeader {
+            Repeater {
-                    title: kcm.sims.count == 1 ? i18n("SIM") : i18n("SIMs")
+                id: repeater
-                }
+                model: kcm.sims
 
-                Repeater {
+                delegate: ColumnLayout {
-                    id: repeater
+                    Layout.fillWidth: true
-                    model: kcm.sims
 
-                    delegate: ColumnLayout {
+                    FormCard.FormDelegateSeparator {
-                        Layout.fillWidth: true
+                        visible: model.index !== 0
+                        opacity: (!(model.index && repeater.itemAt(model.index - 1).controlHovered) && !simDelegate.controlHovered) ? 0.5 : 0
+                    }
 
-                        Kirigami.Separator {
+                    FormCard.FormButtonDelegate {
-                            visible: model.index !== 0
+                        id: simDelegate
-                            Layout.leftMargin: Kirigami.Units.gridUnit
+                        text: i18n("SIM %1", modelData.displayId)
-                            Layout.rightMargin: Kirigami.Units.gridUnit
+                        description: i18n("View SIM %1 details.", modelData.displayId)
-                            Layout.fillWidth: true
+                        icon.name: "auth-sim-symbolic"
-                            opacity: (!(model.index && repeater.itemAt(model.index - 1).controlHovered) && !simDelegate.controlHovered) ? 0.5 : 0
+                        onClicked: {
-                        }
+                            simPage.sim = modelData;
-                        
+                            simPage.visible = true;
-                        MobileForm.FormButtonDelegate {
+                            kcm.push(simPage);
-                            id: simDelegate
-                            text: i18n("SIM %1", modelData.displayId)
-                            description: i18n("View SIM %1 details.", modelData.displayId)
-                            icon.name: "auth-sim-symbolic"
-                            onClicked: {
-                                simPage.sim = modelData;
-                                simPage.visible = true;
-                                kcm.push(simPage);
-                            }
                         }
                     }
                 }