controlcenter: refactored wifi/ethernet panels

1 files changed, 41 insertions, 197 deletions

diff --git a/modules/controlcenter/ethernet/EthernetDetails.qml b/modules/controlcenter/ethernet/EthernetDetails.qml
index 1db3db0..a49eb4f 100644
--- a/modules/controlcenter/ethernet/EthernetDetails.qml
+++ b/modules/controlcenter/ethernet/EthernetDetails.qml
@@ -43,229 +43,73 @@ Item {
             anchors.right: parent.right
             spacing: Appearance.spacing.normal
 
-            MaterialIcon {
-                Layout.alignment: Qt.AlignHCenter
-                animate: true
-                text: "cable"
-                font.pointSize: Appearance.font.size.extraLarge * 3
-                font.bold: true
+            ConnectionHeader {
+                icon: "cable"
+                title: root.device?.interface ?? qsTr("Unknown")
             }
 
-            StyledText {
-                Layout.alignment: Qt.AlignHCenter
-                animate: true
-                text: root.device?.interface ?? qsTr("Unknown")
-                font.pointSize: Appearance.font.size.large
-                font.bold: true
+            SectionHeader {
+                title: qsTr("Connection status")
+                description: qsTr("Connection settings for this device")
             }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                text: qsTr("Connection status")
-                font.pointSize: Appearance.font.size.larger
-                font.weight: 500
-            }
-
-            StyledText {
-                text: qsTr("Connection settings for this device")
-                color: Colours.palette.m3outline
-            }
-
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
-
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                ColumnLayout {
-                    id: deviceStatus
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-
-                    spacing: Appearance.spacing.larger
-
-                    Toggle {
-                        label: qsTr("Connected")
-                        checked: root.device?.connected ?? false
-                        toggle.onToggled: {
-                            if (checked) {
-                                // Use connection name if available, otherwise use interface
-                                Network.connectEthernet(root.device?.connection || "", root.device?.interface || "");
-                            } else {
-                                if (root.device?.connection) {
-                                    Network.disconnectEthernet(root.device.connection);
-                                }
+            SectionContainer {
+                ToggleRow {
+                    label: qsTr("Connected")
+                    checked: root.device?.connected ?? false
+                    toggle.onToggled: {
+                        if (checked) {
+                            // Use connection name if available, otherwise use interface
+                            Network.connectEthernet(root.device?.connection || "", root.device?.interface || "");
+                        } else {
+                            if (root.device?.connection) {
+                                Network.disconnectEthernet(root.device.connection);
                             }
                         }
                     }
                 }
             }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                text: qsTr("Device properties")
-                font.pointSize: Appearance.font.size.larger
-                font.weight: 500
-            }
-
-            StyledText {
-                text: qsTr("Additional information")
-                color: Colours.palette.m3outline
+            SectionHeader {
+                title: qsTr("Device properties")
+                description: qsTr("Additional information")
             }
 
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
-
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                ColumnLayout {
-                    id: deviceProps
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
+            SectionContainer {
+                contentSpacing: Appearance.spacing.small / 2
 
-                    spacing: Appearance.spacing.small / 2
-
-                    StyledText {
-                        text: qsTr("Interface")
-                    }
-
-                    StyledText {
-                        text: root.device?.interface ?? qsTr("Unknown")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
-
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("Connection")
-                    }
-
-                    StyledText {
-                        text: root.device?.connection || qsTr("Not connected")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
-
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("State")
-                    }
+                PropertyRow {
+                    label: qsTr("Interface")
+                    value: root.device?.interface ?? qsTr("Unknown")
+                }
 
-                    StyledText {
-                        text: root.device?.state ?? qsTr("Unknown")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
+                PropertyRow {
+                    showTopMargin: true
+                    label: qsTr("Connection")
+                    value: root.device?.connection || qsTr("Not connected")
                 }
-            }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                text: qsTr("Connection information")
-                font.pointSize: Appearance.font.size.larger
-                font.weight: 500
+                PropertyRow {
+                    showTopMargin: true
+                    label: qsTr("State")
+                    value: root.device?.state ?? qsTr("Unknown")
+                }
             }
 
-            StyledText {
-                text: qsTr("Network connection details")
-                color: Colours.palette.m3outline
+            SectionHeader {
+                title: qsTr("Connection information")
+                description: qsTr("Network connection details")
             }
 
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: connectionInfo.implicitHeight + Appearance.padding.large * 2
-
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                ColumnLayout {
-                    id: connectionInfo
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-
-                    spacing: Appearance.spacing.small / 2
-
-                    StyledText {
-                        text: qsTr("IP Address")
-                    }
-
-                    StyledText {
-                        text: Network.ethernetDeviceDetails?.ipAddress || qsTr("Not available")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
-
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("Subnet Mask")
-                    }
-
-                    StyledText {
-                        text: Network.ethernetDeviceDetails?.subnet || qsTr("Not available")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
-
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("Gateway")
-                    }
-
-                    StyledText {
-                        text: Network.ethernetDeviceDetails?.gateway || qsTr("Not available")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                    }
-
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("DNS Servers")
-                    }
-
-                    StyledText {
-                        text: (Network.ethernetDeviceDetails && Network.ethernetDeviceDetails.dns && Network.ethernetDeviceDetails.dns.length > 0) ? Network.ethernetDeviceDetails.dns.join(", ") : qsTr("Not available")
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
-                        wrapMode: Text.Wrap
-                        Layout.maximumWidth: parent.width
-                    }
+            SectionContainer {
+                ConnectionInfoSection {
+                    deviceDetails: Network.ethernetDeviceDetails
                 }
             }
 
         }
     }
 
-    component Toggle: RowLayout {
-        required property string label
-        property alias checked: toggle.checked
-        property alias toggle: toggle
-
-        Layout.fillWidth: true
-        spacing: Appearance.spacing.normal
-
-        StyledText {
-            Layout.fillWidth: true
-            text: parent.label
-        }
-
-        StyledSwitch {
-            id: toggle
-
-            cLayer: 2
-        }
-    }
 }