a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): standarize component heights, font sizes, and widths
+71
-33
+14
-13
ui/components/inputs.slint
+14
-13
ui/components/inputs.slint
···
151
151
if root.text == "" && !ti.has-focus: Text {
152
152
x: 10px;
153
153
text: root.placeholder-text;
154
-
font-size: Theme.font_body;
154
+
font-size: Theme.font_label;
155
155
color: Theme.ink-dim;
156
156
vertical-alignment: center;
157
157
}
···
164
164
horizontal-stretch: 1;
165
165
enabled: root.enabled;
166
166
text <=> root.text;
167
-
font-size: Theme.font_xsmall;
167
+
font-size: Theme.font_label;
168
168
font-weight: 500;
169
169
color: Theme.ink;
170
170
horizontal-alignment: left;
···
267
267
in property <string> field-label: "";
268
268
callback selection-changed(int);
269
269
270
-
height: 24px * Theme.font-scale;
270
+
height: 32px * Theme.font-scale;
271
271
min-width: 80px;
272
272
273
273
accessible-role: combobox;
···
293
293
}
294
294
295
295
outer := Rectangle {
296
-
border-radius: 5px;
296
+
border-radius: 6px;
297
297
background: ta.has-hover ? Theme.surface-hov : Theme.surface;
298
298
border-width: 1px;
299
299
border-color: fs.has-focus ? Theme.accent-muted : Theme.line;
···
308
308
}
309
309
310
310
HorizontalLayout {
311
-
padding-left: 8px;
312
-
padding-right: 6px;
311
+
padding-left: 10px;
312
+
padding-right: 8px;
313
313
314
314
Text {
315
315
text: root.model[root.selected-index];
316
-
font-size: Theme.font_xsmall;
316
+
font-size: Theme.font_label;
317
+
font-weight: 500;
317
318
color: Theme.ink;
318
319
vertical-alignment: center;
319
320
horizontal-stretch: 1;
···
321
322
322
323
Text {
323
324
text: "▾";
324
-
font-size: 9px;
325
+
font-size: 10px;
325
326
color: Theme.ink-lo;
326
327
vertical-alignment: center;
327
328
}
···
330
331
popup := PopupWindow {
331
332
y: parent.height + 2px;
332
333
width: parent.width;
333
-
height: root.model.length * (26px * Theme.font-scale) + 6px;
334
+
height: root.model.length * (34px * Theme.font-scale) + 6px;
334
335
335
336
Rectangle {
336
337
background: Theme.bg;
···
347
348
spacing: 1px;
348
349
349
350
for item[i] in root.model: item-ta := TouchArea {
350
-
height: 26px * Theme.font-scale;
351
+
height: 34px * Theme.font-scale;
351
352
clicked => {
352
353
root.selection-changed(i);
353
354
popup.close();
···
360
361
animate background { duration: 80ms; }
361
362
362
363
HorizontalLayout {
363
-
padding-left: 8px;
364
-
padding-right: 8px;
364
+
padding-left: 10px;
365
+
padding-right: 10px;
365
366
366
367
Text {
367
368
text: item;
368
-
font-size: Theme.font_xsmall;
369
+
font-size: Theme.font_label;
369
370
font-weight: i == root.selected-index ? 600 : 400;
370
371
color: i == root.selected-index ? Theme.btn-fg : Theme.ink;
371
372
vertical-alignment: center;
+3
-3
ui/components/interval_card.slint
+3
-3
ui/components/interval_card.slint
···
100
100
}
101
101
102
102
NumberField {
103
-
width: 72px;
103
+
width: 80px;
104
104
value: root.break-mins;
105
105
minimum: 0;
106
106
maximum: 120;
···
116
116
}
117
117
118
118
NumberField {
119
-
width: 72px;
119
+
width: 80px;
120
120
value: root.break-secs;
121
121
minimum: 0;
122
122
maximum: 59;
···
252
252
}
253
253
254
254
NumberField {
255
-
width: 72px;
255
+
width: 80px;
256
256
value <=> root.duration-mins;
257
257
minimum: 1;
258
258
maximum: 120;
+52
-17
ui/settings.slint
+52
-17
ui/settings.slint
···
26
26
Theme.dark = root.is-dark;
27
27
Theme.font-scale = root.text-size-mode == 4 ? 1.3 : root.text-size-mode == 3 ? 1.15 : root.text-size-mode == 2 ? 1.0 : root.text-size-mode == 1 ? 0.9 : 0.8;
28
28
}
29
-
changed is-dark => { Theme.dark = root.is-dark; }
29
+
changed is-dark => {
30
+
Theme.dark = root.is-dark;
31
+
}
30
32
changed text-size-mode => {
31
33
Theme.font-scale = root.text-size-mode == 4 ? 1.3 : root.text-size-mode == 3 ? 1.15 : root.text-size-mode == 2 ? 1.0 : root.text-size-mode == 1 ? 0.9 : 0.8;
32
34
}
···
76
78
TabButton {
77
79
text: "Rhythm";
78
80
active: root.active-tab == "rhythm";
79
-
clicked => { root.active-tab = "rhythm"; }
81
+
clicked => {
82
+
root.active-tab = "rhythm";
83
+
}
80
84
}
81
85
82
86
TabButton {
83
87
text: "Preferences";
84
88
active: root.active-tab == "profile";
85
-
clicked => { root.active-tab = "profile"; }
89
+
clicked => {
90
+
root.active-tab = "profile";
91
+
}
86
92
}
87
93
88
94
TabButton {
89
95
text: "About";
90
96
active: root.active-tab == "about";
91
-
clicked => { root.active-tab = "about"; }
97
+
clicked => {
98
+
root.active-tab = "about";
99
+
}
92
100
}
93
101
94
-
Rectangle { horizontal-stretch: 1; }
102
+
Rectangle {
103
+
horizontal-stretch: 1;
104
+
}
95
105
}
96
106
97
-
Rectangle { height: 1px; background: Theme.line; }
107
+
Rectangle {
108
+
height: 1px;
109
+
background: Theme.line;
110
+
}
98
111
99
112
if root.active-tab == "rhythm": RhythmTab {
100
113
active-profile <=> root.active-profile;
···
109
122
idle-detection-enabled <=> root.idle-detection-enabled;
110
123
idle-threshold-mins <=> root.idle-threshold-mins;
111
124
password-is-set <=> root.password-is-set;
112
-
profile-changed(name) => { root.profile-changed(name); }
113
-
level-changed(i, entry) => { root.level-changed(i, entry); }
114
-
level-removed(i) => { root.level-removed(i); }
115
-
level-added => { root.level-added(); }
116
-
set-password-clicked => { root.set-password-clicked(); }
117
-
enforced-mode-toggled(checked) => { root.enforced-mode-toggled(checked); }
125
+
profile-changed(name) => {
126
+
root.profile-changed(name);
127
+
}
128
+
level-changed(i, entry) => {
129
+
root.level-changed(i, entry);
130
+
}
131
+
level-removed(i) => {
132
+
root.level-removed(i);
133
+
}
134
+
level-added => {
135
+
root.level-added();
136
+
}
137
+
set-password-clicked => {
138
+
root.set-password-clicked();
139
+
}
140
+
enforced-mode-toggled(checked) => {
141
+
root.enforced-mode-toggled(checked);
142
+
}
118
143
}
119
144
120
145
if root.active-tab == "profile": ProfileTab {
···
124
149
theme-mode <=> root.theme-mode;
125
150
text-size-mode <=> root.text-size-mode;
126
151
long-break-gap-mins <=> root.long-break-gap-mins;
127
-
open-config-dir => { root.open-config-dir(); }
128
-
theme-mode-changed(i) => { root.theme-mode-changed(i); }
129
-
text-size-mode-changed(i) => { root.text-size-mode-changed(i); }
152
+
open-config-dir => {
153
+
root.open-config-dir();
154
+
}
155
+
theme-mode-changed(i) => {
156
+
root.theme-mode-changed(i);
157
+
}
158
+
text-size-mode-changed(i) => {
159
+
root.text-size-mode-changed(i);
160
+
}
130
161
}
131
162
132
163
if root.active-tab == "about": AboutTab { }
133
164
134
165
DialogFooter {
135
-
cancel-clicked => { root.cancel-clicked(); }
136
-
save-clicked => { root.save-clicked(); }
166
+
cancel-clicked => {
167
+
root.cancel-clicked();
168
+
}
169
+
save-clicked => {
170
+
root.save-clicked();
171
+
}
137
172
}
138
173
}
139
174
}
+1
ui/views/profile_tab.slint
+1
ui/views/profile_tab.slint