Add sync action dropdowns
This commit is contained in:
parent
f612454e5b
commit
181a91c660
3 changed files with 102 additions and 18 deletions
41
frontend-js/dist/app.js
vendored
41
frontend-js/dist/app.js
vendored
|
|
@ -17,8 +17,22 @@
|
|||
<button class="action-btn" type="button" data-action-forward><span aria-hidden="true">↪</span> Weiterleiten</button>
|
||||
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">⌫</span> Loeschen</button>
|
||||
<span class="action-separator"></span>
|
||||
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">⇄</span> Ordner Sync</button>
|
||||
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">✉</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">⇄</span> Ordner Sync</button>
|
||||
<div class="action-dropdown">
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="push">Ordner --> Ordner</button>
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="both">Ordner <--> Ordner</button>
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="folder" data-sync-direction="pull">Ordner <-- 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">✉</span> Email-Sync</button>
|
||||
<div class="action-dropdown">
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="push">Email --> Email</button>
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="both">Email <--> Email</button>
|
||||
<button type="button" class="action-dropdown-item" data-sync-kind="email" data-sync-direction="pull">Email <-- 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: "" });
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue