a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): reposition X and interval number
- X is perfect
- interval number still wrong
+40
-36
+40
-36
ui/components/interval_card.slint
+40
-36
ui/components/interval_card.slint
···
22
22
callback break-secs-changed(int);
23
23
callback label-changed(string);
24
24
25
+
// TouchArea dimensions (scale with font)
26
+
property <length> tw: 44px * Theme.font-scale;
27
+
property <length> th: 44px * Theme.font-scale;
28
+
29
+
// X glyph bounding box height (Nunito hhea: ascender=1011, descender=-353, UPM=1000)
30
+
property <length> fh: Theme.font_medium * 1.364;
31
+
32
+
// Top padding: centers X vertically in TouchArea, also aligns index + label tops
33
+
property <length> tp: (th - fh) / 2;
34
+
25
35
Rectangle {
26
36
border-radius: 8px;
27
37
background: Theme.surface;
28
38
border-width: 1px;
29
39
border-color: Theme.line;
40
+
min-height: th;
30
41
31
42
HorizontalLayout {
32
43
padding-left: 18px;
33
-
padding-right: 14px;
34
-
padding-top: 12px;
44
+
padding-right: tw;
45
+
padding-top: tp;
35
46
padding-bottom: 12px;
36
47
spacing: 18px;
37
48
38
-
// Index column — aligns numerically with the label input row
49
+
// Index column — glyph bounding box top at y=tp
39
50
VerticalLayout {
40
-
spacing: 8px;
41
51
width: 20px;
42
52
43
53
Text {
···
45
55
font-family: "Shippori Mincho";
46
56
font-size: Theme.font_headline;
47
57
color: Theme.ink-hi;
48
-
height: 34px;
49
58
horizontal-alignment: center;
50
-
vertical-alignment: bottom;
59
+
vertical-alignment: top;
51
60
}
52
-
53
-
Rectangle { height: 28px; }
54
61
}
55
62
56
63
VerticalLayout {
···
132
139
}
133
140
}
134
141
}
135
-
136
-
VerticalLayout {
137
-
alignment: LayoutAlignment.stretch;
142
+
}
138
143
139
-
ta-rm := TouchArea {
140
-
width: 44px;
141
-
height: 44px;
142
-
accessible-role: button;
143
-
accessible-item-selectable: false;
144
-
accessible-label: "Remove interval";
145
-
clicked => { root.remove-clicked(); }
144
+
// Remove button — flush with card top-right, X centered in touch target
145
+
ta-rm := TouchArea {
146
+
x: parent.width - tw;
147
+
y: 0;
148
+
width: tw;
149
+
height: th;
150
+
accessible-role: button;
151
+
accessible-item-selectable: false;
152
+
accessible-label: "Remove interval";
153
+
clicked => { root.remove-clicked(); }
146
154
147
-
Text {
148
-
stroke-style: TextStrokeStyle.center;
149
-
text: "×";
150
-
font-size: Theme.font_medium;
151
-
color: ta-rm.has-hover ? Theme.ink : Theme.ink-sub;
152
-
horizontal-alignment: TextHorizontalAlignment.left;
153
-
vertical-alignment: TextVerticalAlignment.top;
154
-
x: 30px;
155
-
y: 0px;
156
-
animate color { duration: 120ms; }
157
-
}
158
-
}
155
+
Text {
156
+
text: "×";
157
+
font-size: Theme.font_medium;
158
+
color: ta-rm.has-hover ? Theme.ink : Theme.ink-sub;
159
+
horizontal-alignment: center;
160
+
vertical-alignment: center;
161
+
width: parent.width;
162
+
height: parent.height;
163
+
animate color { duration: 120ms; }
159
164
}
160
165
}
161
166
}
···
173
178
callback duration-mins-changed(int);
174
179
callback label-changed(string);
175
180
181
+
// Same top padding as IntervalCard for visual alignment
182
+
property <length> tp: (44px * Theme.font-scale - Theme.font_medium * 1.364) / 2;
183
+
176
184
Rectangle {
177
185
border-radius: 8px;
178
186
background: Theme.surface;
···
182
190
HorizontalLayout {
183
191
padding-left: 18px;
184
192
padding-right: 14px;
185
-
padding-top: 12px;
193
+
padding-top: tp;
186
194
padding-bottom: 12px;
187
195
spacing: 18px;
188
196
189
197
// Index column — matches IntervalCard
190
198
VerticalLayout {
191
-
spacing: 8px;
192
199
width: 20px;
193
200
194
201
Text {
···
196
203
font-family: "Shippori Mincho";
197
204
font-size: Theme.font_headline;
198
205
color: Theme.ink-hi;
199
-
height: 34px;
200
206
horizontal-alignment: center;
201
-
vertical-alignment: bottom;
207
+
vertical-alignment: top;
202
208
}
203
-
204
-
Rectangle { height: 28px; }
205
209
}
206
210
207
211
VerticalLayout {