Einstellungen: Vollbild-Seite, Kontrast, Stundenhöhe, KW-Anzeige

- Einstellungen von Modal-Popup auf Vollbild-Seite mit Seitennavigation umgestellt
- Schriftkontrast (4 Stufen) und Linienkontrast (4 Stufen) pro Benutzer gespeichert
- Stundenhöhe (40/60/80/100px) in Wochen-/Tagesansicht per Einstellung steuerbar
- Kalenderwoche in Monats- und Wochenansicht grösser dargestellt
- CSS-Variable --hour-h für dynamische Zeitraster-Höhe in week.js und app.css
- Backend: neue Felder text_contrast, line_contrast, hour_height in UserSettings
This commit is contained in:
2026-03-27 10:43:39 +01:00
parent 2128f07037
commit c849f77651
8 changed files with 328 additions and 130 deletions

View File

@@ -63,12 +63,37 @@ export function getISOWeekNumber(d) {
return Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
}
const TEXT_CONTRAST = {
1: { t1: '#606070', t2: '#484858', t3: '#303040' },
2: { t1: '#9090a8', t2: '#6a6a80', t3: '#484860' },
3: { t1: '#c8c8d8', t2: '#9090aa', t3: '#55556a' },
4: { t1: '#ffffff', t2: '#c0c0d8', t3: '#8888a0' },
};
const LINE_CONTRAST = {
1: { border: '#1e1e2c', light: '#181826' },
2: { border: '#2a2a3c', light: '#222230' },
3: { border: '#3a3a52', light: '#2e2e40' },
4: { border: '#5a5a78', light: '#484860' },
};
export function applyTheme(settings) {
const root = document.documentElement;
root.style.setProperty('--primary', settings.primary_color || '#4285f4');
root.style.setProperty('--primary-dim', hexToRgba(settings.primary_color || '#4285f4', 0.15));
root.style.setProperty('--accent', settings.accent_color || '#ea4335');
root.style.setProperty('--today-color', settings.today_color || '#4285f4');
root.style.setProperty('--primary', settings.primary_color || '#4285f4');
root.style.setProperty('--primary-dim', hexToRgba(settings.primary_color || '#4285f4', 0.15));
root.style.setProperty('--accent', settings.accent_color || '#ea4335');
root.style.setProperty('--today-color', settings.today_color || '#4285f4');
const tc = TEXT_CONTRAST[settings.text_contrast || 3];
root.style.setProperty('--text-1', tc.t1);
root.style.setProperty('--text-2', tc.t2);
root.style.setProperty('--text-3', tc.t3);
const lc = LINE_CONTRAST[settings.line_contrast || 3];
root.style.setProperty('--border', lc.border);
root.style.setProperty('--border-light', lc.light);
const hh = settings.hour_height || 60;
root.style.setProperty('--hour-h', hh + 'px');
}
function hexToRgba(hex, alpha) {