feat: tableur mobile — barres repliées par défaut, bascule unique #189
CI / lint (push) Successful in 2m42s
CI / security (push) Successful in 1m38s
CI / test (push) Successful in 4m19s
CI / build (push) Successful in 1m27s
CI / e2e (push) Successful in 17m12s

Sous 768 px, la barre de menus, le ruban et le groupe Recherche sont
repliés par défaut : la barre de formule (fx), les onglets et Enregistrer
restent visibles et la grille récupère la hauteur d'écran. Un bouton
unique (#xlsx-tools-toggle) dans la barre des feuilles déplie/replie
l'ensemble (aria-expanded, état actif) ; desktop inchangé.

Ergonomie tactile : cibles ≥ 44 px, onglets en défilement horizontal,
champs de la barre de formule en 16 px (anti-zoom iOS), barre de formule
en 2 lignes quand les outils sont ouverts.

Tests : JSDOM xlsx-viewer.test.mjs (+2, 165/165), E2E mobile (repli par
défaut, dépliage, no-overflow ruban, cibles 44 px) ; openXlsx() déplie
automatiquement ≤ 768 px pour les tests desktop.
This commit is contained in:
2026-10-08 15:45:39 -04:00
parent e01e837a2a
commit 36b4962efb
17 changed files with 341 additions and 17 deletions
+19
View File
@@ -1473,6 +1473,11 @@ const GRID_CHUNK_ROWS = 100; // rows materialised per extension step
<span class="xlsx-toolbar-actions">${actionsHtml}</span>
</div>
<div class="xlsx-sheetbar">
<button class="btn-action xlsx-tools-toggle" id="xlsx-tools-toggle" type="button"
aria-expanded="false" title="${escapeHtml(t("xlsx.tools_toggle"))}"
aria-label="${escapeHtml(t("xlsx.tools_toggle"))}">
<i data-lucide="menu" style="width:18px;height:18px" aria-hidden="true"></i>
</button>
${tabs}
<span class="xlsx-sheetbar-end">${fileHtml}</span>
</div>
@@ -1526,6 +1531,20 @@ const GRID_CHUNK_ROWS = 100; // rows materialised per extension step
// A re-render invalidates any open context menu (it targets the old DOM).
closeContextMenu();
// #189 — mobile : la barre de menus + le ruban sont repliés par défaut
// (cf. style.css ≤768px). Ce bouton, seul dans la barre des feuilles,
// déplie/replie le tout sans jamais masquer la barre de formule.
const toolsToggle = area.querySelector("#xlsx-tools-toggle");
const toolsBar = area.querySelector(".xlsx-toolbar");
if (toolsToggle && toolsBar) {
toolsToggle.addEventListener("click", () => {
const open = toolsBar.classList.toggle("xlsx-tools-open");
toolsToggle.setAttribute("aria-expanded", String(open));
toolsToggle.classList.toggle("active", open);
safeCreateIcons();
});
}
// ── #153 A17 — dashboard panel: named ranges, objects, per-sheet KPI ──
// Fetched lazily on first open of the dashboard tab; a workbook without
// anything notable hides the button entirely (no empty panel).