initialstart/wifi: Update to card based design

initialstart/modules/wifi/package/contents/ui/ConnectionItemDelegate.qml

@@ -1,20 +1,21 @@
 // SPDX-FileCopyrightText: 2017 Martin Kacej <m.kacej@atlas.sk>
 // SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
-// SPDX-License-Identifier: GPL-2.0-or-later
+// SPDX-License-Identifier: LGPL-2.0-or-later
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15 as Controls
+import QtQuick.Window
+import QtQuick.Controls as Controls
 
 import org.kde.plasma.networkmanagement as PlasmaNM
-import org.kde.kirigami 2.2 as Kirigami
+import org.kde.kirigami as Kirigami
-import org.kde.kirigamiaddons.formcard 1.0 as FormCard
+import org.kde.ksvg as KSvg
-import org.kde.ksvg 1.0 as KSvg
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 
 FormCard.AbstractFormDelegate {
-    topPadding: Kirigami.Units.smallSpacing
+    id: root
-    bottomPadding: Kirigami.Units.smallSpacing
 
+    property bool editMode
     property var map : []
     property bool predictableWirelessPassword: !Uuid && Type == PlasmaNM.Enums.Wireless &&
                                                     (SecurityType == PlasmaNM.Enums.StaticWep ||
@@ -22,6 +23,89 @@ FormCard.AbstractFormDelegate {
                                                      SecurityType == PlasmaNM.Enums.Wpa2Psk ||
                                                      SecurityType == PlasmaNM.Enums.SAE)
 
+    verticalPadding: Kirigami.Units.largeSpacing
+
+    contentItem: RowLayout {
+        spacing: 0
+
+        Item {
+            Layout.rightMargin: Kirigami.Units.gridUnit
+            implicitWidth: Kirigami.Units.iconSizes.smallMedium
+            implicitHeight: Kirigami.Units.iconSizes.smallMedium
+            
+            Kirigami.Icon {
+                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
+            }
+        }
+
+        Controls.Label {
+            id: internalTextItem
+            Layout.fillWidth: true
+            text: ItemUniqueName
+            elide: Text.ElideRight
+            font.bold: ConnectionState === PlasmaNM.Enums.Activated
+            Accessible.ignored: true // base class sets this text on root already
+        }
+        
+        RowLayout {
+            Kirigami.Icon {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
+                Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
+                visible: ConnectionState === PlasmaNM.Enums.Activated
+                source: 'checkmark'
+            }
+
+            // 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"
+                text: i18n('Connect')
+                visible: ConnectionState != PlasmaNM.Enums.Activated && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: changeState()
+            }
+            Controls.ToolButton {
+                icon.name: "network-disconnect"
+                text: i18n('Disconnect')
+                visible: ConnectionState == PlasmaNM.Enums.Activated && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: handler.deactivateConnection(ConnectionPath, DevicePath)
+            }
+            Controls.ToolButton {
+                icon.name: "configure"
+                text: i18n('Configure')
+                visible: (Uuid != "") && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: {
+                    kcm.push("NetworkSettings.qml", {path: ConnectionPath})
+                }
+            }
+            Controls.ToolButton {
+                icon.name: "entry-delete"
+                text: i18n('Delete')
+                visible: (Uuid != "") && root.editMode
+                display: Controls.ToolButton.IconOnly
+                onClicked: handler.removeConnection(ConnectionPath)
+            }
+        }
+    }
+
     onClicked: {
         changeState()
     }
@@ -45,40 +129,4 @@ FormCard.AbstractFormDelegate {
             connectionDialog.openAndClear();
         }
     }
-
-    contentItem: RowLayout {
-        spacing: Kirigami.Units.largeSpacing
-
-        Kirigami.Icon {
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: Kirigami.Units.iconSizes.medium
-            Layout.preferredHeight: Kirigami.Units.iconSizes.medium
-
-            source: mobileProxyModel.showSavedMode ? "network-wireless-connected-100" : ConnectionIcon
-
-            Controls.BusyIndicator {
-                anchors.fill: parent
-                running: ConnectionState == PlasmaNM.Enums.Activating
-            }
-        }
-
-        Controls.Label {
-            Layout.fillWidth: true
-            elide: Text.ElideRight
-            text: ItemUniqueName
-            textFormat: Text.PlainText
-        }
-
-        Controls.ToolButton {
-            icon.name: "network-connect"
-            visible: ConnectionState != PlasmaNM.Enums.Activated
-            onClicked: changeState()
-        }
-
-        Controls.ToolButton {
-            icon.name: "network-disconnect"
-            visible: ConnectionState == PlasmaNM.Enums.Activated
-            onClicked: handler.deactivateConnection(ConnectionPath, DevicePath)
-        }
-    }
 }

initialstart/modules/wifi/package/contents/ui/main.qml

@@ -51,9 +51,12 @@ Item {
     }
 
     ColumnLayout {
-        anchors.fill: parent
+        anchors {
-        anchors.topMargin: Kirigami.Units.gridUnit
+            fill: parent
-        anchors.bottomMargin: Kirigami.Units.largeSpacing
+            topMargin: Kirigami.Units.gridUnit
+            bottomMargin: Kirigami.Units.largeSpacing
+        }
+
         width: root.width
         spacing: Kirigami.Units.gridUnit
 
@@ -69,41 +72,56 @@ Item {
         }
 
         FormCard.FormCard {
+            id: savedCard
             maximumWidth: root.cardWidth
+            visible: enabledConnections.wirelessEnabled && count > 0
 
+            // number of visible entries
+            property int count: 0
+            function updateCount() {
+                count = 0;
+                for (let i = 0; i < connectedRepeater.count; i++) {
+                    let item = connectedRepeater.itemAt(i);
+                    if (item && item.shouldDisplay) {
+                        count++;
+                    }
+                }
+            }
+
+            Repeater {
+                id: connectedRepeater
+                model: mobileProxyModel
+                delegate: ConnectionItemDelegate {
+                    editMode: false
+                    
+                    // connected or saved
+                    property bool shouldDisplay: (Uuid != "") || ConnectionState === PlasmaNM.Enums.Activated
+                    onShouldDisplayChanged: savedCard.updateCount()
+                    
+                    // separate property for visible since visible is false when the whole card is not visible
+                    visible: (Uuid != "") || ConnectionState === PlasmaNM.Enums.Activated
+                }
+            }
+        }
+
+        FormCard.FormCard {
             Layout.fillHeight: true
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            maximumWidth: root.cardWidth
-            Layout.fillWidth: true
+            visible: enabledConnections.wirelessEnabled
 
             ListView {
                 id: listView
-                currentIndex: -1
+
                 clip: true
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-
-                section.property: "Section"
-                section.delegate: Kirigami.ListSectionHeader {
-                    text: section
-                }
-
                 model: mobileProxyModel
 
-                Kirigami.PlaceholderMessage {
-                    anchors.centerIn: parent
-                    width: parent.width - (Kirigami.Units.gridUnit * 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 {
-                    width: listView.width
+                    width: ListView.view.width
+                    editMode: false
+                    height: visible ? implicitHeight : 0
+                    visible: !((Uuid != "") || ConnectionState === PlasmaNM.Enums.Activated)
                 }
             }
         }