Recherche avancée

Sur d’autres sites (9340)

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

• Evolution #4271 : valider_url_distante => pouvoir déclarer des domaines distants et pas seulement ...

  22 janvier 2019, par - Equipement

  Pour la première piste, qui consiste à pouvoir déclarer ’.example.com’ dans le pipeline pour inclure tous les *.example.com au lieu des les énumérer un par un, ci-dessous un exemple de code que j’ai testé. Il consiste à remplacer la partie de code actuel de la fonction valider_url_distante :

  <span class="CodeRay">    <span class="local-variable">$is_known_host</span> = <span class="predefined-constant">false</span>;
      <span class="keyword">foreach</span> (<span class="local-variable">$known_hosts</span> <span class="keyword">as</span> <span class="local-variable">$known_host</span>) {
          <span class="local-variable">$parse_known</span> = <span class="predefined">parse_url</span>(<span class="local-variable">$known_host</span>);
          <span class="keyword">if</span> (<span class="local-variable">$parse_known</span>
            <span class="keyword">and</span> <span class="predefined">strtolower</span>(<span class="local-variable">$parse_known</span>[<span class="string"><span class="delimiter">'</span><span class="content">host</span><span class="delimiter">'</span></span>]) === <span class="predefined">strtolower</span>(<span class="local-variable">$parsed_url</span>[<span class="string"><span class="delimiter">'</span><span class="content">host</span><span class="delimiter">'</span></span>])) {
              <span class="local-variable">$is_known_host</span> = <span class="predefined-constant">true</span>;
              <span class="keyword">break</span>;
          }
      }
  </span>
  Télécharger

  par le code suivant :

  <span class="CodeRay">        <span class="local-variable">$is_known_host</span> = <span class="predefined-constant">false</span>;
          <span class="keyword">foreach</span> (<span class="local-variable">$known_hosts</span> <span class="keyword">as</span> <span class="local-variable">$known_host</span>) {
              <span class="keyword">if</span> (<span class="predefined">substr</span>(<span class="local-variable">$known_host</span>,<span class="integer">0</span>,<span class="integer">1</span>)==<span class="string"><span class="delimiter">'</span><span class="content">.</span><span class="delimiter">'</span></span>){
                  <span class="comment">// cas d'un domaine</span>
                  <span class="keyword">if</span> (<span class="predefined">strtolower</span>(<span class="local-variable">$known_host</span>) === <span class="predefined">strtolower</span>(<span class="predefined">substr</span>(<span class="local-variable">$parsed_url</span>[<span class="string"><span class="delimiter">'</span><span class="content">host</span><span class="delimiter">'</span></span>],-<span class="predefined">strlen</span>(<span class="local-variable">$known_host</span>)))) {
                      <span class="local-variable">$is_known_host</span> = <span class="predefined-constant">true</span>;
                      <span class="keyword">break</span>;
                  }
              } <span class="keyword">else</span> {
                  <span class="local-variable">$parse_known</span> = <span class="predefined">parse_url</span>(<span class="local-variable">$known_host</span>);
                  <span class="keyword">if</span> (<span class="local-variable">$parse_known</span>
                    <span class="keyword">and</span> <span class="predefined">strtolower</span>(<span class="local-variable">$parse_known</span>[<span class="string"><span class="delimiter">'</span><span class="content">host</span><span class="delimiter">'</span></span>]) === <span class="predefined">strtolower</span>(<span class="local-variable">$parsed_url</span>[<span class="string"><span class="delimiter">'</span><span class="content">host</span><span class="delimiter">'</span></span>])) {
                      <span class="local-variable">$is_known_host</span> = <span class="predefined-constant">true</span>;
                      <span class="keyword">break</span>;
                  }
              }
          }
  </span>
  Télécharger

• Evolution #4080 : Raccourci puce : se débarasser de l’image

  28 septembre 2018, par cedric -

  Je note que la demande initiale simple était "ne plus avoir une image sur cette puce parce qu’on ne peut pas la personaliser" et qu’à la fin il s’agit de tout revoir le fonctionnement des raccourcis SPIP et donc qu’on ne fera rien :)

  Pour revenir au point de départ :

  1/ peut-être ça manque de documentation mais la puce est totalement personnalisable via le mes_options.php :
  

  $GLOBALS[’puce’] = ’’ ;
  $GLOBALS[’puce_rtl’] = ’’ ;
  $GLOBALS[’puce_prive’] = ’’ ;
  $GLOBALS[’puce_prive_rtl’] = ’’ ;
  

  2/ ça paraitrait moderne de passer à une puce unicode par défaut décorée en CSS avec un fallback texte pour les sites qui upgraderont sans avoir la CSS qui va bien
  

  —
  avec les styles suivants :
  .spip-puce b display:none ;
  
  .spip-puce 
  
    position : relative ;
  
    top : 1px ;
  
    display : inline-block ;
  
    font-style : normal ;
  
    font-weight : normal ;
  
    line-height : 1 ;
  
    -webkit-font-smoothing : antialiased ;
  
    -moz-osx-font-smoothing : grayscale ;
  
  
  
  .spip-puce:before 
  
  content : "\2023" ;
  
  
  

  Avec puce à choisir parmi
  https://unicode-table.com/fr/2023/
  https://unicode-table.com/fr/25B8/
  https://unicode-table.com/fr/25B6/

  Du coup sans ces styles spécifiques, la puce est un simple tiret typographique, et avec les styles c’est un caractère qui s’affiche dans la couleur et taille de texte courante, et stylable

  2b/
  Voire si on veut faire une transition vraiment smoothly on garde le img actuel en fallback dans le span (au lieu du simple tiret), et il ne s’affichera plus que sur les anciens sites qui n’ont pas ajoutés la nouvelle CSS
  (et on prévient que dans une prochaine version cette puce image disparaitra complètement)

  3/ à partir du moment où on a un plugin qui permet de transformer ces puces en liste je pense que garder le comportement actuel par défaut dans SPIP est pertinent et le plus logique