aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2014-09-03 17:33:29 +0000
committermistic100 <mistic@piwigo.org>2014-09-03 17:33:29 +0000
commit11ec153855a62aae8cdc93deb95be09afcd0da03 (patch)
tree2bc88f0084fb5fd4ba0a4084666477f6c5e970fd /admin/themes
parent2125efc8caecf15b722fd6858ae6eb2dbd937d3c (diff)
feature:2616 move "add files" and "start upload" buttons
git-svn-id: http://piwigo.org/svn/trunk@29393 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'admin/themes')
-rw-r--r--admin/themes/clear/theme.css8
-rw-r--r--admin/themes/default/template/photos_add_direct.tpl68
-rw-r--r--admin/themes/default/theme.css5
-rw-r--r--admin/themes/roma/theme.css6
4 files changed, 60 insertions, 27 deletions
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index b2cf68ad2..0c009e6aa 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -305,7 +305,7 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
font-weight:bold;
letter-spacing:1px;
border:none;
- background-color:#666666;
+ background-color:#666;
color:#fff;
padding:2px 5px;
-moz-border-radius:5px;
@@ -321,6 +321,12 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
text-decoration: none;
}
+.buttonLike:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled {
+ background-color:#999;
+ color:#eee;
+ cursor:not-allowed;
+}
+
p.albumTitle img {margin-bottom:-3px;}
.groups label>p {
diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl
index c2ea1cc61..2f1fba296 100644
--- a/admin/themes/default/template/photos_add_direct.tpl
+++ b/admin/themes/default/template/photos_add_direct.tpl
@@ -63,14 +63,13 @@ jQuery(document).ready(function(){
jQuery("#uploader").pluploadQueue({
// General settings
+ browse_button : 'addFiles',
+
// runtimes : 'html5,flash,silverlight,html4',
runtimes : 'html5',
// url : '../upload.php',
url : 'ws.php?method=pwg.images.upload&format=json',
-
- // User can upload no more then 20 files in one go (sets multiple_queues to false)
- max_file_count: 100,
chunk_size: '500kb',
@@ -85,9 +84,6 @@ jQuery(document).ready(function(){
// Rename files by clicking on their titles
// rename: true,
-
- // Sort files
- sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
@@ -95,12 +91,25 @@ jQuery(document).ready(function(){
preinit: {
Init: function (up, info) {
jQuery('#uploader_container').removeAttr("title"); //remove the "using runtime" text
+
+ jQuery('#startUpload').on('click', function(e) {
+ e.preventDefault();
+ up.start();
+ });
}
},
init : {
+ // update custom button state on queue change
+ QueueChanged : function(up) {
+ jQuery('#startUpload').prop('disabled', up.files.length == 0);
+ },
+
BeforeUpload: function(up, file) {
- console.log('[BeforeUpload]', file);
+ //console.log('[BeforeUpload]', file);
+
+ // hide buttons
+ jQuery('#startUpload, #addFiles').hide();
// warn user if she wants to leave page while upload is running
jQuery(window).bind('beforeunload', function() {
@@ -111,7 +120,6 @@ jQuery(document).ready(function(){
jQuery("select[name=level]").attr("disabled", "disabled");
// You can override settings before the file is uploaded
- // up.setOption('url', 'upload.php?id=' + file.id);
up.setOption(
'multipart_params',
{
@@ -125,7 +133,10 @@ jQuery(document).ready(function(){
FileUploaded: function(up, file, info) {
// Called when file has finished uploading
- console.log('[FileUploaded] File:', file, "Info:", info);
+ //console.log('[FileUploaded] File:', file, "Info:", info);
+
+ // hide item line
+ jQuery('#'+file.id).hide();
var data = jQuery.parseJSON(info.response);
@@ -145,7 +156,7 @@ jQuery(document).ready(function(){
UploadComplete: function(up, files) {
// Called when all files are either uploaded or failed
- console.log('[UploadComplete]');
+ //console.log('[UploadComplete]');
jQuery(".selectAlbum, .selectFiles, #permissions, .showFieldset").hide();
@@ -234,23 +245,28 @@ jQuery(document).ready(function(){
<fieldset class="selectFiles" style="display:none">
<legend>{'Select files'|@translate}</legend>
+
+ <button id="addFiles" class="buttonLike icon-plus-circled">{'Add Photos'|translate}</button>
- {if isset($original_resize_maxheight)}<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>{/if}
-
- <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
-
- <p id="uploadWarnings">
-{'Maximum file size: %sB.'|@translate:$upload_max_filesize_shorthand}
-{'Allowed file types: %s.'|@translate:$upload_file_types}
- {if isset($max_upload_resolution)}
-{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
- {/if}
- </p>
-
-
- <div id="uploader">
- <p>Your browser doesn't have HTML5 support.</p>
- </div>
+ {if isset($original_resize_maxheight)}
+ <p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
+ {/if}
+
+ <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
+
+ <p id="uploadWarnings">
+ {'Maximum file size: %sB.'|@translate:$upload_max_filesize_shorthand}
+ {'Allowed file types: %s.'|@translate:$upload_file_types}
+ {if isset($max_upload_resolution)}
+ {'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
+ {/if}
+ </p>
+
+ <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>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 262728f29..cb17a38ec 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1008,6 +1008,11 @@ 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;}
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index f6065f0be..5100702ce 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -239,6 +239,12 @@ INPUT[type="text"].large { width: 317px; }
text-decoration: none;
}
+.buttonLike:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
+ color:#666;
+ border-color:#666;
+ cursor:not-allowed;
+}
+
.bigbutton { background:transparent url(images/quickLocalSync_inactiv.png) no-repeat scroll left top; display: block;
color:#111; font-size:28px; height:161px; margin: 0 20px 0 auto; padding:0 18px 0; text-align:center; width:625px;
position:relative; z-index: 50;}