1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Button, Palette } from "std-widgets.slint";
5
6import { Icons } from "icons.slint";
7
8component VirtualKeyboardButton {
9 in property <string> key;
10 in property <image> icon;
11
12 callback key-pressed(/* key */ string);
13
14 min-width: 32px;
15 min-height: 32px;
16 horizontal-stretch: 0;
17
18 states [
19 pressed when i-touch-area.pressed : {
20 i-state-area.opacity: 0.5;
21 }
22 ]
23
24 i-container := Rectangle {
25 border-radius: 4px;
26 background: Palette.color-scheme == ColorScheme.dark ? #373737 : #ffffff;
27
28 HorizontalLayout {
29 padding: 8px;
30
31 if (root.key != "") : Text {
32 text: root.key;
33 color: Palette.color-scheme == ColorScheme.dark ? #ffffff : #000000;
34 font-size: 12px;
35 vertical-alignment: center;
36 horizontal-alignment: center;
37 }
38
39 if (root.key == "") : Image {
40 y: (parent.height - self.height) / 2;
41 source: root.icon;
42 height: 18px;
43 colorize: Palette.color-scheme == ColorScheme.dark ? #ffffff : #000000;
44 }
45 }
46 }
47
48 i-state-area := Rectangle {
49 border-radius: i-container.border-radius;
50 opacity: 0;
51 background: #000000;
52
53 animate opacity { duration: 150ms; }
54 }
55
56 i-touch-area := TouchArea {
57 pointer-event(event) => {
58 if(event.kind == PointerEventKind.down) {
59 root.key-pressed(key);
60 }
61 }
62 }
63}
64
65export struct KeyModel {
66 key: string,
67 shift-key: string,
68}
69
70export global VirtualKeyboardHandler {
71 in property <[[[KeyModel]]]> default-key-sets: [
72 [
73 [
74 { key: "q", shift-key: "Q" },
75 { key: "w", shift-key: "W" },
76 { key: "e", shift-key: "E" },
77 { key: "r", shift-key: "R" },
78 { key: "t", shift-key: "T" },
79 { key: "y", shift-key: "Y" },
80 { key: "u", shift-key: "U" },
81 { key: "i", shift-key: "I" },
82 { key: "o", shift-key: "O" },
83 { key: "p", shift-key: "P" }
84 ],
85 [
86 { key: "a", shift-key: "A" },
87 { key: "s", shift-key: "S" },
88 { key: "d", shift-key: "D" },
89 { key: "f", shift-key: "F" },
90 { key: "g", shift-key: "G" },
91 { key: "h", shift-key: "H" },
92 { key: "j", shift-key: "J" },
93 { key: "k", shift-key: "K" },
94 { key: "l", shift-key: "L" }
95 ],
96 [
97 { key: "z", shift-key: "Z" },
98 { key: "x", shift-key: "X" },
99 { key: "c", shift-key: "C" },
100 { key: "v", shift-key: "V" },
101 { key: "b", shift-key: "B" },
102 { key: "n", shift-key: "N" },
103 { key: "m", shift-key: "M" },
104 { key: ",", shift-key: ";" },
105 { key: ".", shift-key: ":" },
106 { key: "?", shift-key: "?" }
107 ],
108 ],
109 [
110 [
111 { key: "1", shift-key: "[" },
112 { key: "2", shift-key: "]" },
113 { key: "3", shift-key: "{" },
114 { key: "4", shift-key: "}" },
115 { key: "5", shift-key: "#" },
116 { key: "6", shift-key: "%" },
117 { key: "7", shift-key: "^" },
118 { key: "8", shift-key: "*" },
119 { key: "9", shift-key: "+" },
120 { key: "0", shift-key: "=" }
121 ],
122 [
123 { key: "-", shift-key: "_" },
124 { key: "/", shift-key: "\\" },
125 { key: ":", shift-key: "|" },
126 { key: ";", shift-key: "~" },
127 { key: "(", shift-key: "<" },
128 { key: ")", shift-key: ">" },
129 { key: "€", shift-key: "$" },
130 { key: "&", shift-key: "€" },
131 { key: "@", shift-key: "°" },
132 { key: "'", shift-key: "#" },
133 ],
134 [
135 { key: ".", shift-key: "." },
136 { key: ",", shift-key: "," },
137 { key: "?", shift-key: "?" },
138 { key: "!", shift-key: "!" },
139 { key: "'", shift-key: "'" },
140 ],
141 ]
142 ];
143
144 out property <int> current-key-set;
145 out property <[[KeyModel]]> keys: default-key-sets[self.current-key-set];
146 in-out property <bool> open;
147
148 callback key_pressed(/* key */ string);
149
150 public function switch-keyboard() {
151 if (self.current-key-set < self.default-key-sets.length - 1) {
152 self.current-key-set += 1;
153 } else {
154 self.current-key-set -= 1;
155 }
156
157 self.current-key-set = min(self.default-key-sets.length - 1, max(0, self.current-key-set))
158 }
159}
160
161export component VirtualKeyboard {
162 private property <bool> shift;
163
164 callback close();
165
166 preferred-width: 100%;
167
168 TouchArea {}
169
170 Rectangle {
171 background: Palette.color-scheme == ColorScheme.dark ? #1c1c1c : #d4d4d4;
172 height: 100%;
173 }
174
175 i-layout := VerticalLayout {
176 padding: 8px;
177 spacing: 4px;
178
179 for row[index] in VirtualKeyboardHandler.keys : HorizontalLayout {
180 spacing: 4px;
181
182 if (index == 0) : VirtualKeyboardButton {
183 key: "ESC";
184
185 key-pressed => {
186 VirtualKeyboardHandler.key-pressed(Key.Escape);
187 }
188 }
189
190 if (index == 1) : VirtualKeyboardButton {
191 key: "Tab";
192
193 key-pressed => {
194 VirtualKeyboardHandler.key-pressed(Key.Tab);
195 }
196 }
197
198 // shift
199 if (index == 2) : VirtualKeyboardButton {
200 icon: Icons.arrow-up;
201
202 key-pressed => {
203 root.shift = !root.shift;
204 }
205 }
206
207 for km in row : VirtualKeyboardButton {
208 key: root.shift ? km.shift-key : km.key;
209
210 key-pressed(key) => {
211 VirtualKeyboardHandler.key-pressed(key);
212 root.shift = false;
213 }
214 }
215
216 if (index == 0) : VirtualKeyboardButton {
217 icon: Icons.chevron-left;
218
219 key-pressed => {
220 VirtualKeyboardHandler.key-pressed(Key.Backspace);
221 }
222 }
223
224 if (index == 1) : VirtualKeyboardButton {
225 icon: Icons.arrow-circle-o-left;
226
227 key-pressed => {
228 VirtualKeyboardHandler.key-pressed(Key.Return);
229 }
230 }
231
232 // shift
233 if (index == 2) : VirtualKeyboardButton {
234 icon: Icons.arrow-up;
235
236 key-pressed => {
237 root.shift = !root.shift;
238 }
239 }
240 }
241
242 HorizontalLayout {
243 spacing: 4px;
244
245 VirtualKeyboardButton {
246 icon: Icons.expand-more;
247
248 key-pressed(key) => {
249 root.close();
250 }
251 }
252
253 VirtualKeyboardButton {
254 icon: Icons.globe;
255
256 key-pressed(key) => {
257 VirtualKeyboardHandler.switch-keyboard();
258 }
259 }
260 VirtualKeyboardButton {
261 horizontal-stretch: 1;
262 key: " ";
263
264 key-pressed(key) => {
265 root.shift = false;
266 VirtualKeyboardHandler.key-pressed(key);
267 }
268 }
269 VirtualKeyboardButton {
270 icon: Icons.arrow-left;
271
272 key-pressed(key) => {
273 VirtualKeyboardHandler.key-pressed(Key.LeftArrow);
274 }
275 }
276 VirtualKeyboardButton {
277 icon: Icons.arrow-right;
278
279 key-pressed(key) => {
280 VirtualKeyboardHandler.key-pressed(Key.RightArrow);
281 }
282 }
283 }
284
285
286 }
287
288 animate y { duration: 500ms; easing: cubic-bezier(0.05, 0.7, 0.1, 1.0); }
289}
290