a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): refines profile tab alignments, sizes
+140
-117
+140
-117
ui/views/profile_tab.slint
+140
-117
ui/views/profile_tab.slint
···
267
267
VerticalLayout {
268
268
// Chime toggle row
269
269
HorizontalLayout {
270
-
height: 66px * Theme.font-scale;
271
-
padding-left: 16px * Theme.font-scale;
272
-
padding-right: 16px * Theme.font-scale;
273
-
spacing: 14px * Theme.font-scale;
274
-
alignment: center;
270
+
padding: 20px * Theme.font-scale;
271
+
spacing: 16px * Theme.font-scale;
272
+
273
+
VerticalLayout {
274
+
alignment: center;
275
275
276
-
Rectangle {
277
-
width: 36px * Theme.font-scale;
278
-
height: 36px * Theme.font-scale;
279
-
border-radius: 9px * Theme.font-scale;
280
-
background: Theme.accent-muted;
276
+
Rectangle {
277
+
width: 40px * Theme.font-scale;
278
+
height: 40px * Theme.font-scale;
279
+
border-radius: 10px * Theme.font-scale;
280
+
background: root.sound-enabled ? Theme.accent-muted : Theme.tint;
281
+
animate background { duration: 120ms; }
281
282
282
-
Text {
283
-
text: "♪";
284
-
font-size: 16px * Theme.font-scale;
285
-
color: Theme.accent;
286
-
horizontal-alignment: center;
287
-
vertical-alignment: center;
283
+
Text {
284
+
text: "♪";
285
+
font-size: 18px * Theme.font-scale;
286
+
color: root.sound-enabled ? Theme.accent : Theme.ink-lo;
287
+
horizontal-alignment: center;
288
+
vertical-alignment: center;
289
+
animate color { duration: 120ms; }
290
+
}
288
291
}
289
292
}
290
293
···
307
310
}
308
311
}
309
312
310
-
PaperToggle {
311
-
checked <=> root.sound-enabled;
312
-
label: "Gentle chime";
313
+
VerticalLayout {
314
+
alignment: center;
315
+
316
+
PaperToggle {
317
+
checked <=> root.sound-enabled;
318
+
label: "Gentle chime";
319
+
}
313
320
}
314
321
}
315
322
316
-
if root.sound-enabled: PaperDivider { }
323
+
if root.sound-enabled: VerticalLayout {
324
+
padding-bottom: 16px * Theme.font-scale;
317
325
318
-
if root.sound-enabled: HorizontalLayout {
319
-
height: 44px * Theme.font-scale;
320
-
padding-left: 16px * Theme.font-scale;
321
-
padding-right: 16px * Theme.font-scale;
322
-
spacing: 10px * Theme.font-scale;
323
-
alignment: center;
326
+
Rectangle { height: 8px * Theme.font-scale; }
327
+
328
+
PaperDivider { }
324
329
325
-
Text {
326
-
text: "○";
327
-
font-size: 12px * Theme.font-scale;
328
-
color: Theme.ink-lo;
329
-
vertical-alignment: center;
330
-
}
330
+
HorizontalLayout {
331
+
padding-left: 20px * Theme.font-scale;
332
+
padding-right: 20px * Theme.font-scale;
333
+
padding-top: 12px * Theme.font-scale;
334
+
spacing: 10px * Theme.font-scale;
335
+
336
+
Text {
337
+
text: "○";
338
+
font-size: 12px * Theme.font-scale;
339
+
color: Theme.ink-lo;
340
+
vertical-alignment: center;
341
+
}
331
342
332
-
VolumeSlider {
333
-
value <=> root.sound-volume;
334
-
horizontal-stretch: 1;
335
-
}
343
+
VolumeSlider {
344
+
value <=> root.sound-volume;
345
+
horizontal-stretch: 1;
346
+
}
336
347
337
-
Text {
338
-
text: "♪";
339
-
font-size: 17px * Theme.font-scale;
340
-
color: Theme.ink-lo;
341
-
vertical-alignment: center;
342
-
}
348
+
Text {
349
+
text: "♪";
350
+
font-size: 17px * Theme.font-scale;
351
+
color: Theme.ink-lo;
352
+
vertical-alignment: center;
353
+
}
343
354
344
-
Text {
345
-
text: "\{Math.round(root.sound-volume * 100)}%";
346
-
min-width: 40px * Theme.font-scale;
347
-
font-size: Theme.font_label;
348
-
font-weight: 600;
349
-
color: Theme.ink;
350
-
horizontal-alignment: right;
351
-
vertical-alignment: center;
355
+
Text {
356
+
text: "\{Math.round(root.sound-volume * 100)}%";
357
+
min-width: 40px * Theme.font-scale;
358
+
font-size: Theme.font_label;
359
+
font-weight: 400;
360
+
color: Theme.ink-mid;
361
+
horizontal-alignment: right;
362
+
vertical-alignment: center;
363
+
}
352
364
}
353
365
}
354
366
}
···
372
384
VerticalLayout {
373
385
// Autostart row
374
386
HorizontalLayout {
375
-
height: 60px * Theme.font-scale;
376
-
padding-left: 16px * Theme.font-scale;
377
-
padding-right: 16px * Theme.font-scale;
378
-
spacing: 14px * Theme.font-scale;
379
-
alignment: center;
387
+
padding: 20px * Theme.font-scale;
388
+
spacing: 16px * Theme.font-scale;
389
+
390
+
VerticalLayout {
391
+
alignment: center;
380
392
381
-
Rectangle {
382
-
width: 34px * Theme.font-scale;
383
-
height: 34px * Theme.font-scale;
384
-
border-radius: 8px * Theme.font-scale;
385
-
background: Theme.surface;
393
+
Rectangle {
394
+
width: 40px * Theme.font-scale;
395
+
height: 40px * Theme.font-scale;
396
+
border-radius: 10px * Theme.font-scale;
397
+
background: Theme.surface;
386
398
387
-
Text {
388
-
text: "▶";
389
-
font-size: 11px * Theme.font-scale;
390
-
color: Theme.ink-mid;
391
-
horizontal-alignment: center;
392
-
vertical-alignment: center;
399
+
Text {
400
+
text: "▶";
401
+
font-size: 14px * Theme.font-scale;
402
+
color: Theme.ink-mid;
403
+
horizontal-alignment: center;
404
+
vertical-alignment: center;
405
+
}
393
406
}
394
407
}
395
408
···
412
425
}
413
426
}
414
427
415
-
PaperToggle {
416
-
checked <=> root.autostart;
417
-
label: "Start quietly at login";
428
+
VerticalLayout {
429
+
alignment: center;
430
+
431
+
PaperToggle {
432
+
checked <=> root.autostart;
433
+
label: "Start quietly at login";
434
+
}
418
435
}
419
436
}
420
437
···
422
439
423
440
// Open config folder row
424
441
config-ta := TouchArea {
425
-
height: 52px * Theme.font-scale;
426
442
accessible-role: AccessibleRole.button;
427
443
accessible-label: "Open configuration folder";
428
444
accessible-action-default => { root.open-config-dir(); }
429
445
clicked => { root.open-config-dir(); }
430
446
431
447
Rectangle {
432
-
background: config-ta.has-hover ? Theme.tint : transparent;
448
+
background: config-ta.has-hover ? Theme.surface : transparent;
433
449
animate background { duration: 120ms; }
434
450
435
451
HorizontalLayout {
436
-
padding-left: 16px * Theme.font-scale;
437
-
padding-right: 16px * Theme.font-scale;
438
-
spacing: 14px * Theme.font-scale;
439
-
alignment: center;
452
+
padding: 20px * Theme.font-scale;
453
+
spacing: 16px * Theme.font-scale;
440
454
441
-
Rectangle {
442
-
width: 34px * Theme.font-scale;
443
-
height: 34px * Theme.font-scale;
444
-
border-radius: 8px * Theme.font-scale;
445
-
background: Theme.surface;
455
+
VerticalLayout {
456
+
alignment: center;
446
457
447
-
Text {
448
-
text: "⊟";
449
-
font-size: 14px * Theme.font-scale;
450
-
color: Theme.ink-mid;
451
-
horizontal-alignment: center;
452
-
vertical-alignment: center;
458
+
Rectangle {
459
+
width: 40px * Theme.font-scale;
460
+
height: 40px * Theme.font-scale;
461
+
border-radius: 10px * Theme.font-scale;
462
+
background: Theme.surface;
463
+
464
+
Text {
465
+
text: "⊟";
466
+
font-size: 16px * Theme.font-scale;
467
+
color: Theme.ink-mid;
468
+
horizontal-alignment: center;
469
+
vertical-alignment: center;
470
+
}
453
471
}
454
472
}
455
473
···
458
476
text: "Open configuration folder";
459
477
font-size: Theme.font_body;
460
478
font-weight: 500;
461
-
color: Theme.ink;
479
+
color: config-ta.has-hover ? Theme.accent : Theme.ink;
462
480
vertical-alignment: center;
481
+
animate color { duration: 120ms; }
463
482
}
464
483
465
484
Text {
···
489
508
background: Theme.panel;
490
509
491
510
HorizontalLayout {
492
-
height: 66px * Theme.font-scale;
493
-
padding-left: 16px * Theme.font-scale;
494
-
padding-right: 16px * Theme.font-scale;
495
-
spacing: 14px * Theme.font-scale;
496
-
alignment: center;
511
+
padding: 20px * Theme.font-scale;
512
+
spacing: 16px * Theme.font-scale;
497
513
498
-
Rectangle {
499
-
width: 34px * Theme.font-scale;
500
-
height: 34px * Theme.font-scale;
501
-
border-radius: 8px * Theme.font-scale;
502
-
background: Theme.surface;
514
+
VerticalLayout {
515
+
alignment: center;
503
516
504
-
Text {
505
-
text: "⟳";
506
-
font-size: 16px * Theme.font-scale;
507
-
color: Theme.ink-mid;
508
-
horizontal-alignment: center;
509
-
vertical-alignment: center;
517
+
Rectangle {
518
+
width: 40px * Theme.font-scale;
519
+
height: 40px * Theme.font-scale;
520
+
border-radius: 10px * Theme.font-scale;
521
+
background: Theme.surface;
522
+
523
+
Text {
524
+
text: "⟳";
525
+
font-size: 18px * Theme.font-scale;
526
+
color: Theme.ink-mid;
527
+
horizontal-alignment: center;
528
+
vertical-alignment: center;
529
+
}
510
530
}
511
531
}
512
532
···
529
549
}
530
550
}
531
551
532
-
HorizontalLayout {
533
-
spacing: 6px * Theme.font-scale;
552
+
VerticalLayout {
534
553
alignment: center;
535
554
536
-
NumberField {
537
-
width: 80px * Theme.font-scale;
538
-
value <=> root.long-break-gap-mins;
539
-
minimum: 1;
540
-
maximum: 120;
541
-
field-label: "idle reset threshold minutes";
542
-
}
555
+
HorizontalLayout {
556
+
spacing: 6px * Theme.font-scale;
557
+
558
+
NumberField {
559
+
width: 80px * Theme.font-scale;
560
+
value <=> root.long-break-gap-mins;
561
+
minimum: 1;
562
+
maximum: 120;
563
+
field-label: "idle reset threshold minutes";
564
+
}
543
565
544
-
Text {
545
-
text: "min";
546
-
font-size: Theme.font_label;
547
-
color: Theme.ink-mid;
548
-
vertical-alignment: center;
566
+
Text {
567
+
text: "min";
568
+
font-size: Theme.font_label;
569
+
color: Theme.ink-mid;
570
+
vertical-alignment: center;
571
+
}
549
572
}
550
573
}
551
574
}