Project

General

Profile

Development #31397

Rendre paramétrable l'ordre des boutons

Added by Emmanuel Cazenave 11 months ago. Updated 5 days ago.

Status:
Résolu (à déployer)
Priority:
Normal
Assignee:
Target version:
-
Start date:
13 Mar 2019
Due date:
% Done:

0%

Patch proposed:
Yes
Planning:
No

Description

A minima une variable qui assurerait le placement du bouton 'Suivant' à droite (demande ultra récurrente).

0001-scss-forms-add-order-alignment-options-for-buttons-3.patch View (2.79 KB) Thomas Jund, 15 Jan 2020 02:47 PM

0001-scss-forms-add-order-alignment-options-for-buttons-3.patch View (2.92 KB) Thomas Jund, 15 Jan 2020 05:23 PM


Related issues

Related to Intégrations graphiques Publik - Development #23318: Placement, par défaut, des boutons d'actions en bas de page des formulaires front-office Rejeté 20 Apr 2018

Associated revisions

Revision 8ac68d5f (diff)
Added by Thomas Jund 5 days ago

scss: forms: add order & alignment options for buttons (#31397)

History

#1 Updated by Frédéric Péters 11 months ago

Ce serait dommage de s'arrêter "a minima"; surtout que "à droite" n'était déjà pas clair, est-ce placer le bouton "suivant" en dernier, ou l'aligner à la droite du formulaire ?

Le truc à faire, pour que cette option soit utile, serait le tour des intégrations existantes et les différentes positions des boutons (suivant, précédent, annuler qu'il ne faudrait pas oublier).

  • De base : suivant / précédent / annuler
  • Tournai : précédent / annuler //// suivant
  • Toodego : centrés, précédent / suivant (bouton annuler tout le temps caché)
  • Quimper mobile : précédent / suivant (large) / annuler
  • etc.

Et vivons la vie au-delà de w.c.s., sur la page de connexion, le paramètre doit-il également inverser la situation "connexion / annuler" qui existe actuellement ? Et les autres écrans type modification email, mot de passe, profil ?

#2 Updated by Brice Mallet 11 months ago

  • Related to Development #23318: Placement, par défaut, des boutons d'actions en bas de page des formulaires front-office added

#4 Updated by Frédéric Péters 10 months ago

  • Status changed from Nouveau to Information nécessaire

#5 Updated by Laurent Séguin 10 months ago

Perso, je suis pour la technique des petits pas.
La demande est récurrente surtout pour wcs, toujours par/pour des gens qui lisent de gauche à droite sans système d'accessibilité et ne portant que sur « Suivant » et « Précédent » des formulaires.
De mon avis, rendre l'ordre paramétrable serait utile, tout en préservant la logique d’accessibilité (au sens large) pour ceux qui en ont vraiment besoin par tabindex.

#7 Updated by Frédéric Péters 9 months ago

  • Subject changed from Rendre paramétrable l'ordre des boutton to Rendre paramétrable l'ordre des boutons

#8 Updated by Thomas Jund 16 days ago

  • Assignee set to Thomas Jund

#9 Updated by Thomas Jund 14 days ago

Ajout de 2 variables sass.

// buttons orders and alignment
// work only for wcs forms actually
// order :
//    3 buttons : submit (form validation or next page), cancel, previous;
//     put button in the desired order (ex: previous, submit, cancel);
//     optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);

$buttons-order: null !default;
$buttons-alignment: null !default; // any flexbox justify-content value;

[~ Petite vidéo demo ~ https://perso.entrouvert.org/~tjund/form-buttons_order.mp4 ~]

Merci pour la relecture de la doc aussi.

#11 Updated by Frédéric Péters 14 days ago

allways → always.

Le "(grow)" donne l'impression par son nom que ça va agrandir le bouton, peut-être le remplacer par "(space)" ? (évidemment ça serait mieux d'alors pouvoir écrire previous, next, space, cancel mais c'est sand doute un peu galère, passer par @for plutôt que @each, etc.) Oublions ça.

Je pense qu'on a besoin d'une version différente en mobile, où souvent, quand il a été demandé d'avoir précédent/suivant en desktop, il y avait quand même souhait d'avoir "suivant" en grand et premier en mobile.

#12 Updated by Thomas Jund 14 days ago

(grow) me semblait donner l'avantage d'explicitement indiquer aux intégrateurs que l'option ajoute un flex-grow. Mais à part ça, sémantiquement parlant c'est pas terrible.

il y avait quand même souhait d'avoir "suivant" en grand et premier en mobile.

Tu pourrais préciser "en premier" ?
Les 3 boutons les 1 en dessous des autres, avec submit en premier ?
Les boutons toujours alignés (si y'a la place) et juste repositionner submit à gauche ?

#13 Updated by Frédéric Péters 14 days ago

Les 3 boutons les 1 en dessous des autres, avec submit en premier ?

Oui; mais à chercher rapidement un exemple dans les intégrations passées je n'en retrouve pas qui font effectivement ça. Oublions.

actually → faux ami.

#14 Updated by Thomas Jund 14 days ago

actually
allways → always

add flexbox ms prefix

#15 Updated by Frédéric Péters 5 days ago

  • Status changed from Solution proposée to Solution validée

Ok ainsi.

#16 Updated by Thomas Jund 5 days ago

  • Status changed from Solution validée to Résolu (à déployer)
commit 8ac68d5fb974bd117ed180caadd964f05ee130b0 (HEAD -> master, origin/master, origin/HEAD)
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Jan 15 14:26:14 2020 +0100

    scss: forms: add order & alignment options for buttons (#31397)

Also available in: Atom PDF