From 181a91c660166f2e350c986fea15d34ac1b0b853 Mon Sep 17 00:00:00 2001 From: DonVoo Date: Mon, 13 Jul 2026 12:52:12 +0200 Subject: [PATCH] Add sync action dropdowns --- backend/00-router.go | 32 +++++++++++++------------- frontend-js/dist/app.js | 41 +++++++++++++++++++++++++++++++-- frontend-js/dist/style.css | 47 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+), 18 deletions(-) diff --git a/backend/00-router.go b/backend/00-router.go index 1c017d5..176fdda 100644 --- a/backend/00-router.go +++ b/backend/00-router.go @@ -128,8 +128,8 @@ func renderStartPage(w http.ResponseWriter, r *http.Request) { fmt.Fprintf(w, ` Mail-Graveyard - - + +
@@ -176,9 +176,9 @@ func renderShell(w http.ResponseWriter, r *http.Request, active, readingPane str fmt.Fprintf(w, ` Mail-Graveyard - + - +
@@ -752,9 +752,9 @@ func renderAccountsPage(w http.ResponseWriter, r *http.Request, accounts []Accou fmt.Fprintf(w, ` Konten-Verwaltung - Mail-Graveyard - + - +
@@ -798,9 +798,9 @@ func renderArchivesPage(w http.ResponseWriter, r *http.Request, archives []strin fmt.Fprintf(w, ` Archiv-mbox Verwaltung - Mail-Graveyard - + - +
@@ -846,9 +846,9 @@ func renderUsersPage(w http.ResponseWriter, r *http.Request, users []AppUser, ed fmt.Fprintf(w, ` Benutzerverwaltung - Mail-Graveyard - + - +
@@ -920,9 +920,9 @@ func renderTransferPage(w http.ResponseWriter, r *http.Request, mode transferMod fmt.Fprintf(w, ` %s - Mail-Graveyard - + - +
@@ -1372,9 +1372,9 @@ func renderSourceEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [ fmt.Fprintf(w, ` Quell-Postfach - Mail-Graveyard - + - +
@@ -1416,9 +1416,9 @@ func renderTargetEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [ fmt.Fprintf(w, ` Ziel-Postfach - Mail-Graveyard - + - +
diff --git a/frontend-js/dist/app.js b/frontend-js/dist/app.js index 9a954ca..5ebfa76 100644 --- a/frontend-js/dist/app.js +++ b/frontend-js/dist/app.js @@ -17,8 +17,22 @@ - - +
+ +
+ + + +
+
+
+ +
+ + + +
+
`; ribbon.insertAdjacentElement("afterend", bar); } @@ -113,6 +127,13 @@ } document.addEventListener("DOMContentLoaded", ensureActionBar); + function closeActionMenus() { + document.querySelectorAll(".action-menu.open").forEach((menu) => { + menu.classList.remove("open"); + menu.querySelector("[data-action-menu-toggle]")?.setAttribute("aria-expanded", "false"); + }); + } + document.addEventListener("click", (event) => { const row = event.target.closest(".msg-row"); if (!row) return; @@ -120,6 +141,22 @@ row.classList.add("active"); }); document.addEventListener("click", (event) => { + const menuButton = event.target.closest("[data-action-menu-toggle]"); + if (menuButton) { + const menu = menuButton.closest(".action-menu"); + const willOpen = !menu.classList.contains("open"); + closeActionMenus(); + menu.classList.toggle("open", willOpen); + menuButton.setAttribute("aria-expanded", willOpen ? "true" : "false"); + return; + } + if (!event.target.closest(".action-menu")) closeActionMenus(); + const syncItem = event.target.closest("[data-sync-kind]"); + if (syncItem) { + closeActionMenus(); + window.alert("Sync-Funktion ist vorbereitet, aber noch nicht aktiv."); + return; + } if (event.target.closest("[data-action-new]")) { openCompose({ to: "", subject: "", body: "" }); } diff --git a/frontend-js/dist/style.css b/frontend-js/dist/style.css index 82c5ce0..6e839c9 100644 --- a/frontend-js/dist/style.css +++ b/frontend-js/dist/style.css @@ -239,6 +239,53 @@ body.ol2013 { background: transparent; border-color: transparent; } +.action-menu { + position: relative; + height: 30px; + flex: 0 0 auto; +} +.action-menu-button::after { + content: ""; + width: 0; + height: 0; + margin-left: 2px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid currentColor; +} +.action-menu.open .action-menu-button { + background: var(--ol-blue-dark); + border-color: #4f94ca; +} +.action-dropdown { + position: absolute; + top: 34px; + left: 0; + min-width: 190px; + display: none; + padding: 4px 0; + background: #fff; + color: var(--ol-text); + border: 1px solid var(--ol-border); + box-shadow: 0 8px 20px rgba(0, 0, 0, .22); + z-index: 45; +} +.action-menu.open .action-dropdown { display: block; } +.action-dropdown-item { + width: 100%; + display: block; + padding: 8px 12px; + border: 0; + background: transparent; + color: var(--ol-text); + font: inherit; + text-align: left; + cursor: pointer; +} +.action-dropdown-item:hover { + background: #eef6fd; + color: var(--ol-blue-dark); +} .action-separator { width: 1px; height: 26px;