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

Einstellungen: native Color-Inputs durch Gradient-Colorpicker ersetzen

Browse Source 
Primärfarbe, Akzentfarbe, Heutige-Tag-Farbe und Account-Farbe
verwenden jetzt den gleichen Dark-Style Gradient-Picker.
This commit is contained in:
Scarriffle
2026-03-26 19:41:17 +01:00
parent c0cbb22633
commit b2bc107d47
2 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/index.html
View File

@@ -282,7 +282,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Farbe</label> <label>Farbe</label>
<input type="color" id="acc-color" value="#4285f4" class="color-input" /> <div class="ev-color-row">
<input type="text" id="acc-color-hex" class="ev-color-hex" maxlength="7" value="#4285f4" spellcheck="false" />
<div class="ev-color-preview" id="acc-color-preview" style="background:#4285f4" title="Farbe wählen"></div>
</div>
</div> </div>
<div id="acc-error" class="form-error hidden"></div> <div id="acc-error" class="form-error hidden"></div>
</div> </div>
@@ -321,23 +324,23 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Primärfarbe</label> <label>Primärfarbe</label>
<div class="color-row"> <div class="ev-color-row">
<input type="color" id="cfg-primary-color" class="color-input" /> <input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<span class="color-label" id="cfg-primary-label">#4285f4</span> <div class="ev-color-preview" id="cfg-primary-preview" title="Farbe wählen"></div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Akzentfarbe</label> <label>Akzentfarbe</label>
<div class="color-row"> <div class="ev-color-row">
<input type="color" id="cfg-accent-color" class="color-input" /> <input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<span class="color-label" id="cfg-accent-label">#ea4335</span> <div class="ev-color-preview" id="cfg-accent-preview" title="Farbe wählen"></div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Heutige-Tag-Farbe</label> <label>Heutige-Tag-Farbe</label>
<div class="color-row"> <div class="ev-color-row">
<input type="color" id="cfg-today-color" class="color-input" /> <input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<span class="color-label" id="cfg-today-label">#4285f4</span> <div class="ev-color-preview" id="cfg-today-preview" title="Farbe wählen"></div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">

56
frontend/js/calendar.js
View File

