Project

General

Profile

Evolution #4739

Styles des boîtes et messages du privé

Added by tcharlss 🐽 25 days ago. Updated 3 days ago.

Status:
Fermé
Priority:
Normal
Assignee:
-
Category:
-
Target version:
Start date:
04/19/2021
Due date:
% Done:

0%

Resolution:

Description

Dans la foulée des styles des formulaires, je pense qu'il serait bien d'accorder ça avec les styles des boîtes #BOITE_OUVRIR.
Mais avant d'y aller, je prends la température.

Si une alpha est prévue pour le 1er mai ça va être un peu sport. Cela dit, c'est moins compliqué que les formulaires puisqu'il ne s'agit que de l'emballage extérieur, et il s'agit de reprendre une partie des styles des formulaires. Bref ça pourrait.

Par contre ça repose sur une partie des évolutions de la PR 157, donc travail à entamer qu'après celle-ci intégrée.

Boîtes

Dans l'immédiat je ne souhaite pas revenir sur toutes les variantes de boîtes (info, raccourcis, inverse, etc.), qui devraient rester pareil dans les grandes lignes.
Par contre il faudrait alléger les variantes notice, erreur et info. Sur la page de maintenance c'est festif actuellement :)

La direction que je veux prendre, c'est de mettre juste une bordure de couleur, et éventuellement déplacer l'icône en haut.
Cf. image boite_notice_1.png en pièce-jointe.

Messages

Par contre un truc un peu problématique, c'est que ces boîtes font un peu double emploi : parfois elles ne sont pas utilisées en tant que boîte à proprement parler, mais en tant que message d'alerte (notice, success, error).
Je pense qu'il faudrait éviter de les utiliser comme ça, ce sont 2 besoins différents, et ça devrait être 2 composants différents avec des styles propres.

Dans ce cas, il s'agit de l'équivalent des alertes de Bootstrap par exemple : https://getbootstrap.com/docs/5.0/components/alerts/

Exemple : sur la page maintenance, le bloc « htaccess inopérant » ça devrait être un simple message d'alerte.
Et tout bas, le bloc « effacer les statistiques » c'est logique qu'il s'agisse d'une boîte.

Alors ce composant « alerte » existe à peu près, mais un peu par contingence je crois : il y a des classes .notice, error et .info qu'on peut appliquer à un div, et ça semble faire le job.
Mais il faudrait rendre ça plus sûr : une classe .alerte et ces déclinaisons .alerte_notice, .alerte_error et .alerte_info
Pour officialiser ça pourrait pourquoi pas être complété par une balise #ALERTE{titre, variante, …}.

Là au niveau des styles, ça serait en mode flat, sans ombre portée, et avec un fond de couleur (proche voir identique aux messages de retour des formulaires).
Cf. image message_notice_1.png en pièce-jointe.

boite_notice_1.png View (32 KB) tcharlss 🐽, 04/19/2021 09:57 AM

message_notice_1.png View (31.3 KB) tcharlss 🐽, 04/19/2021 09:57 AM

History

#1 Updated by b b 25 days ago

  • Target version set to 4.0

À fond oui !

Par contre il faudrait alléger les variantes notice, erreur et info. Sur la page de maintenance c'est festif actuellement :)

Ça flash pas mal aussi pour les blocs des documents joints dans la nav de ecrire/?exec=article_edit&id_article=X ^^

Quant à la date de release de la 3.3, on verra bien ce qu'on arrive à faire, l'essentiel amha étant de ne pas le faire après le 1er juillet grand max, mais on devrait parler de tout ça sur spip-dev dans un fil dédié :)

#2 Updated by nicod _ 25 days ago

Top, ça me parait très bien (et la PR 157 a été intégrée non ?)

#3 Updated by marcimat 🌻 25 days ago

Ok.

Quelques remarques.

- À fond pour découper les boites des alertes. Il faut / faudra expliquer quelque part alors (plugin dev… ou site charte si un jour) les différents usages de l'un ou de l'autre et pointer des exemples dans le core peut être alors.
- penser à virer le gradient de l'icone de notice
- je trouve très bien le design des boites de notices que tu proposes, avec l'icone déplacée. J'ai été surpris par la bordure qui change de couleur en pied, mais on s'y fait je crois.
- par contre le .alerte que tu montres a gravement un problème de contraste texte / bg (qui est peut être déjà présent ; j'ai pas vérifié). Est-ce qu'il y a besoin de colorer autant de fond ? Est-ce que la bordure ne suffit pas avec un fond très gris clair ?

#4 Updated by tcharlss 🐽 25 days ago

Ça flash pas mal aussi pour les blocs des documents joints dans la nav de ecrire/?exec=article_edit&id_article=xx

Oui, faudra sans doute les accorder. Par contre c'est pas des #BOITE_OUVRIR je crois, c'est des styles propres au plugin media.

penser à virer le gradient de l'icone de notice

Je vais laisse erational gérer ça je crois, il a une meilleure vision d'ensemble.

J'ai été surpris par la bordure qui change de couleur en pied, mais on s'y fait je crois.

Alors c'est pas obligé du tout, c'est un petit effet de style comme s'il y avait une légère transparence. À tempérer sans doute. Ou à virer, on verra.

par contre le .alerte que tu montres a gravement un problème de contraste texte / bg (qui est peut être déjà présent ; j'ai pas vérifié).

Ah oui c'est bien possible. Les 2 images c'est juste des notes d'intention faites à l'arrache dans l'inspecteur du nav.
On va bien veiller aux contrastes en passant du brouillon au propre :)

Bon merci pour les retours, pour la suite je montrerai l'avancement directement dans la PR, c'est mieux pour discuter et paratger des images.

#5 Updated by tcharlss 🐽 3 days ago

  • Status changed from Nouveau to Fermé

Also available in: Atom PDF