archive/piwigo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature:2616 add custom big progressbar

Browse source 
git-svn-id: http://piwigo.org/svn/trunk@29394 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
mistic100 2014-09-03 19:56:59 +00:00
commit fc143dea9c
4 changed files with 65 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

11
admin/themes/clear/theme.css
View file

@ -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);
}

24
admin/themes/default/template/photos_add_direct.tpl
View file

@ -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>

28
admin/themes/default/theme.css
View file

@ -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; }
#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;
}
#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;}
/* Tag Manager */
.warningDeletion {display:none;font-style:italic;}

11
admin/themes/roma/theme.css
View file

@ -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 {