a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): reposition interval index number

*chef kiss*

+43 -14
+43 -14
ui/components/interval_card.slint
··· 32 32 // Top padding: centers X vertically in TouchArea, also aligns index + label tops 33 33 property <length> tp: (th - fh) / 2; 34 34 35 + // Gap between sTypo line box top and numeral glyph top 36 + // (sTypoAscender - yMax) / UPM = (880 - 735) / 1000 = 0.145 37 + property <length> index-offset: Theme.font_headline * 0.165; 38 + 35 39 Rectangle { 36 40 border-radius: 8px; 37 41 background: Theme.surface; ··· 42 46 HorizontalLayout { 43 47 padding-left: 18px; 44 48 padding-right: tw; 45 - padding-top: tp; 49 + padding-top: tp - index-offset; 46 50 padding-bottom: 12px; 47 51 spacing: 18px; 48 52 49 53 // Index column — glyph bounding box top at y=tp 50 54 VerticalLayout { 51 - width: 20px; 55 + width: 20px * Theme.font-scale; 52 56 53 57 Text { 54 58 text: root.index; ··· 62 66 63 67 VerticalLayout { 64 68 spacing: 8px; 69 + padding-top: index-offset; 65 70 66 71 HorizontalLayout { 67 72 spacing: 8px; ··· 71 76 text: root.label; 72 77 placeholder-text: "break name"; 73 78 field-label: "break label"; 74 - edited(v) => { root.label-changed(v); } 79 + edited(v) => { 80 + root.label-changed(v); 81 + } 75 82 } 76 83 77 - Rectangle { horizontal-stretch: 1; } 84 + Rectangle { 85 + horizontal-stretch: 1; 86 + } 78 87 } 79 88 80 89 HorizontalLayout { 81 90 spacing: 8px; 82 91 alignment: start; 83 92 84 - Rectangle { width: 4px; } 93 + Rectangle { 94 + width: 4px; 95 + } 85 96 86 97 Text { 87 98 text: "every"; ··· 96 107 minimum: 1; 97 108 maximum: 240; 98 109 field-label: "work interval minutes"; 99 - edited(v) => { root.work-mins-changed(v); } 110 + edited(v) => { 111 + root.work-mins-changed(v); 112 + } 100 113 } 101 114 102 115 Text { ··· 112 125 minimum: 0; 113 126 maximum: 120; 114 127 field-label: "break minutes"; 115 - edited(v) => { root.break-mins-changed(v); } 128 + edited(v) => { 129 + root.break-mins-changed(v); 130 + } 116 131 } 117 132 118 133 Text { ··· 128 143 minimum: 0; 129 144 maximum: 59; 130 145 field-label: "break seconds"; 131 - edited(v) => { root.break-secs-changed(v); } 146 + edited(v) => { 147 + root.break-secs-changed(v); 148 + } 132 149 } 133 150 134 151 Text { ··· 150 167 accessible-role: button; 151 168 accessible-item-selectable: false; 152 169 accessible-label: "Remove interval"; 153 - clicked => { root.remove-clicked(); } 170 + clicked => { 171 + root.remove-clicked(); 172 + } 154 173 155 174 Text { 156 175 text: "×"; ··· 181 200 // Same top padding as IntervalCard for visual alignment 182 201 property <length> tp: (44px * Theme.font-scale - Theme.font_medium * 1.364) / 2; 183 202 203 + // Same index offset as IntervalCard 204 + property <length> index-offset: Theme.font_headline * 0.165; 205 + 184 206 Rectangle { 185 207 border-radius: 8px; 186 208 background: Theme.surface; ··· 190 212 HorizontalLayout { 191 213 padding-left: 18px; 192 214 padding-right: 14px; 193 - padding-top: tp; 215 + padding-top: tp - index-offset; 194 216 padding-bottom: 12px; 195 217 spacing: 18px; 196 218 197 219 // Index column — matches IntervalCard 198 220 VerticalLayout { 199 - width: 20px; 221 + width: 20px * Theme.font-scale; 200 222 201 223 Text { 202 224 text: root.index; ··· 210 232 211 233 VerticalLayout { 212 234 spacing: 8px; 235 + padding-top: index-offset; 213 236 214 237 HorizontalLayout { 215 238 spacing: 8px; ··· 219 242 text: root.label; 220 243 placeholder-text: "Long rest"; 221 244 field-label: "long rest label"; 222 - edited(v) => { root.label-changed(v); } 245 + edited(v) => { 246 + root.label-changed(v); 247 + } 223 248 } 224 249 225 - Rectangle { horizontal-stretch: 1; } 250 + Rectangle { 251 + horizontal-stretch: 1; 252 + } 226 253 } 227 254 228 255 HorizontalLayout { ··· 231 258 opacity: root.enabled ? 1.0 : 0.35; 232 259 animate opacity { duration: 120ms; } 233 260 234 - Rectangle { width: 4px; } 261 + Rectangle { 262 + width: 4px; 263 + } 235 264 236 265 Text { 237 266 text: "every";