refactor: Move update notification icon to footer
Statt Reset-Button im Footer: - 📦-Symbol rechts neben Version (nur wenn Update verfügbar) - Klick zeigt die Update-Benachrichtigung wieder an - Hilft, wenn man den Banner auf \"Später\" verschoben hat Features: - Icon nur sichtbar wenn werkbaum-update-available Flag gesetzt - Hover-Effekt: Icon wird größer (scale 1.2) - Tooltip erklärt Funktion - Auto-Update nach Benachrichtigung Reset-Button entfernt (Nutzer wünscht sich das oben neben Fullscreen, wenn überhaupt benötigt). Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
ceabc34bbe
commit
0a8bab24fb
+44
-34
@@ -1397,40 +1397,50 @@ function resetToDefaults(){
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/* Reset-Button im Footer hinzufügen */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const footer = document.querySelector('.site-footer');
|
||||
if(!footer) return;
|
||||
/* Update-Benachrichtigung-Symbol im Footer (rechts neben Version) */
|
||||
function updateFooterUpdateIcon(){
|
||||
let icon = document.getElementById('footerUpdateIcon');
|
||||
const hasUpdate = localStorage.getItem('werkbaum-update-available');
|
||||
|
||||
const resetBtn = document.createElement('button');
|
||||
resetBtn.textContent = '🔄 Reset';
|
||||
resetBtn.title = 'App auf Defaults zurücksetzen (alle Einstellungen + Editor löschen)';
|
||||
resetBtn.style.cssText = `
|
||||
background: none;
|
||||
border: 1px solid var(--muted, #999);
|
||||
color: var(--muted, #999);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.2s ease;
|
||||
`;
|
||||
resetBtn.addEventListener('mouseenter', () => {
|
||||
resetBtn.style.borderColor = 'var(--or, #0F766E)';
|
||||
resetBtn.style.color = 'var(--or, #0F766E)';
|
||||
});
|
||||
resetBtn.addEventListener('mouseleave', () => {
|
||||
resetBtn.style.borderColor = 'var(--muted, #999)';
|
||||
resetBtn.style.color = 'var(--muted, #999)';
|
||||
});
|
||||
resetBtn.addEventListener('click', resetToDefaults);
|
||||
if(hasUpdate && !icon){
|
||||
const footer = document.querySelector('.site-footer');
|
||||
if(!footer) return;
|
||||
|
||||
/* Einfügen nach der Versionsnummer */
|
||||
const verLink = footer.querySelector('.ver');
|
||||
if(verLink && verLink.nextSibling) {
|
||||
verLink.parentNode.insertBefore(resetBtn, verLink.nextSibling.nextSibling);
|
||||
} else {
|
||||
footer.insertBefore(resetBtn, footer.firstChild);
|
||||
icon = document.createElement('button');
|
||||
icon.id = 'footerUpdateIcon';
|
||||
icon.textContent = '📦';
|
||||
icon.title = 'Neue Version verfügbar — klick um Benachrichtigung zu zeigen';
|
||||
icon.style.cssText = `
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--or, #0F766E);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
vertical-align: middle;
|
||||
transition: transform 0.2s ease;
|
||||
`;
|
||||
icon.addEventListener('mouseenter', () => {
|
||||
icon.style.transform = 'scale(1.2)';
|
||||
});
|
||||
icon.addEventListener('mouseleave', () => {
|
||||
icon.style.transform = 'scale(1)';
|
||||
});
|
||||
icon.addEventListener('click', checkAndShowUpdateNotification);
|
||||
|
||||
const verLink = footer.querySelector('.ver');
|
||||
if(verLink && verLink.nextSibling) {
|
||||
verLink.parentNode.insertBefore(icon, verLink.nextSibling);
|
||||
}
|
||||
} else if(!hasUpdate && icon){
|
||||
icon.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Icon beim Laden und bei Update-Erkennung aktualisieren */
|
||||
document.addEventListener('DOMContentLoaded', updateFooterUpdateIcon);
|
||||
const originalCheckAndShowUpdateNotification = checkAndShowUpdateNotification;
|
||||
checkAndShowUpdateNotification = function(){
|
||||
originalCheckAndShowUpdateNotification.call(this);
|
||||
updateFooterUpdateIcon();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user