Add sync action dropdowns

This commit is contained in:
DonVoo 2026-07-13 12:52:12 +02:00
parent f612454e5b
commit 181a91c660
3 changed files with 102 additions and 18 deletions

View file

@ -17,8 +17,22 @@
<button class="action-btn" type="button" data-action-forward><span aria-hidden="true">&#x21AA;</span> Weiterleiten</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x232B;</span> Loeschen</button>
<span class="action-separator"></span>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x21C4;</span> Ordner Sync</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x2709;</span> Email-Sync</button>
<div class="action-menu">
<button class="action-btn action-menu-button" type="button" aria-expanded="false" data-action-menu-toggle><span aria-hidden="true">&#x21C4;</span> Ordner Sync</button>
<div class="action-dropdown">
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="push">Ordner --&gt; Ordner</button>
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="both">Ordner &lt;--&gt; Ordner</button>
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="pull">Ordner &lt;-- Ordner</button>
</div>
</div>
<div class="action-menu">
<button class="action-btn action-menu-button" type="button" aria-expanded="false" data-action-menu-toggle><span aria-hidden="true">&#x2709;</span> Email-Sync</button>
<div class="action-dropdown">
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="push">Email --&gt; Email</button>
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="both">Email &lt;--&gt; Email</button>
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="pull">Email &lt;-- Email</button>
</div>
</div>
`;
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: "" });
}