@@ -610,18 +610,31 @@ function openAccountModal() {
document.getElementById('acc-url').value = ''; document.getElementById('acc-url').value = '';
document.getElementById('acc-username').value = ''; document.getElementById('acc-username').value = '';
document.getElementById('acc-password').value = ''; document.getElementById('acc-password').value = '';
document.getElementById('acc-color').value = '#4285f4'; document.getElementById('acc-color-hex').value = '#4285f4';
document.getElementById('acc-color-preview').style.background = '#4285f4';
document.getElementById('acc-error').classList.add('hidden'); document.getElementById('acc-error').classList.add('hidden');
openModal('modal-account'); openModal('modal-account');
} }
function bindAccountModal() { function bindAccountModal() {
const accPreview = document.getElementById('acc-color-preview');
const accHex = document.getElementById('acc-color-hex');
accPreview.addEventListener('click', async () => {
const picked = await openColorPicker(accPreview, accHex.value || '#4285f4');
if (picked) { accHex.value = picked.toUpperCase(); accPreview.style.background = picked; }
});
accHex.addEventListener('change', () => {
let val = accHex.value.trim();
if (!val.startsWith('#')) val = '#' + val;
if (/^#[0-9a-fA-F]{6}$/.test(val)) { accHex.value = val.toUpperCase(); accPreview.style.background = val; }
});
document.getElementById('acc-save').onclick = async () => { document.getElementById('acc-save').onclick = async () => {
const name = document.getElementById('acc-name').value.trim(); const name = document.getElementById('acc-name').value.trim();
const url = document.getElementById('acc-url').value.trim(); const url = document.getElementById('acc-url').value.trim();
const username = document.getElementById('acc-username').value.trim(); const username = document.getElementById('acc-username').value.trim();
const password = document.getElementById('acc-password').value; const password = document.getElementById('acc-password').value;
const color = document.getElementById('acc-color').value; const color = document.getElementById('acc-color-hex').value;
const errEl = document.getElementById('acc-error'); const errEl = document.getElementById('acc-error');
if (!name || !url || !username || !password) { if (!name || !url || !username || !password) {
@@ -655,14 +668,16 @@ function openSettingsModal() {
const s = state.settings; const s = state.settings;
document.getElementById('cfg-default-view').value = s.default_view || 'month'; document.getElementById('cfg-default-view').value = s.default_view || 'month';
document.getElementById('cfg-week-start').value = s.week_start_day || 'monday'; document.getElementById('cfg-week-start').value = s.week_start_day || 'monday';
document.getElementById('cfg-primary-color').value = s.primary_color || '#4285f4'; const colors = [
document.getElementById('cfg-accent-color').value = s.accent_color || '#ea4335'; { id: 'cfg-primary', val: s.primary_color || '#4285f4' },
document.getElementById('cfg-today-color').value = s.today_color || '#4285f4'; { id: 'cfg-accent', val: s.accent_color || '#ea4335' },
document.getElementById('cfg-dim-past').checked = !!s.dim_past_events; { id: 'cfg-today', val: s.today_color || '#4285f4' },
];
document.getElementById('cfg-primary-label').textContent = s.primary_color || '#4285f4'; colors.forEach(({ id, val }) => {
document.getElementById('cfg-accent-label').textContent = s.accent_color || '#ea4335'; document.getElementById(id + '-hex').value = val.toUpperCase();
document.getElementById('cfg-today-label').textContent = s.today_color || '#4285f4'; document.getElementById(id + '-preview').style.background = val;
});
document.getElementById('cfg-dim-past').checked = !!s.dim_past_events;
// Show users section only for admins // Show users section only for admins
const user = JSON.parse(localStorage.getItem('user') || '{}'); const user = JSON.parse(localStorage.getItem('user') || '{}');
@@ -709,10 +724,17 @@ async function loadUsers() {
} }
function bindSettingsModal() { function bindSettingsModal() {
['cfg-primary-color','cfg-accent-color','cfg-today-color'].forEach(id => { ['cfg-primary','cfg-accent','cfg-today'].forEach(prefix => {
document.getElementById(id).addEventListener('input', e => { const preview = document.getElementById(prefix + '-preview');
const labelId = id.replace('color', 'label'); const hex = document.getElementById(prefix + '-hex');
document.getElementById(labelId).textContent = e.target.value; preview.addEventListener('click', async () => {
const picked = await openColorPicker(preview, hex.value || '#4285f4');
if (picked) { hex.value = picked.toUpperCase(); preview.style.background = picked; }
});
hex.addEventListener('change', () => {
let val = hex.value.trim();
if (!val.startsWith('#')) val = '#' + val;
if (/^#[0-9a-fA-F]{6}$/.test(val)) { hex.value = val.toUpperCase(); preview.style.background = val; }
}); });
}); });
@@ -739,9 +761,9 @@ function bindSettingsModal() {
const settings = { const settings = {
default_view: document.getElementById('cfg-default-view').value, default_view: document.getElementById('cfg-default-view').value,
week_start_day: document.getElementById('cfg-week-start').value, week_start_day: document.getElementById('cfg-week-start').value,
primary_color: document.getElementById('cfg-primary-color').value, primary_color: document.getElementById('cfg-primary-hex').value,
accent_color: document.getElementById('cfg-accent-color').value, accent_color: document.getElementById('cfg-accent-hex').value,
today_color: document.getElementById('cfg-today-color').value, today_color: document.getElementById('cfg-today-hex').value,
dim_past_events: document.getElementById('cfg-dim-past').checked, dim_past_events: document.getElementById('cfg-dim-past').checked,
}; };
try { try {