Charte admin : ajustement des boutons avec icones #4988

Open
opened 9 months ago by rastapopoulos · 1 comments
Owner

Je ne sais pas par quel bout le prendre car je ne sais pas si ça vaut pour tout ou seulement les "boutons horizontaux". On va partir de là donc.

Tout comme on peut faire "icone horizontale", pour avoir une icone avec un lien à côté, on peut faire "bouton horizontal" (mais je commence déjà l'exception : qu'il y ait une icone ou pas ne change rien au problème).

Or ces boutons ne sont pas aligné comme les liens (exception de nouveau : ce problème d'alignement vaut aussi pour les boutons qui ne sont pas des btn_link). En effet, ça s'aligne tout en centré (c'est le par défaut pour les boutons ok), alors qu'au moins en colonne ça devrait s'aligner à gauche, et l'icone si présente n'être aligné qu'avec la première ligne du texte.

Voici un bon exemple de boutons car il y a un "vrai lien" dessous pour comparaison, ils devraient être alignés pareil (ceux là sont des btn_link) :

Un autre exemple pas btn_link, où l'alignement parait bizarre aussi mais je ne suis pas au clair sur ce qui serait le mieux :

Au moins pour les btn_link, ça devrait donner à peu près ça (mais on voit que c'est quand même encore différent des icone_horizontale : pas la même taille de police, pas les mêmes marges, et pas les mêmes effets hover) :

Je ne sais pas par quel bout le prendre car je ne sais pas si ça vaut pour tout ou seulement les "boutons horizontaux". On va partir de là donc. Tout comme on peut faire "icone horizontale", pour avoir une icone avec un lien à côté, on peut faire "bouton horizontal" (mais je commence déjà l'exception : qu'il y ait une icone ou pas ne change rien au problème). Or ces boutons ne sont pas aligné comme les liens (exception de nouveau : ce problème d'alignement vaut *aussi* pour les boutons qui ne sont pas des btn_link). En effet, ça s'aligne tout en centré (c'est le par défaut pour les boutons ok), alors qu'au moins en colonne ça devrait s'aligner à gauche, et l'icone si présente n'être aligné qu'avec la première ligne du texte. Voici un bon exemple de boutons car il y a un "vrai lien" dessous pour comparaison, ils devraient être alignés pareil (ceux là sont des btn_link) : ![](https://git.spip.net/attachments/821edf21-ab2b-417b-93c1-7ba8e3c7f435) Un autre exemple pas btn_link, où l'alignement parait bizarre aussi mais je ne suis pas au clair sur ce qui serait le mieux : ![](https://git.spip.net/attachments/9bf34907-3948-4510-bb3e-e7980eeeed8a) Au moins pour les btn_link, ça devrait donner à peu près ça (mais on voit que c'est quand même encore différent des icone_horizontale : pas la même taille de police, pas les mêmes marges, et pas les mêmes effets hover) : ![](https://git.spip.net/attachments/c5cc68c2-2975-4024-bebf-9264f669401f)
rastapopoulos added this to the 4.1 milestone 9 months ago
rastapopoulos added the
espace privé
ergonomie
labels 9 months ago
marcimat modified the milestone from 4.1 to 4.2 7 months ago
Owner

Commentaire suite au ticket ouvert en doublon #5270

Le problème pour l'instant c'est que dans la charte, on a 2 composants assez différents :

  • les boutons « standards » : ceux qu'on retrouve notamment dans les #BOUTON_ACTION et les formulaires. En gros c'est quasiment des boutons Bootstrap.
  • les « liens-boutons-icônes », produits par |icone_horizontale et |icone_verticale. Ça c'est le bon vieux composant historique.

Le markup est très différent, et visuellement ils ne produisent pas la même chose.

Avant la refacto on pouvait presque afficher les boutons d'actions comme les boutons-icônes, mais ça marchait à moitié et c'était compliqué à maintenir. De plus fallait ajouter à la main une palanquée de classes icone truc muche, et c'était pas documenté.
Alors plutôt que d'essayer de faire marcher ça au forceps, ça a été laissé de côté.

En l'état actuel vaut mieux pas essayer de faire ça en bidouillant avec des btn-link ou autre à mon avis, comme dans les captures du noizetier.

Pour la suite on pourrait prévoir une variante de bouton standard pour les cas où on veut qu'ils s'affichent comme les filtres |icone_xxxx

Commentaire suite au ticket ouvert en doublon #5270 Le problème pour l'instant c'est que dans la charte, on a 2 composants assez différents : * les boutons « standards » : ceux qu'on retrouve notamment dans les `#BOUTON_ACTION` et les formulaires. En gros c'est quasiment des boutons Bootstrap. * les « liens-boutons-icônes », produits par `|icone_horizontale` et `|icone_verticale`. Ça c'est le bon vieux composant historique. Le markup est très différent, et visuellement ils ne produisent pas la même chose. Avant la refacto on pouvait *presque* afficher les boutons d'actions comme les boutons-icônes, mais ça marchait à moitié et c'était compliqué à maintenir. De plus fallait ajouter à la main une palanquée de classes `icone truc muche`, et c'était pas documenté. Alors plutôt que d'essayer de faire marcher ça au forceps, ça a été laissé de côté. En l'état actuel vaut mieux pas essayer de faire ça en bidouillant avec des btn-link ou autre à mon avis, comme dans les captures du noizetier. Pour la suite on pourrait prévoir une variante de bouton standard pour les cas où on veut qu'ils s'affichent comme les filtres |icone_xxxx
tcharlss added the
css
label 3 weeks ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.