Changeset 106905 in spip-zone


Ignore:
Timestamp:
Oct 15, 2017, 4:50:39 PM (23 months ago)
Author:
tetue@…
Message:

Positionner de même le nom du langage et le bouton (galère)

Location:
_plugins_/precode/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/precode/trunk/css/precode.css

    r106904 r106905  
    1 /* Code pour SPIP */
     1/* Pre et Code
     2 * pour SPIP
     3 */
    24
    3 pre,
    4 code,
    5 kbd,
    6 samp,
    7 var,
    8 tt {}
     5/* patch pour SPIP qui génère des <br> intempestifs
     6à corriger : https://core.spip.net/issues/2504 */
     7pre br,
     8pre code br { display: none !important; }
    99
    10 /* Texte pré-formaté */
    11 pre {
    12   border: 1px solid;
    13   border-style: solid;
    14   border-width: 2px 2px 2px 4px;
    15   border-radius: 0 4px 4px 0;
    16   line-height: initial;   /* Pour préserver la lisibilité en monoscpace */
     10/* Positionner de même le nom du langage et le bouton */
     11.precode {
     12  position: relative;
     13}
     14pre[class]::before,
     15.btn-copy {
     16  position: absolute;
     17  top: 5px;
     18  text-transform: lowercase;
     19  font-family: monospace;
     20  line-height: 1;
     21  font-size: 0.8rem;
    1722}
    1823
     
    2126pre code {
    2227  overflow-x: auto;       /* Ajoute un scroll horizontal en cas de dépassement */
    23   padding: 12px;
    24   padding-bottom: 12px;   /* Préserve l'espace suffisant pour la barre de scroll */
     28  padding: 15px 10px;
     29  padding-bottom: 15px;   /* Préserve l'espace suffisant pour la barre de scroll */
    2530}
    2631
    27 /* Blocs de code */
     32/* texte pré-formaté */
     33pre {
     34  border: 1px solid;
     35  border-style: solid;
     36  border-width: 2px 2px 2px 4px;
     37  border-radius: 0 4px 4px 0;
     38  line-height: initial;   /* Préserve la lisibilité en monoscpace */
     39}
     40
     41/* blocs de code */
    2842pre[class] {
    29   position: relative;
    30   overflow: hidden;       /* Annuler le scroll qui est déplacé sur code */
     43  overflow: hidden;       /* Annule le scroll qui est déplacé sur code */
    3144  padding: 0;
    3245  background: #F8F8F8;
     
    3447pre[class]::before {
    3548  content: attr(class);
    36   position: absolute;
    37   top: 3px;
    3849  right: 6px;
    39   line-height: 1;
    40   text-transform: lowercase;
    41   font-size: .8rem;
    4250}
    4351pre code {
     
    4553  background: transparent;
    4654}
    47 pre br,
    48 pre code br { display: none !important; } /* patch pour SPIP qui génère des <br> intempestifs, cf.: https://core.spip.net/issues/2504 */
    4955
    50 /* Variantes par langage */
     56/* bouton de copie */
     57.btn-copy {
     58  display: none;
     59  cursor: pointer;
     60  color: #999;
     61  right: 4em;
     62  margin: 0;
     63  padding: 0;
     64  background: transparent;
     65  border: 0;
     66  border-radius: 0;
     67  outline: 0;
     68}
     69.precode:hover .btn-copy,
     70.precode .btn-copy.copied { display: block; }
     71.precode .btn-copy:hover { color: #666; transition: color 250ms ease-out; }
     72.precode .btn-copy.copied { color: #42DC42 !important; transition: color 250ms ease-out; }
     73.precode .btn-copy.copied span::before { content: '\2713\a0'; }
     74
     75/* Variantes colorées par langage */
    5176pre               { border-color: rgba(119, 119, 119, .2); border-left-color: #BBB; }
    5277pre::before       { color: rgba(119, 119, 119, .5); }
     
    7499http://hex2rgba.devoth.com */
    75100
    76 /* bouton de copie du code */
    77 .precode {
    78   position: relative;
    79   margin-bottom: 1.5em;
    80 }
    81 .copy-button {
    82   display: none;
    83   position: absolute;
    84   top: 5px;
    85   right: 4em;
    86   margin: 0;
    87   padding: 0;
    88   background: transparent;
    89   border: 0;
    90   border-radius: 0;
    91   outline: 0;
    92   text-transform: lowercase;
    93   line-height: 1;
    94   font-size: .8rem;
    95   font-family: monospace;
    96   color: #999;
    97   cursor: pointer;
    98 }
    99 
    100 .precode:hover .copy-button,
    101 .precode .copy-button.copied {
    102   display: inline-block;
    103 }
    104 .precode .copy-button.copied {
    105   color: #42DC42 !important; transition: color 250ms ease-out;
    106 }
    107 .precode .copy-button.copied span::before {
    108   content: '\2713\a0';
    109 }
    110 
    111101/* Autres */
    112102kbd {
  • _plugins_/precode/trunk/demo/precode.html

    r106904 r106905  
    1212<h2>Texte pré-formaté</h2>
    1313
    14 <pre>
     14<div class="precode">
     15<pre dir="ltr" style="text-align: left;">
    1516###### #    #   ##   #    # #####  #      ######
    1617#       #  #   #  #  ##  ## #    # #      #     
     
    2021###### #    # #    # #    # #      ###### ######
    2122</pre>
     23<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     24</div>
    2225
    23 <pre>Exemple de contenu long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
     26<div class="precode">
     27<pre dir="ltr" style="text-align: left;">Exemple de contenu long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
    2428 ______________________________________________________________
    2529|                    |                     |                   |
     
    3034|____________________|_____________________|___________________|
    3135</pre>
     36<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     37</div>
    3238
    33 <pre>Exemple de pre long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
     39<div class="precode">
     40<pre dir="ltr" style="text-align: left;">Exemple de pre long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
    3441avec du texte {en italique}, du texte {{en gras}}
    3542et un [lien hypertexte->http://www.spip.net]
    3643</pre>
     44<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     45</div>
    3746
    3847<h2>Code informatique</h2>
     
    4251<h3>Blocs de code</h3>
    4352
    44 <pre><code>Exemple
     53<div class="precode">
     54<pre dir="ltr" style="text-align: left;"><code>Exemple
    4555de code quelconque long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
    4656</code></pre>
     57<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     58</div>
    4759
    48 <pre class="code"><code>Exemple
     60<div class="precode">
     61<pre dir="ltr" style="text-align: left;" class="code"><code>Exemple
    4962de code quelconque long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
    5063</code></pre>
     64<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     65</div>
    5166
    52 <pre class="spip"><code>Exemple
     67<div class="precode">
     68<pre dir="ltr" style="text-align: left;" class="spip"><code>Exemple
    5369de code SPIP
    5470
     
    5773&lt;/BOUCLE_articles>
    5874</code></pre>
     75<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     76</div>
    5977
    60 <pre class="html"><code>Exemple
     78<div class="precode">
     79<pre dir="ltr" style="text-align: left;" class="html"><code>Exemple
    6180de code HTML
    6281
     
    6786de code&lt/code>&lt/pre>
    6887</code></pre>
     88<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     89</div>
    6990
    70 <pre class="css"><code>Exemple
     91<div class="precode">
     92<pre dir="ltr" style="text-align: left;" class="css"><code>Exemple
    7193de code CSS
    7294
     
    7496.code { ... }
    7597</code></pre>
     98<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     99</div>
    76100
    77 <pre class="less"><code>Exemple
     101<div class="precode">
     102<pre dir="ltr" style="text-align: left;" class="less"><code>Exemple
    78103de code LESS
    79104</code></pre>
     105<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     106</div>
    80107
    81 <pre class="scss"><code>Exemple
     108<div class="precode">
     109<pre dir="ltr" style="text-align: left;" class="scss"><code>Exemple
    82110de code SCSS
    83111</code></pre>
     112<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     113</div>
    84114
    85 <pre class="js"><code>Exemple
     115<div class="precode">
     116<pre dir="ltr" style="text-align: left;" class="js"><code>Exemple
    86117de code JS
    87118</code></pre>
     119<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     120</div>
    88121
    89 <pre class="php"><code>Exemple
     122<div class="precode">
     123<pre dir="ltr" style="text-align: left;" class="php"><code>Exemple
    90124de code PHP
    91125
     
    95129?>
    96130</code></pre>
     131<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     132</div>
    97133
    98 <pre class="xml"><code>Exemple
     134<div class="precode">
     135<pre dir="ltr" style="text-align: left;" class="xml"><code>Exemple
    99136de code XML
    100137</code></pre>
     138<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>
     139</div>
    101140
    102141<hr>
  • _plugins_/precode/trunk/js/precode.js.html

    r106904 r106905  
    1010                // ajouter un bouton pour copier le code
    1111                $('pre:has(code)')
    12                         .after('<button type="button" class="copy-button" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>');
     12                        .after('<button type="button" class="btn-copy" aria-label="<:precode:bouton_copier_aria_label:>"><span><:precode:bouton_copier_label:></span></button>');
    1313
    14                 var clip = new Clipboard('.copy-button', {
     14                var clip = new Clipboard('.btn-copy', {
    1515                        target: function(trigger) {
    1616                                var text = trigger.previousSibling.children[0];
     
    2020
    2121                clip.on('success', function(e) {
    22                         $('.copy-button').removeClass('copied');
     22                        $('.btn-copy').removeClass('copied');
    2323                        e.trigger.className = e.trigger.className + ' copied';
    2424                        e.clearSelection();
  • _plugins_/precode/trunk/plugin.xml

    r106904 r106905  
    44        <icon>precode.png</icon>
    55
    6         <version>1.3.0</version>
     6        <version>1.3.1</version>
    77        <etat>experimental</etat>
    88        <categorie>outil</categorie>
Note: See TracChangeset for help on using the changeset viewer.