fix(dashboard): FAB shortcut opens add modal directly on target page

After navigating to tasks/calendar/shopping/notes via FAB, the page's
primary add-button is programmatically clicked so the new-item modal
opens without a second tap. FAB container right-margin doubled to avoid
overlap with the browser's edge-swipe gesture zone.
This commit is contained in:
Konrad M.
2026-04-21 21:57:46 +02:00
parent f3a576a072
commit 9f092ff633
2 changed files with 15 additions and 2 deletions
+14 -1
View File
@@ -471,6 +471,14 @@ function initFab(container, signal) {
const fabBackdrop = container.querySelector('#fab-backdrop'); const fabBackdrop = container.querySelector('#fab-backdrop');
if (!fabMain) return; if (!fabMain) return;
// "Neu"-Button-Selector auf der jeweiligen Zielseite
const FAB_NEW_BTN = {
'/tasks': '#btn-new-task',
'/calendar': '#fab-new-event',
'/shopping': '#fab-new-item',
'/notes': '#fab-new-note',
};
let open = false; let open = false;
function toggleFab(force) { function toggleFab(force) {
@@ -489,7 +497,12 @@ function initFab(container, signal) {
fabMain.addEventListener('click', (e) => { e.stopPropagation(); toggleFab(); }); fabMain.addEventListener('click', (e) => { e.stopPropagation(); toggleFab(); });
fabActions.querySelectorAll('[data-route]').forEach((el) => { fabActions.querySelectorAll('[data-route]').forEach((el) => {
const go = () => { toggleFab(false); window.oikos.navigate(el.dataset.route); }; const go = async () => {
toggleFab(false);
await window.oikos.navigate(el.dataset.route);
const btnSelector = FAB_NEW_BTN[el.dataset.route];
if (btnSelector) document.querySelector(btnSelector)?.click();
};
el.addEventListener('click', go); el.addEventListener('click', go);
el.addEventListener('keydown', (e) => { el.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
+1 -1
View File
@@ -934,7 +934,7 @@
.fab-container { .fab-container {
position: fixed; position: fixed;
bottom: calc(var(--nav-bottom-height) + 24px + var(--safe-area-inset-bottom)); bottom: calc(var(--nav-bottom-height) + 24px + var(--safe-area-inset-bottom));
right: var(--space-4); right: calc(var(--space-4) * 2);
z-index: calc(var(--z-nav) - 1); z-index: calc(var(--z-nav) - 1);
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;