1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../../theme.slint";
5import { Images } from "../../images.slint";
6import { Page } from "../page.slint";
7import { IconButton, CheckBox, RadioButton, Switch, ScrollView, Item, ItemGroupBox } from "../../widgets/widgets.slint";
8
9export global SettingsAdapter {
10 // functions
11 in-out property <bool> function-one-checked: true;
12 in-out property <bool> kiosk-mode-checked;
13 in-out property <bool> function-three-checked;
14
15 // radio options
16 in-out property <bool> radio-option-one-checked: true;
17 in-out property <bool> radio-option-two-checked: false;
18
19 // check options
20 in-out property <bool> check-option-one-checked: true;
21 in-out property <bool> check-option-two-checked;
22 in-out property <bool> check-option-three-checked;
23
24 callback check-radio-option(int /* index */);
25
26 check-radio-option(index) => {
27 if(index == 0) {
28 radio-option-one-checked = true;
29 radio-option-two-checked = false;
30 return;
31 }
32
33 radio-option-one-checked = false;
34 radio-option-two-checked = true;
35 }
36}
37
38export component Settings inherits Page {
39 // functions
40 in-out property <bool> function-one-checked <=> SettingsAdapter.function-one-checked;
41 in-out property <bool> kiosk-mode-checked <=> SettingsAdapter.kiosk-mode-checked;
42 in-out property <bool> function-three-checked <=> SettingsAdapter.function-three-checked;
43
44 // radio options
45 in-out property <bool> radio-option-one-checked <=> SettingsAdapter.radio-option-one-checked;
46 in-out property <bool> radio-option-two-checked <=> SettingsAdapter.radio-option-two-checked;
47
48 // check options
49 in-out property <bool> check-option-one-checked <=> SettingsAdapter.check-option-one-checked;
50 in-out property <bool> check-option-two-checked <=> SettingsAdapter.check-option-two-checked;
51 in-out property <bool> check-option-three-checked <=> SettingsAdapter.check-option-three-checked;
52
53 callback close();
54 callback check-radio-option <=> SettingsAdapter.check-radio-option;
55
56 padding-left: 0;
57 padding-right: 0;
58
59 VerticalLayout {
60 padding-left: Theme.spaces.medium;
61 padding-right: Theme.spaces.medium;
62 padding-top: Theme.spaces.medium;
63 padding-bottom: Theme.spaces.large;
64 spacing: Theme.spaces.medium;
65
66 // spacer
67 ScrollView {
68 vertical-stretch: 1;
69
70 VerticalLayout {
71 alignment: start;
72 spacing: Theme.spaces.medium;
73
74 Item {
75 clicked => {
76 i-function-one-check-box.clicked();
77 }
78
79 text: "Function One";
80
81 i-function-one-check-box := CheckBox {
82 checked <=> root.function-one-checked;
83 }
84 }
85
86 ItemGroupBox {
87 title: "Subtitle";
88
89 Item {
90 clicked => {
91 i-radio-option-one.clicked();
92 }
93
94 text: "Option One";
95 has-separator: true;
96
97 i-radio-option-one := RadioButton {
98 clicked => {
99 root.check-radio-option(0);
100 }
101
102 checked: root.radio-option-one-checked;
103
104
105 }
106 }
107
108 Item {
109 clicked => {
110 i-radio-option-two.clicked();
111 }
112
113 text: "Option Two";
114
115 i-radio-option-two := RadioButton {
116 clicked => {
117 root.check-radio-option(1);
118 }
119
120 checked: root.radio-option-two-checked;
121 }
122 }
123 }
124
125 ItemGroupBox {
126 title: "Subtitle";
127
128 Item {
129 clicked => {
130 i-check-option-one.clicked();
131 }
132
133 text: "Option One";
134 has-separator: true;
135
136 i-check-option-one := CheckBox {
137 checked <=> root.check-option-one-checked;
138 }
139 }
140
141 Item {
142 clicked => {
143 i-check-option-two.clicked();
144 }
145
146 text: "Option Two";
147 has-separator: true;
148
149 i-check-option-two := CheckBox {
150 checked <=> root.check-option-two-checked;
151 }
152 }
153
154 Item {
155 clicked => {
156 i-check-option-three.clicked();
157 }
158
159 text: "Option Three";
160
161 i-check-option-three := CheckBox {
162 checked <=> root.check-option-three-checked;
163 }
164 }
165 }
166
167 Item {
168 clicked => {
169 i-kiosk-mode.clicked();
170 }
171
172 text: "Kiosk mode";
173
174 i-kiosk-mode := Switch {
175 changed => {
176 close();
177 }
178
179 checked <=> root.kiosk-mode-checked;
180 }
181 }
182
183 Item {
184 clicked => {
185 i-function-three.clicked();
186 }
187
188 text: "Function Three";
189
190 i-function-three := Switch {
191 checked <=> root.function-three-checked;
192 }
193 }
194 }
195 }
196 }
197}
198