Les actions devraient être des vrais boutons d'actions sécurisés, pas des liens #5

Open
opened 2 years ago by rastapopoulos · 12 comments
Owner

Tout est dans le titre. :)

D'autant plus pour les suppressions encore plus dangereuses. Tout ce qui est une action en base devrait être un bouton d'action, avec une action sécurisée.

Et du coup pour les suppressions, en rajoutant une petite phrase de "confirm" aussi (l'une des options de la balise bouton), histoire que ça se lance pas dès qu'on clique, parce que "supprimer toutes les noisettes", et même "supprimer la composition", si on clique sans faire exprès… ouille ouille :)

Tout est dans le titre. :) D'autant plus pour les suppressions encore plus dangereuses. Tout ce qui est une action en base devrait être un bouton d'action, avec une action sécurisée. Et du coup pour les suppressions, en rajoutant une petite phrase de "confirm" aussi (l'une des options de la balise bouton), histoire que ça se lance pas dès qu'on clique, parce que "supprimer toutes les noisettes", et même "supprimer la composition", si on clique sans faire exprès… ouille ouille :)
Owner

Oui absolument. Je ne me rappelle plus si j'ai revu ces sujets en profondeur lors de la migration mais c'est exact que je me suis dit en le faisant tout à l'heure que la suppression c'est simple ;-).

Le noiZetier ça se mérite, il faut être attentif.

Oui absolument. Je ne me rappelle plus si j'ai revu ces sujets en profondeur lors de la migration mais c'est exact que je me suis dit en le faisant tout à l'heure que la suppression c'est simple ;-). Le noiZetier ça se mérite, il faut être attentif.
Owner

J'ai regardé et c'est pas beau du tout et surtout on a l'impression de tout faire à la main en calculant un libellé avec icone et en positionnant des classes absconses à la queue leu leu.

J'ai joint un snapshot en 3.3.

Pour mémoire le code utilisé:

