fix: menu transfert flottant hors tableau (position fixed via getBoundingClientRect)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-05-05 23:46:40 +02:00
parent c4a338af05
commit 14bce805e0

View File

@@ -66,6 +66,12 @@ html_navbar('mail');
</div>
</div>
<!-- Menu transfert flottant (hors tableau) -->
<div id="transfer-menu" style="display:none;position:fixed;z-index:9998;min-width:200px" class="card shadow border-0">
<div class="card-header py-2 small fw-semibold text-muted"><i class="bi bi-share me-1"></i>Transférer vers…</div>
<ul class="list-group list-group-flush" id="transfer-menu-list"></ul>
</div>
<!-- Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
<div id="toast-el" class="toast align-items-center border-0" role="alert">
@@ -92,23 +98,41 @@ function showToast(msg, type = 'success') {
function buildTransferDropdown(sourceId, currentUsername) {
const others = ALL_ACCOUNTS.filter(a => a.username !== currentUsername);
if (!others.length) {
return `<button class="btn btn-sm btn-outline-secondary" disabled title="Aucun autre compte disponible">
<i class="bi bi-share"></i>
</button>`;
return `<button class="btn btn-sm btn-outline-secondary" disabled title="Aucun autre compte disponible"><i class="bi bi-share"></i></button>`;
}
const items = others.map(a =>
`<li><a class="dropdown-item" href="#" onclick="doTransfer(event,${sourceId},${a.id},'${a.username}')">
<i class="bi bi-arrow-right-circle me-1 text-primary"></i>${escHtml(a.username)}${a.display_name ? ' <span class="text-muted">— '+escHtml(a.display_name)+'</span>' : ''}
</a></li>`
return `<button class="btn btn-sm btn-outline-primary" title="Transférer vers…" onclick="openTransferMenu(event,${sourceId},'${currentUsername}')"><i class="bi bi-share"></i></button>`;
}
function openTransferMenu(e, sourceId, currentUsername) {
e.stopPropagation();
const btn = e.currentTarget;
const rect = btn.getBoundingClientRect();
const menu = document.getElementById('transfer-menu');
const list = document.getElementById('transfer-menu-list');
const others = ALL_ACCOUNTS.filter(a => a.username !== currentUsername);
list.innerHTML = others.map(a =>
`<li class="list-group-item list-group-item-action py-2 px-3" style="cursor:pointer"
onclick="doTransfer(event,${sourceId},${a.id},'${escHtml(a.username)}')">
<i class="bi bi-arrow-right-circle me-2 text-primary"></i>${escHtml(a.username)}
${a.display_name ? '<span class="text-muted small"> — '+escHtml(a.display_name)+'</span>' : ''}
</li>`
).join('');
return `<div class="btn-group">
<button class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-strategy="fixed" title="Transférer vers…">
<i class="bi bi-share"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow">${items}</ul>
</div>`;
// Positionne sous le bouton, recadre si déborde à droite
menu.style.display = 'block';
const menuW = menu.offsetWidth;
let left = rect.left;
if (left + menuW > window.innerWidth - 8) left = window.innerWidth - menuW - 8;
menu.style.top = (rect.bottom + 4) + 'px';
menu.style.left = left + 'px';
}
// Ferme le menu si on clique ailleurs
document.addEventListener('click', () => {
document.getElementById('transfer-menu').style.display = 'none';
});
function doTransfer(e, sourceId, targetId, targetName) {
e.preventDefault();
const fd = new FormData();