Changeset 29394


Ignore:
Timestamp:
09/03/14 21:56:59 (5 years ago)
Author:
mistic100
Message:

feature:2616 add custom big progressbar

Location:
trunk/admin/themes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/themes/clear/theme.css

    r29393 r29394  
    368368.userPropertiesContainer {border-color:#ddd;} 
    369369.userPrefs {border-color:#ddd;} 
     370 
     371.big-progressbar { 
     372  background:#DFDFDF; 
     373  border:1px solid #ccc; 
     374} 
     375.big-progressbar .progressbar { 
     376  background:#005E89; 
     377  background:#42A4CE linear-gradient(135deg, rgba(14,114,158,0) 44%,rgba(14,114,158,0.4) 44%,rgba(14,114,158,0.4) 57%,rgba(14,114,158,0) 57%); 
     378  background-size:25px 25px; 
     379  box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.4); 
     380} 
  • trunk/admin/themes/default/template/photos_add_direct.tpl

    r29393 r29394  
    9797            up.start(); 
    9898          }); 
     99         
     100        jQuery('#cancelUpload').on('click', function(e) { 
     101            e.preventDefault(); 
     102            up.stop(); 
     103            up.trigger('UploadComplete', up.files); 
     104          }); 
    99105      } 
    100106    }, 
     
    106112      }, 
    107113       
     114      UploadProgress: function(up, file) { 
     115        jQuery('#uploadingActions .progressbar').width(up.total.percent+'%'); 
     116      }, 
     117       
    108118      BeforeUpload: function(up, file) { 
    109119        //console.log('[BeforeUpload]', file); 
     
    111121        // hide buttons 
    112122        jQuery('#startUpload, #addFiles').hide(); 
     123        jQuery('#uploadingActions').show(); 
    113124 
    114125        // warn user if she wants to leave page while upload is running 
     
    181192 
    182193        jQuery(".afterUploadActions").show(); 
     194        jQuery('#uploadingActions').hide(); 
    183195 
    184196        // user can safely leave page without warning 
     
    266278        <p>Your browser doesn't have HTML5 support.</p> 
    267279      </div> 
    268        
    269       <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button> 
    270280 
    271281    </fieldset> 
     282     
     283    <div id="uploadingActions" style="display:none"> 
     284      <button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button> 
     285       
     286      <div class="big-progressbar"> 
     287        <div class="progressbar" style="width:0%"></div> 
     288      </div> 
     289    </div> 
     290       
     291    <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button> 
    272292 
    273293</form> 
  • trunk/admin/themes/default/theme.css

    r29393 r29394  
    10091009#photosAddContent p.showFieldset {text-align:left;margin: 1em;} 
    10101010 
    1011 #uploadForm .plupload_buttons { display:none; } 
    1012 #startUpload { margin:10px 0; padding:5px 10px; font-size:1.1em; } 
    1013 #startUpload:before { margin-right:0.5em; } 
    1014 #addFiles { margin-bottom:10px; } 
    1015  
    1016 #uploadProgress {width:650px; margin:10px auto;font-size:90%;} 
    1017 #progressbar {border:1px solid #ccc; background-color:#eee;} 
    1018 .ui-progressbar-value { background-image: url(images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;} 
     1011#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none; } 
     1012#uploadForm #startUpload { margin:5px 0 15px 15px; padding:5px 10px; font-size:1.1em; } 
     1013#uploadForm #startUpload:before { margin-right:0.5em; } 
     1014#uploadForm #addFiles { margin-right:10px; float:left; } 
     1015#uploadForm #uploadingActions { margin:10px 10px 10px 15px; } 
     1016#uploadForm .big-progressbar { vertical-align:middle; display:inline-block; margin-left:10px; } 
     1017 
     1018.big-progressbar { 
     1019  width:100%; 
     1020  max-width:600px; 
     1021  background:#DFDFDF; 
     1022  padding:3px; 
     1023  border-radius:16px; 
     1024  position:relative; 
     1025} 
     1026.big-progressbar .progressbar { 
     1027  height:20px; 
     1028  min-width:20px; 
     1029  background:#444; 
     1030  border-radius:10px; 
     1031} 
     1032 
    10191033 
    10201034/* Tag Manager */ 
  • trunk/admin/themes/roma/theme.css

    r29393 r29394  
    297297div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;} 
    298298 
    299 #progressbar {border:1px solid #666; background-color:#666;} 
     299.big-progressbar { 
     300  background:#1a1e22; 
     301  box-shadow:inset 0px 1px 1px 0px black, 0px 1px 1px 0px #36393F; 
     302} 
     303.big-progressbar .progressbar { 
     304  background:#f70; 
     305  background:#f70 linear-gradient(135deg, rgba(255,51,51,0) 44%,rgba(255,51,51,0.4) 44%,rgba(255,51,51,0.4) 57%,rgba(255,51,51,0) 57%); 
     306  background-size:25px 25px; 
     307  box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.6); 
     308} 
    300309 
    301310/* Album Properties */ 
Note: See TracChangeset for help on using the changeset viewer.