[(#BOUTON_ACTION{
    [(#CHEMIN_IMAGE{noizetier-del-24.png}
        |balise_img{<:noizetier:formulaire_supprimer_noisettes_page:>, toto})] <:noizetier:formulaire_supprimer_noisettes_page:>,
    [(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})],
    [icone s24 horizontale (#LANG_LEFT) danger noizetier-24-del],
    'Supprimer les noisettes ?'
})]
J'ai regardé et c'est pas beau du tout et surtout on a l'impression de tout faire à la main en calculant un libellé avec icone et en positionnant des classes absconses à la queue leu leu. J'ai joint un snapshot en 3.3. Pour mémoire le code utilisé: ``` [(#BOUTON_ACTION{ [(#CHEMIN_IMAGE{noizetier-del-24.png} |balise_img{<:noizetier:formulaire_supprimer_noisettes_page:>, toto})] <:noizetier:formulaire_supprimer_noisettes_page:>, [(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})], [icone s24 horizontale (#LANG_LEFT) danger noizetier-24-del], 'Supprimer les noisettes ?' })]
Poster
Owner

nan en fait y a un filtre : bouton_action_horizontal qui fait pareil

nan en fait y a un filtre : bouton_action_horizontal qui fait pareil
Owner

La classe .icone posée sur les boutons d'action ça a jamais vraiment été au point, c'est déprécié en 3.3.

Si tu veux l'icône personnalisée ça serait plutôt :

[(#BOUTON_ACTION{
	[<span class="icone-image">(#CHEMIN_IMAGE{noizetier-del-24.png}|balise_img)</span>] <:noizetier:formulaire_supprimer_noisettes_page:>,
	[(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})],
	danger,
	'Supprimer les noisettes ?'
})]

Cela dit l'icône étant limitée en hauteur, il y a plus simplement l'icône générique :

[(#BOUTON_ACTION{
	<:noizetier:formulaire_supprimer_noisettes_page:>,
	[(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})],
	danger del,
	'Supprimer les noisettes ?'
})]

Enfin attention, ça va sans doute bouger prochainement (.bouton_danger au lieu de .danger tout court, cf. ticket associé).


Nb : pour l'icône je pense que le alt est superflu car elle est purement décorative et le label du bouton est identique en plus (donc un alt vide quoi).

La classe .icone posée sur les boutons d'action ça a jamais vraiment été au point, c'est déprécié en 3.3. Si tu veux l'icône personnalisée ça serait plutôt : ```html [(#BOUTON_ACTION{ [<span class="icone-image">(#CHEMIN_IMAGE{noizetier-del-24.png}|balise_img)</span>] <:noizetier:formulaire_supprimer_noisettes_page:>, [(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})], danger, 'Supprimer les noisettes ?' })] ``` Cela dit l'icône étant limitée en hauteur, il y a plus simplement l'icône générique : ```html [(#BOUTON_ACTION{ <:noizetier:formulaire_supprimer_noisettes_page:>, [(#URL_ACTION_AUTEUR{vider_page, [(#ENV{page}|?{page:#ENV{page}, objet:#ENV{id_objet}:#ENV{type}})], #SELF})], danger del, 'Supprimer les noisettes ?' })] ``` Enfin attention, ça va sans doute bouger prochainement (.bouton_danger au lieu de .danger tout court, cf. ticket associé). ---- Nb : pour l'icône je pense que le alt est superflu car elle est purement décorative et le label du bouton est identique en plus (donc un alt vide quoi).
Poster
Owner

mais non non, on ne doit PAS mettre une image soi-même dans le bouton ! ya un filtre depuis des années pour ça dans filtres.php : |bouton_action_horizontal qui fait comme le lien mais qui génère un bouton

mais non non, on ne doit PAS mettre une image soi-même dans le bouton ! ya un filtre depuis des années pour ça dans filtres.php : |bouton_action_horizontal qui fait comme le lien mais qui génère un bouton
Owner

ya un filtre depuis des années pour ça dans filtres.php : |bouton_action_horizontal

Et bien planqué sous le tapis...
C'est documenté nulle part, ni dans la charte du plugin dev, ni dans programmer.
Et j'en ai vu que 2 occurrences : dans mots et dans C&O (j'ai pas toute la zone en copie, mais une bonne partie quand même).

C'est ballot j'avais demandé à quoi servaient ces classes .icone sur les boutons d'action au moment d'unifier et remettre à plat les boutons : donc apparemment c'est pour ce filtre.

Amha il serait à revoir en 3.3, en dehors de mettre l'icône qui va bien, ça me semble une fausse piste de réutiliser les classes .icone et cie, les markups d'un bouton d'action et des icônes horizontales/verticales sont trop différents, c'est une prise de tête sans fin de supporter les 2 en même temps.

> ya un filtre depuis des années pour ça dans filtres.php : |bouton_action_horizontal Et bien planqué sous le tapis... C'est documenté nulle part, ni dans la charte du plugin dev, ni dans programmer. Et j'en ai vu que 2 occurrences : dans mots et dans C&O (j'ai pas toute la zone en copie, mais une bonne partie quand même). C'est ballot j'avais demandé à quoi servaient ces classes .icone sur les boutons d'action au moment d'unifier et remettre à plat les boutons : donc apparemment c'est pour ce filtre. Amha il serait à revoir en 3.3, en dehors de mettre l'icône qui va bien, ça me semble une fausse piste de réutiliser les classes .icone et cie, les markups d'un bouton d'action et des icônes horizontales/verticales sont trop différents, c'est une prise de tête sans fin de supporter les 2 en même temps.
Owner

@tcharlss il y a aucun problème pour que ce filtre modifie le markup généré pour que ça colle à la nouvelle convention de markup. C'est même l'intérêt d'un tel filtre : un shorthand pour pas avoir à gérer le détail du markup.

Idem pour le #BOUTON_ACTION et le filtre associé qui génère le markup des boutons actions : si ils doivent renommer à la volée les classes .danger en .bouton-danger ça semble pas du tout un problème et ça facilite la transition

@tcharlss il y a aucun problème pour que ce filtre modifie le markup généré pour que ça colle à la nouvelle convention de markup. C'est même l'intérêt d'un tel filtre : un shorthand pour pas avoir à gérer le détail du markup. Idem pour le `#BOUTON_ACTION` et le filtre associé qui génère le markup des boutons actions : si ils doivent renommer à la volée les classes .danger en .bouton-danger ça semble pas du tout un problème et ça facilite la transition
Owner

@cerdic Ok j'essaierai d'en tenir compte pour la finition des boutons.
Et donc à priori dans une branche à part, ça fait pas mal de petits détails à finir.

@cerdic Ok j'essaierai d'en tenir compte pour la finition des boutons. Et donc à priori dans une branche à part, ça fait pas mal de petits détails à finir.
Owner

Ca fonctionne nickel avec le filtre qui dont le prototype est cohérent avec icone_horizontal ce qui facilite la migraiton. Néanmoins il ne se passe rien au survol à part le curseur qui change.

C'est voulu ou c'est un bug de la 3.3 ?

Ca fonctionne nickel avec le filtre qui dont le prototype est cohérent avec icone_horizontal ce qui facilite la migraiton. Néanmoins il ne se passe rien au survol à part le curseur qui change. C'est voulu ou c'est un bug de la 3.3 ?
Owner

Dans le commit 76ca6078ea j'ai utilisé des boutons action via le filtre bouton_action_horizontal pour remplacer les boutons horizontaux créés avec le filtre icone_horizontal appliqué à une URL d'action auteur.

Ca fonctionne très bien (avec aussi la confirmation pour les suppressions) mais le survol ne fait rien et la taille des boutons est différentes en fonction du libellé qui est affiché. En plus les fonds sont moches sauf pour le del qui est classique. Donc coté affichage c'est moyen.

Il me reste le cas des boutons verticaux qui eux n'ont pas de filtre idoine. Il y a aussi les actions incluses dans le menu d'une noisette et dans la liste des pages. Je ne sais pas si on peut mettre un icone seul en utilisant ce filtre.

Dans le commit https://git.spip.net/spip-contrib-extensions/noizetier/commit/76ca6078ea80f572ad920381c0c276609d41d13f j'ai utilisé des boutons action via le filtre bouton_action_horizontal pour remplacer les boutons horizontaux créés avec le filtre icone_horizontal appliqué à une URL d'action auteur. Ca fonctionne très bien (avec aussi la confirmation pour les suppressions) mais le survol ne fait rien et la taille des boutons est différentes en fonction du libellé qui est affiché. En plus les fonds sont moches sauf pour le del qui est classique. Donc coté affichage c'est moyen. Il me reste le cas des boutons verticaux qui eux n'ont pas de filtre idoine. Il y a aussi les actions incluses dans le menu d'une noisette et dans la liste des pages. Je ne sais pas si on peut mettre un icone seul en utilisant ce filtre.
Owner

Oui donc quand on veut une icône d'objet ou personnalisée, pour les boutons d'actions c'est bien le filtre bouton_action_horizontal, et il reste à corriger/finaliser les styles associés (dans Spip).
Faut voir comment ce filtre s'articule avec #BOUTON_ACTION, parceque quand on veut les icônes génériques, la balise fait très bien l'affaire.

Pour rappel tout ce qui concerne les boutons et les icônes est discuté en long, en large et en travers dans les tickets #4562 et #4468

Et l'état actuel des choses est documenté dans le plugin dev, dans les pages de la charte. Mais il n'y figure pas encore bouton_action_horizontal car je découvre son existence :p

Oui donc quand on veut une icône d'objet ou personnalisée, pour les boutons d'actions c'est bien le filtre bouton_action_horizontal, et il reste à corriger/finaliser les styles associés (dans Spip). Faut voir comment ce filtre s'articule avec #BOUTON_ACTION, parceque quand on veut les icônes génériques, la balise fait très bien l'affaire. Pour rappel tout ce qui concerne les boutons et les icônes est discuté en long, en large et en travers dans les tickets [#4562](https://core.spip.net/issues/4562) et [#4468](https://core.spip.net/issues/4468) Et l'état actuel des choses est documenté dans le plugin dev, dans les pages de la charte. Mais il n'y figure pas encore bouton_action_horizontal car je découvre son existence :p
Owner

ce filtre est un palliatif car l'ancien markup était vraiment bien chiant à reproduire.

La logique serait que ces boutons horizontaux soient juste une variante de mise en forme des bouton_action, avec une class specifique donc. Et le filtre renverrait alors simplement vers le filtre de bouton_action en ajoutant la bonne classe

ce filtre est un palliatif car l'ancien markup était vraiment bien chiant à reproduire. La logique serait que ces boutons horizontaux soient juste une variante de mise en forme des bouton_action, avec une class specifique donc. Et le filtre renverrait alors simplement vers le filtre de bouton_action en ajoutant la bonne classe
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.