a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
lmao ugly first attempt with new settings components
+572
-176
+76
-60
ui/components/interval_card.slint
+76
-60
ui/components/interval_card.slint
···
84
84
}
85
85
}
86
86
87
-
// Enforced / Skippable chip
88
-
enf-chip := Rectangle {
87
+
// Enforced / Skippable chip — VerticalLayout centers it within the row
88
+
VerticalLayout {
89
+
alignment: LayoutAlignment.center;
89
90
width: 104px * Theme.font-scale;
90
-
height: 24px * Theme.font-scale;
91
-
border-radius: 5px * Theme.font-scale;
92
-
background: enf-ta.has-hover ? Theme.surface-hov : Theme.surface;
93
-
border-width: 1px;
94
-
border-color: Theme.line-med;
95
-
animate background { duration: 120ms; }
96
91
97
-
enf-ta := TouchArea {
98
-
accessible-role: button;
99
-
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
100
-
clicked => {
101
-
root.enforced = !root.enforced;
102
-
root.enforced-changed(root.enforced);
92
+
Rectangle {
93
+
height: 24px * Theme.font-scale;
94
+
border-radius: 5px * Theme.font-scale;
95
+
background: root.enforced
96
+
? (enf-ta.has-hover ? #82AACC50 : #82AACC30)
97
+
: (enf-ta.has-hover ? #C8956050 : #C8956025);
98
+
border-width: 1px;
99
+
border-color: root.enforced ? #82AACC80 : #C8956070;
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
+
}
103
109
}
104
-
}
105
110
106
-
HorizontalLayout {
107
-
alignment: center;
108
-
spacing: 5px * Theme.font-scale;
109
-
padding-left: 7px * Theme.font-scale;
110
-
padding-right: 8px * Theme.font-scale;
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;
111
116
112
-
Text {
113
-
text: root.enforced ? "🔒" : "🔓";
114
-
font-size: Theme.font_xsmall;
115
-
vertical-alignment: center;
116
-
}
117
+
Text {
118
+
text: root.enforced ? "🔒" : "🔓";
119
+
font-size: Theme.font_xsmall;
120
+
vertical-alignment: center;
121
+
}
117
122
118
-
Text {
119
-
text: root.enforced ? "Enforced" : "Skippable";
120
-
font-size: Theme.font_xsmall;
121
-
color: Theme.ink-mid;
122
-
vertical-alignment: center;
123
+
Text {
124
+
text: root.enforced ? "Enforced" : "Skippable";
125
+
font-size: Theme.font_xsmall;
126
+
color: root.enforced
127
+
? (Theme.dark ? #82AACC : #3A6E8C)
128
+
: (Theme.dark ? #C89560 : #8B5E30);
129
+
vertical-alignment: center;
130
+
}
123
131
}
124
132
}
125
133
}
···
292
300
}
293
301
}
294
302
295
-
// Enforced / Skippable chip
296
-
lr-enf-chip := Rectangle {
303
+
// Enforced / Skippable chip — VerticalLayout centers it within the row
304
+
VerticalLayout {
305
+
alignment: LayoutAlignment.center;
297
306
width: 104px * Theme.font-scale;
298
-
height: 24px * Theme.font-scale;
299
-
border-radius: 5px * Theme.font-scale;
300
-
background: lr-enf-ta.has-hover ? Theme.surface-hov : Theme.surface;
301
-
border-width: 1px;
302
-
border-color: Theme.line-med;
303
-
animate background { duration: 120ms; }
304
307
305
-
lr-enf-ta := TouchArea {
306
-
accessible-role: button;
307
-
accessible-label: root.enforced ? "Enforced — click to make skippable" : "Skippable — click to enforce";
308
-
clicked => {
309
-
root.enforced = !root.enforced;
310
-
root.enforced-changed(root.enforced);
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 ? #82AACC50 : #82AACC30)
313
+
: (lr-enf-ta.has-hover ? #C8956050 : #C8956025);
314
+
border-width: 1px;
315
+
border-color: root.enforced ? #82AACC80 : #C8956070;
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
+
}
311
325
}
312
-
}
313
326
314
-
HorizontalLayout {
315
-
alignment: center;
316
-
spacing: 5px * Theme.font-scale;
317
-
padding-left: 7px * Theme.font-scale;
318
-
padding-right: 8px * Theme.font-scale;
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;
319
332
320
-
Text {
321
-
text: root.enforced ? "🔒" : "🔓";
322
-
font-size: Theme.font_xsmall;
323
-
vertical-alignment: center;
324
-
}
333
+
Text {
334
+
text: root.enforced ? "🔒" : "🔓";
335
+
font-size: Theme.font_xsmall;
336
+
vertical-alignment: center;
337
+
}
325
338
326
-
Text {
327
-
text: root.enforced ? "Enforced" : "Skippable";
328
-
font-size: Theme.font_xsmall;
329
-
color: Theme.ink-mid;
330
-
vertical-alignment: center;
339
+
Text {
340
+
text: root.enforced ? "Enforced" : "Skippable";
341
+
font-size: Theme.font_xsmall;
342
+
color: root.enforced
343
+
? (Theme.dark ? #82AACC : #3A6E8C)
344
+
: (Theme.dark ? #C89560 : #8B5E30);
345
+
vertical-alignment: center;
346
+
}
331
347
}
332
348
}
333
349
}
+489
-113
ui/views/profile_tab.slint
+489
-113
ui/views/profile_tab.slint
···
1
1
import { ScrollView } from "std-widgets.slint";
2
2
import { Theme } from "../theme.slint";
3
-
import { SettingLabel } from "../components/atoms.slint";
4
-
import { PaperButton } from "../components/buttons.slint";
5
-
import { VolumeSlider, PaperComboBox, NumberField } from "../components/inputs.slint";
3
+
import { SectionHeading, PaperDivider } from "../components/atoms.slint";
6
4
import { PaperToggle } from "../components/toggles.slint";
7
-
import { ChipGroup } from "../components/chips.slint";
5
+
import { VolumeSlider, NumberField } from "../components/inputs.slint";
8
6
9
7
export component ProfileTab inherits ScrollView {
10
8
in-out property <bool> sound-enabled: true;
···
21
19
vertical-stretch: 1;
22
20
23
21
VerticalLayout {
24
-
padding-left: 28px * Theme.font-scale;
25
-
padding-right: 28px * Theme.font-scale;
22
+
padding-left: 24px * Theme.font-scale;
23
+
padding-right: 24px * Theme.font-scale;
26
24
padding-top: 24px * Theme.font-scale;
27
-
padding-bottom: 16px * Theme.font-scale;
25
+
padding-bottom: 24px * Theme.font-scale;
28
26
spacing: 0px;
29
27
30
-
HorizontalLayout {
31
-
padding-top: 12px * Theme.font-scale;
32
-
padding-bottom: 4px * Theme.font-scale;
33
-
spacing: 24px * Theme.font-scale;
28
+
// ── System ─────────────────────────────────────────────────────────────
29
+
SectionHeading {
30
+
title: "System";
31
+
description: "App behavior and configuration.";
32
+
}
34
33
35
-
SettingLabel {
36
-
title: "Chime on break start";
37
-
}
34
+
Rectangle { height: 12px * Theme.font-scale; }
38
35
39
-
Rectangle { horizontal-stretch: 1; }
36
+
Rectangle {
37
+
border-radius: 10px * Theme.font-scale;
38
+
background: Theme.surface;
39
+
border-width: 1px;
40
+
border-color: Theme.line;
41
+
clip: true;
40
42
41
-
PaperToggle {
42
-
checked <=> root.sound-enabled;
43
-
label: "Chime on break start";
44
-
}
45
-
}
43
+
VerticalLayout {
44
+
// Autostart row
45
+
HorizontalLayout {
46
+
height: 60px * Theme.font-scale;
47
+
padding-left: 16px * Theme.font-scale;
48
+
padding-right: 16px * Theme.font-scale;
49
+
spacing: 14px * Theme.font-scale;
50
+
alignment: center;
51
+
52
+
Rectangle {
53
+
width: 34px * Theme.font-scale;
54
+
height: 34px * Theme.font-scale;
55
+
border-radius: 8px * Theme.font-scale;
56
+
background: Theme.tint;
57
+
58
+
Text {
59
+
text: "▶";
60
+
font-size: 11px * Theme.font-scale;
61
+
color: Theme.ink-mid;
62
+
horizontal-alignment: center;
63
+
vertical-alignment: center;
64
+
}
65
+
}
66
+
67
+
VerticalLayout {
68
+
horizontal-stretch: 1;
69
+
alignment: center;
70
+
spacing: 2px;
71
+
72
+
Text {
73
+
text: "Start quietly at login";
74
+
font-size: Theme.font_body;
75
+
font-weight: 500;
76
+
color: Theme.ink;
77
+
}
78
+
79
+
Text {
80
+
text: "Launch in the background";
81
+
font-size: Theme.font_xsmall;
82
+
color: Theme.ink-mid;
83
+
}
84
+
}
85
+
86
+
PaperToggle {
87
+
checked <=> root.autostart;
88
+
label: "Start quietly at login";
89
+
}
90
+
}
46
91
47
-
if root.sound-enabled: HorizontalLayout {
48
-
padding-bottom: 12px * Theme.font-scale;
49
-
spacing: 12px * Theme.font-scale;
50
-
alignment: center;
92
+
PaperDivider { }
51
93
52
-
Text {
53
-
text: "volume";
54
-
font-size: Theme.font_label;
55
-
color: Theme.ink-mid;
56
-
vertical-alignment: center;
57
-
}
94
+
// Open config folder row
95
+
config-ta := TouchArea {
96
+
height: 52px * Theme.font-scale;
97
+
accessible-role: AccessibleRole.button;
98
+
accessible-label: "Open configuration folder";
99
+
accessible-action-default => { root.open-config-dir(); }
100
+
clicked => { root.open-config-dir(); }
58
101
59
-
VolumeSlider {
60
-
value <=> root.sound-volume;
61
-
horizontal-stretch: 1;
62
-
}
102
+
Rectangle {
103
+
background: config-ta.has-hover ? Theme.tint : transparent;
104
+
animate background { duration: 120ms; }
63
105
64
-
Text {
65
-
text: "\{Math.round(root.sound-volume * 100)}%";
66
-
min-width: 44px * Theme.font-scale;
67
-
font-size: Theme.font_label;
68
-
font-weight: 600;
69
-
color: Theme.ink;
70
-
horizontal-alignment: right;
71
-
vertical-alignment: center;
72
-
}
73
-
}
106
+
HorizontalLayout {
107
+
padding-left: 16px * Theme.font-scale;
108
+
padding-right: 16px * Theme.font-scale;
109
+
spacing: 14px * Theme.font-scale;
110
+
alignment: center;
74
111
75
-
HorizontalLayout {
76
-
padding-top: 12px * Theme.font-scale;
77
-
padding-bottom: 10px * Theme.font-scale;
78
-
spacing: 24px * Theme.font-scale;
112
+
Rectangle {
113
+
width: 34px * Theme.font-scale;
114
+
height: 34px * Theme.font-scale;
115
+
border-radius: 8px * Theme.font-scale;
116
+
background: Theme.tint;
79
117
80
-
SettingLabel {
81
-
title: "Appearance";
82
-
}
118
+
Text {
119
+
text: "⊟";
120
+
font-size: 14px * Theme.font-scale;
121
+
color: Theme.ink-mid;
122
+
horizontal-alignment: center;
123
+
vertical-alignment: center;
124
+
}
125
+
}
83
126
84
-
Rectangle { horizontal-stretch: 1; }
127
+
Text {
128
+
horizontal-stretch: 1;
129
+
text: "Open configuration folder";
130
+
font-size: Theme.font_body;
131
+
font-weight: 500;
132
+
color: Theme.ink;
133
+
vertical-alignment: center;
134
+
}
85
135
86
-
ChipGroup {
87
-
labels: ["System", "Light", "Dark"];
88
-
selected-index: root.theme-mode;
89
-
selection-changed(i) => {
90
-
root.theme-mode = i;
91
-
root.theme-mode-changed(i);
136
+
Text {
137
+
text: "›";
138
+
font-size: 22px * Theme.font-scale;
139
+
color: Theme.ink-lo;
140
+
vertical-alignment: center;
141
+
}
142
+
}
143
+
}
92
144
}
93
145
}
94
146
}
95
147
148
+
Rectangle { height: 24px * Theme.font-scale; }
149
+
150
+
// ── Sensory experience ──────────────────────────────────────────────────
151
+
SectionHeading {
152
+
title: "Sensory experience";
153
+
description: "Adjust how ioma looks and sounds.";
154
+
}
155
+
156
+
Rectangle { height: 12px * Theme.font-scale; }
157
+
158
+
// Two-column row: Appearance + Text size
96
159
HorizontalLayout {
97
-
padding-top: 12px * Theme.font-scale;
98
-
padding-bottom: 10px * Theme.font-scale;
99
-
spacing: 24px * Theme.font-scale;
160
+
spacing: 10px * Theme.font-scale;
161
+
162
+
// Appearance card
163
+
Rectangle {
164
+
horizontal-stretch: 1;
165
+
border-radius: 10px * Theme.font-scale;
166
+
background: Theme.surface;
167
+
border-width: 1px;
168
+
border-color: Theme.line;
169
+
170
+
VerticalLayout {
171
+
padding: 14px * Theme.font-scale;
172
+
spacing: 12px * Theme.font-scale;
173
+
174
+
Text {
175
+
text: "Appearance";
176
+
font-size: Theme.font_label;
177
+
font-weight: 600;
178
+
color: Theme.ink;
179
+
}
180
+
181
+
HorizontalLayout {
182
+
spacing: 6px * Theme.font-scale;
183
+
alignment: start;
184
+
185
+
// Light chip (index 1)
186
+
Rectangle {
187
+
width: 36px * Theme.font-scale;
188
+
height: 36px * Theme.font-scale;
189
+
border-radius: 8px * Theme.font-scale;
190
+
background: root.theme-mode == 1 ? Theme.btn-bg : (light-ta.has-hover ? Theme.surface-hov : transparent);
191
+
border-width: 1px;
192
+
border-color: root.theme-mode == 1 ? transparent : Theme.line;
193
+
animate background { duration: 120ms; }
194
+
accessible-role: AccessibleRole.radio-button;
195
+
accessible-label: "Light theme";
196
+
accessible-checked: root.theme-mode == 1;
197
+
accessible-action-default => { root.theme-mode = 1; root.theme-mode-changed(1); }
100
198
101
-
SettingLabel {
102
-
title: "Text size";
199
+
light-ta := TouchArea {
200
+
clicked => { root.theme-mode = 1; root.theme-mode-changed(1); }
201
+
}
202
+
203
+
Text {
204
+
text: "☀";
205
+
font-size: 16px * Theme.font-scale;
206
+
color: root.theme-mode == 1 ? Theme.btn-fg : Theme.ink;
207
+
horizontal-alignment: center;
208
+
vertical-alignment: center;
209
+
}
210
+
}
211
+
212
+
// Dark chip (index 2)
213
+
Rectangle {
214
+
width: 36px * Theme.font-scale;
215
+
height: 36px * Theme.font-scale;
216
+
border-radius: 8px * Theme.font-scale;
217
+
background: root.theme-mode == 2 ? Theme.btn-bg : (dark-ta.has-hover ? Theme.surface-hov : transparent);
218
+
border-width: 1px;
219
+
border-color: root.theme-mode == 2 ? transparent : Theme.line;
220
+
animate background { duration: 120ms; }
221
+
accessible-role: AccessibleRole.radio-button;
222
+
accessible-label: "Dark theme";
223
+
accessible-checked: root.theme-mode == 2;
224
+
accessible-action-default => { root.theme-mode = 2; root.theme-mode-changed(2); }
225
+
226
+
dark-ta := TouchArea {
227
+
clicked => { root.theme-mode = 2; root.theme-mode-changed(2); }
228
+
}
229
+
230
+
Text {
231
+
text: "☾";
232
+
font-size: 16px * Theme.font-scale;
233
+
color: root.theme-mode == 2 ? Theme.btn-fg : Theme.ink;
234
+
horizontal-alignment: center;
235
+
vertical-alignment: center;
236
+
}
237
+
}
238
+
239
+
// System chip (index 0)
240
+
Rectangle {
241
+
width: 36px * Theme.font-scale;
242
+
height: 36px * Theme.font-scale;
243
+
border-radius: 8px * Theme.font-scale;
244
+
background: root.theme-mode == 0 ? Theme.btn-bg : (sys-ta.has-hover ? Theme.surface-hov : transparent);
245
+
border-width: 1px;
246
+
border-color: root.theme-mode == 0 ? transparent : Theme.line;
247
+
animate background { duration: 120ms; }
248
+
accessible-role: AccessibleRole.radio-button;
249
+
accessible-label: "System theme";
250
+
accessible-checked: root.theme-mode == 0;
251
+
accessible-action-default => { root.theme-mode = 0; root.theme-mode-changed(0); }
252
+
253
+
sys-ta := TouchArea {
254
+
clicked => { root.theme-mode = 0; root.theme-mode-changed(0); }
255
+
}
256
+
257
+
Text {
258
+
text: "◑";
259
+
font-size: 16px * Theme.font-scale;
260
+
color: root.theme-mode == 0 ? Theme.btn-fg : Theme.ink;
261
+
horizontal-alignment: center;
262
+
vertical-alignment: center;
263
+
}
264
+
}
265
+
}
266
+
}
103
267
}
104
268
105
-
Rectangle { horizontal-stretch: 1; }
269
+
// Text size card
270
+
Rectangle {
271
+
horizontal-stretch: 1;
272
+
border-radius: 10px * Theme.font-scale;
273
+
background: Theme.surface;
274
+
border-width: 1px;
275
+
border-color: Theme.line;
106
276
107
-
PaperComboBox {
108
-
width: 140px * Theme.font-scale;
109
-
model: ["Compact", "Small", "Default", "Large", "Extra Large"];
110
-
selected-index: root.text-size-mode;
111
-
field-label: "Text size";
112
-
selection-changed(i) => {
113
-
root.text-size-mode = i;
114
-
root.text-size-mode-changed(i);
277
+
VerticalLayout {
278
+
padding: 14px * Theme.font-scale;
279
+
spacing: 12px * Theme.font-scale;
280
+
281
+
Text {
282
+
text: "Text size";
283
+
font-size: Theme.font_label;
284
+
font-weight: 600;
285
+
color: Theme.ink;
286
+
}
287
+
288
+
// T− [value] T+ stepper
289
+
HorizontalLayout {
290
+
height: 36px * Theme.font-scale;
291
+
spacing: 0px;
292
+
alignment: center;
293
+
294
+
ts-dec := TouchArea {
295
+
width: 28px * Theme.font-scale;
296
+
accessible-role: AccessibleRole.button;
297
+
accessible-label: "Decrease text size";
298
+
accessible-action-default => {
299
+
if root.text-size-mode > 0 {
300
+
root.text-size-mode -= 1;
301
+
root.text-size-mode-changed(root.text-size-mode);
302
+
}
303
+
}
304
+
clicked => {
305
+
if root.text-size-mode > 0 {
306
+
root.text-size-mode -= 1;
307
+
root.text-size-mode-changed(root.text-size-mode);
308
+
}
309
+
}
310
+
311
+
Rectangle {
312
+
border-radius: 6px * Theme.font-scale;
313
+
background: ts-dec.has-hover ? Theme.tint : transparent;
314
+
animate background { duration: 120ms; }
315
+
316
+
Text {
317
+
text: "T";
318
+
font-size: 11px * Theme.font-scale;
319
+
font-weight: 500;
320
+
color: root.text-size-mode <= 0 ? Theme.ink-dis : Theme.ink-lo;
321
+
horizontal-alignment: center;
322
+
vertical-alignment: center;
323
+
animate color { duration: 120ms; }
324
+
}
325
+
}
326
+
}
327
+
328
+
Text {
329
+
horizontal-stretch: 1;
330
+
text: ["Compact", "Small", "Default", "Large", "X-Large"][root.text-size-mode];
331
+
font-size: Theme.font_xsmall;
332
+
font-weight: 500;
333
+
color: Theme.ink;
334
+
horizontal-alignment: center;
335
+
vertical-alignment: center;
336
+
}
337
+
338
+
ts-inc := TouchArea {
339
+
width: 28px * Theme.font-scale;
340
+
accessible-role: AccessibleRole.button;
341
+
accessible-label: "Increase text size";
342
+
accessible-action-default => {
343
+
if root.text-size-mode < 4 {
344
+
root.text-size-mode += 1;
345
+
root.text-size-mode-changed(root.text-size-mode);
346
+
}
347
+
}
348
+
clicked => {
349
+
if root.text-size-mode < 4 {
350
+
root.text-size-mode += 1;
351
+
root.text-size-mode-changed(root.text-size-mode);
352
+
}
353
+
}
354
+
355
+
Rectangle {
356
+
border-radius: 6px * Theme.font-scale;
357
+
background: ts-inc.has-hover ? Theme.tint : transparent;
358
+
animate background { duration: 120ms; }
359
+
360
+
Text {
361
+
text: "T";
362
+
font-size: 18px * Theme.font-scale;
363
+
font-weight: 500;
364
+
color: root.text-size-mode >= 4 ? Theme.ink-dis : Theme.ink-lo;
365
+
horizontal-alignment: center;
366
+
vertical-alignment: center;
367
+
animate color { duration: 120ms; }
368
+
}
369
+
}
370
+
}
371
+
}
115
372
}
116
373
}
117
374
}
118
375
119
-
Rectangle { height: 28px * Theme.font-scale; }
376
+
Rectangle { height: 10px * Theme.font-scale; }
377
+
378
+
// Chime card
379
+
Rectangle {
380
+
border-radius: 10px * Theme.font-scale;
381
+
background: Theme.surface;
382
+
border-width: 1px;
383
+
border-color: Theme.line;
384
+
clip: true;
385
+
386
+
VerticalLayout {
387
+
// Chime toggle row
388
+
HorizontalLayout {
389
+
height: 66px * Theme.font-scale;
390
+
padding-left: 16px * Theme.font-scale;
391
+
padding-right: 16px * Theme.font-scale;
392
+
spacing: 14px * Theme.font-scale;
393
+
alignment: center;
394
+
395
+
// Accent icon badge
396
+
Rectangle {
397
+
width: 36px * Theme.font-scale;
398
+
height: 36px * Theme.font-scale;
399
+
border-radius: 9px * Theme.font-scale;
400
+
background: Theme.accent-muted;
401
+
402
+
Text {
403
+
text: "♪";
404
+
font-size: 16px * Theme.font-scale;
405
+
color: Theme.accent;
406
+
horizontal-alignment: center;
407
+
vertical-alignment: center;
408
+
}
409
+
}
410
+
411
+
VerticalLayout {
412
+
horizontal-stretch: 1;
413
+
alignment: center;
414
+
spacing: 2px;
415
+
416
+
Text {
417
+
text: "Gentle chime";
418
+
font-size: Theme.font_body;
419
+
font-weight: 500;
420
+
color: Theme.ink;
421
+
}
422
+
423
+
Text {
424
+
text: "Play a soft sound when a break starts";
425
+
font-size: Theme.font_xsmall;
426
+
color: Theme.ink-mid;
427
+
}
428
+
}
120
429
121
-
HorizontalLayout {
122
-
padding-top: 12px * Theme.font-scale;
123
-
padding-bottom: 10px * Theme.font-scale;
124
-
spacing: 24px * Theme.font-scale;
430
+
PaperToggle {
431
+
checked <=> root.sound-enabled;
432
+
label: "Gentle chime";
433
+
}
434
+
}
125
435
126
-
SettingLabel {
127
-
title: "Launch with system";
128
-
}
436
+
if root.sound-enabled: PaperDivider { }
129
437
130
-
Rectangle { horizontal-stretch: 1; }
438
+
if root.sound-enabled: HorizontalLayout {
439
+
height: 44px * Theme.font-scale;
440
+
padding-left: 16px * Theme.font-scale;
441
+
padding-right: 16px * Theme.font-scale;
442
+
spacing: 10px * Theme.font-scale;
443
+
alignment: center;
444
+
445
+
Text {
446
+
text: "○";
447
+
font-size: 12px * Theme.font-scale;
448
+
color: Theme.ink-lo;
449
+
vertical-alignment: center;
450
+
}
451
+
452
+
VolumeSlider {
453
+
value <=> root.sound-volume;
454
+
horizontal-stretch: 1;
455
+
}
456
+
457
+
Text {
458
+
text: "♪";
459
+
font-size: 17px * Theme.font-scale;
460
+
color: Theme.ink-lo;
461
+
vertical-alignment: center;
462
+
}
131
463
132
-
PaperToggle {
133
-
checked <=> root.autostart;
134
-
label: "Launch with system";
464
+
Text {
465
+
text: "\{Math.round(root.sound-volume * 100)}%";
466
+
min-width: 40px * Theme.font-scale;
467
+
font-size: Theme.font_label;
468
+
font-weight: 600;
469
+
color: Theme.ink;
470
+
horizontal-alignment: right;
471
+
vertical-alignment: center;
472
+
}
473
+
}
135
474
}
136
475
}
137
476
138
-
HorizontalLayout {
139
-
padding-top: 12px * Theme.font-scale;
140
-
padding-bottom: 4px * Theme.font-scale;
141
-
spacing: 24px * Theme.font-scale;
477
+
Rectangle { height: 24px * Theme.font-scale; }
142
478
143
-
SettingLabel {
144
-
title: "Reset after";
145
-
description: "Time away before resetting the long-rest cycle.";
146
-
}
479
+
// ── Behavior ────────────────────────────────────────────────────────────
480
+
SectionHeading {
481
+
title: "Behavior";
482
+
description: "Adjust how ioma handles inactivity.";
483
+
}
147
484
148
-
Rectangle { horizontal-stretch: 1; }
485
+
Rectangle { height: 12px * Theme.font-scale; }
486
+
487
+
Rectangle {
488
+
border-radius: 10px * Theme.font-scale;
489
+
background: Theme.surface;
490
+
border-width: 1px;
491
+
border-color: Theme.line;
149
492
150
493
HorizontalLayout {
151
-
spacing: 8px * Theme.font-scale;
152
-
alignment: start;
494
+
height: 66px * Theme.font-scale;
495
+
padding-left: 16px * Theme.font-scale;
496
+
padding-right: 16px * Theme.font-scale;
497
+
spacing: 14px * Theme.font-scale;
498
+
alignment: center;
153
499
154
-
NumberField {
155
-
width: 80px * Theme.font-scale;
156
-
value <=> root.long-break-gap-mins;
157
-
minimum: 1;
158
-
maximum: 120;
159
-
field-label: "idle reset threshold minutes";
500
+
Rectangle {
501
+
width: 34px * Theme.font-scale;
502
+
height: 34px * Theme.font-scale;
503
+
border-radius: 8px * Theme.font-scale;
504
+
background: Theme.tint;
505
+
506
+
Text {
507
+
text: "⟳";
508
+
font-size: 16px * Theme.font-scale;
509
+
color: Theme.ink-mid;
510
+
horizontal-alignment: center;
511
+
vertical-alignment: center;
512
+
}
160
513
}
161
514
162
-
Text {
163
-
text: "min away";
164
-
font-size: Theme.font_label;
165
-
color: Theme.ink-mid;
166
-
vertical-alignment: center;
515
+
VerticalLayout {
516
+
horizontal-stretch: 1;
517
+
alignment: center;
518
+
spacing: 2px;
519
+
520
+
Text {
521
+
text: "Reset cycle after idle";
522
+
font-size: Theme.font_body;
523
+
font-weight: 500;
524
+
color: Theme.ink;
525
+
}
526
+
527
+
Text {
528
+
text: "Time away before resetting the long-rest cycle.";
529
+
font-size: Theme.font_xsmall;
530
+
color: Theme.ink-mid;
531
+
}
167
532
}
168
-
}
169
-
}
533
+
534
+
HorizontalLayout {
535
+
spacing: 6px * Theme.font-scale;
536
+
alignment: center;
170
537
171
-
HorizontalLayout {
172
-
padding-bottom: 12px * Theme.font-scale;
538
+
NumberField {
539
+
width: 80px * Theme.font-scale;
540
+
value <=> root.long-break-gap-mins;
541
+
minimum: 1;
542
+
maximum: 120;
543
+
field-label: "idle reset threshold minutes";
544
+
}
173
545
174
-
PaperButton {
175
-
text: "Open config file location";
176
-
clicked => { root.open-config-dir(); }
546
+
Text {
547
+
text: "min";
548
+
font-size: Theme.font_label;
549
+
color: Theme.ink-mid;
550
+
vertical-alignment: center;
551
+
}
552
+
}
177
553
}
178
554
}
179
555
+7
-3
ui/views/rhythm_tab.slint
+7
-3
ui/views/rhythm_tab.slint
···
238
238
239
239
Rectangle { horizontal-stretch: 1; }
240
240
241
-
PaperButton {
242
-
text: root.password-is-set ? "Change password…" : "Set password…";
243
-
clicked => { root.set-password-clicked(); }
241
+
VerticalLayout {
242
+
alignment: LayoutAlignment.center;
243
+
244
+
PaperButton {
245
+
text: root.password-is-set ? "Change password…" : "Set password…";
246
+
clicked => { root.set-password-clicked(); }
247
+
}
244
248
}
245
249
}
246
250