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;