byarielm.fyi / ioma
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.

feat(ay11): add keyboard and focus to buttons, tabs, and input fields

Ariel M. Lighty 36f62020 bddd04c5

+125 -43
+85 -23
ui/components/buttons.slint
··· 53 53 in property <string> text; 54 54 callback clicked; 55 55 56 - height: 30px * Theme.font-scale; 57 - min-width: 72px; 56 + height: 44px * Theme.font-scale; 57 + min-width: 88px; 58 + 59 + accessible-role: AccessibleRole.button; 60 + accessible-label: root.text; 61 + accessible-action-default => { root.clicked(); } 62 + 63 + fs := FocusScope { 64 + key-pressed(event) => { 65 + if event.text == " " || event.text == Key.Return { 66 + root.clicked(); 67 + return EventResult.accept; 68 + } 69 + EventResult.reject 70 + } 71 + } 58 72 59 73 ta := TouchArea { 60 74 clicked => { 75 + fs.focus(); 61 76 root.clicked(); 62 77 } 63 78 } ··· 65 80 Rectangle { 66 81 border-radius: 6px; 67 82 background: ta.has-hover ? Theme.btn-bg-hov : Theme.btn-bg; 83 + border-width: 1px; 84 + border-color: fs.has-focus ? Theme.accent-muted : transparent; 68 85 animate background { duration: 120ms; } 86 + animate border-color { duration: 120ms; } 69 87 70 88 Text { 71 89 text: root.text; ··· 83 101 in property <string> text; 84 102 callback clicked; 85 103 86 - height: 30px * Theme.font-scale; 87 - min-width: 72px; 104 + height: 44px * Theme.font-scale; 105 + min-width: 88px; 106 + 107 + accessible-role: AccessibleRole.button; 108 + accessible-label: root.text; 109 + accessible-action-default => { root.clicked(); } 110 + 111 + fs := FocusScope { 112 + key-pressed(event) => { 113 + if event.text == " " || event.text == Key.Return { 114 + root.clicked(); 115 + return EventResult.accept; 116 + } 117 + EventResult.reject 118 + } 119 + } 88 120 89 121 ta := TouchArea { 90 122 clicked => { 123 + fs.focus(); 91 124 root.clicked(); 92 125 } 93 126 } 94 127 95 128 Rectangle { 96 129 border-radius: 6px; 97 - background: transparent; 130 + background: ta.has-hover ? Theme.tint-soft : transparent; 98 131 border-width: 1px; 99 - border-color: Theme.line; 132 + border-color: fs.has-focus ? Theme.accent-muted : Theme.line; 133 + animate background { duration: 120ms; } 134 + animate border-color { duration: 120ms; } 100 135 101 136 Text { 102 137 text: root.text; ··· 114 149 in property <bool> active: false; 115 150 callback clicked; 116 151 117 - height: 40px * Theme.font-scale; 118 - min-width: 64px; 152 + height: 44px * Theme.font-scale; 153 + min-width: 76px; 119 154 120 - TouchArea { 155 + accessible-role: AccessibleRole.button; 156 + accessible-label: root.text + " tab"; 157 + accessible-action-default => { root.clicked(); } 158 + 159 + fs := FocusScope { 160 + key-pressed(event) => { 161 + if event.text == " " || event.text == Key.Return { 162 + root.clicked(); 163 + return EventResult.accept; 164 + } 165 + EventResult.reject 166 + } 167 + } 168 + 169 + ta := TouchArea { 121 170 clicked => { 171 + fs.focus(); 122 172 root.clicked(); 123 173 } 124 174 } 125 175 126 - VerticalLayout { 127 - padding-bottom: 0px; 176 + Rectangle { 177 + border-radius: 6px; 178 + background: ta.has-hover ? Theme.tint-soft : transparent; 179 + border-width: 1px; 180 + border-color: fs.has-focus ? Theme.accent-muted : transparent; 181 + animate background { duration: 120ms; } 182 + animate border-color { duration: 120ms; } 128 183 129 - Text { 130 - text: root.text; 131 - font-size: Theme.font_body; 132 - font-weight: root.active ? 600 : 400; 133 - color: root.active ? Theme.ink : Theme.ink-mid; 134 - horizontal-alignment: left; 135 - vertical-alignment: center; 136 - } 184 + VerticalLayout { 185 + padding-left: 6px; 186 + padding-right: 6px; 187 + padding-top: 4px; 188 + padding-bottom: 0px; 189 + 190 + Text { 191 + text: root.text; 192 + font-size: Theme.font_body; 193 + font-weight: root.active ? 600 : 400; 194 + color: root.active ? Theme.ink : Theme.ink-mid; 195 + horizontal-alignment: left; 196 + vertical-alignment: center; 197 + } 137 198 138 - // Active indicator 139 - Rectangle { 140 - height: 2px; 141 - background: root.active ? Theme.ink : transparent; 199 + // Active indicator 200 + Rectangle { 201 + height: 2px; 202 + background: root.active ? Theme.ink : transparent; 203 + } 142 204 } 143 205 } 144 206 }
+29 -20
ui/components/inputs.slint
··· 183 183 in-out property <float> value: 0.5; 184 184 185 185 min-width: 120px; 186 - height: 28px; 186 + height: 44px * Theme.font-scale; 187 + 188 + ta := TouchArea { 189 + accessible-role: slider; 190 + accessible-label: "Volume"; 191 + accessible-value: "\{Math.round(root.value * 100)}%"; 192 + accessible-value-minimum: 0; 193 + accessible-value-maximum: 100; 194 + moved => { 195 + if self.pressed { 196 + root.value = max(0.0, min(1.0, self.mouse-x / parent.width)); 197 + } 198 + } 199 + pointer-event(e) => { 200 + if e.kind == PointerEventKind.down { 201 + fs.focus(); 202 + root.value = max(0.0, min(1.0, self.mouse-x / parent.width)); 203 + } 204 + } 205 + } 206 + 207 + Rectangle { 208 + border-radius: 6px; 209 + background: ta.has-hover ? Theme.tint-soft : transparent; 210 + border-width: 1px; 211 + border-color: fs.has-focus ? Theme.accent-muted : transparent; 212 + animate background { duration: 120ms; } 213 + animate border-color { duration: 120ms; } 214 + } 187 215 188 216 Rectangle { 189 217 x: 0; ··· 229 257 return EventResult.accept; 230 258 } 231 259 EventResult.reject 232 - } 233 - } 234 - 235 - TouchArea { 236 - accessible-role: slider; 237 - accessible-label: "Volume"; 238 - accessible-value: "\{Math.round(root.value * 100)}%"; 239 - accessible-value-minimum: 0; 240 - accessible-value-maximum: 100; 241 - moved => { 242 - if self.pressed { 243 - root.value = max(0.0, min(1.0, self.mouse-x / parent.width)); 244 - } 245 - } 246 - pointer-event(e) => { 247 - if e.kind == PointerEventKind.down { 248 - fs.focus(); 249 - root.value = max(0.0, min(1.0, self.mouse-x / parent.width)); 250 - } 251 260 } 252 261 } 253 262 }
+11
ui/views/rhythm_tab.slint
··· 150 150 HorizontalLayout { 151 151 padding-bottom: 12px; 152 152 spacing: 12px; 153 + alignment: center; 153 154 154 155 Text { 155 156 text: "volume"; ··· 161 162 VolumeSlider { 162 163 value <=> root.sound-volume; 163 164 horizontal-stretch: 1; 165 + } 166 + 167 + Text { 168 + text: "\{Math.round(root.sound-volume * 100)}%"; 169 + min-width: 44px; 170 + font-size: Theme.font_label; 171 + font-weight: 600; 172 + color: Theme.ink; 173 + horizontal-alignment: right; 174 + vertical-alignment: center; 164 175 } 165 176 } 166 177