a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): scale interval card layout with font-size
+27
-27
+3
-3
ui/components/inputs.slint
+3
-3
ui/components/inputs.slint
···
10
10
callback edited(int);
11
11
12
12
height: 28px * Theme.font-scale;
13
-
min-width: 80px;
13
+
min-width: 80px * Theme.font-scale;
14
14
accessible-role: spinbox;
15
15
accessible-label: root.field-label;
16
16
accessible-value: "\{root.value}";
···
47
47
48
48
HorizontalLayout {
49
49
btn-minus := TouchArea {
50
-
width: 26px;
50
+
width: 26px * Theme.font-scale;
51
51
enabled: root.enabled;
52
52
accessible-role: button;
53
53
accessible-label: "Decrease " + root.field-label;
···
95
95
}
96
96
97
97
btn-plus := TouchArea {
98
-
width: 26px;
98
+
width: 26px * Theme.font-scale;
99
99
enabled: root.enabled;
100
100
accessible-role: button;
101
101
accessible-label: "Increase " + root.field-label;
+24
-24
ui/components/interval_card.slint
+24
-24
ui/components/interval_card.slint
···
37
37
property <length> index-offset: Theme.font_headline * 0.185;
38
38
39
39
Rectangle {
40
-
border-radius: 8px;
40
+
border-radius: 8px * Theme.font-scale;
41
41
background: Theme.surface;
42
42
border-width: 1px;
43
43
border-color: Theme.line;
44
44
min-height: th;
45
45
46
46
HorizontalLayout {
47
-
padding-left: 18px;
47
+
padding-left: 18px * Theme.font-scale;
48
48
padding-right: tw;
49
49
padding-top: tp - index-offset;
50
-
padding-bottom: 12px;
51
-
spacing: 18px;
50
+
padding-bottom: 12px * Theme.font-scale;
51
+
spacing: 18px * Theme.font-scale;
52
52
53
53
// Index column — glyph bounding box top at y=tp
54
54
VerticalLayout {
···
65
65
}
66
66
67
67
VerticalLayout {
68
-
spacing: 8px;
68
+
spacing: 8px * Theme.font-scale;
69
69
padding-top: Theme.font_headline * 0.35;
70
70
71
71
HorizontalLayout {
72
-
spacing: 8px;
72
+
spacing: 8px * Theme.font-scale;
73
73
74
74
PaperInput {
75
-
width: 200px;
75
+
width: 200px * Theme.font-scale;
76
76
text: root.label;
77
77
placeholder-text: "break name";
78
78
field-label: "break label";
···
87
87
}
88
88
89
89
HorizontalLayout {
90
-
spacing: 8px;
90
+
spacing: 8px * Theme.font-scale;
91
91
alignment: start;
92
92
93
93
Rectangle {
94
-
width: 4px;
94
+
width: 4px * Theme.font-scale;
95
95
}
96
96
97
97
Text {
···
102
102
}
103
103
104
104
NumberField {
105
-
width: 80px;
105
+
width: 80px * Theme.font-scale;
106
106
value: root.work-mins;
107
107
minimum: 1;
108
108
maximum: 240;
···
120
120
}
121
121
122
122
NumberField {
123
-
width: 80px;
123
+
width: 80px * Theme.font-scale;
124
124
value: root.break-mins;
125
125
minimum: 0;
126
126
maximum: 120;
···
138
138
}
139
139
140
140
NumberField {
141
-
width: 80px;
141
+
width: 80px * Theme.font-scale;
142
142
value: root.break-secs;
143
143
minimum: 0;
144
144
maximum: 59;
···
204
204
property <length> index-offset: Theme.font_headline * 0.185;
205
205
206
206
Rectangle {
207
-
border-radius: 8px;
207
+
border-radius: 8px * Theme.font-scale;
208
208
background: Theme.surface;
209
209
border-width: 1px;
210
210
border-color: Theme.line;
211
211
212
212
HorizontalLayout {
213
-
padding-left: 18px;
214
-
padding-right: 14px;
213
+
padding-left: 18px * Theme.font-scale;
214
+
padding-right: 14px * Theme.font-scale;
215
215
padding-top: tp - index-offset;
216
-
padding-bottom: 12px;
217
-
spacing: 18px;
216
+
padding-bottom: 12px * Theme.font-scale;
217
+
spacing: 18px * Theme.font-scale;
218
218
219
219
// Index column — matches IntervalCard
220
220
VerticalLayout {
···
231
231
}
232
232
233
233
VerticalLayout {
234
-
spacing: 8px;
234
+
spacing: 8px * Theme.font-scale;
235
235
padding-top: Theme.font_headline * 0.35;
236
236
237
237
HorizontalLayout {
238
-
spacing: 8px;
238
+
spacing: 8px * Theme.font-scale;
239
239
240
240
PaperInput {
241
-
width: 200px;
241
+
width: 200px * Theme.font-scale;
242
242
text: root.label;
243
243
placeholder-text: "Long rest";
244
244
field-label: "long rest label";
···
253
253
}
254
254
255
255
HorizontalLayout {
256
-
spacing: 8px;
256
+
spacing: 8px * Theme.font-scale;
257
257
alignment: start;
258
258
opacity: root.enabled ? 1.0 : 0.35;
259
259
animate opacity { duration: 120ms; }
260
260
261
261
Rectangle {
262
-
width: 4px;
262
+
width: 4px * Theme.font-scale;
263
263
}
264
264
265
265
Text {
···
270
270
}
271
271
272
272
NumberField {
273
-
width: 80px;
273
+
width: 80px * Theme.font-scale;
274
274
value <=> root.after-cycles;
275
275
minimum: 2;
276
276
maximum: 20;
···
285
285
}
286
286
287
287
NumberField {
288
-
width: 80px;
288
+
width: 80px * Theme.font-scale;
289
289
value <=> root.duration-mins;
290
290
minimum: 1;
291
291
maximum: 120;