Recherche avancée

Sur d’autres sites (10295)

• Evolution #4727 (Nouveau) : Des pictos / icônes symboliques pour tout le monde

  12 avril 2021

  Je fais un ticket pour la future PR et poser le plan d’action.
  C’est la suite de https://core.spip.net/issues/4562#Des-ic%C3%B4nes

  Proposition pour intégrer un jeu complet d’icônes symboliques.¶

  Les besoins sont multiples pour pleins d’éléments d’interface, dans le core et les plugins : des barres d’outils, des boutons d’actions, etc.
  Et chacun doit réimplémenter ça un peu à sa sauce, notamment dans le privé.

  C’est un besoin bien distinct des icônes svg de couleur dont on dispose actuellement dans le privé : on veut des pictos symboliques qui héritent de taille et de la couleur du texte, et issus d’un même set afin d’avoir un style unifié.
  Cela vient donc en complément.

  Il s’agit donc de reprendre un jeu d’icônes existant, qu’on n’aura pas à maintenir, optimisé, et qui fournit des icônes cohérentes visuellement, utilisables dans tous les contextes. Cf. plus bas pour une comparaison initiale des candidats possibles.

  Utilisation¶

  Ces icônes seraient utilisables de 2 façons :

  1) Des classes .spicon¶

  Des classes à ajouter à n’importe quel élément inline quand il s’agit d’icônes purement décoratives.
  Ces classes pouvant finir dans squelettes utilisés dans le public, pour éviter les conflits, on propose la contraption de spip + icon = spicon. Il y a aussi spip-icon mais c’est un peu plus verbeux.

  Exemples :

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_menu</span><span class="delimiter">"</span></span><span class="tag">></span>Ouvrir le menu<span class="tag"></span>
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_truc</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"></span> Du texte
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">titrem spicon_machin</span><span class="delimiter">"</span></span><span class="tag">></span>Mon titre<span class="tag"></span>
  
  </span></span></span></span>

  2) Une balise #ICON¶

  En complément, on peut vouloir embarquer une icône svg dans le HTML.

  On propose de reprendre et d’adapter la balise #ICON du plugin Zcore, qui fait ça très bien.
  Cette balise permet d’embarquer une icône du set par défaut, mais également n’importe quelle autre (je rentre pas dans les détails).

  Un modèle correspondant permettra aussi d’inclure des icônes svg dans les textes :
  

  <span class="CodeRay">
  
  #ICONE{identifiant}
  
  #ICONE{chemin/vers/mon_icone.svg}
  
  #ICONE{#identifiant_autre_set}
  
  </span>

  Identifiants sémantiques¶

  Les identifiants des icônes seront directement ceux du jeu d’icônes choisi.
  Mais ils peuvent avoir des noms un peu barbares : chevron-double-right, eye-slash, grip-vertical, etc.

  Dans tous les cas on pourra les utiliser tels quels, mais en plus de ça, on propose de faire une correspondance sémantique pour les icônes correspondants aux actions les plus courantes. Par exemple au lieu de faire #ICONE{chevron-double-down} on pourra faire #ICONE{deplier}.
  Cela passerait par un pipeline, donc liste qui peut être complétée selon ses besoins.

  La liste initiale est visible ici : https://demo.hedgedoc.org/3zIXkcFLTVSwV0nKC1_qcA?both

  Ressources privé / public¶

  Cela veut dire 2 ressources à charger :

  • Une font-face pour les classes
  • Un sprite svg pour la balise

  Dans le privé, il faut charger les 2.
  Dans le public, cela pourrait se faire optionnellement, à la demande.

  Candidats¶

  Pour finir un tableau comparatif des jeux d’icônes possibles (à licences libres), avec mes commentaires initiaux.
  Petite préférence pour Feather actuellement.

  Lib	Nb	sprite	fontface	Commentaire
  Bootstrap	1300+	693ko	85ko	Clés en main, beaucoup d’icônes (trop ?)
  Feather	286	( 100ko)	-	Styles rounded. Bonne balance nb icônes / poids.
  Octicon (Github)	433	( 240ko)	-	Styles rounded. Bonne balance nb icônes / poids. Beaucoup de manips à faire pour créer sprite et cie.
  Material (Google)	?	(?ko)	44ko	Style rounded / épaisseur variable. Beaucoup de manips à faire pour créer sprite et cie. Google !
  Core-ui	554	418ko	63ko	Clés en main. Sets inutiles non pris en compte dans ce tableau (brands, flags, …)
  Bytesize	101	11ko	-	Style rounded / épaisseur variable. Léger : le minimum syndical.

  Sprite entre parenthèses = non fourni dans le dépôt ou la dist → poids théorique.

