a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): replace profile spinboxes with number field component
+111
-21
+111
-21
ui/settings.slint
+111
-21
ui/settings.slint
···
59
59
}
60
60
}
61
61
62
+
component NumberField {
63
+
in-out property <int> value: 0;
64
+
in property <int> minimum: 0;
65
+
in property <int> maximum: 100;
66
+
in property <string> field-label: "";
67
+
68
+
callback edited(int);
69
+
70
+
height: 28px;
71
+
min-width: 80px;
72
+
73
+
Rectangle {
74
+
border-radius: 6px;
75
+
background: #FFFFFF80;
76
+
border-width: 1px;
77
+
border-color: #2320281A;
78
+
clip: true;
79
+
80
+
HorizontalLayout {
81
+
btn-minus := TouchArea {
82
+
width: 26px;
83
+
clicked => {
84
+
if root.value > root.minimum {
85
+
root.value = root.value - 1;
86
+
root.edited(root.value);
87
+
}
88
+
}
89
+
90
+
Rectangle {
91
+
background: btn-minus.has-hover ? #23202812 : transparent;
92
+
animate background { duration: 120ms; }
93
+
}
94
+
95
+
Text {
96
+
text: "−";
97
+
font-size: 13px;
98
+
color: root.value <= root.minimum ? #23202838 : #23202888;
99
+
horizontal-alignment: center;
100
+
vertical-alignment: center;
101
+
animate color { duration: 120ms; }
102
+
}
103
+
}
104
+
105
+
Rectangle {
106
+
width: 1px;
107
+
background: #2320281A;
108
+
}
109
+
110
+
Text {
111
+
text: root.value;
112
+
font-size: 12px;
113
+
font-weight: 500;
114
+
color: #232028;
115
+
horizontal-alignment: center;
116
+
vertical-alignment: center;
117
+
horizontal-stretch: 1;
118
+
}
119
+
120
+
Rectangle {
121
+
width: 1px;
122
+
background: #2320281A;
123
+
}
124
+
125
+
btn-plus := TouchArea {
126
+
width: 26px;
127
+
clicked => {
128
+
if root.value < root.maximum {
129
+
root.value = root.value + 1;
130
+
root.edited(root.value);
131
+
}
132
+
}
133
+
134
+
Rectangle {
135
+
background: btn-plus.has-hover ? #23202812 : transparent;
136
+
animate background { duration: 120ms; }
137
+
}
138
+
139
+
Text {
140
+
text: "+";
141
+
font-size: 13px;
142
+
color: root.value >= root.maximum ? #23202838 : #23202888;
143
+
horizontal-alignment: center;
144
+
vertical-alignment: center;
145
+
animate color { duration: 120ms; }
146
+
}
147
+
}
148
+
}
149
+
}
150
+
}
151
+
62
152
// A ghost button — paper white, thin line border
63
153
component PaperButton {
64
154
in property <string> text;
···
196
286
vertical-alignment: center;
197
287
}
198
288
199
-
SpinBox {
200
-
width: 72px;
201
-
height: 28px;
289
+
NumberField {
290
+
width: 84px;
202
291
value: root.work-mins;
203
292
minimum: 1;
204
293
maximum: 240;
294
+
field-label: "work interval minutes";
205
295
edited(v) => {
206
296
root.work-mins-changed(v);
207
297
}
···
214
304
vertical-alignment: center;
215
305
}
216
306
217
-
SpinBox {
218
-
width: 60px;
219
-
height: 28px;
307
+
NumberField {
308
+
width: 76px;
220
309
value: root.break-mins;
221
310
minimum: 0;
222
311
maximum: 120;
312
+
field-label: "break minutes";
223
313
edited(v) => {
224
314
root.break-mins-changed(v);
225
315
}
···
232
322
vertical-alignment: center;
233
323
}
234
324
235
-
SpinBox {
236
-
width: 60px;
237
-
height: 28px;
325
+
NumberField {
326
+
width: 76px;
238
327
value: root.break-secs;
239
328
minimum: 0;
240
329
maximum: 59;
330
+
field-label: "break seconds";
241
331
edited(v) => {
242
332
root.break-secs-changed(v);
243
333
}
···
267
357
268
358
// Remove button
269
359
ta-rm := TouchArea {
270
-
width: 20px;
271
-
height: 20px;
360
+
width: 36px;
361
+
height: 36px;
272
362
clicked => {
273
363
root.remove-clicked();
274
364
}
···
961
1051
vertical-alignment: center;
962
1052
}
963
1053
964
-
SpinBox {
965
-
width: 72px;
966
-
height: 28px;
1054
+
NumberField {
1055
+
width: 80px;
967
1056
value <=> root.long-break-after-cycles;
968
1057
minimum: 2;
969
1058
maximum: 20;
1059
+
field-label: "cycles before long rest";
970
1060
}
971
1061
972
1062
Text {
···
976
1066
vertical-alignment: center;
977
1067
}
978
1068
979
-
SpinBox {
980
-
width: 72px;
981
-
height: 28px;
1069
+
NumberField {
1070
+
width: 80px;
982
1071
value <=> root.long-break-duration-mins;
983
1072
minimum: 1;
984
1073
maximum: 120;
1074
+
field-label: "long rest duration minutes";
985
1075
}
986
1076
987
1077
Text {
···
1021
1111
vertical-alignment: center;
1022
1112
}
1023
1113
1024
-
SpinBox {
1025
-
width: 72px;
1026
-
height: 28px;
1114
+
NumberField {
1115
+
width: 80px;
1027
1116
value <=> root.long-break-gap-mins;
1028
-
minimum: 5;
1117
+
minimum: 1;
1029
1118
maximum: 120;
1119
+
field-label: "idle reset threshold minutes";
1030
1120
}
1031
1121
1032
1122
Text {