fix(ux): replace native confirm() dialogs, add undo-toast, fix prefers-reduced-motion
- Replace all 13 native confirm() calls with confirmModal() across 7 page modules - Add confirmModal() to modal.js (Promise-based, danger variant, focus management) - Fix double-confirm bug in contacts.js and budget.js (modal + deleteContact/deleteEntry) - Extend showToast() with onUndo callback and max-3-toast limit - Implement optimistic undo-toast (4s window) for shopping item and bulk-checked delete - Add prefers-reduced-motion guard to btnSuccess() and btnError() in modal.js - Add btn--error-static CSS class as motion-reduced fallback for btnError() - Add toast__undo button styles to layout.css - Add common.confirm and common.undo i18n keys (de, en, it, sv) - Add shopping.itemDeletedToast i18n key (de, en, it, sv)
This commit is contained in:
@@ -1366,6 +1366,25 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.toast__undo {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: transparent;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: var(--radius-sm);
|
||||
color: inherit;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.toast__undo:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast--success { background-color: var(--color-success); color: var(--color-text-on-accent); }
|
||||
.toast--danger { background-color: var(--color-danger); color: var(--color-text-on-accent); }
|
||||
.toast--warning { background-color: var(--color-warning); color: var(--color-text-on-accent); }
|
||||
@@ -1491,6 +1510,13 @@
|
||||
animation: btn-shake 0.3s ease;
|
||||
}
|
||||
|
||||
/* prefers-reduced-motion: kein Schütteln, nur Farb-Feedback */
|
||||
.btn--error-static {
|
||||
background-color: var(--color-danger) !important;
|
||||
color: var(--color-text-on-accent) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn--success {
|
||||
background-color: var(--color-success) !important;
|
||||
color: var(--color-text-on-accent) !important;
|
||||
|
||||
Reference in New Issue
Block a user