Recherche avancée

Sur d’autres sites (8087)

• 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.

• Nomenclature #4626 : Renommer le menu "Squelettes"

  3 mai 2021, par RastaPopoulos ♥

  Pfiou voilà, je suis allé voir chaque page de chacun des plugins qui s’insère actuellement pour faire le point !

  Mise en page¶

  - ACS : comme le noizetier, mise en page à partir de blocs
  - Campagnes : pour la gestion de encarts à insérer ensuite dans la mise en page (ensuite dans chaque encart on gère les campagnes de bandeaux, mais le menu lui c’est pour aller à la gestion des encarts), pourrait éventuellement virer ailleurs en reformulant des choses
  - Comments : config du mode de mise en page des commentaires (threads ou pas, etc)
  - Compositions : liste les variantes de mise en page pour chaque type de contenu
  - Eléments : de la mise en page sur les contenus (comme le noizetier, et n’a d’ailleurs plus trop d’intérêt depuis plusieurs années que le noizetier sait aussi configurer des blocs pour tel contenu précis, pas que en global)
  - eva-web-bonus eva-web-habillage eva-web-install eva-web-mentions : configuration de la mise en page ou des styles du squelette Eva
  - Kaye : pour configurer la mise en page du cahier de texte
  - menu_langues_liens : configurer la manière d’afficher le changement de langue
  - noizetier : mettre en page le site entier par petits blocs
  - porte_plume_enluminures_typographiques : configure la mise en page des textes de contenus suivant les nouvelles syntaxes
  - seminaire : configuration de mise en page je crois, mais sinon ça devrait aller juste dans SVP
  - sociaux : configure quels liens et leur affichage
  - spip_visuels : configurer les rôles de visuels (pourrait peut-être aller ailleurs, et surtout remplacé par Rôles de documents bien plus pérenne car basé sur les documents existants)
  - squelettes_par_mots_cle : un peu un ancêtre de Compositions, mettre en page des contenus avec un autre squelette suivant un mot-clé
  - switcher : très vieille contrib, configure si on affiche le switcher de squelette (donc de mise en page !), mais c’est juste une config globale une unique fois, donc pourrait parfaitement être dans SVP uniquement

  Navigation¶

  - Court-circuit : change le comportement des liens pour certaines rubriques pour aller à un article interne directement
  - exclure_secteur : masque des secteurs entiers, mais pourrait aller dans Publication, je crois, puisque ça dépublie par défaut littéralement des branches
  - menus : créer et remplir les menus de navigation

  Styles et comportement d’affichage¶

  - Adaptive images : taille des images, lazyload ou pas, styles des previews
  - cloudzoom : un peu comme modalbox, configurer les images zoomables
  - fontawesome5 : sert juste à voir les icones existantes
  - forkawesome : pareil
  - Links : configure le style des liens externes et comment les afficher quand on clique
  - mediaspip_player : configurer l’apparence du lecteur
  - picto : comme fontawesome, sert juste à voir les icones existantes
  - player : choix du lecteur audio (conditionnant essentiellement son affichage)
  - rainette : configure l’affichage de la zone météo
  - recherche_mots_cles : pour configurer comment s’affiche (mais ce plugin n’est plus vraiment maintenu pour l’instant et cette page toujours en vieux exec PHP)
  - refbase : configure la manière d’afficher les bibliographies
  - sjcycle : configure l’affichage du carrousel
  - slick : configure l’affichage du carrousel
  - timecircles : configure l’affichage des timers
  - tooltip : configure l’affichage des infobulles
  - videos : configure l’affichage des vidéos (mais de nos jours on utilise plutôt oEmbed)
  - w3css : configurer l’apparence graphique en choisissant le thème du framework

  À virer ailleurs¶

  - champs_extras_synchronisation
  - Chosen : devrait virer complètement et être juste dans SVP, ou à la limite dans Configuration : c’est un truc qu’on configure une unique fois en gros, ce n’est pas à retrouver en permanence
  - comarquage : la dernière version du plugin ne s’insère plus donc sans objet
  - dublin_core : il s’agit de SEO/indexation/meta infos dans les métas du site et c’est juste la page de config général du plugin : soit juste SVP soit Configurer (soit Publication ? trouver où regrouper tous les trucs SEO, métas infos ?)
  - mathjax : aucun rapport ni squelette ni mise en page, c’est pour configurer comment le script JS est appelé CDN ou en local. En plus cette page ne devrait même pas exister, car CDN tierce on n’en veut pas normalement dans SPIP par défaut, le JS devrait toujours être interne au site
  - select2 : exactement comme Chosen, n’a pas à être retrouvé en permanence dans les menus, ça se configure une fois à l’installation
  - seo : trouver un autre endroit Publication ou Configuration, c’est de la méta information, voire juste SVP si c’est que la config générale à faire une fois
  - skeleditor : menu Développement !
  - xray : menu Développement !
  - zinit : j’ai pas tout compris mais j’ai l’impression que c’est pour aider les intégrateurices donc du dev donc Développement
  - xiti : statistiques, mais si config globale une unique fois : dans SVP uniquement, à la limite dans Configuration

• Revision 37329 : On entoure la fréquence d’une classe spécifique permettant de jouer dessus ...

  16 avril 2010, par kent1@… — Log

  On entoure la fréquence d’une classe spécifique permettant de jouer dessus via CSS ou js