blob: eef0aae2136ad5f31b67d79c7dc04e36757aabf9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
pragma ComponentBehavior: Bound
import ".."
import qs.components
import qs.components.controls
import qs.components.effects
import qs.components.containers
import qs.config
import QtQuick
import QtQuick.Layouts
/**
* DeviceDetails
*
* A reusable base component for displaying device/network details with a standardized
* structure. Provides a header, connection status section, and flexible sections for
* device-specific information.
*
* This component eliminates duplication across WirelessDetails, EthernetDetails, and Bluetooth Details
* by providing a common structure while allowing full customization of sections.
*
* Usage:
* ```qml
* DeviceDetails {
* session: root.session
* device: session.network.active
* headerComponent: Component {
* ConnectionHeader {
* icon: "wifi"
* title: device?.ssid ?? ""
* }
* }
* sections: [
* Component {
* // Connection status section
* },
* Component {
* // Properties section
* }
* ]
* }
* ```
*/
Item {
id: root
required property Session session
property var device: null
property Component headerComponent: null
property list<Component> sections: []
// Optional: Custom content to insert after header but before sections
property Component topContent: null
// Optional: Custom content to insert after all sections
property Component bottomContent: null
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
ColumnLayout {
id: layout
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
spacing: Appearance.spacing.normal
// Header component (e.g., ConnectionHeader or SettingsHeader)
Loader {
id: headerLoader
Layout.fillWidth: true
sourceComponent: root.headerComponent
visible: root.headerComponent !== null
}
// Top content (optional)
Loader {
id: topContentLoader
Layout.fillWidth: true
sourceComponent: root.topContent
visible: root.topContent !== null
}
// Sections
Repeater {
model: root.sections
Loader {
required property Component modelData
Layout.fillWidth: true
sourceComponent: modelData
}
}
// Bottom content (optional)
Loader {
id: bottomContentLoader
Layout.fillWidth: true
sourceComponent: root.bottomContent
visible: root.bottomContent !== null
}
}
}
|
