controlcenter: refactored wifi/ethernet panels

6 files changed, 207 insertions, 0 deletions

diff --git a/components/ConnectionHeader.qml b/components/ConnectionHeader.qml
new file mode 100644
index 0000000..3f77fd9
--- /dev/null
+++ b/components/ConnectionHeader.qml
@@ -0,0 +1,32 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string icon
+    required property string title
+
+    spacing: Appearance.spacing.normal
+    Layout.alignment: Qt.AlignHCenter
+
+    MaterialIcon {
+        Layout.alignment: Qt.AlignHCenter
+        animate: true
+        text: root.icon
+        font.pointSize: Appearance.font.size.extraLarge * 3
+        font.bold: true
+    }
+
+    StyledText {
+        Layout.alignment: Qt.AlignHCenter
+        animate: true
+        text: root.title
+        font.pointSize: Appearance.font.size.large
+        font.bold: true
+    }
+}
+
diff --git a/components/ConnectionInfoSection.qml b/components/ConnectionInfoSection.qml
new file mode 100644
index 0000000..88c6b3a
--- /dev/null
+++ b/components/ConnectionInfoSection.qml
@@ -0,0 +1,60 @@
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property var deviceDetails
+
+    spacing: Appearance.spacing.small / 2
+
+    StyledText {
+        text: qsTr("IP Address")
+    }
+
+    StyledText {
+        text: root.deviceDetails?.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: root.deviceDetails?.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: root.deviceDetails?.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: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+        wrapMode: Text.Wrap
+        Layout.maximumWidth: parent.width
+    }
+}
+
diff --git a/components/PropertyRow.qml b/components/PropertyRow.qml
new file mode 100644
index 0000000..697830a
--- /dev/null
+++ b/components/PropertyRow.qml
@@ -0,0 +1,27 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string label
+    required property string value
+    property bool showTopMargin: false
+
+    spacing: Appearance.spacing.small / 2
+
+    StyledText {
+        Layout.topMargin: root.showTopMargin ? Appearance.spacing.normal : 0
+        text: root.label
+    }
+
+    StyledText {
+        text: root.value
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+    }
+}
+
diff --git a/components/SectionContainer.qml b/components/SectionContainer.qml
new file mode 100644
index 0000000..d41254b
--- /dev/null
+++ b/components/SectionContainer.qml
@@ -0,0 +1,31 @@
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    default property alias content: contentColumn.data
+    property real contentSpacing: Appearance.spacing.larger
+
+    Layout.fillWidth: true
+    implicitHeight: contentColumn.implicitHeight + Appearance.padding.large * 2
+
+    radius: Appearance.rounding.normal
+    color: Colours.tPalette.m3surfaceContainer
+
+    ColumnLayout {
+        id: contentColumn
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: Appearance.padding.large
+
+        spacing: root.contentSpacing
+    }
+}
+
diff --git a/components/SectionHeader.qml b/components/SectionHeader.qml
new file mode 100644
index 0000000..897e63a
--- /dev/null
+++ b/components/SectionHeader.qml
@@ -0,0 +1,28 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    property string description: ""
+
+    spacing: 0
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.large
+        text: root.title
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    StyledText {
+        visible: root.description !== ""
+        text: root.description
+        color: Colours.palette.m3outline
+    }
+}
+
diff --git a/components/controls/ToggleRow.qml b/components/controls/ToggleRow.qml
new file mode 100644
index 0000000..23dc2a2
--- /dev/null
+++ b/components/controls/ToggleRow.qml
@@ -0,0 +1,29 @@
+import qs.components
+import qs.components.controls
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    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: root.label
+    }
+
+    StyledSwitch {
+        id: toggle
+
+        cLayer: 2
+    }
+}
+