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
55 padding-left: 0;
56 padding-right: 0;
57
58 VerticalLayout {
59 padding-left: Theme.spaces.medium;
60 padding-right: Theme.spaces.medium;
61 padding-top: Theme.spaces.medium;
62 padding-bottom: Theme.spaces.large;
63 spacing: Theme.spaces.medium;
64
65 // spacer
66 ScrollView {
67 vertical-stretch: 1;
68
69 VerticalLayout {
70 alignment: start;
71 spacing: Theme.spaces.medium;
72
73 Item {
74 clicked => {
75 i-function-one-check-box.clicked();
76 }
77
78 text: "Function One";
79
80 i-function-one-check-box := CheckBox {
81 checked <=> root.function-one-checked;
82 }
83 }
84
85 ItemGroupBox {
86 title: "Subtitle";
87
88 Item {
89 clicked => {
90 i-radio-option-one.clicked();
91 }
92
93 text: "Option One";
94 has-separator: true;
95
96 i-radio-option-one := RadioButton {
97 clicked => {
98 SettingsAdapter.check-radio-option(0);
99 }
100
101 checked: root.radio-option-one-checked;
102
103
104 }
105 }
106
107 Item {
108 clicked => {
109 i-radio-option-two.clicked();
110 }
111
112 text: "Option Two";
113
114 i-radio-option-two := RadioButton {
115 clicked => {
116 SettingsAdapter.check-radio-option(1);
117 }
118
119 checked: root.radio-option-two-checked;
120 }
121 }
122 }
123
124 ItemGroupBox {
125 title: "Subtitle";
126
127 Item {
128 clicked => {
129 i-check-option-one.clicked();
130 }
131
132 text: "Option One";
133 has-separator: true;
134
135 i-check-option-one := CheckBox {
136 checked <=> root.check-option-one-checked;
137 }
138 }
139
140 Item {
141 clicked => {
142 i-check-option-two.clicked();
143 }
144
145 text: "Option Two";
146 has-separator: true;
147
148 i-check-option-two := CheckBox {
149 checked <=> root.check-option-two-checked;
150 }
151 }
152
153 Item {
154 clicked => {
155 i-check-option-three.clicked();
156 }
157
158 text: "Option Three";
159
160 i-check-option-three := CheckBox {
161 checked <=> root.check-option-three-checked;
162 }
163 }
164 }
165
166 Item {
167 clicked => {
168 i-kiosk-mode.clicked();
169 }
170
171 text: "Kiosk mode";
172
173 i-kiosk-mode := Switch {
174 changed => {
175 close();
176 }
177
178 checked <=> root.kiosk-mode-checked;
179 }
180 }
181
182 Item {
183 clicked => {
184 i-function-three.clicked();
185 }
186
187 text: "Function Three";
188
189 i-function-three := Switch {
190 checked <=> root.function-three-checked;
191 }
192 }
193 }
194 }
195 }
196}
197