Ajuste l'onglet Pages : bouton d'ajout fixe en haut, retire les flèches de réordonnancement, style d'onglet simplifié

- "+ Ajouter une page" passe avant la liste et reste toujours visible
  (flex-shrink:0), seule la liste défile désormais.
- Retire les boutons ↑/↓ par rangée : le glisser-déposer suffit pour
  réordonner, ce qui laisse plus de place à l'affichage du nom de la
  page. forgeDocMovePage devient mort (plus aucun appelant) et est
  supprimé.
- Style de l'onglet actif simplifié : seul le border-bottom change de
  couleur, le texte reste neutre (plus de changement de couleur du
  libellé).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-23 09:33:45 +02:00
co-authored by Claude Sonnet 5
parent b8e7a4c672
commit 763d26c1f1
4 changed files with 31 additions and 52 deletions
+7 -30
View File
@@ -512,23 +512,6 @@ function forgeDocDeletePage(pageId) {
});
}
function forgeDocMovePage(pageId, direction) {
const ordered = forgeDocOrderedPages();
const index = ordered.findIndex((p) => p.id === pageId);
const newIndex = direction === 'up' ? index - 1 : index + 1;
if (newIndex < 0 || newIndex >= ordered.length) return;
forgeDocApiPageMove(pageId, newIndex).then(() => {
const moved = window.forgeDocState.pages.find((p) => p.id === pageId);
const rest = window.forgeDocState.pages
.filter((p) => p.id !== pageId)
.sort((a, b) => a.order_index - b.order_index);
rest.splice(newIndex, 0, moved);
rest.forEach((p, i) => { p.order_index = i; });
window.forgeDocState.pages = rest;
forgeDocRenderPageManagerList();
});
}
function forgeDocSelectAllText(el) {
const range = document.createRange();
range.selectNodeContents(el);
@@ -595,11 +578,13 @@ function forgeDocRenderPageManagerList() {
if (!container) return;
const pages = forgeDocOrderedPages();
// div + role="button" ici, jamais <button> : la rangée contient de
// vrais <button> d'action (monter/descendre/renommer/supprimer), qu'un
// <button> englobant ne pourrait pas contenir validement. L'équivalent
// clavier (Entrée/Espace) est posé plus bas. Réordonnancement : glisser
// (souris, voir forgeDocBindPageManagerDrag) ET boutons ↑/↓ (clavier),
// les deux appellent le même forgeDocMovePage.
// vrais <button> d'action (renommer/supprimer), qu'un <button>
// englobant ne pourrait pas contenir validement. L'équivalent clavier
// (Entrée/Espace) est posé plus bas. Réordonnancement UNIQUEMENT par
// glisser (voir forgeDocBindPageManagerDrag) — pas de boutons monter/
// descendre (retour utilisateur du 23/09/2026 : "je pouvais changer
// l'ordre des pages en glisser déposer donc les flèches [...] sont
// inutiles [...] donner plus de place à l'affichage du nom").
container.innerHTML = pages.map((p, index) => `
<div class="docPageRow ${p.id === window.forgeDocState.activePageId ? 'is-active' : ''}"
role="button"
@@ -610,8 +595,6 @@ function forgeDocRenderPageManagerList() {
<span class="docPageRowNumber">${index + 1}</span>
<span class="docPageRowTitle"><span class="docPageRowTitleText">${forgeDocEscapeHtml(p.title)}</span></span>
<span class="docPageRowActions">
<button type="button" class="docPageRowMove" data-dir="up" data-page-id="${p.id}" aria-label="Monter" title="Monter"${index === 0 ? ' disabled' : ''}>↑</button>
<button type="button" class="docPageRowMove" data-dir="down" data-page-id="${p.id}" aria-label="Descendre" title="Descendre"${index === pages.length - 1 ? ' disabled' : ''}>↓</button>
<button type="button" class="docPageRowRename" data-page-id="${p.id}" aria-label="Renommer cette page" title="Renommer cette page">✎</button>
<button type="button" class="docPageRowDelete" data-page-id="${p.id}" aria-label="Supprimer cette page" title="Supprimer cette page"${pages.length <= 1 ? ' disabled' : ''}>✕</button>
</span>
@@ -629,12 +612,6 @@ function forgeDocRenderPageManagerList() {
forgeDocSwitchPage(Number(row.dataset.pageId));
});
});
container.querySelectorAll('.docPageRowMove').forEach((btn) => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
forgeDocMovePage(Number(btn.dataset.pageId), btn.dataset.dir);
});
});
container.querySelectorAll('.docPageRowRename').forEach((btn) => {
btn.addEventListener('click', (e) => {
e.stopPropagation();