70 lines
3.4 KiB
Markdown
70 lines
3.4 KiB
Markdown
# #112 — En-tête allégé & compte en sidebar
|
|
|
|
> **Version livrée :** 2.21.0 · **Statut :** 🟢 · **Impact :** 🟡
|
|
> **Zone :** frontend (`index.html`, `frontend/js/auth.js`, `frontend/js/viewer.js`,
|
|
> `frontend/style.css`, i18n FR/EN) + CI (`.gitea/workflows/ci.yml`).
|
|
|
|
## Contexte
|
|
|
|
Le header concentrait plusieurs éléments redondants ou peu lisibles :
|
|
|
|
- la **version** était affichée en permanence à côté du bouton Options ;
|
|
- un **bouton de déconnexion** et le **nom de l'utilisateur** occupaient la zone
|
|
droite du header, sans regroupement logique ;
|
|
- la pellicule de miniatures de la visionneuse d'images ne pouvait être
|
|
parcourue qu'au glisser (pas de molette horizontale ni de flèches dédiées).
|
|
|
|
## Ce qui a été livré
|
|
|
|
### A. Header allégé
|
|
|
|
- **Version déplacée** du header vers le menu **Options** : nouvelle ligne
|
|
non-interactive « Version » (`#version-badge` conservé pour `populateVersions`).
|
|
- **Suppression** du bloc `#user-menu` (nom + bouton « sign out ») et de la
|
|
ligne « Déconnexion » du menu Options. Le header droit ne garde que l'indicateur
|
|
hors-ligne, le contexte vault et le bouton Options.
|
|
|
|
### B. Section compte en bas de la sidebar
|
|
|
|
- Nouveau bloc `#sidebar-user` épinglé au bas de la sidebar (`flex-shrink: 0`,
|
|
bordure supérieure), à la manière d'un site web professionnel :
|
|
- initiales dans un **avatar** circulaire (dégradé d'accent) ;
|
|
- **nom** (`#sidebar-user-name`, classe `.user-display-name` conservée pour la
|
|
réutilisation par la collaboration) et **rôle** localisé
|
|
(Administrateur / Utilisateur) ;
|
|
- **bouton déconnexion** (`#sidebar-user-logout`) ;
|
|
- clic sur l'identité → **Profil** (ouvre la section `#cfg-profile`).
|
|
- `AuthManager.renderUserSection()` peuple le bloc ; il reste masqué quand
|
|
l'authentification est désactivée (`#sidebar-user[hidden]`). `renderUserMenu()`
|
|
est conservé comme alias rétro-compatible.
|
|
- La règle mobile qui masquait `.user-display-name` est limitée au header
|
|
(`.header-right .user-display-name`) pour que le nom reste visible dans la
|
|
sidebar mobile.
|
|
|
|
### C. Pellicule d'images défilable (#112, complément de #111)
|
|
|
|
- Nouveau conteneur `.image-nav` autour de la pellicule, avec deux **flèches
|
|
translucides** fixes (`.image-strip-arrow-prev/next`) révélées au survol.
|
|
- **Molette** au-dessus de la pellicule → défilement horizontal
|
|
(`strip.scrollLeft += deltaY`), conversion des deltas verticaux.
|
|
- Les flèches font défiler d'une « page » (`strip.scrollBy`, défilement doux).
|
|
|
|
## Tests
|
|
|
|
- `tests/frontend/unit.test.mjs` (+1) : header nettoyé (plus de `#user-menu`,
|
|
`#logout-btn`, ni version dans `.header-right`), version dans le menu Options,
|
|
présence de `#sidebar-user`, styles `.sidebar-user`/`.menu-list-version`, clés
|
|
i18n FR/EN.
|
|
- `tests/frontend/image-viewer.test.mjs` (+1) : wrapper `.image-nav`, flèches de
|
|
pellicule, molette et `scrollBy`.
|
|
- `tests/e2e/header-sidebar.spec.js` (nouveau) : test header/version exécuté
|
|
partout ; test compte en sidebar conditionné à l'auth (skip sinon).
|
|
- CI : `image-viewer.test.mjs` ajouté au job `lint` (il n'y était pas depuis #108).
|
|
|
|
## Limitations connues
|
|
|
|
- La section compte n'apparaît que si l'authentification est activée.
|
|
- `doLogoutFallback` (script inline supprimé avec la ligne du menu) reste appelé
|
|
par la section Profil uniquement en repli ; `window.handleLogout` est toujours
|
|
défini par `auth.js`, donc le repli n'est jamais atteint.
|