Changeset 107887 in spip-zone


Ignore:
Timestamp:
Dec 6, 2017, 12:07:05 PM (16 months ago)
Author:
tcharlss@…
Message:

Charte : on ajoute 2 pages pour le layout et les onglets. On complète la page des icônes. On remplace <tt> par <code> comme indiqué dans... la charte elle-même (il en reste peut-être encore).

Location:
_core_/plugins/dev
Files:
4 added
10 edited

Legend:

Unmodified
Added
Removed
  • _core_/plugins/dev/lang/charter_fr.php

    r97141 r107887  
    3636        'titre_formulaires' => 'Formulaires',
    3737        'titre_icones' => 'Icônes',
     38        'titre_layout' => 'Layout',
    3839        'titre_listes' => 'Listes',
    39         'titre_typo' => 'Typo'
     40        'titre_onglets' => 'Onglets',
     41        'titre_typo' => 'Typo',
     42        'titre_barreonglets_demo1' => 'Page 1',
     43        'titre_barreonglets_demo2' => 'Page 2',
     44        'titre_barreonglets_demo3' => 'Page 3',
    4045);
  • _core_/plugins/dev/paquet.xml

    r106531 r107887  
    1414
    1515        <onglet nom="charte" titre="charter:titre_charte" parent="charte" action="charte" />
     16        <onglet nom="charte_layout" titre="charter:titre_layout" parent="charte" action="charte_layout" />
     17        <onglet nom="charte_onglets" titre="charter:titre_onglets" parent="charte" action="charte_onglets" />
    1618        <onglet nom="charte_icones" icone="images/cfg-24.png" titre="charter:titre_icones" parent="charte" action="charte_icones" />
    1719        <onglet nom="charte_typo" icone="images/article-24.png" titre="charter:titre_typo" parent="charte" action="charte_typo" />
     
    2022        <onglet nom="charte_forms" titre="charter:titre_formulaires" parent="charte" action="charte_forms" />
    2123
     24        <onglet nom="demo" titre="charter:titre_barreonglets_demo1" parent="demo" action="charte_onglets" />
     25        <onglet nom="demo_2" titre="charter:titre_barreonglets_demo2" parent="demo" action="charte_onglets" />
     26        <onglet nom="demo_3" titre="charter:titre_barreonglets_demo3" parent="demo" action="charte_onglets" />
     27
    2228        <menu nom="charte" titre="charter:titre_charte" parent="menu_developpement" icone="images/charte-16.png" action="charte" />
    2329
  • _core_/plugins/dev/prive/squelettes/contenu/charte.html

    r59632 r107887  
    1010
    1111<p>
    12 Ces pages donnent des exemples de structures HTML utilisées par les squelettes de l'espace privé       
    13 </p>
    14 [(#VAL{charte}|barre_onglets{charte})]
    15 <p>Le menu à onglet est généré par le code <tt>[(&#35;VAL{nomdelabarreonglet}|barre_onglets{pagecourante})]</tt>
    16 <br />Ce menu n'a pas l'apparence de vrais onglets car il constitue une navigation avec changement de page. Ce menu est extensible par les plugins car la liste des pages le constituant est décrite dans <tt>paquet.xml</tt>
     12        Ces pages donnent des exemples de la structures HTML utilisée par les squelettes de l'espace privé.
    1713</p>
    1814
    19 
    20 <h3>Des onglets simples à deux niveaux</h3>
    21 <p>Les onglets simples sont utilisés préférentiellement pour de la navigation ou du filtrage au sein de la même page. Ils sont utilisés avec des liens ajax pour être plus réactifs, ce qui est attendu par les utilisateurs confrontés à un onglet.
    22 <br />
    23 Il n'y a pas de filtre pour les construire car leur structure HTML est très simple.</p>
    24 <div class='onglets_simple clearfix'>
    25         <ul>
    26                 <li><strong>Onglet expos&eacute;</strong></li>
    27                 <li><a>Onglet cliquable</a></li>
    28                 <li><a>Onglet cliquable</a></li>
    29         </ul>
    30 </div>
    31 
    32 <div class='onglets_simple second clearfix'>
    33         <ul>
    34                 <li><strong>Onglet expos&eacute;</strong></li>
    35                 <li><a>Onglet cliquable</a></li>
    36                 <li><a>Onglet cliquable</a></li>
    37         </ul>
    38 </div>
    39 <textarea rows="15" cols="60">
    40 <div class='onglets_simple clearfix'>
    41         <ul>
    42                 <li><strong>Onglet expos&eacute;</strong></li>
    43                 <li><a>Onglet cliquable</a></li>
    44                 <li><a>Onglet cliquable</a></li>
    45         </ul>
    46 </div>
    47 
    48 <div class='onglets_simple second clearfix'>
    49         <ul>
    50                 <li><strong>Onglet expos&eacute;</strong></li>
    51                 <li><a>Onglet cliquable</a></li>
    52                 <li><a>Onglet cliquable</a></li>
    53         </ul>
    54 </div>
    55 </textarea>
     15<p>
     16        Lors du développement de plugins, respecter cette charte garantit la meilleure intégration possible dans l’interface de SPIP et les futures versions du thème.
     17</p>
  • _core_/plugins/dev/prive/squelettes/contenu/charte_icones.html

    r59632 r107887  
    88<h1 class="grostitre">Icônes</h1>
    99
    10 #BOITE_OUVRIR{'|icone_verticale','info'}
    11 <tt>[(&#35;URL_ECRIRE{accueil}
    12 |icone_verticale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
    13 [(#URL_ECRIRE{accueil}|icone_verticale{<:icone_modifier_article:>,article,new})]
    14 <hr style="clear:both;" />
    15 <tt>[(&#35;SELF|icone_verticale{<:</tt><tt>icone_modifier_article:>,article,edit,left})]</tt>
    16 [(#SELF|icone_verticale{<:icone_modifier_article:>,article,edit,left})]
    17 <hr style="clear:both;" />
    18 <tt>[(&#35;SELF|icone_verticale{<:</tt><tt>icone_modifier_article:>,article,new,right})]</tt>
    19 [(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,right})]
    20 <hr style="clear:both;" />
    21 <tt>[(&#35;SELF|icone_verticale{<:</tt><tt>icone_modifier_article:>,article,new,center})]</tt>
    22 [(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,center})]
    23 <hr style="clear:both;" />
    24 <tt>[(&#35;SELF|icone_verticale{<:</tt><tt>icone_modifier_article:>,article,del,right})]</tt>
    25 [(#SELF|icone_verticale{<:icone_modifier_article:>,article,del,right})]
     10<p>
     11        Un filtre générant des icônes à appliquer sur des liens menant vers des pages d’édition ou autre.
     12        <br>Il existe 2 variantes : une verticale et une horizontale.
     13        <div class="notice">
     14        Nb &ndash; pour des actions directes, il faut utiliser la balise <code class="spip">&#35;BOUTON_ACTION</code> qui génère un formulaire sécurisé.
     15        </div>
     16</p>
     17
     18#BOITE_OUVRIR{'<code class="spip">|icone_verticale</code>'}
     19<dl>
     20
     21        <dt>Syntaxe</dt>
     22        <dd>
     23                <code class="spip">[(&#35;URL|icone_verticale{chaîne de langue, objet, action, alignement})]</code>
     24        </dd>
     25
     26        <dt>Objet éditorial / image</dt>
     27        <dd>
     28                <p>
     29                        Le 2ème paramètre indique le type d’objet éditorial.
     30                        <br>Nb &ndash; Concrètement, cela correspond à une image, on peut théoriquement utiliser n’importe quelle image du thème de l’espace privé.
     31                </p>
     32                <p>
     33                                <code class="spip">[(&#35;SELF|icone_verticale{&lt;:info_articles_2:&gt;, article, &apos;&apos;, left})]</code>
     34                                <br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:texte_vider_cache:&gt;, cache-empty-24, &apos;&apos;, left})]</code>
     35                                <br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_activer_cookie:&gt;, cookie-24, &apos;&apos;, left})]</code>
     36                </p>
     37                <div class="nettoyeur"></div>
     38                [(#SELF|icone_verticale{<:info_articles_2:>, article, '', left})]
     39                [(#SELF|icone_verticale{<:texte_vider_cache:>, cache-empty-24, '', left})]
     40                [(#SELF|icone_verticale{<:icone_activer_cookie:>, cookie-24, '', left})]
     41                <div class="nettoyeur"></div>
     42        </dd>
     43
     44        <dt>Tailles</dt>
     45        <dd>
     46                <p>
     47                        Il existe en général 3 tailles pour les icônes des objets éditoriaux, que l’on peut éventuellement préciser : <code>16</code>, <code></code>24</code>, <code></code>32</code>
     48                </p>
     49                <p>
     50                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-16, add, left})]</code>
     51                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-24, add, left})]</code>
     52                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-32, add, left})]</code>
     53                </p>
     54                <div class="nettoyeur"></div>
     55                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article-16, add, left})]
     56                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article-24, add, left})]
     57                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article-32, add, left})]
     58                <div class="nettoyeur"></div>
     59        </dd>
     60
     61        <dt>Action</dt>
     62        <dd>
     63                <p>
     64                        Le 3ème paramètre permet d’indiquer une action : <code>add</code>, <code>edit</code> ou <code>del</code>.
     65                </p>
     66                <p>
     67                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_creer_rubrique:&gt;, rubrique, add, left})]</code>
     68                        <br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_modifier_rubrique:&gt;, rubrique, edit, left})]</code>
     69                        <br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_supprimer_rubrique:&gt;, rubrique, del, left})]</code>
     70                </p>
     71                <div class="nettoyeur"></div>
     72                [(#SELF|icone_verticale{<:icone_creer_rubrique:>, rubrique, add, left})]
     73                [(#SELF|icone_verticale{<:icone_modifier_rubrique:>, rubrique, edit, left})]
     74                [(#SELF|icone_verticale{<:icone_supprimer_rubrique:>, rubrique, del, left})]
     75                <div class="nettoyeur"></div>
     76        </dd>
     77
     78        <dt>Classe</dt>
     79        <dd>
     80                <p>
     81                        Le 4ème paramètre permet d'ajouter une classe.
     82                        <br><code>left</code>, <code>right</code> et <code>center</code> définissent ’alignement.
     83                </p>
     84                <p>
     85                                <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, center})]</code>
     86                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, left})]</code>
     87                        <code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, right})]</code>
     88                </p>
     89                <div class="nettoyeur"></div>
     90                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article, add, center})]
     91                <br class="clear">
     92                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article, add, left})]
     93                <br class="clear">
     94                [(#SELF|icone_verticale{<:icone_ecrire_article:>, article, add, right})]
     95                <div class="nettoyeur"></div>
     96        </dd>
     97
     98</dl>
    2699#BOITE_FERMER
    27100
    28 #BOITE_OUVRIR{'|icone_horizontale','info'}
    29         <tt>[(&#35;SELF|icone_horizontale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
     101
     102#BOITE_OUVRIR{<code>|icone_horizontale</code>}
     103        <p>
     104                Variante horizontale, prend les mêmes paramètres.
     105        </p>
     106        <code class="spip">[(&#35;SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]</code>
    30107        <table><tr>
    31108                <td>[(#SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]
     
    36113        </tr></table>
    37114#BOITE_FERMER
    38 #BOITE_OUVRIR{'|icone_horizontale','info'}
    39                 <tt>[(&#35;SELF|icone_horizontale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
    40                 [(#SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]
    41                 [(#SELF|icone_horizontale{texte sur plusieurs<br />lignes pour voir si l'icône<br /> se centre bien <br />verticalement,rubrique,edit})]
    42                 [(#SELF|icone_horizontale{'deux<br />lignes',site,del})]
    43                 [(#SELF|icone_horizontale{'short',mot})]
    44 #BOITE_FERMER
  • _core_/plugins/dev/prive/squelettes/top/charte.html

    r43609 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte})]
  • _core_/plugins/dev/prive/squelettes/top/charte_boites.html

    r43609 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte_boites})]
  • _core_/plugins/dev/prive/squelettes/top/charte_forms.html

    r43609 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte_forms})]
  • _core_/plugins/dev/prive/squelettes/top/charte_icones.html

    r43609 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte_icones})]
  • _core_/plugins/dev/prive/squelettes/top/charte_listes.html

    r47880 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte_listes})]
  • _core_/plugins/dev/prive/squelettes/top/charte_typo.html

    r43609 r107887  
     1#LARGEUR_ECRAN{pleine_largeur}
     2
    13[(#VAL{charte}|barre_onglets{charte_typo})]
Note: See TracChangeset for help on using the changeset viewer.