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 {
-        MessagesList {
-            Layout.fillWidth: true
-            Layout.margins: Kirigami.Units.smallSpacing
-            visible: count != 0
-            model: kcm.messages
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Modem Control")
-                }
-                
-                MobileForm.AbstractFormDelegate {
-                    id: modemRestartButton
-                    Layout.fillWidth: true
-                    contentItem: RowLayout {
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            text: i18n("Modem Restart")
-                        }
-                        Controls.Button {
-                            text: i18n("Force Modem Restart")
-                            onClicked: modem.reset()
-                        }
-                    }
-                }
-            }
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Modem Details")
-                }
-                
-                MobileForm.AbstractFormDelegate {
-                    id: accessTechnologiesText
-                    Layout.fillWidth: true
-                    
-                    background: Item {}
-                    contentItem: ColumnLayout {
-                        Layout.fillWidth: true
-                        spacing: Kirigami.Units.smallSpacing
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            text: i18n("Access Technologies")
-                            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 {
+    title: i18n("Modem %1", modem.displayId)
-                    id: revisionText
+
-                    text: i18n("Revision")
+    MessagesList {
-                    description: modem.details.revision
+        Layout.fillWidth: true
-                }
+        Layout.margins: Kirigami.Units.smallSpacing
-                
+        visible: count != 0
-                MobileForm.FormDelegateSeparator {}
+        model: kcm.messages
-                
+    }
-                MobileForm.FormTextDelegate {
+
-                    id: signalQualityText
+    FormCard.FormHeader {
-                    text: i18n("Signal Quality")
+        title: i18n("Modem Control")
-                    description: modem.details.signalQuality
+    }
-                }
+
-                
+    FormCard.FormCard {
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormButtonDelegate {
-                
+            id: modemRestartButton
-                MobileForm.FormTextDelegate {
+            text: i18n("Force Modem Restart")
-                    id: stateText
+            onClicked: modem.reset()
-                    text: i18n("State")
+        }
-                    description: modem.details.state
+    }
-                }
+
-                
+    FormCard.FormHeader {
-                MobileForm.FormDelegateSeparator {}
+        title: i18n("Modem Details")
-                
+    }
-                MobileForm.FormTextDelegate {
+
-                    id: failureReasonText
+    FormCard.FormCard {
-                    text: i18n("Failure Reason")
+        FormCard.AbstractFormDelegate {
-                    description: modem.details.stateFailedReason
+            id: accessTechnologiesText
-                }
+
-                
+            background: null
-                MobileForm.FormDelegateSeparator {}
+            contentItem: ColumnLayout {
-                
+                Layout.fillWidth: true
-                MobileForm.FormTextDelegate {
+                spacing: Kirigami.Units.smallSpacing
-                    id: registrationStateText
+                Controls.Label {
-                    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
-                    
+                    text: i18n("Access Technologies")
-                    background: Item {}
+                    elide: Text.ElideRight
-                    contentItem: ColumnLayout {
+                }
+                Repeater {
+                    model: modem.details.accessTechnologies
+                    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("Drivers:")
+                        elide: Text.ElideRight
-                            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 {
+        FormCard.FormDelegateSeparator {}
-                    id: pluginText
+
-                    text: i18n("Plugin")
+        FormCard.FormTextDelegate {
-                    description: modem.details.plugin
+            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: Kirigami.Units.smallSpacing
+
+                Controls.Label {
+                    Layout.fillWidth: true
+                    text: i18n("Owned Numbers:")
+                    elide: Text.ElideRight
                 }
-                
+
-                MobileForm.FormDelegateSeparator {}
+                Repeater {
-                
+                    model: modem.details.ownNumbers
-                MobileForm.FormTextDelegate {
+                    Controls.Label {
-                    id: powerStateText
+                        Layout.fillWidth: true
-                    text: i18n("Power State")
+                        text: modelData
-                    description: modem.details.powerState
+                        color: Kirigami.Theme.disabledTextColor
-                }
+                        font: Kirigami.Theme.smallFont
-                
+                        elide: Text.ElideRight
-                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,121 +7,108 @@ 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"
+            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 {
+                icon.name: "lock"
+                text: i18n("Lock SIM")
+                onTriggered: createPinDialog.open()
+            }
+        }
+    }
+
+    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();
         }
 
-        ColumnLayout {
+        Kirigami.Separator {
-            id: unlockSimPlaceholder
+            Layout.leftMargin: Kirigami.Units.gridUnit
-            visible: sim.locked
+            Layout.rightMargin: Kirigami.Units.gridUnit
-            Layout.fillWidth: true
+            opacity: (!disableSimLockButton.controlHovered && !changePinButton.controlHovered) ? 0.5 : 0
-            
-            // 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 {
+        FormCard.FormButtonDelegate {
-            id: notLockedSimPlaceholder
+            id: changePinButton
-            visible: !sim.pinEnabled && !unlockSimPlaceholder.visible
+            text: i18n("Change PIN")
-            Layout.fillWidth: true
+            description: i18n("Change the passcode set on the SIM.")
-            
+            onClicked: changePinDialog.open()
-            // 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 {
-                    icon.name: "lock"
-                    text: i18n("Lock SIM")
-                    onTriggered: createPinDialog.open()
-                }
-            }
         }
-        
+    }
-        MobileForm.FormCard {
+
-            visible: !notLockedSimPlaceholder.visible && !unlockSimPlaceholder.visible
+    data: [
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                MobileForm.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
-                    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
-        
         RegExpValidator {
             id: pinValidator
             regExp: /[0-9]+/
-        }
+        },
-        
+        // dialogs
+
         Kirigami.Dialog {
             id: unlockPinDialog
             title: i18n("Unlock SIM")
             standardButtons: Controls.Dialog.Ok | Controls.Dialog.Cancel
             padding: Kirigami.Units.gridUnit
-            
+
             onAccepted: sim.sendPin(unlockPinCurPin.text)
-            
+
             ColumnLayout {
                 Controls.Label {
                     text: i18n("Attempts left: %1", sim.unlockRetriesLeft)
@@ -132,23 +119,23 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
-        
+
         Kirigami.Dialog {
             id: changePinDialog
             title: i18n("Change SIM PIN")
             standardButtons: isValid ? Controls.Dialog.Ok | Controls.Dialog.Cancel : Controls.Dialog.Cancel
             padding: Kirigami.Units.gridUnit
-            
+
-            property bool isValid: changePinNewPin.text == changePinConfirmPin.text && 
+            property bool isValid: changePinNewPin.text == changePinConfirmPin.text &&
                                    changePinNewPin.text.length >= 4 && changePinNewPin.text.length <= 8 // SIM PINs are between 4-8 digits
-            
+
             onAccepted: {
                 if (isValid) {
                     sim.changePin(changePinCurPin.text, changePinNewPin.text);
                 }
             }
-            
+
             ColumnLayout {
                 spacing: Kirigami.Units.smallSpacing
                 Kirigami.InlineMessage {
@@ -180,16 +167,16 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
-        
+
         Kirigami.Dialog {
             id: removePinDialog
             title: i18n("Remove SIM PIN")
-            standardButtons: Controls.Dialog.Ok | Controls.Dialog.Cancel 
+            standardButtons: Controls.Dialog.Ok | Controls.Dialog.Cancel
             padding: Kirigami.Units.gridUnit
-            
+
             onAccepted: sim.togglePinEnabled(removePinCurPin.text);
-            
+
             ColumnLayout {
                 Kirigami.PasswordField {
                     id: removePinCurPin
@@ -197,23 +184,23 @@ Kirigami.ScrollablePage {
                     validator: pinValidator
                 }
             }
-        }
+        },
-        
+
         Kirigami.Dialog {
             id: createPinDialog
             title: i18n("Add SIM PIN")
             standardButtons: isValid ? Controls.Dialog.Ok | Controls.Dialog.Cancel : Controls.Dialog.Cancel
             padding: Kirigami.Units.gridUnit
-            
+
-            property bool isValid: createPinNewPin.text == createPinConfirmPin.text && 
+            property bool isValid: createPinNewPin.text == createPinConfirmPin.text &&
                                    createPinNewPin.text.length >= 4 && createPinNewPin.text.length <= 8 // SIM PINs are between 4-8 digits
-            
+
             onAccepted: {
                 if (isValid) {
                     sim.togglePinEnabled(createPinNewPin.text);
                 }
             }
-            
+
             ColumnLayout {
                 spacing: Kirigami.Units.smallSpacing
                 Kirigami.InlineMessage {

kcms/cellularnetwork/ui/SimPage.qml

@@ -1,27 +1,27 @@
 // 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
-    
+
     property string displayId: sim ? sim.displayId : ""
     property bool simEnabled: sim ? sim.enabled : false
     property bool isRoaming: sim ? (sim.modem ? sim.modem.isRoaming : false) : false
-    
+
     property bool simLocked: sim ? sim.locked : false
     property string simImsi: sim ? sim.imsi : ""
     property string simEid: sim ? sim.eid : ""
@@ -31,197 +31,173 @@ Kirigami.ScrollablePage {
     property string simOperatorName: sim ? sim.operatorName : ""
     property string simIdentifier: sim ? sim.simIdentifier : ""
     property var simEmergencyNumbers: sim ? sim.emergencyNumbers : []
-    
+
-    leftPadding: 0
+    title: i18n("SIM") + " " + displayId
-    rightPadding: 0
+
-    topPadding: Kirigami.Units.gridUnit
+    data: PlasmaNM.EnabledConnections {
-    bottomPadding: Kirigami.Units.gridUnit
-    
-    PlasmaNM.EnabledConnections {
         id: enabledConnections
     }
-    
+
-    ColumnLayout {
+    header: Components.Banner {
-        spacing: 0
+        width: parent.width
-        width: simPage.width
+        visible: !simEnabled
-        
+        type: Kirigami.MessageType.Error
-        Kirigami.InlineMessage {
+        text: i18n("This SIM slot is empty, a SIM card needs to be inserted in order for it to be used.")
-            Layout.fillWidth: true
+    }
-            Layout.margins: Kirigami.Units.gridUnit
+
-            Layout.bottomMargin: visible && !messagesList.visible ? Kirigami.Units.gridUnit : 0
+    MessagesList {
-            visible: !simEnabled
+        id: messagesList
-            type: Kirigami.MessageType.Error
+        Layout.fillWidth: true
-            text: qsTr("This SIM slot is empty, a SIM card needs to be inserted in order for it to be used.")
+        Layout.margins: Kirigami.Units.gridUnit
+        model: kcm.messages
+    }
+
+    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 {
+
-                    id: dataRoamingCheckBox
+                Controls.Label {
-                    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")
-                    background: Item {}
+                    elide: Text.ElideRight
-                    contentItem: ColumnLayout {
+                }
+
+                Repeater {
+                    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,38 +9,37 @@ 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"
         text: i18n("Modem not available")
     }
-    
+
     ColumnLayout {
         spacing: 0
         width: root.width
         visible: !noModem.visible
-        
+
         PlasmaNM.Handler {
             id: nmHandler
         }
@@ -51,113 +51,100 @@ KCM.SimpleKCM {
         PlasmaNM.EnabledConnections {
             id: enabledConnections
         }
-        
+
         SimPage {
             id: simPage
             visible: false
         }
-        
+
         MessagesList {
             Layout.fillWidth: true
             Layout.margins: Kirigami.Units.gridUnit
             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: kcm.selectedModem.mobileDataSupported && !kcm.selectedModem.needsAPNAdded
-                    
+                checked: shouldBeChecked
-                    enabled: false
+
+                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 {
+
-                spacing: 0
+        FormCard.FormCard {
-                
+            visible: repeater.count > 0
-                MobileForm.FormCardHeader {
+
-                    title: kcm.sims.count == 1 ? i18n("SIM") : i18n("SIMs")
+            Repeater {
-                }
+                id: repeater
-                
+                model: kcm.sims
-                Repeater {
+
-                    id: repeater
+                delegate: ColumnLayout {
-                    model: kcm.sims
+                    Layout.fillWidth: true
-                    
+
-                    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 {
+                    }
-                            visible: model.index !== 0
+
-                            Layout.leftMargin: Kirigami.Units.gridUnit
+                    FormCard.FormButtonDelegate {
-                            Layout.rightMargin: Kirigami.Units.gridUnit
+                        id: simDelegate
-                            Layout.fillWidth: true
+                        text: i18n("SIM %1", modelData.displayId)
-                            opacity: (!(model.index && repeater.itemAt(model.index - 1).controlHovered) && !simDelegate.controlHovered) ? 0.5 : 0
+                        description: i18n("View SIM %1 details.", modelData.displayId)
-                        }
+                        icon.name: "auth-sim-symbolic"
-                        
+                        onClicked: {
-                        MobileForm.FormButtonDelegate {
+                            simPage.sim = modelData;
-                            id: simDelegate
+                            simPage.visible = true;
-                            text: i18n("SIM %1", modelData.displayId)
+                            kcm.push(simPage);
-                            description: i18n("View SIM %1 details.", modelData.displayId)
-                            icon.name: "auth-sim-symbolic"
-                            onClicked: {
-                                simPage.sim = modelData;
-                                simPage.visible = true;
-                                kcm.push(simPage);
-                            }
                         }
                     }
                 }