blob: 83ff95e70eb3c7e7a5b5eb9119f46833db5e06cd (
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
import ".."
import qs.components
import qs.components.controls
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
StyledRect {
id: root
property var options: [] // Array of {label: string, propertyName: string, onToggled: function}
property var rootItem: null // The root item that contains the properties we want to bind to
property string title: "" // Optional title text
Layout.fillWidth: true
implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
clip: true
Behavior on implicitHeight {
Anim {}
}
ColumnLayout {
id: layout
anchors.fill: parent
anchors.margins: Appearance.padding.large
spacing: Appearance.spacing.normal
StyledText {
visible: root.title !== ""
text: root.title
font.pointSize: Appearance.font.size.normal
}
RowLayout {
id: buttonRow
Layout.alignment: Qt.AlignHCenter
spacing: Appearance.spacing.small
Repeater {
id: repeater
model: root.options
delegate: TextButton {
id: button
required property int index
required property var modelData
Layout.fillWidth: true
text: modelData.label
property bool isChecked: false
// Initialize from root property
Component.onCompleted: {
if (root.rootItem && modelData.propertyName) {
isChecked = root.rootItem[modelData.propertyName];
}
}
checked: isChecked
toggle: false
type: TextButton.Tonal
// Listen for property changes on rootItem
Connections {
target: root.rootItem
enabled: root.rootItem !== null && modelData.propertyName !== undefined
function onShowAudioChanged() {
if (modelData.propertyName === "showAudio") {
button.isChecked = root.rootItem.showAudio;
}
}
function onShowMicrophoneChanged() {
if (modelData.propertyName === "showMicrophone") {
button.isChecked = root.rootItem.showMicrophone;
}
}
function onShowKbLayoutChanged() {
if (modelData.propertyName === "showKbLayout") {
button.isChecked = root.rootItem.showKbLayout;
}
}
function onShowNetworkChanged() {
if (modelData.propertyName === "showNetwork") {
button.isChecked = root.rootItem.showNetwork;
}
}
function onShowBluetoothChanged() {
if (modelData.propertyName === "showBluetooth") {
button.isChecked = root.rootItem.showBluetooth;
}
}
function onShowBatteryChanged() {
if (modelData.propertyName === "showBattery") {
button.isChecked = root.rootItem.showBattery;
}
}
function onShowLockStatusChanged() {
if (modelData.propertyName === "showLockStatus") {
button.isChecked = root.rootItem.showLockStatus;
}
}
}
// Match utilities Toggles radius styling
// Each button has full rounding (not connected) since they have spacing
radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
// Match utilities Toggles inactive color
inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
// Adjust width similar to utilities toggles
Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
onClicked: {
if (modelData.onToggled) {
modelData.onToggled(!checked);
}
}
Behavior on Layout.preferredWidth {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
Behavior on radius {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
}
}
}
}
}
|
