From 33e4afc00912b0f213a6654f8ca52719f18d81fb Mon Sep 17 00:00:00 2001 From: Rafael Foster Date: Mon, 27 Apr 2026 21:53:18 -0300 Subject: [PATCH] Refine calendar icon picker --- public/locales/ar.json | 2 +- public/locales/el.json | 2 +- public/locales/en.json | 2 +- public/locales/es.json | 2 +- public/locales/fr.json | 2 +- public/locales/hi.json | 2 +- public/locales/it.json | 2 +- public/locales/ja.json | 2 +- public/locales/pt.json | 2 +- public/locales/ru.json | 2 +- public/locales/sv.json | 2 +- public/locales/tr.json | 2 +- public/locales/uk.json | 2 +- public/locales/zh.json | 2 +- public/pages/calendar.js | 78 +++++++++++++++++++++++++++---- public/styles/calendar.css | 96 ++++++++++++++++++++++++++++++++++++-- public/sw.js | 8 ++-- 17 files changed, 181 insertions(+), 29 deletions(-) diff --git a/public/locales/ar.json b/public/locales/ar.json index 86517da..208e6e2 100644 --- a/public/locales/ar.json +++ b/public/locales/ar.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/el.json b/public/locales/el.json index 2adff64..3766bb8 100644 --- a/public/locales/el.json +++ b/public/locales/el.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/en.json b/public/locales/en.json index fc3cb6a..99dbc67 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -805,7 +805,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/es.json b/public/locales/es.json index 0a0ab1d..3b40e92 100644 --- a/public/locales/es.json +++ b/public/locales/es.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/fr.json b/public/locales/fr.json index 95164a3..70f6310 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/hi.json b/public/locales/hi.json index 5f38fb0..062c3dd 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/it.json b/public/locales/it.json index f316596..6bd7786 100644 --- a/public/locales/it.json +++ b/public/locales/it.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/ja.json b/public/locales/ja.json index dbda8e5..00e5874 100644 --- a/public/locales/ja.json +++ b/public/locales/ja.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/pt.json b/public/locales/pt.json index 82e226f..f0d49cc 100644 --- a/public/locales/pt.json +++ b/public/locales/pt.json @@ -864,7 +864,7 @@ "offset1week": "1 semana antes", "offset2weeks": "2 semanas antes", "offsetCustom": "Personalizado...", - "customAmountLabel": "Quantidade", + "customAmountLabel": "Número", "customUnitLabel": "Unidade", "customMinutes": "Minutos", "customHours": "Horas", diff --git a/public/locales/ru.json b/public/locales/ru.json index 4590170..32fe2b2 100644 --- a/public/locales/ru.json +++ b/public/locales/ru.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/sv.json b/public/locales/sv.json index b16347b..0d8cd69 100644 --- a/public/locales/sv.json +++ b/public/locales/sv.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/tr.json b/public/locales/tr.json index 1d3352e..0fcf71b 100644 --- a/public/locales/tr.json +++ b/public/locales/tr.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/uk.json b/public/locales/uk.json index a124847..7cb3a5f 100644 --- a/public/locales/uk.json +++ b/public/locales/uk.json @@ -805,7 +805,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/locales/zh.json b/public/locales/zh.json index 597fb3e..31b8337 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -863,7 +863,7 @@ "offset1week": "1 week before", "offset2weeks": "2 weeks before", "offsetCustom": "Custom...", - "customAmountLabel": "Amount", + "customAmountLabel": "Number", "customUnitLabel": "Unit", "customMinutes": "Minutes", "customHours": "Hours", diff --git a/public/pages/calendar.js b/public/pages/calendar.js index e61a478..5341722 100644 --- a/public/pages/calendar.js +++ b/public/pages/calendar.js @@ -991,6 +991,48 @@ function openEventModal({ mode, event = null, date = null, reminder = null }) { bindDateInputs(panel); + const iconInput = panel.querySelector('#modal-icon'); + const iconTrigger = panel.querySelector('#modal-icon-trigger'); + const iconGrid = panel.querySelector('#modal-icon-grid'); + const selectIcon = (icon) => { + const nextIcon = eventIconName(icon); + if (iconInput) iconInput.value = nextIcon; + if (iconTrigger) { + iconTrigger.dataset.icon = nextIcon; + const iconEl = iconTrigger.querySelector('[data-lucide]'); + iconEl?.setAttribute('data-lucide', nextIcon); + } + iconGrid?.querySelectorAll('.event-icon-picker__option').forEach((btn) => { + const active = btn.dataset.icon === nextIcon; + btn.classList.toggle('event-icon-picker__option--active', active); + btn.setAttribute('aria-checked', active ? 'true' : 'false'); + }); + if (window.lucide) lucide.createIcons(); + }; + + iconTrigger?.addEventListener('click', () => { + if (!iconGrid) return; + iconGrid.hidden = !iconGrid.hidden; + iconTrigger.setAttribute('aria-expanded', iconGrid.hidden ? 'false' : 'true'); + }); + iconGrid?.addEventListener('click', (e) => { + const btn = e.target.closest('.event-icon-picker__option'); + if (!btn) return; + selectIcon(btn.dataset.icon); + iconGrid.hidden = true; + iconTrigger?.setAttribute('aria-expanded', 'false'); + iconTrigger?.focus(); + }); + document.addEventListener('click', function closeIconPicker(e) { + if (!panel.isConnected) { + document.removeEventListener('click', closeIconPicker); + return; + } + if (iconGrid?.hidden || iconGrid?.contains(e.target) || iconTrigger?.contains(e.target)) return; + iconGrid.hidden = true; + iconTrigger?.setAttribute('aria-expanded', 'false'); + }); + const reminderOffset = panel.querySelector('#modal-reminder-offset'); const reminderCustom = panel.querySelector('#modal-reminder-custom'); reminderOffset?.addEventListener('change', () => { @@ -1021,8 +1063,16 @@ function buildEventModalContent({ mode, event, date, reminder = null }) { const endTime = isEdit && event.end_datetime && event.end_datetime.length > 10 ? localTime(event.end_datetime) : '10:00'; const selectedIcon = eventIconName(isEdit ? event.icon : 'calendar'); - const iconOpts = EVENT_ICONS.map((icon) => - `` + const iconButtons = EVENT_ICONS.map((icon) => + `` ).join(''); const userOpts = [ @@ -1033,16 +1083,28 @@ function buildEventModalContent({ mode, event, date, reminder = null }) { ].join(''); return ` -
-
+
+
+ + + +
+
-
- - -
+
+
diff --git a/public/styles/calendar.css b/public/styles/calendar.css index 6b7320d..d9c3dea 100644 --- a/public/styles/calendar.css +++ b/public/styles/calendar.css @@ -544,14 +544,104 @@ text-overflow: ellipsis; } -.modal-grid--event-title { - grid-template-columns: minmax(0, 1fr) 160px; +.event-title-picker { + display: grid; + grid-template-columns: 72px minmax(0, 1fr); + gap: var(--space-3); + align-items: end; +} + +.event-icon-picker { + position: relative; +} + +.event-title-picker__title { + min-width: 0; +} + +.event-icon-picker__trigger { + width: 52px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: var(--color-surface); + color: var(--color-text-primary); + cursor: pointer; + transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); +} + +.event-icon-picker__trigger:hover, +.event-icon-picker__trigger:focus-visible { + border-color: var(--color-accent); + background: var(--color-accent-light); +} + +.event-icon-picker__trigger:active { + transform: scale(0.98); +} + +.event-icon-picker__trigger i { + width: 22px; + height: 22px; +} + +.event-icon-picker__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); + gap: var(--space-2); + margin: calc(var(--space-2) * -1) 0 var(--space-4) 0; + padding: var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: var(--color-surface-2); +} + +.event-icon-picker__grid[hidden] { + display: none !important; +} + +.event-icon-picker__option { + height: 42px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: var(--color-surface); + color: var(--color-text-secondary); + cursor: pointer; + transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); +} + +.event-icon-picker__option:hover, +.event-icon-picker__option:focus-visible { + color: var(--color-text-primary); + border-color: var(--color-border); + transform: translateY(-1px); +} + +.event-icon-picker__option--active { + color: var(--color-accent); + border-color: var(--color-accent); + background: var(--color-accent-light); +} + +.event-icon-picker__option i { + width: 20px; + height: 20px; } .reminder-custom { margin-top: var(--space-3); } +.reminder-custom[hidden] { + display: none !important; +} + .agenda-event__meta { font-size: var(--text-sm); color: var(--color-text-secondary); @@ -706,7 +796,7 @@ } @media (max-width: 640px) { - .modal-grid--event-title { + .event-title-picker { grid-template-columns: 1fr; } } diff --git a/public/sw.js b/public/sw.js index 7945dc3..34c0021 100644 --- a/public/sw.js +++ b/public/sw.js @@ -13,10 +13,10 @@ * → bypassCacheUntil (in-memory + Cache API für SW-Restart-Robustheit) */ -const SHELL_CACHE = 'oikos-shell-v57'; -const PAGES_CACHE = 'oikos-pages-v52'; -const LOCALES_CACHE = 'oikos-locales-v4'; -const ASSETS_CACHE = 'oikos-assets-v52'; +const SHELL_CACHE = 'oikos-shell-v58'; +const PAGES_CACHE = 'oikos-pages-v53'; +const LOCALES_CACHE = 'oikos-locales-v5'; +const ASSETS_CACHE = 'oikos-assets-v53'; const BYPASS_CACHE = 'oikos-bypass-flag'; const ALL_CACHES = [SHELL_CACHE, PAGES_CACHE, LOCALES_CACHE, ASSETS_CACHE];