• Anomalie #4562 : Suite #4468 : Unification des CSS pour les boutons et les icônes

  17 février 2021

  Bon bon bon, on a pas mal réfléchi au sujet avec rastapopoulos, et je crois qu’on est arrivé à une solution satisfaisante.
  En tout cas une solution qui répond complètement aux problèmes et besoins soulevés dans ce ticket, en ce qui me concerne.

  Le problème était de ne traiter des icônes que sous l’angle d’une utilisation dans des boutons, de ne le faire qu’à moitié en proposant un jeu d’icônes très restreint, et avec des icônes pas toutes prévues pour cette utilisation qui plus est.

  Dans l’immédiat, pour clôturer ce ticket au plus vite, il s’agirait de faire ça :

  • dans le CSS, retirer complètement les variantes de boutons avec icônes : .bouton_add, .bouton_supprimer, etc. (ça sera fait différemment et mieux).
  • renommer la classe .bouton en .btn : c’est moins verbeux et on comprend aussi bien.
  • préfixer les variantes génériques qui restent : .btn_mini au lieu de .btn mini, etc.
  • finir les derniers petits ajustement visuels.

  Avec ça le ticket pourra enfin être fermé.

  Mais alors comment fait-on pour avoir des icônes dans les boutons ?
  C’est l’étape suivante.

  Des icônes¶

  On s’est dit, tant qu’à faire, autant proposer tout de suite un jeu complet d’icônes symboliques.

  Les besoins sont multiples pour pleins d’éléments d’interface, dans les plugins et dans le core : plier/déplier des trucs, dupliquer un contenu, afficher un menu, remonter dans la hiérarchie, etc., etc. (je fais vite).
  Et chacun doit réimplémenter ça un peu à sa sauce.

  On reprendrait un jeu d’icônes existant, qu’on n’aura pas à maintenir, optimisé, et qui fournit des icônes cohérentes visuellement, utilisables dans tous les contextes.
  Il y a plusieurs choix de jeux d’icônes libres : Bootstrap-icons, Octicon, Material, Entypo, etc.

  Ces icônes seraient utilisables de 2 façons :

  1. Des classes¶

  Quand il s’agit d’icônes purement décoratives, des classes que l’on peut ajouter à n’importe quel élément inline.
  Pour éviter les conflits, on propose la contraption de spip + icon = spicon.
  Cette solution utilise une fontface, l’icône hérite de la taille et de la couleur du texte.

  Pour les boutons, même principe : la classe signifie « ajoute une icône dans cet élément »

  Exemples :

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_menu</span><span class="delimiter">"</span></span><span class="tag">></span>Ouvrir le menu<span class="tag"></span>
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_truc</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"></span> Du texte
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">titrem spicon_machin</span><span class="delimiter">"</span></span><span class="tag">></span>Mon titre<span class="tag"></span>
  
  </span></span></span></span>

  2. Une balise #ICON¶

  En complément, on peut vouloir embarquer une icône svg dans le HTML.

  On propose de reprendre et d’adapter la super balise #ICON du plugin Zcore, qui fait ça très bien.
  Cette balise permet d’embarquer une icône du set par défaut, mais également n’importe quelle autre (je rentre pas dans les détails).

  Un modèle correspondant permettra aussi d’inclure des icônes svg dans les textes :

  <span class="CodeRay">#ICONE{identifiant}
  
  #ICONE{chemin/vers/mon_icone.svg}
  
  #ICONE{#identifiant_autre_set}
  
  </span>

  Identifiants sémantiques¶

  Les identifiants des icônes seront directement ceux du jeu d’icônes choisi.
  Mais ils peuvent avoir des noms un peu barbares : chevron-double-right, eye-slash, grip-vertical, etc.

  Dans tous les cas on pourra les utiliser tels quels, mais en plus de ça, on propose de faire une correspondance sémantique pour les icônes correspondants aux actions les plus courantes. Par exemple au lieu de faire #ICONE{chevron-double-down} on pourra faire #ICONE{deplier}.

  La liste initiale est visible ici : https://demo.hedgedoc.org/3zIXkcFLTVSwV0nKC1_qcA?both

  Voilà, je crois que c’est tout, rastapopoulos tu complètera si j’ai oublié des trucs.
  Peut-être qu’on peut partir sur un nouveau ticket pour ce sujet et la branche dev qui ira avec.

  À vous les studios.

