kcms/wifi: Port to MobileForm

Fixes https://invent.kde.org/plasma/plasma-mobile/-/issues/279

kcms/wifi/ui/ConnectionItemDelegate.qml

@@ -1,20 +1,21 @@
-/*
-    SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
 
-    SPDX-License-Identifier: LGPL-2.0-or-later
-*/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls as Controls
 
-import QtQuick 2.6
-import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.2 as Controls
 import org.kde.plasma.networkmanagement as PlasmaNM
-import org.kde.kirigami 2.2 as Kirigami
-import org.kde.ksvg 1.0 as KSvg
+import org.kde.kirigami as Kirigami
+import org.kde.ksvg as KSvg
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
-Kirigami.SwipeListItem {
-
-    enabled: true
+FormCard.AbstractFormDelegate {
+    id: delegate
 
+    property bool editMode
     property var map : []
     property bool predictableWirelessPassword: !Uuid && Type == PlasmaNM.Enums.Wireless &&
                                                     (SecurityType == PlasmaNM.Enums.StaticWep ||
@@ -22,54 +23,80 @@ Kirigami.SwipeListItem {
                                                      SecurityType == PlasmaNM.Enums.Wpa2Psk ||
                                                      SecurityType == PlasmaNM.Enums.SAE)
 
+    verticalPadding: Kirigami.Units.largeSpacing
+
     contentItem: RowLayout {
-        spacing: Kirigami.Units.largeSpacing
+        spacing: 0
+
+        Item {
+            Layout.rightMargin: Kirigami.Units.gridUnit
+            implicitWidth: Kirigami.Units.iconSizes.smallMedium
+            implicitHeight: Kirigami.Units.iconSizes.smallMedium
             
             Kirigami.Icon {
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: Kirigami.Units.iconSizes.medium
-            Layout.preferredHeight: Kirigami.Units.iconSizes.medium
-
+                implicitWidth: Kirigami.Units.iconSizes.smallMedium
+                implicitHeight: Kirigami.Units.iconSizes.smallMedium
+                visible: ConnectionState !== PlasmaNM.Enums.Activating
+                anchors.centerIn: parent
                 source: mobileProxyModel.showSavedMode ? "network-wireless-connected-100" : ConnectionIcon
+            }
 
             Controls.BusyIndicator {
                 anchors.fill: parent
-                running: ConnectionState == PlasmaNM.Enums.Activating
+                running: ConnectionState === PlasmaNM.Enums.Activating
             }
         }
 
         Controls.Label {
+            id: internalTextItem
             Layout.fillWidth: true
-            elide: Text.ElideRight
             text: ItemUniqueName
-            textFormat: Text.PlainText
-        }
+            elide: Text.ElideRight
+            font.bold: ConnectionState === PlasmaNM.Enums.Activated
+            Accessible.ignored: true // base class sets this text on root already
         }
         
-    actions: [
-        Kirigami.Action {
+        RowLayout {
+            // ensure that the row is always of same height
+            Controls.ToolButton {
+                id: heightMetrics
+                opacity: 0
+                implicitWidth: 0
+                icon.name: 'network-connect'
+                enabled: false
+            }
+            Controls.ToolButton {
                 icon.name: "network-connect"
-            visible: ConnectionState != PlasmaNM.Enums.Activated
-            onTriggered: changeState()
-        },
-        Kirigami.Action {
+                text: i18n('Connect')
+                visible: ConnectionState != PlasmaNM.Enums.Activated && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: changeState()
+            }
+            Controls.ToolButton {
                 icon.name: "network-disconnect"
-            visible: ConnectionState == PlasmaNM.Enums.Activated
-            onTriggered: handler.deactivateConnection(ConnectionPath, DevicePath)
-        },
-        Kirigami.Action {
+                text: i18n('Disconnect')
+                visible: ConnectionState == PlasmaNM.Enums.Activated && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: handler.deactivateConnection(ConnectionPath, DevicePath)
+            }
+            Controls.ToolButton {
                 icon.name: "configure"
-            visible: (Uuid != "")? true : false
-            onTriggered: {
+                text: i18n('Configure')
+                visible: (Uuid != "") && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: {
                     kcm.push("NetworkSettings.qml", {path: ConnectionPath})
                 }
-        },
-        Kirigami.Action {
-            icon.name: "entry-delete"
-            visible: (Uuid != "")? true : false
-            onTriggered: handler.removeConnection(ConnectionPath)
             }
-    ]
+            Controls.ToolButton {
+                icon.name: "entry-delete"
+                text: i18n('Delete')
+                visible: (Uuid != "") && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: handler.removeConnection(ConnectionPath)
+            }
+        }
+    }
 
     onClicked: {
         changeState()

kcms/wifi/ui/NetworkSettings.qml

@@ -1,17 +1,18 @@
-/*
-    SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
 
-    SPDX-License-Identifier: LGPL-2.0-or-later
-*/
-import QtQuick 2.15
-import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.2 as Controls
-import org.kde.kirigami 2.3 as Kirigami
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls as Controls
+
+import org.kde.kirigami as Kirigami
 import org.kde.plasma.networkmanagement as PlasmaNM
 import org.kde.kcmutils
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
-SimpleKCM {
-    title: path ?  wirelessSettings["ssid"] : i18n("Add new Connection")
+Kirigami.ScrollablePage {
+    title: path ?  wirelessSettings["ssid"] : i18n("Add New Connection")
 
     property var path
 
@@ -41,35 +42,49 @@ SimpleKCM {
         }
     ]
 
-    Kirigami.FormLayout {
-        Item {
-            Kirigami.FormData.label: i18n("General")
-            Kirigami.FormData.isSection: true
+    topPadding: Kirigami.Units.gridUnit
+    bottomPadding: Kirigami.Units.gridUnit
+    leftPadding: 0
+    rightPadding: 0
+
+    ColumnLayout {
+        FormCard.FormHeader {
+            title: i18n('General')
         }
-        Controls.TextField {
+
+        FormCard.FormCard {
+            FormCard.FormTextFieldDelegate {
                 id: ssidField
-            Kirigami.FormData.label: i18n("SSID:")
+                label: i18n('SSID')
                 text: wirelessSettings["ssid"] ? wirelessSettings["ssid"] : ""
                 enabled: true
                 onTextChanged: {
                     ipSettings["id"] = text
                 }
             }
-        Controls.CheckBox {
+
+            FormCard.FormDelegateSeparator {
+                above: ssidField
+                below: hidden
+            }
+
+            FormCard.FormSwitchDelegate {
                 id: hidden
-            Kirigami.FormData.label: i18n("Hidden Network:")
+                text: i18n("Hidden Network")
                 checked: wirelessSettings["hidden"] ? wirelessSettings["hidden"] : false
                 onToggled: ipSettings["hidden"] = checked
             }
-
-        Kirigami.Separator {
-            Kirigami.FormData.label: i18n("Security")
-            Kirigami.FormData.isSection: true
         }
 
-        Controls.ComboBox {
+        FormCard.FormHeader {
+            title: i18n('Security')
+        }
+
+        FormCard.FormCard {
+            FormCard.FormComboBoxDelegate {
                 id: securityCombobox
-            Kirigami.FormData.label: i18n("Security type:")
+                currentIndex: 0
+                text: i18n('Security type')
                 model: ListModel {
                     id: securityTypesModel
                     // FIXME just placeholder element to set "text" property as default
@@ -102,39 +117,56 @@ SimpleKCM {
                         }
                     }
                 }
-
             }
 
-        PasswordField {
-            id: passwordField
-            Kirigami.FormData.label: i18n("Password:")
+            FormCard.FormDelegateSeparator {
+                above: securityCombobox
+                below: passwordDelegate
+                visible: passwordDelegate.visible
+            }
+
+            FormCard.FormTextFieldDelegate {
+                id: passwordDelegate
+                label: i18n('Password')
+                echoMode: TextInput.Password
+                inputMethodHints: Qt.ImhHiddenText
                 text: secrets["psk"]
                 visible: securityTypesModel.get(securityCombobox.currentIndex).type !== PlasmaNM.Enums.NoneSecurity
                 onTextChanged: securitySettings["password"] = text
             }
 
-        Controls.ComboBox {
+            FormCard.FormDelegateSeparator {
+                above: passwordDelegate
+                below: authComboBox
+                visible: authComboBox.visible
+            }
+
+            FormCard.FormComboBoxDelegate {
                 id: authComboBox
-            Kirigami.FormData.label: i18n("Authentication:")
+                text: i18n("Authentication:")
+                currentIndex: 0
                 visible: securityCombobox.currentIndex === 2
                         || securityCombobox.currentIndex === 4
                 model: [i18n("TLS"), i18n("LEAP"), i18n("FAST"), i18n(
                         "Tunneled TLS"), i18n(
                         "Protected EAP")] // more - SIM, AKA, PWD ?
             }
+
             Controls.Label {
                 visible: securityCombobox.currentIndex !== 3 && securityCombobox.currentIndex !== 0
                 text: "----Not yet implemented----"
                 color: "red"
             }
-
-        Kirigami.Separator {
-            Kirigami.FormData.label: i18n("IP settings")
-            Kirigami.FormData.isSection: true
         }
 
-        Controls.ComboBox {
+        FormCard.FormHeader {
+            title: i18n('IP Settings')
+        }
+
+        FormCard.FormCard {
+            FormCard.FormComboBoxDelegate {
                 id: ipMethodCombobox
+                text: i18n('Method')
                 model: [i18n("Automatic"), i18n("Manual")]
                 currentIndex: ipSettings["method"] === "manual" ? 1 : 0
                 property var manualIp: currentIndex === 1
@@ -143,9 +175,15 @@ SimpleKCM {
                 }
             }
 
-        Controls.TextField {
+            FormCard.FormDelegateSeparator {
+                above: ipMethodCombobox
+                below: manualIPaddress
+                visible: manualIPaddress.visible
+            }
+
+            FormCard.FormTextFieldDelegate {
                 id: manualIPaddress
-            Kirigami.FormData.label: i18n("IP Address:")
+                label: i18n("IP Address")
                 visible: ipMethodCombobox.manualIp
                 placeholderText: "192.168.1.128"
                 text: ipSettings["address"] ? ipSettings["address"] : ""
@@ -155,9 +193,15 @@ SimpleKCM {
                 }
             }
 
-        Controls.TextField {
+            FormCard.FormDelegateSeparator {
+                above: manualIPaddress
+                below: manualIPgateway
+                visible: manualIPgateway.visible
+            }
+
+            FormCard.FormTextFieldDelegate {
                 id: manualIPgateway
-            Kirigami.FormData.label: i18n("Gateway:")
+                label: i18n("Gateway")
                 visible: ipMethodCombobox.manualIp
                 placeholderText: "192.168.1.1"
                 text: ipSettings["gateway"] ? ipSettings["gateway"] : ""
@@ -167,9 +211,15 @@ SimpleKCM {
                 }
             }
 
-        Controls.TextField {
+            FormCard.FormDelegateSeparator {
+                above: manualIPgateway
+                below: manualIPprefix
+                visible: manualIPprefix.visible
+            }
+
+            FormCard.FormTextFieldDelegate {
                 id: manualIPprefix
-            Kirigami.FormData.label: i18n("Network prefix length:")
+                label: i18n("Network prefix length")
                 visible: ipMethodCombobox.manualIp
                 placeholderText: "16"
                 text: ipSettings["prefix"] ? ipSettings["prefix"] : ""
@@ -180,9 +230,15 @@ SimpleKCM {
                 }
             }
 
-        Controls.TextField {
+            FormCard.FormDelegateSeparator {
+                above: manualIPprefix
+                below: manualIPdns
+                visible: manualIPdns.visible
+            }
+
+            FormCard.FormTextFieldDelegate {
                 id: manualIPdns
-            Kirigami.FormData.label: i18n("DNS:")
+                label: i18n("DNS")
                 visible: ipMethodCombobox.manualIp
                 placeholderText: "8.8.8.8"
                 text: ipSettings["dns"] ? ipSettings["dns"] : ""
@@ -192,6 +248,7 @@ SimpleKCM {
                 }
             }
         }
+    }
 
     Component.onCompleted: {
         wirelessSettings = kcm.getConnectionSettings(path, "802-11-wireless")

kcms/wifi/ui/main.qml

@@ -1,18 +1,34 @@
-/*
-    SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
+// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
 
-    SPDX-License-Identifier: LGPL-2.0-or-later
-*/
+import QtQuick
+import QtQuick.Layouts 
+import QtQuick.Controls as Controls
 
-import QtQuick 2.6
-import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.2 as Controls
 import org.kde.plasma.networkmanagement as PlasmaNM
-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
 
-ScrollViewKCM {
-    id: main
+SimpleKCM {
+    id: root
+
+    property bool editMode: false
+
+    topPadding: Kirigami.Units.gridUnit
+    bottomPadding: Kirigami.Units.gridUnit
+    leftPadding: 0
+    rightPadding: 0
+
+    actions: [
+        Kirigami.Action {
+            text: i18n("Edit")
+            icon.name: 'entry-edit'
+            checkable: true
+            onCheckedChanged: root.editMode = checked
+        }
+    ]
 
     PlasmaNM.Handler {
         id: handler
@@ -43,9 +59,16 @@ ScrollViewKCM {
         onTriggered: handler.requestScan()
     }
 
-    header: Kirigami.InlineMessage {
+    ConnectDialog {
+        id: connectionDialog
+    }
+
+    ColumnLayout {
+
+        Kirigami.InlineMessage {
             id: inlineError
             showCloseButton: true
+            Layout.fillWidth: true
 
             type: Kirigami.MessageType.Warning
             Connections {
@@ -57,61 +80,60 @@ ScrollViewKCM {
             }
         }
 
-    ConnectDialog {
-        id: connectionDialog
+        FormCard.FormCard {
+            FormCard.FormSwitchDelegate {
+                id: wifiSwitch
+                text: i18n("Wi-Fi")
+                checked: enabledConnections.wirelessEnabled
+                onClicked: {
+                    handler.enableWireless(checked);
+                    checked = Qt.binding(() => enabledConnections.wirelessEnabled);
+                }
+            }
         }
 
-    view: ListView {
-        id: view
-
-        clip: true
-        currentIndex: -1
-
-        section.property: "Section"
-        section.delegate: Kirigami.ListSectionHeader {
-            text: section
+        FormCard.FormHeader {
+            visible: savedCard.visible
+            title: i18n('Saved Networks')
         }
 
+        FormCard.FormCard {
+            id: savedCard
+            visible: enabledConnections.wirelessEnabled && connectedRepeater.count > 0
+
+            Repeater {
+                id: connectedRepeater
                 model: mobileProxyModel
-        delegate: ConnectionItemDelegate {}
-
-        Kirigami.PlaceholderMessage {
-            anchors.centerIn: parent
-            width: parent.width - (Kirigami.Units.largeSpacing * 4)
-            visible: !enabledConnections.wirelessEnabled
-            text: i18n("Wi-Fi is disabled")
-            icon.name: "network-wireless-disconnected"
-            helpfulAction: Kirigami.Action {
-                icon.name: "network-wireless-connected"
-                text: i18n("Enable")
-                onTriggered: handler.enableWireless(true)
+                delegate: ConnectionItemDelegate {
+                    editMode: root.editMode
+                    // connected or saved
+                    visible: (Uuid != "") || ConnectionState === PlasmaNM.Enums.Activated
                 }
             }
         }
 
-    footer: Kirigami.ActionToolBar {
-        flat: false
-        actions: [
-            Kirigami.Action {
-                text: i18n("Disable Wi-Fi")
-                icon.name: "network-disconnect"
-                visible: enabledConnections.wirelessEnabled
-                onTriggered: handler.enableWireless(false)
-            },
-            Kirigami.Action {
-                text: i18n("Add Custom Connection")
-                icon.name: "list-add"
-                visible: enabledConnections.wirelessEnabled
-                onTriggered: kcm.push("NetworkSettings.qml")
-            },
-            Kirigami.Action {
-                text: i18n("Show Saved Connections")
-                icon.name: "document-save"
-                onTriggered: mobileProxyModel.showSavedMode = !mobileProxyModel.showSavedMode
-                checkable: true
-                checked: false
+        FormCard.FormHeader {
             visible: enabledConnections.wirelessEnabled
+            title: i18n("Available Networks")
+        }
+
+        FormCard.FormCard {
+            visible: enabledConnections.wirelessEnabled
+
+            Repeater {
+                model: mobileProxyModel
+                delegate: ConnectionItemDelegate {
+                    editMode: root.editMode
+                    visible: !((Uuid != "") || ConnectionState === PlasmaNM.Enums.Activated)
+                }
+            }
+
+            FormCard.FormButtonDelegate {
+                icon.name: 'list-add'
+                text: i18n('Add Custom Connection')
+                visible: enabledConnections.wirelessEnabled
+                onClicked: kcm.push("NetworkSettings.qml")
+            }
         }
-        ]
     }
 }