Development #51789
"Couleur forte" sur "suivant" (bouton de formulaire)
0%
Description
Il serait bien de disposer d'une option pour appliquer la "couleur forte" (enfin je l'appelle comme cela) sur la bouton suivant du triptyque "précédent / abandonner / suivant" (ou quel que soit l'ordre;-) des boutons d'actions en bas de formulaire.
Exemple d'intégration ainsi :Fichiers
Demandes liées
Révisions associées
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 3 ans
- Lié à Development #40805: styler le bouton "Annuler" de fargo ajouté
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 3 ans
Pour bien comprendre ta proposition, serait-elle similaire à :
- Appliquer une couleur "faible" sur le bouton "annuler" ? (ce qui a été fait pour gpseo).
- ou différencier les boutons d'actions "valider" et "annuler" d'un formulaire.
Cf https://dev.entrouvert.org/issues/40805 et les commentaires.
Faisable (cette proposition d'évolution est sur ma todo liste :) ), on est sur un dev plutôt simple mais avec des impacts potentiels assez probables et certains sur beaucoup de thèmes existants, ce qui va demander, in fine, beaucoup d'investissement.
Mis à jour par Brice Mallet il y a environ 3 ans
Pour bien comprendre ta proposition
N'ayant pas le bons termes couleur faible/fort, j'explique in extenso : l'objectif est que sur les 3 boutons proposés en bas de page du formulaire, l’œil soit attiré par le bouton suivant qui correspond à l'action la plus fréquemment souhaitée, et donc lui appliquer ce que j'ai appelé une couleur forte i.e. la couleur qui pète en opposition à la couleur dominante du thème.
Pour ce qui est des "impacts ... certains sur beaucoup de thèmes existants", j'imaginais un réglage que pour les nouveaux thèmes à produire et ne pas répercuter ce paramétrage sur les intégrations existantes (en effet il ne faut pas, ce serait un changement inexplicable pour nos clients actuels et pas forcément en amélioration).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 3 ans
l’œil soit attiré par le bouton suivant qui correspond à l'action la plus fréquemment souhaitée
ok, donc pas comme Gpseo (où suivant et précédent sont identiques niveau couleurs)
Donc ta proposition serait de pouvoir personnaliser les designs des boutons "submit", "cancel" et "previous" (jusqu’à 3 styles différents).
j'imaginais un réglage que pour les nouveaux thèmes à produire et ne pas répercuter ce paramétrage sur les intégrations existantes.
le design d'un bouton basic (à minima) est de caler la couleur du texte, de l'arrière-plan et de la bordure, propriétés qu'il faudrait doubler pour le survol/focus sur le bouton. Pas simple à concevoir en un réglage.
Perso, je souhaite un réglage par défaut qui permet aux thèmes natifs de gagner en clarté sans avoir à écrire de lignes de code ni à paramétrer trop de variables.
Ma première idée serait :
- Générer automatiquement un "negative button" à partir des variables entrées pour le bouton.
- Pouvoir appliquer ce "negative button" au bouton "cancel" et "previous" simplement.
- Trouver aussi un hover/focus plus efficace que le petit shadow que l'on a aujourd'hui, qui ne propose pas toujours un feedback visuel efficace.
Tout ça sans impacter les thèmes existants, je n'y crois pas trop (mais on peut essayer d'y croire :)), ça demandera juste entre un peu et beaucoup de boulot pour corriger les impacts.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
- Fichier 0001-scss-introduce-inverted-button-cancel-button-style-5.patch 0001-scss-introduce-inverted-button-cancel-button-style-5.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Proposition
- Introduction de %inverted-button. bouton dont le style est généré automatiquement à partie des variables $button-*. (ça marche plutôt bien pour l'avoir tester sur quelques thèmes).
- Introduction de $cancel-button-style, qui permet de choisir entre "%button" et "%inverted-button". La nouveauté ici est qu'on passe un selecteur CSS (ou pseudo-selecteur sass) à la place d'un identifiant. Cela complique un peu la syntaxe de la variable (mais pas plus que ça, il suffit de suive la doc) mais en contre-partie, va permettre quelques améliorations et simplicités côté code scss :
- Pouvoir stucturer le code par class, plutôt que faire des soupes de @if(style == superstyle), ce qui tend à être dans une logique plus CSS et moins SCSS.
- Pouvoir étendre un composant avec un style custom : `$cancel-button-style: "%mon-custom-style"` pour les thèmes custom
(Je suis pour faire tourner ça quelques temps pour l'éprouver avant de le documenter et/ou étendre la logique).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
- Assigné à mis à Thomas Jund (congés, retour le 29/04)
Mis à jour par Serghei Mihai il y a environ 2 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit ec1ddb68ac88c1c639e73f56bfb16328643085d2
Author: Thomas JUND <tjund@entrouvert.com>
Date: Thu Apr 7 11:32:28 2022 +0200
scss: introduce %inverted-button & $cancel-button-style (#517
Mis à jour par Transition automatique il y a environ 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
scss: introduce inverted-button x%x $cancel-button-style (#51789)