improvement: Add reset button to debug panel
Reset-Button gehört ins Debug-Panel (Testing-Feature): Changes: - Debug-Panel erweitert mit flexiblem Layout (flex-column) - 🔄 Reset-Button hinzugefügt (klickbar, hover-Effekt) - ✕ Close-Button für Panel (zum Schließen) - Bessere Styling: halbtransparente Buttons, klare Hover-States Reset ist nur während Testing nötig — gehört ins Debug-Panel, nicht in die Haupt-UI. Das 📦-Icon im Footer bleibt für verfügbare Updates. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
0a8bab24fb
commit
f284e36458
+73
-8
@@ -1265,25 +1265,90 @@ function showUpdateDebug(){
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #0F766E;
|
||||
padding: 8px 12px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
max-width: 240px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
z-index: 999;
|
||||
border: 1px solid #0F766E;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
`;
|
||||
panel.title = 'Update Debug Panel – Klick zum Schließen';
|
||||
panel.title = 'Update Debug Panel – für Testing';
|
||||
document.body.appendChild(panel);
|
||||
panel.addEventListener('click', () => panel.remove());
|
||||
|
||||
/* Log-Text Container */
|
||||
const logText = document.createElement('div');
|
||||
logText.id = 'updateDebugLog';
|
||||
logText.style.cssText = `flex: 1; overflow-y: auto; cursor: auto;`;
|
||||
logText.addEventListener('click', e => e.stopPropagation());
|
||||
panel.appendChild(logText);
|
||||
|
||||
/* Reset-Button */
|
||||
const resetBtn = document.createElement('button');
|
||||
resetBtn.textContent = '🔄 Reset';
|
||||
resetBtn.title = 'App auf Defaults zurücksetzen (alle Einstellungen + Editor löschen)';
|
||||
resetBtn.style.cssText = `
|
||||
background: rgba(15, 118, 110, 0.2);
|
||||
border: 1px solid #0F766E;
|
||||
color: #0F766E;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
transition: all 0.2s ease;
|
||||
`;
|
||||
resetBtn.addEventListener('mouseenter', () => {
|
||||
resetBtn.style.background = 'rgba(15, 118, 110, 0.4)';
|
||||
});
|
||||
resetBtn.addEventListener('mouseleave', () => {
|
||||
resetBtn.style.background = 'rgba(15, 118, 110, 0.2)';
|
||||
});
|
||||
resetBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
resetToDefaults();
|
||||
});
|
||||
panel.appendChild(resetBtn);
|
||||
|
||||
/* Close-Button */
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.textContent = '✕ Close';
|
||||
closeBtn.style.cssText = `
|
||||
background: rgba(15, 118, 110, 0.2);
|
||||
border: 1px solid #0F766E;
|
||||
color: #0F766E;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
transition: all 0.2s ease;
|
||||
`;
|
||||
closeBtn.addEventListener('mouseenter', () => {
|
||||
closeBtn.style.background = 'rgba(15, 118, 110, 0.4)';
|
||||
});
|
||||
closeBtn.addEventListener('mouseleave', () => {
|
||||
closeBtn.style.background = 'rgba(15, 118, 110, 0.2)';
|
||||
});
|
||||
closeBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
panel.remove();
|
||||
});
|
||||
panel.appendChild(closeBtn);
|
||||
}
|
||||
|
||||
const log = localStorage.getItem('werkbaum-update-log') || '';
|
||||
panel.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge';
|
||||
const logText = panel.querySelector('#updateDebugLog');
|
||||
if(logText) {
|
||||
logText.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge';
|
||||
}
|
||||
}
|
||||
|
||||
/* Erste Prüfung nach 2 Sekunden */
|
||||
|
||||
Reference in New Issue
Block a user