Rendre lisibles le statut et la date imposée
All checks were successful
Build / build (push) Successful in 1m2s

Statut : quatre boutons peints de leur texture, si bien que le panneau
sert enfin de légende. « En cours » se raye et « terminé » redevient vif
— la trame les distingue, la teinte n'a plus à le faire.

Date imposée : un cadre tireté cerne la forme entière. Les taquets
tombaient sous les poignées de redimensionnement et disparaissaient sur
une barre courte. Son libellé passe dans le modèle, ce qui la fait
apparaître dans la vue par mois, qui la taisait.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-10 19:17:15 +02:00
parent 4a513f9a59
commit 815e144d9a
10 changed files with 574 additions and 98 deletions

View File

@@ -1150,15 +1150,14 @@ entièrement clos ; il n'a pas eu à changer, seule la liste des phases emporté
### Ce que ça donne à l'œil
Deux **taquets** verticaux aux extrémités de la barre, comme les butées d'une pièce qui ne coulisse
plus ; un **cercle** pour un jalon, qui n'a pas d'extrémités où en poser. La marque se cumule avec
les quatre textures de statut au lieu de leur disputer la place — c'est bien une phase à venir, en
cours ou bloquée, qui se trouve en plus tenue par le dehors.
> Deux **taquets** verticaux aux extrémités de la barre, comme les butées d'une pièce qui ne coulisse
> plus ; un **cercle** pour un jalon, qui n'a pas d'extrémités où en poser.
Elle se pose en `box-shadow` interne, donc sans toucher à la géométrie : la barre garde exactement la
largeur de ses dates. Sur une phase de deux jours, les taquets occupent presque toute la barre et la
texture de statut disparaît ; c'est accepté, une fenêtre de maintenance de deux jours se lit de toute
façon à son infobulle.
C'est ce qui avait été retenu ici, et c'est ce que la section 29 a défait : la marque était trop
faible et mal placée. Elle est aujourd'hui un **cadre tireté** qui cerne la forme entière, barre ou
losange. Le reste du raisonnement tient toujours — elle se cumule avec les quatre textures de statut
au lieu de leur disputer la place, et ne touche pas à la géométrie : la barre garde exactement la
largeur de ses dates.
### Le format passe en version 6
@@ -1176,3 +1175,115 @@ comprenne pourquoi.
Au passage, `donneesInitiales` dans `main.go` a été remis d'aplomb : le serveur écrivait encore
`version 4` pour un planning vide, deux versions en retard. Sans conséquence — le validateur accepte
un fichier plus ancien et le remonte — mais un fichier neuf se déclarait d'avant le cycle de vie.
## 29. Rendre lisibles le statut et la date imposée
La section 28 a posé la date imposée ; l'usage a montré que ni elle ni le statut ne se lisaient bien
là où on les cherche. Quatre corrections, de la plus factuelle à la plus discutable.
### Le libellé d'une phase vit dans le modèle
« En cours — date imposée, non emportée par un décalage du projet » se recomposait sur quatre sites :
les trois infobulles de la frise, et celle de la vue par mois. La quatrième avait oublié la mention,
si bien que la vue des échéances — celle où une date déléguée compte le plus — taisait ce que la
frise annonçait sur chaque barre.
D'où `libelleStatut(phase)` dans `model.js`, à côté de la table dont il se sert. Le mettre dans une
vue aurait reposé la même question à la suivante ; le modèle est le seul endroit que les deux vues
connaissent déjà. La vue par mois a reçu du même coup la marque d'une date imposée sur sa puce de
ligne, qui reprend déjà les formes de la frise : le vocabulaire visuel est le même des deux côtés, on
ne l'apprend qu'une fois.
### Le statut passe de la liste déroulante à quatre boutons
Une liste déroulante montre une valeur sur quatre, n'en dessine aucune, et demande deux clics. Les
quatre boutons montrent les quatre, chacun peint de la **texture qu'il donne à la barre**, et le
panneau devient ainsi la légende que l'outil n'avait nulle part — au seul moment où on en a besoin,
celui du choix, et sans coûter d'espace permanent au planning.
Une légende posée sur la frise avait été envisagée d'abord. Elle occupe de la place en permanence
pour une chose qui s'apprend une fois, et elle se lit loin de l'objet qu'elle explique.
Les textures se peignent dans la **couleur du projet qu'on édite** : `detail.js` pose
`--couleur-projet` sur le formulaire à l'ouverture. Le repli se déclare sur `.panneau__corps`, donc
sur l'élément même que le style inline surcharge — le déclarer sur le groupe de boutons faisait
l'inverse, une valeur posée sur un descendant gagnant toujours contre celle dont il hérite. C'est le
genre de détail qui se paie en minutes de recherche : la teinte du repli est une couleur plausible,
et rien ne signale qu'elle n'est pas celle du projet.
### Les quatre textures sur une seule échelle
`doing` était un aplat de la couleur du projet, `done` le même aplat assourdi d'un gris fixe. Deux
nuances de la même teinte, qu'on ne distinguait pas en parcourant un couloir en diagonale — alors que
*ce qui avance / ce qui est fait* est la distinction qu'on lit le plus souvent.
Deux corrections, et la seconde n'a été possible que grâce à la première.
**`doing` reçoit une rayure**, comme `blocked` en a une : le motif est le même, la teinte dit lequel
des deux on regarde — du rouge pour une phase bloquée, la couleur du projet mêlée à elle-même diluée
pour une phase qui avance.
**`done` redevient vif.** Le gris qui l'assourdissait n'était là que pour le séparer de `doing` ; la
rayure s'en charge désormais, et la teinte n'a plus à s'en mêler. C'est un gain net : sur un projet
avancé, la majorité des barres sont terminées, et les éteindre toutes donnait une frise morte où le
travail accompli avait l'air d'un brouillon. Une dilution à mi-chemin avait été essayée d'abord —
même famille de couleur, mais toujours délavée, donc toujours le même reproche.
La grammaire tient maintenant en deux traits, et c'est cette économie qui la rend lisible :
- **plein** pour un état stable, **rayé** pour ce qui bouge ou coince ;
- la couleur du projet **pleine** dès qu'une phase a commencé, **diluée** tant qu'elle n'a pas
commencé.
D'où : à venir dilué et bordé, en cours plein et rayé, terminé plein et nu, bloqué rayé de rouge —
seule teinte étrangère, parce que c'est la seule chose qui ne parle pas d'avancement. Aucune des
quatre ne se lit à une nuance qu'il faudrait comparer à une autre pour la reconnaître.
Le contraste de la rayure a été resserré au passage — la bande claire descend à 50% de dilution
plutôt que 65% : face à un `done` désormais plein, une rayure trop douce se serait lue comme un aplat
légèrement texturé.
La barre cumulative garde ses opacités : elle fait neuf pixels de haut, une rayure y serait du bruit,
et elle dit la forme d'ensemble d'un projet, pas le détail d'une phase.
### La date imposée se marque d'un cadre tireté
Les deux taquets de la section 28 ne tenaient pas leurs promesses, pour trois raisons qui se
cumulaient :
- sur une barre de deux jours, ils l'avalaient — la section 28 l'avait prévu et accepté ; à l'usage
ce n'est pas acceptable, une fenêtre de maintenance est *typiquement* courte, c'est le cas central
et non le cas limite ;
- sur une barre à venir, qui porte déjà une bordure, ils se lisaient comme une bordure épaissie aux
bouts, c'est-à-dire comme rien ;
- surtout, ils occupaient exactement la place où le survol révèle les **poignées de
redimensionnement**. Le signe « cette date ne vous appartient pas » tombait là où l'outil dit
« tirez ici pour la changer ».
La forme se cerne donc maintenant tout entière, d'un trait **tireté** — une barre, un losange, et
jusqu'au bloc des deux champs de date dans le panneau, qui ne montrait rien quand on cochait la case
alors que la conséquence porte précisément sur ces dates-là. Un seul signe partout, là où le losange
se cerclait et la barre se taquetait : c'était deux signes pour une même chose.
Le tiret n'est pas décoratif. Un cerclage **plein** a été essayé d'abord, et à la taille réelle des
barres on ne le distinguait pas d'une phase simplement sélectionnée. Discontinu, il ne se confond
plus avec rien — et il dit ce qu'il faut : ce n'est pas nous qui traçons cette ligne.
Sur la frise, le cadre vit sur un `::after` : un élément n'a qu'un `outline`, et c'est la sélection
qui le prend. Les deux marques se superposent donc sans se gêner sur une phase imposée qu'on vient de
sélectionner — un cadre tireté dedans, un contour plein dehors. Le losange l'affine à 1px : la
longueur des tirets suit l'épaisseur du trait, et 2px en posait de trop longs pour 14px de côté.
Dans le panneau, le padding qui porte le cadre est repris par une marge négative de même valeur : les
champs ne bougent pas d'un pixel quand la case change d'état, seul le trait apparaît.
### Ce que `detail.js` a appris de la section 28
Ajouter `fixed` y avait demandé quatre retouches dispersées — remplissage, application, rafraîchissement,
comparaison — qu'on ne savait liées qu'en les cherchant. Les champs sont maintenant une liste unique
que ces fonctions parcourent. `notes` en reste dehors : son contrôle est bâti par `notes.js` et se
remplit par lui, jamais en écrivant dans le `textarea`, sans quoi l'aperçu markdown ne suivrait pas.
Le groupe de radios a demandé un détour : `formulaire.status` n'est plus un contrôle mais la liste des
quatre, et n'est donc jamais l'élément focalisé. Sans `aLeFocus()`, le panneau réécrirait le statut
sous les flèches de qui est en train de le choisir.