Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Scarriffle
2026-03-27 10:43:39 +01:00
parent 2128f07037
commit c849f77651
8 changed files with 328 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
frontend/index.html
View File

@@ -378,96 +378,143 @@
</div>
</div>
<!-- Settings Modal -->
<!-- Settings Page -->
<div id="modal-settings" class="modal-overlay hidden">
<div class="modal-card" style="max-width:520px">
<div class="modal-header">
<div class="settings-page-card">
<div class="settings-page-header">
<button class="icon-btn modal-close" data-modal="modal-settings" style="margin-right:8px">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
</button>
<h3>Einstellungen</h3>
<button class="icon-btn modal-close" data-modal="modal-settings">&times;</button>
<button class="btn btn-primary" id="settings-save" style="margin-left:auto">Speichern</button>
</div>
<div class="modal-body">
<div class="settings-section">
<h4>Darstellung</h4>
<div class="form-group">
<label>Standardansicht</label>
<select id="cfg-default-view">
<option value="month">Monat</option>
<option value="week">Woche</option>
<option value="day">Tag</option>
<option value="agenda">Termine</option>
</select>
</div>
<div class="form-group">
<label>Erster Wochentag</label>
<select id="cfg-week-start">
<option value="monday">Montag</option>
<option value="sunday">Sonntag</option>
</select>
</div>
<div class="form-group">
<label>Primärfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-primary-preview" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Akzentfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-accent-preview" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Heutige-Tag-Farbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-today-preview" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label class="toggle-label">
<input type="checkbox" id="cfg-dim-past" />
Vergangene Termine ausgrauen
</label>
</div>
</div>
<div class="settings-page-body">
<nav class="settings-nav">
<button class="settings-nav-btn active" data-panel="appearance">Darstellung</button>
<button class="settings-nav-btn" data-panel="view">Ansicht &amp; Raster</button>
<button class="settings-nav-btn" data-panel="google">Google Konten</button>
<button class="settings-nav-btn" data-panel="hidden">Ausgeblendete Kalender</button>
<button class="settings-nav-btn hidden" data-panel="users" id="settings-nav-users">Benutzerverwaltung</button>
</nav>
<div class="settings-section" id="settings-google-section">
<h4>Google Konten</h4>
<div id="google-accounts-list"><span style="font-size:13px;color:var(--text-3)">Keine Google-Konten verbunden</span></div>
</div>
<div class="settings-panels">
<div class="settings-section" id="settings-hidden-cals-section">
<h4>Ausgeblendete Kalender</h4>
<div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)">Keine ausgeblendeten Kalender</span></div>
</div>
<div class="settings-section" id="settings-users-section">
<h4>Benutzerverwaltung <span class="badge-admin">Admin</span></h4>
<div id="users-list"></div>
<button class="btn btn-secondary" id="btn-add-user">Benutzer hinzufügen</button>
<div id="add-user-form" class="hidden" style="margin-top:12px">
<!-- Darstellung -->
<div class="settings-panel active" id="settings-panel-appearance">
<h4 class="panel-title">Farben</h4>
<div class="form-group">
<label>Benutzername</label>
<input type="text" id="new-username" />
<label>Primärfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-primary-preview" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Passwort</label>
<input type="password" id="new-password" />
<label>Akzentfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-accent-preview" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Heutige-Tag-Farbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-today-preview" title="Farbe wählen"></div>
</div>
</div>
<h4 class="panel-title" style="margin-top:24px">Schriftkontrast</h4>
<p class="panel-desc">Helligkeit der Beschriftungen und Texte</p>
<div class="contrast-selector" id="cfg-text-contrast" data-setting="text_contrast">
<button class="contrast-btn" data-val="1"><span style="color:#606070">Aa</span><span class="contrast-lbl">Dunkel</span></button>
<button class="contrast-btn" data-val="2"><span style="color:#9090a8">Aa</span><span class="contrast-lbl">Mittel</span></button>
<button class="contrast-btn" data-val="3"><span style="color:#c8c8d8">Aa</span><span class="contrast-lbl">Hell</span></button>
<button class="contrast-btn" data-val="4"><span style="color:#ffffff">Aa</span><span class="contrast-lbl">Maximum</span></button>
</div>
<h4 class="panel-title" style="margin-top:24px">Linienkontrast</h4>
<p class="panel-desc">Sichtbarkeit von Trennlinien und Rahmen</p>
<div class="contrast-selector" id="cfg-line-contrast" data-setting="line_contrast">
<button class="contrast-btn" data-val="1"><span class="line-preview" style="border-color:#1e1e2c"></span><span class="contrast-lbl">Kaum</span></button>
<button class="contrast-btn" data-val="2"><span class="line-preview" style="border-color:#2a2a3c"></span><span class="contrast-lbl">Subtil</span></button>
<button class="contrast-btn" data-val="3"><span class="line-preview" style="border-color:#3a3a52"></span><span class="contrast-lbl">Normal</span></button>
<button class="contrast-btn" data-val="4"><span class="line-preview" style="border-color:#5a5a78"></span><span class="contrast-lbl">Stark</span></button>
</div>
<label class="toggle-label" style="margin-bottom:8px">
<input type="checkbox" id="new-is-admin" /> Administrator
</label>
<button class="btn btn-primary" id="new-user-save">Erstellen</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-modal="modal-settings">Schließen</button>
<button class="btn btn-primary" id="settings-save">Speichern</button>
</div>
</div>
<!-- Ansicht & Raster -->
<div class="settings-panel" id="settings-panel-view">
<h4 class="panel-title">Kalenderansicht</h4>
<div class="form-group">
<label>Standardansicht</label>
<select id="cfg-default-view">
<option value="month">Monat</option>
<option value="week">Woche</option>
<option value="day">Tag</option>
<option value="agenda">Termine</option>
</select>
</div>
<div class="form-group">
<label>Erster Wochentag</label>
<select id="cfg-week-start">
<option value="monday">Montag</option>
<option value="sunday">Sonntag</option>
</select>
</div>
<div class="form-group">
<label class="toggle-label">
<input type="checkbox" id="cfg-dim-past" />
Vergangene Termine ausgrauen
</label>
</div>
<h4 class="panel-title" style="margin-top:24px">Stundenhöhe (Wochen- &amp; Tagesansicht)</h4>
<p class="panel-desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
<div class="contrast-selector" id="cfg-hour-height" data-setting="hour_height">
<button class="contrast-btn" data-val="40"><span class="hour-preview">━━</span><span class="contrast-lbl">Kompakt</span></button>
<button class="contrast-btn" data-val="60"><span class="hour-preview">━━━</span><span class="contrast-lbl">Normal</span></button>
<button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━</span><span class="contrast-lbl">Komfort</span></button>
<button class="contrast-btn" data-val="100"><span class="hour-preview">━━━━━</span><span class="contrast-lbl">Gross</span></button>
</div>
</div>
<!-- Google Konten -->
<div class="settings-panel" id="settings-panel-google">
<h4 class="panel-title">Google Konten</h4>
<div id="google-accounts-list"><span style="font-size:13px;color:var(--text-3)">Keine Google-Konten verbunden</span></div>
</div>
<!-- Ausgeblendete Kalender -->
<div class="settings-panel" id="settings-panel-hidden">
<h4 class="panel-title">Ausgeblendete Kalender</h4>
<div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)">Keine ausgeblendeten Kalender</span></div>
</div>
<!-- Benutzerverwaltung -->
<div class="settings-panel" id="settings-panel-users">
<h4 class="panel-title">Benutzerverwaltung <span class="badge-admin">Admin</span></h4>
<div id="users-list"></div>
<button class="btn btn-secondary" id="btn-add-user" style="margin-top:12px">Benutzer hinzufügen</button>
<div id="add-user-form" class="hidden" style="margin-top:12px">
<div class="form-group">
<label>Benutzername</label>
<input type="text" id="new-username" />
</div>
<div class="form-group">
<label>Passwort</label>
<input type="password" id="new-password" />
</div>
<label class="toggle-label" style="margin-bottom:8px">
<input type="checkbox" id="new-is-admin" /> Administrator
</label>
<button class="btn btn-primary" id="new-user-save">Erstellen</button>
</div>
</div>
</div><!-- settings-panels -->
</div><!-- settings-page-body -->
</div><!-- settings-page-card -->
</div>
<!-- Profile Modal -->