Phase 3a Frontend-Hygiene: Toast statt alert/confirm
- src/static/css/style.css: Toast-Styles (.toast-container, .toast,
Varianten info/success/warning/error, Animations)
- src/static/dashboard.html: <div id=toastContainer> vor </body>,
Cancel-Button im Confirm-Modal bekommt id=confirmCancelBtn
- src/static/js/app.js:
- showToast(msg, type) neu - links oben, autoclose 3.5s (error: 6s)
- showConfirm(title, text, callback?) jetzt Promise<boolean>-fähig
(Backwards-compat: Legacy-Callback wird bei OK weiter aufgerufen)
- Cancel/Close-Hooks am modalConfirm setzen Promise auf false
- alle 18 alert() in app.js / source-health.js / sources.js durch
showToast(msg, type) ersetzt (type je nach Kontext error/success/warning/info)
- 2 confirm() in source-health.js durch await showConfirm() ersetzt
Dieser Commit ist enthalten in:
@@ -790,3 +790,44 @@ tr:hover td {
|
||||
.audit-diff .diff-new { color: #2ecc71; word-break: break-word; }
|
||||
.token-budget-bar.over-limit { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 6px, #962d22 6px, #962d22 12px); }
|
||||
input[type="date"].filter-select { padding: 6px 10px; }
|
||||
|
||||
/* === Toast-Notifications (Phase 3) === */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-width: 380px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-left-width: 4px;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: auto;
|
||||
animation: toast-in 0.18s ease-out;
|
||||
}
|
||||
.toast.toast-out {
|
||||
animation: toast-out 0.18s ease-in forwards;
|
||||
}
|
||||
.toast-info { border-left-color: #3b82f6; }
|
||||
.toast-success { border-left-color: #10b981; }
|
||||
.toast-warning { border-left-color: #f59e0b; }
|
||||
.toast-error { border-left-color: #ef4444; }
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@keyframes toast-out {
|
||||
from { opacity: 1; transform: translateX(0); }
|
||||
to { opacity: 0; transform: translateX(20px); }
|
||||
}
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren