a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): stripe now properly embedded in card rectangle
+53
-79
+52
-78
ui/components/interval_card.slint
+52
-78
ui/components/interval_card.slint
···
45
45
border-width: 1px;
46
46
border-color: Theme.line;
47
47
min-height: th;
48
+
clip: true;
49
+
50
+
Rectangle {
51
+
x: 0;
52
+
y: 0;
53
+
width: 6px * Theme.font-scale;
54
+
height: parent.height;
55
+
background: root.enforced ? Theme.accent : transparent;
56
+
animate background { duration: 200ms; }
57
+
}
48
58
49
59
HorizontalLayout {
50
60
padding-left: 18px * Theme.font-scale;
···
84
94
}
85
95
}
86
96
87
-
// Enforced / Skippable chip — VerticalLayout centers it within the row
97
+
// Enforced indicator — inline text toggle
88
98
VerticalLayout {
89
99
alignment: LayoutAlignment.center;
90
-
width: 104px * Theme.font-scale;
91
100
92
-
Rectangle {
93
-
height: 24px * Theme.font-scale;
94
-
border-radius: 5px * Theme.font-scale;
95
-
background: root.enforced
96
-
? (enf-ta.has-hover ? #608DB550 : #608DB530)
97
-
: (enf-ta.has-hover ? Theme.tint : transparent);
98
-
border-width: 1px;
99
-
border-color: root.enforced ? #608DB580 : Theme.line-med;
100
-
animate background { duration: 120ms; }
101
-
102
-
enf-ta := TouchArea {
103
-
accessible-role: button;
104
-
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
105
-
clicked => {
106
-
root.enforced = !root.enforced;
107
-
root.enforced-changed(root.enforced);
108
-
}
101
+
enf-ta := TouchArea {
102
+
height: 20px * Theme.font-scale;
103
+
mouse-cursor: pointer;
104
+
accessible-role: button;
105
+
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
106
+
clicked => {
107
+
root.enforced = !root.enforced;
108
+
root.enforced-changed(root.enforced);
109
109
}
110
110
111
-
HorizontalLayout {
112
-
alignment: center;
113
-
spacing: 5px * Theme.font-scale;
114
-
padding-left: 7px * Theme.font-scale;
115
-
padding-right: 8px * Theme.font-scale;
116
-
117
-
Text {
118
-
text: root.enforced ? "🔒" : "🔓";
119
-
font-size: Theme.font_xsmall;
120
-
vertical-alignment: center;
121
-
}
122
-
123
-
Text {
124
-
text: root.enforced ? "Enforced" : "Skippable";
125
-
font-size: Theme.font_xsmall;
126
-
color: root.enforced
127
-
? (Theme.dark ? #608DB5 : #2E6080)
128
-
: Theme.ink-lo;
129
-
vertical-alignment: center;
130
-
}
111
+
Text {
112
+
text: enf-ta.has-hover ? (root.enforced ? "· click to allow skipping" : "· click to enforce") : (root.enforced ? "· enforced" : "· skippable");
113
+
font-size: Theme.font_xxsmall;
114
+
color: root.enforced ? (enf-ta.has-hover ? Theme.accent : Theme.accent-muted) : (enf-ta.has-hover ? Theme.ink-lo : Theme.ink-sub);
115
+
vertical-alignment: center;
116
+
height: parent.height;
117
+
animate color { duration: 120ms; }
131
118
}
132
119
}
133
120
}
···
261
248
background: Theme.surface;
262
249
border-width: 1px;
263
250
border-color: Theme.line;
251
+
clip: true;
252
+
253
+
Rectangle {
254
+
x: 0;
255
+
y: 0;
256
+
width: 6px * Theme.font-scale;
257
+
height: parent.height;
258
+
background: root.enforced ? Theme.accent : transparent;
259
+
animate background { duration: 200ms; }
260
+
}
264
261
265
262
HorizontalLayout {
266
263
padding-left: 18px * Theme.font-scale;
···
300
297
}
301
298
}
302
299
303
-
// Enforced / Skippable chip — VerticalLayout centers it within the row
300
+
// Enforced indicator — inline text toggle
304
301
VerticalLayout {
305
302
alignment: LayoutAlignment.center;
306
-
width: 104px * Theme.font-scale;
307
303
308
-
Rectangle {
309
-
height: 24px * Theme.font-scale;
310
-
border-radius: 5px * Theme.font-scale;
311
-
background: root.enforced
312
-
? (lr-enf-ta.has-hover ? #608DB550 : #608DB530)
313
-
: (lr-enf-ta.has-hover ? Theme.tint : transparent);
314
-
border-width: 1px;
315
-
border-color: root.enforced ? #608DB580 : Theme.line-med;
316
-
animate background { duration: 120ms; }
317
-
318
-
lr-enf-ta := TouchArea {
319
-
accessible-role: button;
320
-
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
321
-
clicked => {
322
-
root.enforced = !root.enforced;
323
-
root.enforced-changed(root.enforced);
324
-
}
304
+
lr-enf-ta := TouchArea {
305
+
height: 20px * Theme.font-scale;
306
+
mouse-cursor: pointer;
307
+
accessible-role: button;
308
+
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
309
+
clicked => {
310
+
root.enforced = !root.enforced;
311
+
root.enforced-changed(root.enforced);
325
312
}
326
313
327
-
HorizontalLayout {
328
-
alignment: center;
329
-
spacing: 5px * Theme.font-scale;
330
-
padding-left: 7px * Theme.font-scale;
331
-
padding-right: 8px * Theme.font-scale;
332
-
333
-
Text {
334
-
text: root.enforced ? "🔒" : "🔓";
335
-
font-size: Theme.font_xsmall;
336
-
vertical-alignment: center;
337
-
}
338
-
339
-
Text {
340
-
text: root.enforced ? "Enforced" : "Skippable";
341
-
font-size: Theme.font_xsmall;
342
-
color: root.enforced
343
-
? (Theme.dark ? #608DB5 : #2E6080)
344
-
: Theme.ink-lo;
345
-
vertical-alignment: center;
346
-
}
314
+
Text {
315
+
text: lr-enf-ta.has-hover ? (root.enforced ? "· click to allow skipping" : "· click to enforce") : (root.enforced ? "· enforced" : "· skippable");
316
+
font-size: Theme.font_xxsmall;
317
+
color: root.enforced ? (lr-enf-ta.has-hover ? Theme.accent : Theme.accent-muted) : (lr-enf-ta.has-hover ? Theme.ink-lo : Theme.ink-sub);
318
+
vertical-alignment: center;
319
+
height: parent.height;
320
+
animate color { duration: 120ms; }
347
321
}
348
322
}
349
323
}