blob: f8473ffe2e2e2b01ef8d637e84ffd5525dba7e2b (
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
pragma ComponentBehavior: Bound
import ".."
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
/**
* DeviceList
*
* A reusable base component for displaying lists of devices/networks with a standardized
* structure. Provides a header with action buttons, title/subtitle, and a scrollable list
* with customizable delegates.
*
* This component eliminates duplication across WirelessList, EthernetList, and Bluetooth DeviceList
* by providing a common structure while allowing full customization of headers and delegates.
*
* Usage:
* ```qml
* DeviceList {
* session: root.session
* title: qsTr("Networks (%1)").arg(Nmcli.networks.length)
* description: qsTr("All available WiFi networks")
* model: ScriptModel {
* values: [...Nmcli.networks].sort(...)
* }
* activeItem: session.network.active
* onItemSelected: (item) => {
* session.network.active = item;
* }
* headerComponent: Component {
* RowLayout {
* // Custom header buttons
* }
* }
* delegate: Component {
* // Custom delegate for each item
* }
* }
* ```
*/
ColumnLayout {
id: root
property Session session: null
property var model: null
property Component delegate: null
property string title: ""
property string description: ""
property var activeItem: null
property Component headerComponent: null
property Component titleSuffix: null
signal itemSelected(var item)
spacing: Appearance.spacing.small
// Header with action buttons (optional)
Loader {
id: headerLoader
Layout.fillWidth: true
sourceComponent: root.headerComponent
visible: root.headerComponent !== null
}
// Title and description row
RowLayout {
Layout.fillWidth: true
Layout.topMargin: root.headerComponent ? 0 : 0
spacing: Appearance.spacing.small
visible: root.title !== "" || root.description !== ""
StyledText {
visible: root.title !== ""
text: root.title
font.pointSize: Appearance.font.size.large
font.weight: 500
}
Loader {
sourceComponent: root.titleSuffix
visible: root.titleSuffix !== null
}
Item {
Layout.fillWidth: true
}
}
// Expose view for access from parent components
property alias view: view
// Description text
StyledText {
visible: root.description !== ""
Layout.fillWidth: true
text: root.description
color: Colours.palette.m3outline
}
// List view
StyledListView {
id: view
Layout.fillWidth: true
Layout.fillHeight: true
model: root.model
delegate: root.delegate
spacing: Appearance.spacing.small / 2
clip: true
StyledScrollBar.vertical: StyledScrollBar {
flickable: view
}
}
}
|
