Browse Source

Les exemples de code dans des <pre><code>, un tout petit peu de styles pour ces blocs.

svn/root/tags/plugins/dev/0.6.1
tcharlss@bravecassine.com 3 years ago
parent
commit
53851803b4
  1. 1
      .gitattributes
  2. 45
      prive/squelettes/contenu/charte_icones.html
  3. 22
      prive/squelettes/contenu/charte_layout.html
  4. 13
      prive/squelettes/contenu/charte_listes.html
  5. 23
      prive/squelettes/contenu/charte_onglets.html
  6. 33
      prive/style_prive_plugin_dev.html

1
.gitattributes

@ -44,5 +44,6 @@ prive/squelettes/top/charte_layout.html -text
prive/squelettes/top/charte_listes.html -text
prive/squelettes/top/charte_onglets.html -text
prive/squelettes/top/charte_typo.html -text
prive/style_prive_plugin_dev.html -text
prive/themes/spip/images/charte-16.png -text
prive/themes/spip/images/charte-32.png -text

45
prive/squelettes/contenu/charte_icones.html

@ -11,16 +11,16 @@
Un filtre générant des icônes à appliquer sur des liens menant vers des pages d’édition ou autre.
<br>Il existe 2 variantes : une verticale et une horizontale.
<div class="notice">
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é.
Nb &ndash; pour des actions directes, utiliser la balise <code class="spip">&#35;BOUTON_ACTION</code> qui génère un formulaire sécurisé.
</div>
</p>
#BOITE_OUVRIR{'<code class="spip">|icone_verticale</code>'}
#BOITE_OUVRIR{'|icone_verticale'}
<dl>
<dt>Syntaxe</dt>
<dd>
<code class="spip">[(&#35;URL|icone_verticale{chaîne de langue, objet, action, alignement})]</code>
<pre class="spip"><code>[(&#35;URL|icone_verticale{chaîne de langue, objet, action, alignement})]</code></pre>
</dd>
<dt>Objet éditorial / image</dt>
@ -29,11 +29,10 @@
Le 2ème paramètre indique le type d’objet éditorial.
<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é.
</p>
<p>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:info_articles_2:&gt;, article, &apos;&apos;, left})]</code>
<br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:texte_vider_cache:&gt;, cache-empty-24, &apos;&apos;, left})]</code>
<br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_activer_cookie:&gt;, cookie-24, &apos;&apos;, left})]</code>
</p>
<pre class="spip"><code>[(&#35;SELF|icone_verticale{&lt;:info_articles_2:&gt;, article, &apos;&apos;, left})]
[(&#35;SELF|icone_verticale{&lt;:texte_vider_cache:&gt;, cache-empty-24, &apos;&apos;, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_activer_cookie:&gt;, cookie-24, &apos;&apos;, left})]
</code></pre>
<div class="nettoyeur"></div>
[(#SELF|icone_verticale{<:info_articles_2:>, article, '', left})]
[(#SELF|icone_verticale{<:texte_vider_cache:>, cache-empty-24, '', left})]
@ -44,13 +43,11 @@
<dt>Tailles</dt>
<dd>
<p>
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>
</p>
<p>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-16, add, left})]</code>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-24, add, left})]</code>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-32, add, left})]</code>
Il existe au moins 3 tailles pour les icônes des objets éditoriaux, que l’on peut éventuellement préciser : <code class="spip">16</code>, <code class="spip">24</code>, <code class="spip">32</code>
</p>
<pre class="spip"><code>[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-16, add, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-24, add, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article-32, add, left})]</code></pre>
<div class="nettoyeur"></div>
[(#SELF|icone_verticale{<:icone_ecrire_article:>, article-16, add, left})]
[(#SELF|icone_verticale{<:icone_ecrire_article:>, article-24, add, left})]
@ -61,13 +58,11 @@
<dt>Action</dt>
<dd>
<p>
Le 3ème paramètre permet d’indiquer une action : <code>add</code>, <code>edit</code> ou <code>del</code>.
</p>
<p>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_creer_rubrique:&gt;, rubrique, add, left})]</code>
<br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_modifier_rubrique:&gt;, rubrique, edit, left})]</code>
<br><code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_supprimer_rubrique:&gt;, rubrique, del, left})]</code>
Le 3ème paramètre permet d’indiquer une action : <code class="spip">add</code>, <code class="spip">edit</code> ou <code class="spip">del</code>.
</p>
<pre class="spip"><code>[(&#35;SELF|icone_verticale{&lt;:icone_creer_rubrique:&gt;, rubrique, add, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_modifier_rubrique:&gt;, rubrique, edit, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_supprimer_rubrique:&gt;, rubrique, del, left})]</code></pre>
<div class="nettoyeur"></div>
[(#SELF|icone_verticale{<:icone_creer_rubrique:>, rubrique, add, left})]
[(#SELF|icone_verticale{<:icone_modifier_rubrique:>, rubrique, edit, left})]
@ -81,11 +76,9 @@
Le 4ème paramètre permet d'ajouter une classe.
<br><code>left</code>, <code>right</code> et <code>center</code> définissent ’alignement.
</p>
<p>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, center})]</code>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, left})]</code>
<code class="spip">[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, right})]</code>
</p>
<pre class="spip"><code>[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, center})]
[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, left})]
[(&#35;SELF|icone_verticale{&lt;:icone_ecrire_article:&gt;, article, add, right})]</code></pre>
<div class="nettoyeur"></div>
[(#SELF|icone_verticale{<:icone_ecrire_article:>, article, add, center})]
<br class="clear">
@ -103,7 +96,7 @@
<p>
Variante horizontale, prend les mêmes paramètres.
</p>
<code class="spip">[(&#35;SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]</code>
<pre class="spip"><code></code>[(&#35;SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]</code></pre>
<table><tr>
<td>[(#SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]
</td>

22
prive/squelettes/contenu/charte_layout.html

@ -13,32 +13,20 @@
</p>
<div class="gauche">
#BOITE_OUVRIR{gauche}
#BOITE_OUVRIR
Je suis le bloc de gauche
#BOITE_FERMER
</div>
<div class="droite">
#BOITE_OUVRIR{droite}
#BOITE_OUVRIR
Je suis le bloc de droite
#BOITE_FERMER
</div>
<p>
<textarea cols="40" rows="11">
<div class="gauche">
\#BOITE_OUVRIR{droite}
Je suis le bloc de gauche
\#BOITE_FERMER
</div>
<div class="droite">
\#BOITE_OUVRIR{droite}
Je suis le bloc de droite
\#BOITE_FERMER
</div>
</textarea>
</p>
<div class="nettoyeur"></div>
<pre class="spip"><code>&lt;div class=&quot;gauche&quot;&gt;&#10; &#35;BOITE_OUVRIR&#10; Je suis le bloc de gauche&#10; &#35;BOITE_FERMER&#10;&lt;/div&gt;&#10;&#10;&lt;div class=&quot;droite&quot;&gt;&#10; &#35;BOITE_OUVRIR&#10; Je suis le bloc de droite&#10; &#35;BOITE_FERMER&#10;&lt;/div&gt;</code></pre>
<h2>Helpers</h2>

13
prive/squelettes/contenu/charte_listes.html

@ -14,15 +14,4 @@
<li class="item"><a href="#SELF">Un lien normal pour finir</a></li>
</ul>
</div>
<textarea style="width:100%;height:200px;">
<div class="liste">
<h4>Un titre pour la liste : peut être un &lt;hn> quelconque</h4>
<ul class="liste-items">
<li class="item"><a href="#SELF">Un lien ici</a></li>
<li class="item"><a href="#SELF">Un autre lien ici avec un très long texte sur plusieurs lignes. Un autre lien ici avec un très long texte sur plusieurs lignes .Un autre lien ici avec un très long texte sur plusieurs lignes</a></li>
<li class="item on"><a href="#SELF">Un item exposé, mais avec un lien clicable quand même</a></li>
<li class="item"><strong class="on">Le contenu de l'item exposé par un strong</strong></li>
<li class="item"><a href="#SELF">Un lien normal pour finir</a></li>
</ul>
</div>
</textarea>
<pre class="spip"><code>&lt;div class=&quot;liste&quot;&gt;&#10; &lt;h4&gt;Un titre pour la liste : peut &ecirc;tre un &lt;hn&gt; quelconque&lt;/h4&gt;&#10; &lt;ul class=&quot;liste-items&quot;&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un lien ici&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes. Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes .Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item on&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un item expos&eacute;, mais avec un lien clicable quand m&ecirc;me&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;strong class=&quot;on&quot;&gt;Le contenu de l&apos;item expos&eacute; par un strong&lt;/strong&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un lien normal pour finir&lt;/a&gt;&lt;/li&gt;&#10; &lt;/ul&gt;&#10;&lt;/div&gt;</code></pre>

23
prive/squelettes/contenu/charte_onglets.html

@ -17,9 +17,8 @@
[(#VAL{demo}|barre_onglets{demo})]
<p>
<code class="spip">[(&#35;VAL{nomdelabarreonglet}|barre_onglets{pagecourante})]</code>
</p>
<pre class="spip"><code>[(&#35;VAL{nomdelabarreonglet}|barre_onglets{pagecourante})]</code></pre>
<h2>Onglets simples à deux niveaux</h2>
@ -43,20 +42,4 @@ Il n'y a pas de filtre pour les construire car leur structure HTML est très sim
</ul>
</div>
<textarea rows="15" cols="60">
<div class='onglets_simple clearfix'>
<ul>
<li><strong>Onglet expos&eacute;</strong></li>
<li><a>Onglet cliquable</a></li>
<li><a>Onglet cliquable</a></li>
</ul>
</div>
<div class='onglets_simple second clearfix'>
<ul>
<li><strong>Onglet expos&eacute;</strong></li>
<li><a>Onglet cliquable</a></li>
<li><a>Onglet cliquable</a></li>
</ul>
</div>
</textarea>
<pre class="spip"><code>&lt;div class=&apos;onglets_simple clearfix&apos;&gt;&#10; &lt;ul&gt;&#10; &lt;li&gt;&lt;strong&gt;Onglet exposé&lt;/strong&gt;&lt;/li&gt;&#10; &lt;li&gt;&lt;a&gt;Onglet cliquable&lt;/a&gt;&lt;/li&gt;&#10; &lt;li&gt;&lt;a&gt;Onglet cliquable&lt;/a&gt;&lt;/li&gt;&#10; &lt;/ul&gt;&#10;&lt;/div&gt;&#10;&#10;&lt;div class=&apos;onglets_simple second clearfix&apos;&gt;&#10; &lt;ul&gt;&#10; &lt;li&gt;&lt;strong&gt;Onglet expos&amp;eacute;&lt;/strong&gt;&lt;/li&gt;&#10; &lt;li&gt;&lt;a&gt;Onglet cliquable&lt;/a&gt;&lt;/li&gt;&#10; &lt;li&gt;&lt;a&gt;Onglet cliquable&lt;/a&gt;&lt;/li&gt;&#10; &lt;/ul&gt;&#10;&lt;/div&gt;</code></pre>

33
prive/style_prive_plugin_dev.html

@ -0,0 +1,33 @@
[(#REM)
Ce squelette definit les styles de l'espace prive
Note: l'entete "Vary:" sert a repousser l'entete par
defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
genant en cas de "rotation du cookie de session" apres
un changement d'IP (effet de clignotement).
ATTENTION: il faut absolument le charset sinon Firefox croit que
c'est du text/html !
<style>
]
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
#HTTP_HEADER{Vary: Accept-Encoding}
[class^=charte_] pre.spip,
[class^=charte_] code.spip {
background-color: #eee;
background-color: hsla(0, 0%, 0%, 0.033);
color: navy;
border-radius: 2px;
}
[class^=charte_] code.spip {
padding: 0.1em;
}
[class^=charte_] pre.spip {
display: inline-block;
padding: 1em;
max-width: 100%;
overflow-x: auto;
}
Loading…
Cancel
Save