• Anomalie #4623 : Styles des fieldset dans l’espace privé

  17 avril 2021

  À vous entendre j’ai un peu l’impression que c’est insoluble.

  À titre personnel :

  - j’aimais bien la démarcation bordure top du fieldset (au contraire même je trouve quelle améliore la lecture, enfin pour celui du premier niveau)
  - je n’aime pas pour sûr non plus le dégradé de bordure sur la proposition de Rasta
  - et je ne suis pas choqué du tout par le "cadre" de la proposition de Nicod ;

  Ce qui me gène par contre un peu plus c’est de démarquer le premier niveau de fieldset ; ou alors il faudrait pouvoir le désactiver avec une classe.

  Je comprends l’argument que tu disais pour "si tu demandes une date en 3 parties jour | mois | annee" (ou je sais plus exactement) tu as besoin que ça se démarque.
  Mais pour pas mal de formulaires utilisés dans SPIP démarquer plus le fieldset de premier niveau est pas utile (d’où peut être de pouvoir désactiver au besoin son décalage). Si tu regardes ?exec=configurer_contenu : il n’ a pas besoin de plus que ça actuellement.

  Maintenant si ça doit être fait quand même, ce que propose Nicod me parait vaguement plus agréable, même si c’est peut être pas assez distinctif. J’enlèverais la marge blanche entre le bord et le premier fieldset également.

  Quelques remarques d’alignement :¶

  - Par ailleurs je crois que (comme le montre Nicod) il faut réaligner le legend avec les labels dessous.
  - Je dirais même qu’il faut aligner ce legend avec les labels au dessus (c’est à dire en soustrayant de la marge l’éventuelle bordure ajoutée)
  - Il ne faudrait pas qu’une éventuelle bordure gauche sur le fieldset dépasse vers le bas (comme encore une fois ce que montre Nicod) ; Ce que je n’ai pas spécialement réussi à faire sur les captures que je montre après (peut être faut décorer la bordure avec un :before {} alors plutôt que de tenter d’altérer les marges des :last-child contenus dans le fieldset)

  Je montre différents tests ensuite, pour montrer que mettre un fieldset de premier niveau "visible" c’est pas gégé sur les formulaires de base, et mieux sans (ou faut un truc pour le désactiver - ou inversement l’activer au besoin). En fait il y a peut être besoin de 2 types de fieldsets (de premier niveau)

  avec bordure gauche, sans marge gauche, alignements verticaux respectés¶

  
  

  Ici le fieldset de premier niveau est bien lourd…

  sans bordure gauche de premier niveau, alignements verticaux respectés¶

  
  

  Le problème est montré sur le dernier champ du formulaire formidable : on ne sait pas s’il est du fieldset ou possiblement en dehors du fieldset

  Bref, tout ça est hyper pas simple. Je n’ai pas l’impression qu’on puisse concilier l’un (la simplicité du premier niveau) sans alourdir visuellement inutilement, et sans proposer 2 « types » de fieldset de premier niveau.
  Je parle même pas de la syntaxe avec ou sans div.fieldset en plus…