Dotclear

Changeset 1162:007521a4f761


Ignore:
Timestamp:
06/24/13 11:55:36 (12 years ago)
Author:
Nicolas <nikrou77@…>
Branch:
default
Message:

Add button "Clean" to empty list of uploaded files
Update enhanced interface to mimic legacy one

Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed

  • admin/js/_media.js

    r1161 r1162  
    33          return; 
    44     } 
     5 
     6     $('button.clean').click(function(e) { 
     7          $('.fileupload-ctrl .files .upload-file', '#fileupload').slideUp(500); 
     8          $(this).remove(); 
     9          e.preventDefault(); 
     10     }); 
    511 
    612     $('#fileupload').fileupload({ 
    … …  
    1218               $('.media-list p.clear').before(data.result.files[0].html); 
    1319          } 
     20          $('button.clean').show(); 
    1421     }); 
    1522 
    1623     var $container = $('#fileupload').parent().parent(); 
    17      var $msg; 
     24     var $msg,label; 
    1825 
    1926     if ($container.hasClass('enhanced_uploader')) { 
    2027          $msg = dotclear.msg.enhanced_uploader_disable; 
     28          label = dotclear.jsUpload.msg.choose_files; 
    2129          $('#fileupload').fileupload({disabled:false}); 
    2230     } else { 
    2331          $msg = dotclear.msg.enhanced_uploader_activate; 
     32          label = dotclear.jsUpload.msg.choose_file; 
    2433     } 
    2534 
    … …  
    2736          if ($container.hasClass('enhanced_uploader')) { 
    2837               $msg = dotclear.msg.enhanced_uploader_activate; 
     38               label = dotclear.jsUpload.msg.choose_file; 
    2939               $('#upfile').attr('multiple', false); 
    3040 
    31           // when a user has clicked enhanced_uploader, and has added files 
    32           // We must remove files in table 
    33           $('.table-files tr', '#fileupload').remove(); 
    34           $('#fileupload').fileupload({disabled:true}); 
    35      } else { 
    36           $msg = dotclear.msg.enhanced_uploader_disable; 
    37           $('#upfile').attr('multiple', true); 
    38           $('#fileupload').fileupload({disabled:false}); 
    39      } 
    40      $(this).find('a').text($msg); 
     41               // when a user has clicked enhanced_uploader, and has added files 
     42               // We must remove files in table 
     43               $('.files .upload-file', '#fileupload').remove(); 
     44               $('#fileupload').fileupload({disabled:true}); 
     45          } else { 
     46               $msg = dotclear.msg.enhanced_uploader_disable; 
     47               label = dotclear.jsUpload.msg.choose_files; 
     48               $('#upfile').attr('multiple', true); 
     49               $('#fileupload').fileupload({disabled:false}); 
     50          } 
     51          $(this).find('a').text($msg); 
     52          $('.add-label', '#fileupload').text(label); 
    4153 
    42      $container.toggleClass('enhanced_uploader'); 
    43 }).appendTo($('#fileupload')); 
     54          $container.toggleClass('enhanced_uploader'); 
     55     }).appendTo($('#fileupload')); 
    4456 
    4557     // Replace remove links by a POST on hidden form 

  • admin/media.php

    r1161 r1162  
    155155          } catch (Exception $e) { 
    156156               $message['files'][] = array('name' => $upfile['name'], 
     157                    'size' => $upfile['size'], 
    157158                    'error' => $e->getMessage() 
    158159                    ); 
    … …  
    314315     '<p class="clear">'.__('Page(s)').' : '.$pager->getLinks().'</p>'; 
    315316} 
     317if (!isset($pager)) { 
     318     echo 
     319     '<p class="clear"></p>'; 
     320} 
    316321echo 
    317 '<p class="clear"></p>'. 
    318322'</div>'; 
    319323 
    … …  
    335339     ' <form id="fileupload" action="'.html::escapeURL($page_url).'" method="POST" enctype="multipart/form-data">'. 
    336340     '<div>'.form::hidden(array('MAX_FILE_SIZE'),DC_MAX_UPLOAD_SIZE). 
    337      $core->formNonce().'</div>'; 
    338  
    339      echo 
    340      '<div class="fileupload-buttonbar">'. 
    341      '<label class="button add" for="upfile"><span>'.__('Add files').'</span>'. 
    342      '<span class="one-file"> ('.sprintf(__('Maximum size %s'),files::size(DC_MAX_UPLOAD_SIZE)).')</span>'. 
     341     $core->formNonce().'</div>'. 
     342     '<div class="fileupload-ctrl"><div class="files"></div></div>'; 
     343 
     344     echo 
     345     '<div class="fileupload-buttonbar">'; 
     346 
     347     echo 
     348     '<span class="max-size">&nbsp;('.sprintf(__('Maximum size %s'),files::size(DC_MAX_UPLOAD_SIZE)).')</span>'. 
     349     '<label class="button add" for="upfile">'; 
     350 
     351     if ($user_ui_enhanceduploader) { 
     352          echo '<span class="add-label">'.__('Choose files').'</span>'; 
     353     } else { 
     354          echo '<span class="add-label">'.__('Choose file').'</span>'; 
     355     } 
     356     echo  
    343357     '<input type="file" id="upfile" name="upfile[]"'.($user_ui_enhanceduploader?' multiple="mutiple"':'').' data-url="'.html::escapeURL($page_url).'" />'. 
    344      '</label>'. 
    345      '</span>'; 
     358      '</label>'; 
    346359 
    347360     echo 
    … …  
    357370 
    358371     echo 
    359      '<button type="reset" class="button cancel"><span>'.__('Cancel').'</span></button>'. 
     372     '<button class="button clean">'.__('Clean').'</button>'. 
     373     '<input class="button cancel" type="reset" value="'.__('Cancel').'"/>'. 
    360374     '<input class="button start" type="submit" value="'.__('Send').'"/>'. 
    361375     '</div>'; 
    362376 
    363377     echo 
    364      '<table role="presentation" class="table-files table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>'. 
    365378     '<div>'.form::hidden(array('d'),$d).'</div>'. 
    366379     '</fieldset>'. 

  • admin/style/jsUpload/style.css

    r1160 r1162  
    1818} 
    1919 
    20 .enhanced_uploader label.button.add { 
    21   position: relative; 
     20.enhanced_uploader .button span { 
     21  font-size: inherit; 
     22  padding: 0; 
    2223} 
    2324 
    … …  
    2728} 
    2829 
     30.enhanced_uploader .button.add { 
     31  position: relative; 
     32  cursor: pointer; 
     33  font-size: 1em; 
     34  padding: 0; 
     35} 
     36 
    2937.enhanced_uploader .button.add input { 
    3038  position: absolute; 
     39  width: 0; 
     40  height: 0; 
    3141  top: 0; 
    32   right: 0; 
     42  left: 0; 
    3343  margin: 0; 
    3444  opacity: 0; 
    … …  
    3747} 
    3848 
    39 .enhanced_uploader .progress .bar { 
    40   background: transparent url('loader.png') repeat left top; 
     49.enhanced_uploader .add-label, .enhanced_uploader .max-size { 
     50  float: none; 
    4151} 
    4252 
    43 .enhanced_uploader .upload-status { 
    44   margin-top: 3px; 
    45   width: 13px; 
    46   height: 13px; 
    47   display: block; 
     53.button.clean, .button.cancel { 
     54  display: none; 
    4855} 
    4956 
    50 .enhanced_uploader .upload-status.ok { 
    51   background: transparent url('../../images/check-on.png') no-repeat left top; 
     57.enhanced_uploader .button.cancel { 
     58  display: inline-block; 
    5259} 
    5360 
    54 .enhanced_uploader .upload-status.error { 
    55   background: transparent url('../../images/check-off.png') no-repeat left top; 
    56 } 
    57  
    58 .enhanced_uploader .table-files .button.cancel { 
    59   background: transparent url('../../images/check-off.png') no-repeat left top; 
    60   width: 13px; 
    61   height: 13px; 
    62   margin-top: 3px; 
    63   border: none; 
     61.enhanced_uploader .max-size { 
     62  display: block; 
    6463} 
    6564 
    … …  
    6867} 
    6968 
    70 .table-files, .button.cancel { 
    71   display: none; 
    72 } 
    73  
    74 .enhanced_uploader .table-files { 
    75   display: block; 
    76 } 
    77  
    78 .enhanced_uploader .button.cancel { 
    79   display: inline-block; 
    80 } 
    81  
    8269label span.one-file { 
    8370  display: inline; 
    8471} 
     72 
     73/* files */ 
     74.upload-msg { 
     75  font-weight: bold; 
     76} 
     77 
     78.upload-msg.upload-error { 
     79  color: #c00; 
     80} 
     81 
     82.upload-files { 
     83  padding: 0 0.5em; 
     84  margin: 10px 0; 
     85} 
     86 
     87.upload-file { 
     88  margin: 0 0 8px 0; 
     89  position: relative; 
     90} 
     91 
     92.upload-fileinfo { 
     93  margin-left: 16px; 
     94} 
     95 
     96.upload-fileinfo .upload-filecancel { 
     97  display: block; 
     98  margin-top: 3px; 
     99  width: 20px; 
     100  height: 20px; 
     101  background: transparent url("cancel.png") no-repeat left top; 
     102  text-indent: -1000px; 
     103  cursor: pointer; 
     104  float: left; 
     105} 
     106 
     107.upload-filemsg { 
     108  font-weight: bold; 
     109  color: green; 
     110} 
     111 
     112.upload-filemsg.upload-error { 
     113  color: #c00; 
     114} 
     115 
     116.upload-progress { 
     117  padding: 0 1em; 
     118} 
     119 
     120.upload-progress div { 
     121  height: 10px; 
     122  width: 0; 
     123  font-size: 0.8em; 
     124  line-height: 1em; 
     125  height: 1em; 
     126  padding: .2em 0; 
     127  text-align: right; 
     128  background: green url(loader.png) repeat-x left top; 
     129  color: white; 
     130  font-weight: bold; 
     131  border-radius: 2px; 
     132} 

  • inc/admin/lib.dc.page.php

    r1161 r1162  
    690690     '<script id="template-upload" type="text/x-tmpl"> 
    691691     {% for (var i=0, file; file=o.files[i]; i++) { %} 
    692      <tr class="template-upload fade"> 
    693      <td> 
    694      <span class="preview"></span> 
    695      </td> 
    696      <td> 
    697      <p class="name">{%=file.name%}</p> 
    698      {% if (file.error) { %} 
    699      <div><span class="label label-error">'.__('Error:').'</span> {%=file.error%}</div> 
     692     <div class="template-upload fade"> 
     693     <div class="upload-file"> 
     694     <div class="upload-fileinfo"> 
     695          <span class="upload-filename">{%=file.name%}</span> 
     696          <span class="upload-filesize">({%=o.formatFileSize(file.size)%})</span> 
     697          <span class="upload-filecancel cancel">'.__('Cancel').'</span> 
     698          {% if (!o.files.error && !i && !o.options.autoUpload) { %} 
     699          <input type="submit" class="button start" value="'.__('Send').'"/> 
     700          {% } %} 
     701          <span class="upload-filemsg"></span> 
     702     </div> 
     703     {% if (!o.files.error) { %} 
     704     <div class="upload-progress progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div> 
    700705     {% } %} 
    701      </td> 
    702      <td> 
    703      <p class="size">{%=o.formatFileSize(file.size)%}</p> 
    704      {% if (!o.files.error) { %} 
    705      <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> 
    706      {% } %} 
    707      </td> 
    708      <td> 
    709      {% if (!o.files.error && !i && !o.options.autoUpload) { %} 
    710      <input type="submit" class="button start" value="'.__('Send').'"/> 
    711      {% } %} 
    712      </td> 
    713      <td> 
    714      {% if (!i) { %} 
    715      <div class="button cancel" title="'.__('Cancel').'"></div> 
    716      {% } %} 
    717      </td> 
    718      </tr> 
     706     </div> 
    719707     {% } %} 
    720708     </script> 
    … …  
    722710     <script id="template-download" type="text/x-tmpl"> 
    723711     {% for (var i=0, file; file=o.files[i]; i++) { %} 
    724      <tr class="template-download fade"> 
    725      <td> 
    726      <span class="preview"> 
    727      {% if (file.thumbnail_url) { %} 
    728      <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> 
    729      {% } %} 
    730      </span> 
    731      </td> 
    732      <td> 
    733      <p class="name">{%=file.name%}</p> 
    734      {% if (file.error) { %} 
    735      <div><span class="label label-important">'.__('Error:').'</span> {%=file.error%}</div> 
    736      {% } %} 
    737      </td> 
    738      <td> 
    739      <span class="size">{%=o.formatFileSize(file.size)%}</span> 
    740      </td> 
    741      <td> 
    742      {% if (file.error) { %} 
    743      <span class="upload-status error"></span> 
    744      {% } else { %} 
    745      <span class="upload-status ok"></span> 
    746      {% } %} 
    747      </td> 
    748      </tr> 
     712     <div class="template-download fade"> 
     713     <div class="upload-file"> 
     714     <div class="upload-fileinfo"> 
     715          <span class="upload-filename">{%=file.name%}</span> 
     716          <span class="upload-filesize">({%=o.formatFileSize(file.size)%})</span> 
     717          <span class="upload-filemsg{% if (file.error) { %} upload-error{% } %}"> 
     718          {% if (file.error) { %} 
     719          '.__('Error:').'{%=file.error%} 
     720          {% } else { %} 
     721          '.__('File successfully uploaded.').' 
     722          {% } %} 
     723          </span> 
     724     </div> 
     725     <div class="upload-progress"> 
     726          {% if (!file.error) { %} 
     727          <div class="bar" style="width:100%;">100%</div> 
     728          {% } %} 
     729     </div> 
     730     </div> 
    749731     {% } %} 
    750732     </script>'. 
Note: See TracChangeset for help on using the changeset viewer.

Sites map