Web: unified settings sync table with per-setting sync toggles
Replace the ad-hoc appearance panel with a uniform table (sync icon | name | value): dropdowns instead of button groups, every colour with a reset to a canonical default, a per-row sync toggle, and a global "sync all" master switch. - new settings-sync.js: canonical default colours, declarative table definition, browser-local value copy, effective-value resolution - calendar.js: generalised sync engine (pull applies only synced keys from the server, save pushes only synced keys + the flag map), unified the two save buttons into one, dropped the dead text/line-contrast code, moved default duration into the appearance table, effective UI language on load - account settings (private visibility, group calendar, hide profile) stay in a dedicated profile block, not the sync table - app.css: settings table / sync toggle / sync icon styles - i18n: sync-all / sync-this / share-icon strings; sw cache bump Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
@@ -762,9 +762,6 @@
|
||||
<label>E-Mail</label>
|
||||
<input type="email" id="cfg-email" placeholder="Keine E-Mail hinterlegt" />
|
||||
</div>
|
||||
<div class="settings-actions">
|
||||
<button class="btn btn-primary btn-sm" id="cfg-profile-save" data-i18n="save">Speichern</button>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="app_pw_title">App-Passwörter (CalDAV)</h4>
|
||||
<p class="panel-desc" data-i18n="app_pw_desc">Eigene Passwörter für CalDAV-Clients. Bei aktivem 2FA nötig, da Apps keinen 2FA-Code eingeben können. Jederzeit widerrufbar.</p>
|
||||
@@ -800,16 +797,6 @@
|
||||
<p class="panel-desc" data-i18n="settings_directory_hidden_desc">Andere Nutzer können dich dann nicht auswählen, um Kalender zu teilen oder dich zu Gruppen hinzuzufügen. In der Admin-Benutzerverwaltung bleibst du sichtbar.</p>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_default_duration">Standard-Termindauer</h4>
|
||||
<div class="contrast-selector" id="cfg-event-duration">
|
||||
<button class="contrast-btn" data-val="15">15 min</button>
|
||||
<button class="contrast-btn" data-val="30">30 min</button>
|
||||
<button class="contrast-btn" data-val="45">45 min</button>
|
||||
<button class="contrast-btn" data-val="60">1 h</button>
|
||||
<button class="contrast-btn" data-val="90">1,5 h</button>
|
||||
<button class="contrast-btn" data-val="120">2 h</button>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendars">Geteilter Kalender</h4>
|
||||
<p class="panel-desc" data-i18n="settings_group_visible_desc">Wähle, welcher deiner Kalender für deine Gruppenmitglieder sichtbar ist</p>
|
||||
<div class="form-group">
|
||||
@@ -818,116 +805,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Darstellung: Kalenderansicht, Sprache, Stundenhöhe, Farben -->
|
||||
<!-- Darstellung: einheitliche Sync-Tabelle (Sync-Icon | Name | Wert) -->
|
||||
<div class="settings-panel" id="settings-panel-general">
|
||||
|
||||
<h4 class="panel-title" data-i18n="settings_calendar_view">Kalenderansicht</h4>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_default_view">Standardansicht</label>
|
||||
<select id="cfg-default-view">
|
||||
<option value="month" data-i18n="view_month">Monat</option>
|
||||
<option value="week" data-i18n="view_week">Woche</option>
|
||||
<option value="day" data-i18n="view_day">Tag</option>
|
||||
<option value="quarter" data-i18n="view_quarter">Quartal</option>
|
||||
<option value="agenda" data-i18n="view_agenda">Termine</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_week_start">Erster Wochentag</label>
|
||||
<select id="cfg-week-start">
|
||||
<option value="monday" data-i18n="week_start_monday">Montag</option>
|
||||
<option value="sunday" data-i18n="week_start_sunday">Sonntag</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox" id="cfg-dim-past" />
|
||||
<span data-i18n="settings_dim_past">Vergangene Termine ausgrauen</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_language">Sprache</h4>
|
||||
<div class="form-group">
|
||||
<select id="cfg-language">
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hour_height">Stundenhöhe (Wochen- & Tagesansicht)</h4>
|
||||
<p class="panel-desc" data-i18n="settings_hour_height_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="28"><span class="hour-preview">━━</span><span class="contrast-lbl" data-i18n="hour_compact">Kompakt</span></button>
|
||||
<button class="contrast-btn" data-val="44"><span class="hour-preview">━━━</span><span class="contrast-lbl" data-i18n="hour_normal">Normal</span></button>
|
||||
<button class="contrast-btn" data-val="60"><span class="hour-preview">━━━━</span><span class="contrast-lbl" data-i18n="hour_comfort">Komfort</span></button>
|
||||
<button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
|
||||
</div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px">Teilen-Symbol</h4>
|
||||
<p class="panel-desc">Symbol neben deinem geteilten Kalender in der Seitenleiste</p>
|
||||
<div class="group-icon-picker" id="cfg-share-icon"></div>
|
||||
|
||||
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_colors">Farben</h4>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_primary_color">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" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_accent_color">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" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_today_color">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" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_month_divider_color">Monatswechsel-Linie</label>
|
||||
<div class="ev-color-row">
|
||||
<input type="text" id="cfg-month-divider-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
||||
<div class="ev-color-preview" id="cfg-month-divider-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_month_label_color">Monatskürzel</label>
|
||||
<div class="ev-color-row">
|
||||
<input type="text" id="cfg-month-label-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
||||
<div class="ev-color-preview" id="cfg-month-label-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_text_color">Schriftfarbe</label>
|
||||
<div class="ev-color-row">
|
||||
<input type="text" id="cfg-text-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
|
||||
<div class="ev-color-preview" id="cfg-text-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="cfg-text-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_line_color">Linienfarbe</label>
|
||||
<div class="ev-color-row">
|
||||
<input type="text" id="cfg-line-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
|
||||
<div class="ev-color-preview" id="cfg-line-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="cfg-line-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="settings_bg_color">Hintergrundfarbe</label>
|
||||
<div class="ev-color-row">
|
||||
<input type="text" id="cfg-bg-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
|
||||
<div class="ev-color-preview" id="cfg-bg-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="cfg-bg-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
|
||||
<div class="sync-global-row">
|
||||
<div class="sync-global-text">
|
||||
<span class="sync-global-title" data-i18n="settings_sync_all">Alle synchronisieren</span>
|
||||
<span class="panel-desc" data-i18n="settings_sync_all_desc">Diese Einstellungen zwischen deinen Geräten teilen</span>
|
||||
</div>
|
||||
<button type="button" class="sync-toggle sync-toggle-lg" id="cfg-sync-all" role="switch" aria-checked="false"></button>
|
||||
</div>
|
||||
<div class="settings-table" id="settings-appearance-table"></div>
|
||||
</div>
|
||||
|
||||
<!-- Kalender: einheitliche Tabelle aller Kalender aus allen Quellen -->
|
||||
|
||||
Reference in New Issue
Block a user