Produits Entr'ouvert » Chrono

Frédéric Péters a écrit :

Un modèle (agenda_id, label, color).

Avec une contrainte d'unicité sur (agenda_id, label), donc.
Si la réservation se fait sur un agenda virtuel, c'est bien lui qui va porter la couleur, et pas l'agenda réel.
Ça marche bien dans les vues côté agent, l'agenda virtuel et les agendas réels afficheront les bonnes couleurs.
Par contre j'espère qu'il n'y a pas de cas tordu où un agenda est exposé de manière différente à la réservation (réel + virtuel, ou virtuel + virtuel), parce que les couleurs se retrouveraient mixées n'importe comment.

[...] en cyclant dans les couleurs de tab10 de matplotlib

J'ai interprété cycler en « si il n'y a plus de couleur dispo, ne pas mettre de couleur » (ie pas de réutilisation).

Pour le rendu, ça demande sans doute de remplacer le vert très visible des horaires d'ouverture par quelque chose de plus léger (peut-être prendre le dégradé actuellement utilisé pour les rendez-vous ? linear-gradient(135deg, #eef 0%, #ddf 100%););

Ce vert est déjà un gradient #b1ea4d linear-gradient(135deg, #b1ea4d 0%, #459522 100%), pas compris ce qu'il y avait à faire.

et utiliser du texte blanc pour les rendez-vous (?) (ou adoucir les couleurs de la palette ?).

Yep, j'ai passé du temps là dessus.
J'ai exclu l'idée du blanc, déjà il y a texte + lien d'afficher ça serait dommage qu'ils aient la même couleur, ensuite je suis biaisé j'aime pas le texte blanc.
Et donc les couleurs de la palette ne vont pas du tout. Je les ai éclaircies jusqu'à ce qu'elles passent la norme d'accessibilité en matière de contraste (https://webaim.org/articles/contrast/). Se faisant, j'ai dû assombrir le bleu du lien sinon c'était perdu d'avance, et ensuite il y a des couleurs de la palette qui sont devenues trop proches et que j'ai donc retiré (il reste 8 couleurs au final).

Pour pimper un peu ça, générer les dégradés légers pour les couleurs de la palette.

Je ne l'ai pas fait mais je peux.

Ajout en légende (dépliable?) des correspondances

Légende en bas, pas dépliable. Je voulais mettre un title sur les div.booking aussi, mais ça ne rendait pas très joli parce qu'il s'affichait aussi au survol du lien.

[...] en cyclant dans les couleurs de tab10 de matplotlib

J'ai interprété cycler en « si il n'y a plus de couleur dispo, ne pas mettre de couleur » (ie pas de réutilisation).

Pour moi cycler était au bout revenir à la première.

Pour le rendu, ça demande sans doute de remplacer le vert très visible des horaires d'ouverture par quelque chose de plus léger (peut-être prendre le dégradé actuellement utilisé pour les rendez-vous ? linear-gradient(135deg, #eef 0%, #ddf 100%););

Ce vert est déjà un gradient #b1ea4d linear-gradient(135deg, #b1ea4d 0%, #459522 100%), pas compris ce qu'il y avait à faire.

Mon idée là était de justement ne plus avoir du vert mais un dégradé plutôt gris neutre, au-dessus duquel les couleurs des rendez-vous se distinguerait mais oublions ça.

j'aime pas le texte blanc.
Et donc les couleurs de la palette ne vont pas du tout. Je les ai éclaircies
Se faisant, j'ai dû assombrir le bleu du lien

Du coup plutôt changer totalement de palette, cf https://matplotlib.org/3.1.0/_images/sphx_glr_colormaps_020.png et prendre pastel1 ou pastel2, voire set3. En pièce jointe les palettes avec le texte et le texte avec le bleu d'origine des liens; ça manque encore un peu de contraste mais en passant ces couleurs en dégradés partant à gauche plus clair + et éventuellement le libellé en gras, on devrait pouvoir avoir un contraste suffisant sans assombrir les liens (ou juste un peu). J'ai juste tenté ça avec le rose de pastel1, cf capture.

Pour pimper un peu ça, générer les dégradés légers pour les couleurs de la palette.

Je ne l'ai pas fait mais je peux.

yep comme noté je trouve ça bien.

Thomas Jund a écrit :

Je veux bien m'en occuper si Valentin ne le sent pas.

Merci, je veux bien un coup de main pour faire le tri entre ces différentes approches en effet.
Si ça peut être utile, les couleurs suggérées par Fred en hexa :

pastell1 = ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffc', '#e5d8bd', '#fddaec', '#f2f2f2']
pastell2 = ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae', '#f1e2cc', '#ccc']
set3 = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f']

Branche à jour avec un nouveau nuancier pour les calendriers.

Au niveau du code, j'ai créé des class plutôt que d'injecter la couleur dans l'attribut style.
mais comme je me base sur l'attribut CSS `color` puis je récupère cette valeur avec la value `CurrentColor` pour l'appliquer en background et en border, c'est possible d'injecter uniquement dans un attribut style.

Ma proposition demande des couleurs assez péchues, j'ai pris le nuancier tab10. C'est une bonne base, même si quelques couleurs devront être assombries légèrement.

Thomas Jund a écrit :

Branche à jour avec un nouveau nuancier pour les calendriers.

