aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2014-09-03 19:56:59 +0000
committermistic100 <mistic@piwigo.org>2014-09-03 19:56:59 +0000
commitfc143dea9cd54f898c225e144efb34fa1cd9abde (patch)
tree7681a35455529586f53f06bad7951d95359175b7 /admin/themes
parent11ec153855a62aae8cdc93deb95be09afcd0da03 (diff)
feature:2616 add custom big progressbar
git-svn-id: http://piwigo.org/svn/trunk@29394 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--admin/themes/clear/theme.css11
-rw-r--r--admin/themes/default/template/photos_add_direct.tpl24
-rw-r--r--admin/themes/default/theme.css30
-rw-r--r--admin/themes/roma/theme.css11
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 {