a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): reposition interval index number
*chef kiss*
+43
-14
+43
-14
ui/components/interval_card.slint
+43
-14
ui/components/interval_card.slint
···
32
32
// Top padding: centers X vertically in TouchArea, also aligns index + label tops
33
33
property <length> tp: (th - fh) / 2;
34
34
35
+
// Gap between sTypo line box top and numeral glyph top
36
+
// (sTypoAscender - yMax) / UPM = (880 - 735) / 1000 = 0.145
37
+
property <length> index-offset: Theme.font_headline * 0.165;
38
+
35
39
Rectangle {
36
40
border-radius: 8px;
37
41
background: Theme.surface;
···
42
46
HorizontalLayout {
43
47
padding-left: 18px;
44
48
padding-right: tw;
45
-
padding-top: tp;
49
+
padding-top: tp - index-offset;
46
50
padding-bottom: 12px;
47
51
spacing: 18px;
48
52
49
53
// Index column — glyph bounding box top at y=tp
50
54
VerticalLayout {
51
-
width: 20px;
55
+
width: 20px * Theme.font-scale;
52
56
53
57
Text {
54
58
text: root.index;
···
62
66
63
67
VerticalLayout {
64
68
spacing: 8px;
69
+
padding-top: index-offset;
65
70
66
71
HorizontalLayout {
67
72
spacing: 8px;
···
71
76
text: root.label;
72
77
placeholder-text: "break name";
73
78
field-label: "break label";
74
-
edited(v) => { root.label-changed(v); }
79
+
edited(v) => {
80
+
root.label-changed(v);
81
+
}
75
82
}
76
83
77
-
Rectangle { horizontal-stretch: 1; }
84
+
Rectangle {
85
+
horizontal-stretch: 1;
86
+
}
78
87
}
79
88
80
89
HorizontalLayout {
81
90
spacing: 8px;
82
91
alignment: start;
83
92
84
-
Rectangle { width: 4px; }
93
+
Rectangle {
94
+
width: 4px;
95
+
}
85
96
86
97
Text {
87
98
text: "every";
···
96
107
minimum: 1;
97
108
maximum: 240;
98
109
field-label: "work interval minutes";
99
-
edited(v) => { root.work-mins-changed(v); }
110
+
edited(v) => {
111
+
root.work-mins-changed(v);
112
+
}
100
113
}
101
114
102
115
Text {
···
112
125
minimum: 0;
113
126
maximum: 120;
114
127
field-label: "break minutes";
115
-
edited(v) => { root.break-mins-changed(v); }
128
+
edited(v) => {
129
+
root.break-mins-changed(v);
130
+
}
116
131
}
117
132
118
133
Text {
···
128
143
minimum: 0;
129
144
maximum: 59;
130
145
field-label: "break seconds";
131
-
edited(v) => { root.break-secs-changed(v); }
146
+
edited(v) => {
147
+
root.break-secs-changed(v);
148
+
}
132
149
}
133
150
134
151
Text {
···
150
167
accessible-role: button;
151
168
accessible-item-selectable: false;
152
169
accessible-label: "Remove interval";
153
-
clicked => { root.remove-clicked(); }
170
+
clicked => {
171
+
root.remove-clicked();
172
+
}
154
173
155
174
Text {
156
175
text: "×";
···
181
200
// Same top padding as IntervalCard for visual alignment
182
201
property <length> tp: (44px * Theme.font-scale - Theme.font_medium * 1.364) / 2;
183
202
203
+
// Same index offset as IntervalCard
204
+
property <length> index-offset: Theme.font_headline * 0.165;
205
+
184
206
Rectangle {
185
207
border-radius: 8px;
186
208
background: Theme.surface;
···
190
212
HorizontalLayout {
191
213
padding-left: 18px;
192
214
padding-right: 14px;
193
-
padding-top: tp;
215
+
padding-top: tp - index-offset;
194
216
padding-bottom: 12px;
195
217
spacing: 18px;
196
218
197
219
// Index column — matches IntervalCard
198
220
VerticalLayout {
199
-
width: 20px;
221
+
width: 20px * Theme.font-scale;
200
222
201
223
Text {
202
224
text: root.index;
···
210
232
211
233
VerticalLayout {
212
234
spacing: 8px;
235
+
padding-top: index-offset;
213
236
214
237
HorizontalLayout {
215
238
spacing: 8px;
···
219
242
text: root.label;
220
243
placeholder-text: "Long rest";
221
244
field-label: "long rest label";
222
-
edited(v) => { root.label-changed(v); }
245
+
edited(v) => {
246
+
root.label-changed(v);
247
+
}
223
248
}
224
249
225
-
Rectangle { horizontal-stretch: 1; }
250
+
Rectangle {
251
+
horizontal-stretch: 1;
252
+
}
226
253
}
227
254
228
255
HorizontalLayout {
···
231
258
opacity: root.enabled ? 1.0 : 0.35;
232
259
animate opacity { duration: 120ms; }
233
260
234
-
Rectangle { width: 4px; }
261
+
Rectangle {
262
+
width: 4px;
263
+
}
235
264
236
265
Text {
237
266
text: "every";