Rendre lisibles le statut et la date imposée
All checks were successful
Build / build (push) Successful in 1m2s
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:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user