openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ux): improve microinteractions across the app

Browse Source 
1. Nav-item tap: smooth scale transition instead of abrupt snap
2. Custom toggle switch: iOS-style toggle replaces native checkboxes
3. Focus-visible: outline on cards, buttons, FABs for keyboard users
4. Empty-state: gentle fade-in animation
5. Toast icons: SVG icons for success/danger/warning types
6. Swipe haptic: vibrate(15) fires at threshold during touchmove
This commit is contained in:
Ulas
2026-04-04 07:25:54 +02:00
parent db60279f87
commit 38c5852c78
8 changed files with 147 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/router.js
+13 -1
View File
@@ -391,15 +391,27 @@ function renderError(container, err) {
* @param {'default'|'success'|'danger'|'warning'} type
* @param {number} duration - ms
*/
const TOAST_ICONS = {
success: '<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
danger: '<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
warning: '<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
};
function showToast(message, type = 'default', duration = 3000) {
const container = document.getElementById('toast-container');
if (!container) return;
const toast = document.createElement('div');
toast.className = `toast ${type !== 'default' ? `toast--${type}` : ''}`;
toast.textContent = message;
toast.setAttribute('role', 'alert');
// Icon: statische SVGs aus TOAST_ICONS (kein User-Input, kein XSS-Risiko)
const icon = TOAST_ICONS[type] || '';
const span = document.createElement('span');
span.textContent = message;
toast.innerHTML = icon; // eslint-disable-line no-unsanitized/property -- static SVG only
toast.appendChild(span);
container.appendChild(toast);
setTimeout(() => {
toast.classList.add('toast--out');