diff options
| -rw-r--r-- | admin/themes/clear/theme.css | 11 | ||||
| -rw-r--r-- | admin/themes/default/template/photos_add_direct.tpl | 24 | ||||
| -rw-r--r-- | admin/themes/default/theme.css | 30 | ||||
| -rw-r--r-- | admin/themes/roma/theme.css | 11 |
4 files changed, 65 insertions, 11 deletions
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index 0c009e6aa..7516a3026 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -367,3 +367,14 @@ table.dataTable thead th { .userPropertiesContainer {border-color:#ddd;} .userPrefs {border-color:#ddd;} + +.big-progressbar { + background:#DFDFDF; + border:1px solid #ccc; +} +.big-progressbar .progressbar { + background:#005E89; + 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%); + background-size:25px 25px; + box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.4); +} diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl index 2f1fba296..b8e179b39 100644 --- a/admin/themes/default/template/photos_add_direct.tpl +++ b/admin/themes/default/template/photos_add_direct.tpl @@ -96,6 +96,12 @@ jQuery(document).ready(function(){ e.preventDefault(); up.start(); }); + + jQuery('#cancelUpload').on('click', function(e) { + e.preventDefault(); + up.stop(); + up.trigger('UploadComplete', up.files); + }); } }, @@ -105,11 +111,16 @@ jQuery(document).ready(function(){ jQuery('#startUpload').prop('disabled', up.files.length == 0); }, + UploadProgress: function(up, file) { + jQuery('#uploadingActions .progressbar').width(up.total.percent+'%'); + }, + BeforeUpload: function(up, file) { //console.log('[BeforeUpload]', file); // hide buttons jQuery('#startUpload, #addFiles').hide(); + jQuery('#uploadingActions').show(); // warn user if she wants to leave page while upload is running jQuery(window).bind('beforeunload', function() { @@ -180,6 +191,7 @@ jQuery(document).ready(function(){ jQuery(".batchLink").html(sprintf(batch_Label, uploadedPhotos.length)); jQuery(".afterUploadActions").show(); + jQuery('#uploadingActions').hide(); // user can safely leave page without warning jQuery(window).unbind('beforeunload'); @@ -265,10 +277,18 @@ jQuery(document).ready(function(){ <div id="uploader"> <p>Your browser doesn't have HTML5 support.</p> </div> - - <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button> </fieldset> + + <div id="uploadingActions" style="display:none"> + <button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button> + + <div class="big-progressbar"> + <div class="progressbar" style="width:0%"></div> + </div> + </div> + + <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button> </form> diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index cb17a38ec..33d5a6488 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -1008,14 +1008,28 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;} #photosAddContent p.showFieldset {text-align:left;margin: 1em;} -#uploadForm .plupload_buttons { display:none; } -#startUpload { margin:10px 0; padding:5px 10px; font-size:1.1em; } -#startUpload:before { margin-right:0.5em; } -#addFiles { margin-bottom:10px; } - -#uploadProgress {width:650px; margin:10px auto;font-size:90%;} -#progressbar {border:1px solid #ccc; background-color:#eee;} -.ui-progressbar-value { background-image: url(images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;} +#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none; } +#uploadForm #startUpload { margin:5px 0 15px 15px; padding:5px 10px; font-size:1.1em; } +#uploadForm #startUpload:before { margin-right:0.5em; } +#uploadForm #addFiles { margin-right:10px; float:left; } +#uploadForm #uploadingActions { margin:10px 10px 10px 15px; } +#uploadForm .big-progressbar { vertical-align:middle; display:inline-block; margin-left:10px; } + +.big-progressbar { + width:100%; + max-width:600px; + background:#DFDFDF; + padding:3px; + border-radius:16px; + position:relative; +} +.big-progressbar .progressbar { + height:20px; + min-width:20px; + background:#444; + border-radius:10px; +} + /* Tag Manager */ .warningDeletion {display:none;font-style:italic;} diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 5100702ce..bd31ce10f 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -296,7 +296,16 @@ div.token-input-dropdown {background-color:#eee !important;border-color:#666 !im div.token-input-dropdown ul li {background-color:#eee !important;} div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;} -#progressbar {border:1px solid #666; background-color:#666;} +.big-progressbar { + background:#1a1e22; + box-shadow:inset 0px 1px 1px 0px black, 0px 1px 1px 0px #36393F; +} +.big-progressbar .progressbar { + background:#f70; + 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%); + background-size:25px 25px; + box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.6); +} /* Album Properties */ #albumThumbnail img, #albumLinks { |