73 lines
4.1 KiB
Markdown
73 lines
4.1 KiB
Markdown
# #155 — Ergonomie tableur : menu contextuel, sélection type Excel
|
|
|
|
> **Item de roadmap :** [#155 — Ergonomie tableur (menu contextuel + sélection)](../ROADMAP.md)
|
|
> **Origine :** retours utilisateur après #154 (refonte UI/UX tableur)
|
|
> **Statut :** ✅ **livré** — 2026-09-29
|
|
> **Effort estimé :** 2-4 jours (réalisé en 1 lot)
|
|
|
|
---
|
|
|
|
## 1. Demande
|
|
|
|
1. **Menu contextuel** au clic droit (et **appui long** sur mobile/tactile) dans la grille, sur une
|
|
cellule, un numéro de ligne ou un en-tête de colonne.
|
|
2. **Comportement du curseur / de la sélection comme Excel** : le curseur en forme de croix
|
|
au-dessus des cellules, sélection d'une **plage** (glisser, `Maj+clic`, `Maj+flèches`), clic sur
|
|
un en-tête de ligne/colonne pour sélectionner toute la ligne/colonne.
|
|
3. (BUG-094, traité séparément) une **feuille vide/nouvelle** doit rester éditable et permettre
|
|
d'ajouter lignes/colonnes.
|
|
|
|
## 2. Conception
|
|
|
|
### Menu contextuel
|
|
- Positionné au **pointeur** (souris) ou au point de contact (tactile), borné au viewport.
|
|
- Thème de l'application (classes `.xlsx-context-menu`, réutilise `.btn-action`).
|
|
- Contenu selon la cible et le mode :
|
|
- **Insérer** : ligne au-dessus / en dessous, colonne à gauche / à droite (sur la plage
|
|
sélectionnée, via `PUT …/xlsx/structure`, `count` = taille de la plage).
|
|
- **Supprimer** : ligne(s) / colonne(s) — confirmation modale (destructif).
|
|
- **Trier** : A→Z / Z→A sur la colonne de gauche de la sélection.
|
|
- **Effacer le contenu** : vide les cellules sélectionnées (modification locale, non
|
|
sauvegardée tant que l'utilisateur n'enregistre pas).
|
|
- Masqué pour les formats en lecture seule (`.xls`/`.ods`) ; sans les actions de structure pour un
|
|
`.csv`.
|
|
- **Appui long** (tactile) : minuteur ~500 ms annulé au déplacement / relâchement.
|
|
|
|
### Sélection type Excel
|
|
- **Clic** : cellule active + sélection simple ; la barre de formule (zone Nom) affiche la plage
|
|
(`A1` ou `A1:B3`).
|
|
- **Glisser** : sélection rectangulaire (`mousedown` → `mouseover` sur une autre cellule →
|
|
`mouseup`) ; le texte de la cellule n'est plus sélectionné pendant le glisser.
|
|
- **`Maj+clic`** et **`Maj+flèches`** : étendent la sélection depuis l'ancre.
|
|
- **En-têtes** : clic sur un numéro de ligne / lettre de colonne sélectionne la ligne/colonne
|
|
entière. Le tri n'est plus déclenché par simple clic sur l'en-tête (il passe au menu contextuel),
|
|
conformément au comportement Excel.
|
|
- **Curseur** : `cursor: cell` (croix) sur les cellules, `pointer` sur les en-têtes.
|
|
|
|
## 3. Fichiers
|
|
|
|
| Couche | Fichier | Rôle |
|
|
|---|---|---|
|
|
| Menu | `frontend/js/xlsx/context-menu.js` (nouveau) | Menu contextuel générique thémé (build + position + dismiss) |
|
|
| Sélection + câblage | `frontend/js/viewer.js` | État de sélection, drag, `Maj`, en-têtes, ouverture du menu, actions |
|
|
| Styles | `frontend/style.css` | `.xlsx-selected`, `.xlsx-context-menu`, curseurs |
|
|
| i18n | `frontend/locales/{fr,en}.json` | Libellés du menu |
|
|
| Tests | `tests/frontend/xlsx-viewer.test.mjs` | Sélection, menu contextuel, tri via menu |
|
|
|
|
## 4. Critères d'acceptation
|
|
|
|
- Clic droit sur une cellule ouvre un menu thémé aux coordonnées du pointeur ; `Échap` ou clic
|
|
ailleurs le ferme.
|
|
- Insérer/supprimer ligne/colonne via le menu envoie la bonne action `PUT …/xlsx/structure`
|
|
(avec `count` pour une plage) puis re-rend.
|
|
- Glisser de A1 vers B2 surligne A1:B2 et la zone Nom affiche `A1:B2`.
|
|
- `Maj+clic` étend la sélection ; cliquer un en-tête sélectionne la ligne/colonne entière.
|
|
- Aucune régression des tests #154 (édition, save, undo/redo, dashboard).
|
|
|
|
## 5. Historique
|
|
|
|
| Date | Événement |
|
|
|---|---|
|
|
| 2026-09-29 | Ouverture #155 (menu contextuel + sélection type Excel) suite aux retours utilisateur |
|
|
| 2026-09-29 | **Livré** : menu contextuel thémé (`frontend/js/xlsx/context-menu.js`) ouvert au clic droit et à l'appui long, actions résultat de `PUT …/xlsx/structure` (insérer/supprimer ligne & colonne avec `count`), tri et effacement ; sélection type Excel (glisser, `Maj+clic`, `Maj+flèches`, en-têtes ligne/colonne, curseur croix, zone Nom affichant la plage) |
|