a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): interval cards leave panel, adopt panel bg
+88
-95
+2
-2
ui/components/interval_card.slint
+2
-2
ui/components/interval_card.slint
···
41
41
42
42
Rectangle {
43
43
border-radius: 8px * Theme.font-scale;
44
-
background: Theme.surface;
44
+
background: Theme.panel;
45
45
border-width: 1px;
46
46
border-color: Theme.line;
47
47
min-height: th;
···
245
245
246
246
Rectangle {
247
247
border-radius: 8px * Theme.font-scale;
248
-
background: Theme.surface;
248
+
background: Theme.panel;
249
249
border-width: 1px;
250
250
border-color: Theme.line;
251
251
clip: true;
+86
-93
ui/views/rhythm_tab.slint
+86
-93
ui/views/rhythm_tab.slint
···
73
73
}
74
74
}
75
75
76
-
// ── Break cadence panel ─────────────────────────────────────────────────
77
-
Rectangle {
78
-
border-radius: 10px * Theme.font-scale;
79
-
background: Theme.panel;
76
+
// ── Break cadence ───────────────────────────────────────────────────────
77
+
VerticalLayout {
78
+
padding-bottom: 20px * Theme.font-scale;
79
+
spacing: 20px * Theme.font-scale;
80
80
81
-
VerticalLayout {
82
-
padding: 20px * Theme.font-scale;
83
-
spacing: 20px * Theme.font-scale;
81
+
SectionHeading {
82
+
title: "Break cadence";
83
+
description: "Each row is an interval. ioma cycles through them in order.";
84
+
}
84
85
85
-
SectionHeading {
86
-
title: "Break cadence";
87
-
description: "Each row is an interval. ioma cycles through them in order.";
86
+
for level[i] in root.levels: IntervalCard {
87
+
index: i + 1;
88
+
work-mins: level.work-mins;
89
+
break-mins: level.break-mins;
90
+
break-secs: level.break-extra-secs;
91
+
label: level.label;
92
+
enforced: level.enforced;
93
+
remove-clicked => { root.level-removed(i); }
94
+
work-mins-changed(v) => {
95
+
root.level-changed(i, {
96
+
work-mins: v,
97
+
break-mins: level.break-mins,
98
+
break-extra-secs: level.break-extra-secs,
99
+
label: level.label,
100
+
enforced: level.enforced,
101
+
});
88
102
}
89
-
90
-
for level[i] in root.levels: IntervalCard {
91
-
index: i + 1;
92
-
work-mins: level.work-mins;
93
-
break-mins: level.break-mins;
94
-
break-secs: level.break-extra-secs;
95
-
label: level.label;
96
-
enforced: level.enforced;
97
-
remove-clicked => { root.level-removed(i); }
98
-
work-mins-changed(v) => {
99
-
root.level-changed(i, {
100
-
work-mins: v,
101
-
break-mins: level.break-mins,
102
-
break-extra-secs: level.break-extra-secs,
103
-
label: level.label,
104
-
enforced: level.enforced,
105
-
});
106
-
}
107
-
break-mins-changed(v) => {
108
-
root.level-changed(i, {
109
-
work-mins: level.work-mins,
110
-
break-mins: v,
111
-
break-extra-secs: level.break-extra-secs,
112
-
label: level.label,
113
-
enforced: level.enforced,
114
-
});
115
-
}
116
-
break-secs-changed(v) => {
117
-
root.level-changed(i, {
118
-
work-mins: level.work-mins,
119
-
break-mins: level.break-mins,
120
-
break-extra-secs: v,
121
-
label: level.label,
122
-
enforced: level.enforced,
123
-
});
124
-
}
125
-
label-changed(v) => {
126
-
root.level-changed(i, {
127
-
work-mins: level.work-mins,
128
-
break-mins: level.break-mins,
129
-
break-extra-secs: level.break-extra-secs,
130
-
label: v,
131
-
enforced: level.enforced,
132
-
});
133
-
}
134
-
enforced-changed(v) => {
135
-
root.level-changed(i, {
136
-
work-mins: level.work-mins,
137
-
break-mins: level.break-mins,
138
-
break-extra-secs: level.break-extra-secs,
139
-
label: level.label,
140
-
enforced: v,
141
-
});
142
-
}
103
+
break-mins-changed(v) => {
104
+
root.level-changed(i, {
105
+
work-mins: level.work-mins,
106
+
break-mins: v,
107
+
break-extra-secs: level.break-extra-secs,
108
+
label: level.label,
109
+
enforced: level.enforced,
110
+
});
111
+
}
112
+
break-secs-changed(v) => {
113
+
root.level-changed(i, {
114
+
work-mins: level.work-mins,
115
+
break-mins: level.break-mins,
116
+
break-extra-secs: v,
117
+
label: level.label,
118
+
enforced: level.enforced,
119
+
});
120
+
}
121
+
label-changed(v) => {
122
+
root.level-changed(i, {
123
+
work-mins: level.work-mins,
124
+
break-mins: level.break-mins,
125
+
break-extra-secs: level.break-extra-secs,
126
+
label: v,
127
+
enforced: level.enforced,
128
+
});
129
+
}
130
+
enforced-changed(v) => {
131
+
root.level-changed(i, {
132
+
work-mins: level.work-mins,
133
+
break-mins: level.break-mins,
134
+
break-extra-secs: level.break-extra-secs,
135
+
label: level.label,
136
+
enforced: v,
137
+
});
143
138
}
139
+
}
144
140
145
-
LongRestCard {
146
-
index: root.levels.length + 1;
147
-
enabled <=> root.long-break-enabled;
148
-
after-cycles <=> root.long-break-after-cycles;
149
-
duration-mins <=> root.long-break-duration-mins;
150
-
label <=> root.long-break-label;
151
-
enforced <=> root.long-break-enforced;
152
-
}
141
+
LongRestCard {
142
+
index: root.levels.length + 1;
143
+
enabled <=> root.long-break-enabled;
144
+
after-cycles <=> root.long-break-after-cycles;
145
+
duration-mins <=> root.long-break-duration-mins;
146
+
label <=> root.long-break-label;
147
+
enforced <=> root.long-break-enforced;
148
+
}
153
149
154
-
add-ta := TouchArea {
155
-
height: 44px * Theme.font-scale;
156
-
accessible-role: AccessibleRole.button;
157
-
accessible-label: "Add interval";
158
-
accessible-action-default => { root.level-added(); }
159
-
clicked => { root.level-added(); }
150
+
add-ta := TouchArea {
151
+
height: 44px * Theme.font-scale;
152
+
accessible-role: AccessibleRole.button;
153
+
accessible-label: "Add interval";
154
+
accessible-action-default => { root.level-added(); }
155
+
clicked => { root.level-added(); }
160
156
161
-
Rectangle {
162
-
border-radius: 8px * Theme.font-scale;
163
-
background: add-ta.has-hover ? Theme.surface-hov : transparent;
164
-
border-width: 1px;
165
-
border-color: Theme.line-med;
157
+
Rectangle {
158
+
border-radius: 8px * Theme.font-scale;
159
+
background: add-ta.has-hover ? Theme.surface-hov : transparent;
160
+
border-width: 1px;
161
+
border-color: Theme.line-med;
166
162
167
-
Text {
168
-
text: "+ Add interval";
169
-
font-size: Theme.font_xsmall;
170
-
color: add-ta.has-hover ? Theme.ink : Theme.ink-lo;
171
-
horizontal-alignment: center;
172
-
vertical-alignment: center;
173
-
animate color { duration: 120ms; }
174
-
}
163
+
Text {
164
+
text: "+ Add interval";
165
+
font-size: Theme.font_xsmall;
166
+
color: add-ta.has-hover ? Theme.ink : Theme.ink-lo;
167
+
horizontal-alignment: center;
168
+
vertical-alignment: center;
169
+
animate color { duration: 120ms; }
175
170
}
176
171
}
177
172
}
178
173
}
179
-
180
-
Rectangle { height: 20px * Theme.font-scale; }
181
174
182
175
// ── During breaks panel ─────────────────────────────────────────────────
183
176
Rectangle {