Ça rend nickel, merci !

Au niveau du code, j'ai créé des class plutôt que d'injecter la couleur dans l'attribut style.

Yep c'est bien mieux.

mais comme je me base sur l'attribut CSS `color` puis je récupère cette valeur avec la value `CurrentColor` pour l'appliquer en background et en border, c'est possible d'injecter uniquement dans un attribut style.

Je suppose que tu parles du hack que tu as été obligé d'utiliser pour faire une association couleur/label ? Parce que j'ai modifié le code pour s'en passer et j'ai bougé ce qu'il y avait dans <style> vers style.scss et ça a l'air de fonctionner.

Ma proposition demande des couleurs assez péchues, j'ai pris le nuancier tab10.

Mais il n'y a que 5 couleurs ? (ça me va, juste pour être sûr)

C'est une bonne base, même si quelques couleurs devront être assombries légèrement.

Devront genre c'est encore à faire ? Ça ne me choque pas en tout cas.

Suite à ce travail, qui sur chaque rendez-vous affiche le libellé de la couleur, est-ce qu'on garde quand même la légende en bas de la page ? (je l'ai modifiée pour n'inclure que les libellés des rdv présents sur la vue courante, sur les bons conseils de Thomas)

Frédéric Péters a écrit :

Tu peux faire une capture actualisée de tout l'écran, pour se rendre compte ?

Hop (et il y a un bug pour le cas vue mensuelle + guichet unique, il faudra que Thomas repasse un coup)

Quel est le bug sur l'affichage mensuel 1 seul guichet ? Chez moi je ne vois rien de particulier (cf capture)

Thomas Jund a écrit :

C'était déjà le cas avant, non ?.
Il n'y a pas eu de dégradation il me semble.

Il me semble que si : avant si pas la place du label, seule l'heure s'affiche, et le reste au survol. Puis en agrandissant la fenêtre apparaît le label, puis en agrandissant encore, un bouton « Annuler », et tout ça sans avoir du texte coupé à un moment. Il te suffit de te remettre sur master pour vérifier (tu ne devrais pas avoir de souci de migration ou autre).

Mais se serait pour un autre ticket ?

J'aimerais que ce soit résolu ici, j'en profite pour joindre d'autres captures en mode avant/après qui montrent mieux le pb.

avant si pas la place du label, seule l'heure s'affiche

Pas trouvé ce comportement. Le seul comportement existant est un masquage du texte en mode multi desk (mais pas bête comme idée).
J'ai donc supprimé les padding top et bottom des bookings en mode monthly comme précédemment.

Bizarre aussi les lignes blanches seules.

Trouvé, c'est un bug de la capture de page entière de Firefox qui n'est pas capable de gérer les background `fixed` sur les parties en dehors du viewport.

sinon, je suis passé à 8 couleurs et j'ai un peu modifié les contrastes pour être WCAG AA à minima.
et j'ai utilisé une sass map pour les couleurs et faciliter la maintenance du scss.

On avait pas parlé aussi de limiter la légende aux couleurs des booking présents dans la vue uniquement (je sais pas si tu l'as déjà géré) ?

Super, dernier truc pour moi sur le screen suivant on voit que le bouton Annuler est très mal différencié du label quand celui-ci est un peu long, pour le coup c'était déjà le cas avant mais si tu vois un truc simple pour y remédier ici pourquoi pas (afficher le bouton seulement au survol ?)

Thomas Jund a écrit :

On avait pas parlé aussi de limiter la légende aux couleurs des booking présents dans la vue uniquement (je sais pas si tu l'as déjà géré) ?

Yep, c'est géré.

OK, squashé et bon pour relecture.

Pour l'objectivité : sur les pages de Publik la zone principale de contenu a un fond blanc; ce n'est pas le cas ici et je n'ai pas non plus lu de justification.

ok, l'idée est de renverser le contraste entre tableau et plages d'ouvertures en passant les plages en blanc/claire pour en neutraliser la couleur permettant de faire ressortir les blocs de rendez-vous quel soit leur couleur et ainsi supprimer les contrastes colorés malheureux.

Peut-être fournir une capture d'écran jugée représentative ?

Les dernières captures ne suffisent pas ? Je joins une nouvelle : semaine du 7 au 11 avec couleurs, du 14 au 18 sans. Avant le patch et après.

(je suis ok à ce que du retour soit laissé de côté mais ça me saoule de faire du retour et de n'avoir aucune réponse).

Vrai, j'aurais dû faire un retour à ta remarque sans que tu aies eu besoin de le demander.

Effet d'optique du au dégradé des plages d'ouvertures. Le background est unifié.

cf capture annotée avec des codes extraits à la pipette.

Nouvelle proposition en conservant un background blanc.

colorful un seul l. (si ce second commit est laissé indépendant).

Je me rends compte que je n'avais pas fait de commentaire suite à "Si quelqu'un veut faire une relecture du code du patch, go for it, sinon je ferai ça vendredi." et personne ne s'y est lancé. De mon côté donc, ack.

commit 84091865437593aed2bf91f1e87852f5ecb39cd6
Author: Valentin Deniaud <vdeniaud@entrouvert.com>
Date:   Tue Nov 10 14:58:09 2020 +0100

    manager: differentiate bookings with colors (#39794)