kcms/cellularnetwork: Improve APN selection and available networks

kcms/cellularnetwork/ui/AvailableNetworks.qml

@@ -1,11 +1,14 @@
-// SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
+// SPDX-FileCopyrightText: 2021-2023 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.kirigami as Kirigami
 import org.kde.kcmutils
+import org.kde.kirigamiaddons.formcard 1 as FormCard
+
 import cellularnetworkkcm 1.0
 
 Kirigami.ScrollablePage {
@@ -52,39 +55,18 @@ Kirigami.ScrollablePage {
         
         model: modem.details.networks
         
-        delegate: Kirigami.SwipeListItem {
+        delegate: FormCard.FormRadioDelegate {
-            onClicked: {
-                if (!modelData.isCurrentlyUsed) {
-                    modelData.registerToNetwork();
-                    modem.details.scanNetworks();
-                }
-            }
-            
-            contentItem: RowLayout {
-                Layout.fillWidth: true
-                
-                ColumnLayout {
-                    spacing: Kirigami.Units.smallSpacing
-                    Kirigami.Heading {
-                        level: 3
-                        text: modelData.operatorLong + " | " + modelData.operatorShort + "(" + modelData.operatorCode + ")"
-                    }
-                    Controls.Label {
-                        text: modelData.accessTechnology
-                    }
-                }
-                Controls.RadioButton {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             checked: modelData.isCurrentlyUsed
+
             onClicked: {
                 if (!modelData.isCurrentlyUsed) {
                     modelData.registerToNetwork();
                     modem.details.scanNetworks();
                 }
-                        checked = modelData.isCurrentlyUsed;
-                    }
-                }
             }
+
+            text: modelData.operatorLong + " | " + modelData.operatorShort + "(" + modelData.operatorCode + ")"
+            description: modelData.accessTechnology
         }
     }
 }

kcms/cellularnetwork/ui/ProfileList.qml

@@ -1,51 +1,44 @@
 // SPDX-FileCopyrightText: 2021 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.kirigami as Kirigami
-import cellularnetworkkcm 1.0
+
+import cellularnetworkkcm
+
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
 Kirigami.ScrollablePage {
-    id: apnlist
+    id: root
-    title: i18n("APNs")
+    topPadding: Kirigami.Units.gridUnit
+    bottomPadding: Kirigami.Units.gridUnit
+    leftPadding: 0
+    rightPadding: 0
 
     property Modem modem
+    property bool editMode: false
     
-    ListView {
+    title: i18n("APNs")
-        id: profileListView
+    actions: [
-        model: modem.profiles
+        Kirigami.Action {
-     
+            text: i18n("Edit")
-        Kirigami.PlaceholderMessage {
+            icon.name: 'entry-edit'
-            anchors.centerIn: parent
+            checkable: true
-            anchors.left: parent.left
+            onCheckedChanged: root.editMode = checked
-            anchors.right: parent.right
-            anchors.margins: Kirigami.Units.largeSpacing
-            visible: profileListView.count === 0
-            text: i18n("No APNs configured")
-            icon.name: "globe"
-            
-            helpfulAction: Kirigami.Action {
-                icon.name: "list-add"
-                text: i18n("Add Connection")
-                onTriggered: {
-                    profileDialog.profile = null;
-                    profileDialog.open();
-                }
-            }
         }
+    ]
     
-        EditProfileDialog {
+    property var dialog: EditProfileDialog {
         id: profileDialog
-            modem: apnlist.modem
+        parent: root
+        modem: root.modem
         profile: null
-            pageWidth: apnlist.width
+        pageWidth: root.width
     }
 
-        header: ColumnLayout {
+    ColumnLayout {
-            anchors.left: parent.left
-            anchors.right: parent.right
         spacing: 0
 
         MessagesList {
@@ -65,7 +58,7 @@ Kirigami.ScrollablePage {
             visible: false
             type: Kirigami.MessageType.Warning
             showCloseButton: true
-                text: qsTr("Unable to autodetect connection settings for your carrier. Please find your carrier's APN settings by either contacting support or searching online.")
+            text: i18n("Unable to autodetect connection settings for your carrier. Please find your carrier's APN settings by either contacting support or searching online.")
             
             Connections {
                 target: modem
@@ -75,104 +68,64 @@ Kirigami.ScrollablePage {
             }
         }
         
-            Kirigami.SwipeListItem {
+        FormCard.FormHeader {
-                Layout.fillWidth: true
+            title: i18n("APN List")
-                visible: profileListView.count !== 0
-                onClicked: {
-                    profileDialog.profile = null;
-                    profileDialog.open();
         }
 
-                contentItem: Row {
+        FormCard.FormCard {
-                    spacing: Kirigami.Units.smallSpacing
+            Repeater {
-                    Kirigami.Icon {
+                id: profilesRepeater
-                        anchors.verticalCenter: parent.verticalCenter
+                model: modem.profiles
-                        source: "list-add"
-                        height: Kirigami.Units.gridUnit * 1.5
-                        width: height
-                    }
-                    Kirigami.Heading {
-                        level: 3
-                        anchors.verticalCenter: parent.verticalCenter
-                        Layout.alignment: Qt.AlignLeft
-                        text: i18n("Add APN")
-                    }
-                }
-            }
 
-            Kirigami.SwipeListItem {
+                delegate: FormCard.FormRadioDelegate {
-                Layout.fillWidth: true
+                    text: modelData.name
-                onClicked: {
+                    description: modelData.apn
-                    modem.addDetectedProfileSettings();
-                }
 
-                contentItem: Row {
-                    spacing: Kirigami.Units.smallSpacing
-                    Kirigami.Icon {
-                        anchors.verticalCenter: parent.verticalCenter
-                        source: "list-add"
-                        height: Kirigami.Units.gridUnit * 1.5
-                        width: height
-                    }
-                    Kirigami.Heading {
-                        level: 3
-                        anchors.verticalCenter: parent.verticalCenter
-                        Layout.alignment: Qt.AlignLeft
-                        text: i18n("Autodetect APN")
-                    }
-                }
-            }
-        }
-        
-        delegate: Kirigami.SwipeListItem {
-            onClicked: modem.activateProfile(modelData.connectionUni)
-            
-            actions: [
-                Kirigami.Action {
-                    icon.name: "entry-edit"
-                    text: i18n("Edit")
-                    onTriggered: {
-                        profileDialog.profile = modelData;
-                        profileDialog.open();
-                    }
-                },
-                Kirigami.Action {
-                    icon.name: "delete"
-                    text: i18n("Delete")
-                    onTriggered: modem.removeProfile(modelData.connectionUni)
-                }
-            ]
-            
-            contentItem: RowLayout {
-                Layout.fillWidth: true
-                
-                Controls.RadioButton {
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                     checked: modem.activeConnectionUni == modelData.connectionUni
                     onClicked: {
-                        if (!checked) {
                         modem.activateProfile(modelData.connectionUni);
-                        }
 
                         // reapply binding
                         checked = Qt.binding(() => { return modem.activeConnectionUni == modelData.connectionUni });
                     }
+
+                    trailing: RowLayout {
+                        Controls.ToolButton {
+                            visible: root.editMode
+                            icon.name: "entry-edit"
+                            text: i18n("Edit")
+                            display: Controls.ToolButton.IconOnly
+                            onClicked: {
+                                profileDialog.profile = modelData;
+                                profileDialog.open();
+                            }
                         }
 
-                ColumnLayout {
+                        Controls.ToolButton {
-                    Layout.alignment: Qt.AlignLeft
+                            visible: root.editMode
-                    Layout.fillWidth: true
+                            icon.name: "delete"
-                    spacing: Kirigami.Units.smallSpacing
+                            text: i18n("Delete")
+                            display: Controls.ToolButton.IconOnly
+                            onClicked: modem.removeProfile(modelData.connectionUni)
+                        }
+                    }
+                }
+            }
 
-                    Kirigami.Heading {
+            FormCard.FormButtonDelegate {
-                        Layout.fillWidth: true
+                text: i18n("Add APN")
-                        level: 3
+                icon.name: 'list-add'
-                        text: modelData.name
+                onClicked: {
+                    profileDialog.profile = null;
+                    profileDialog.open();
                 }
-                    Controls.Label {
-                        Layout.fillWidth: true
-                        text: modelData.apn
             }
+            
+            FormCard.FormButtonDelegate {
+                text: i18n("Automatically detect APN")
+                icon.name: 'list-add'
+                onClicked: {
+                    modem.addDetectedProfileSettings();
                 }
             }
         }