feature 2407 added: display upload limitations before file selection (file

maximum size, maximum dimensions, allowed file types). The maximum dimensions
are calculated for GD only (because Imagick and External ImageMagick are not
using PHP memory as far as I could find on the web).

bug 2408 fixed: change term "old style form" into "browser uploader" and
"multiple file form" into "Flash Uploader" (based on WordPress user interface)


git-svn-id: http://piwigo.org/svn/trunk@11966 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 36 insertions, 8 deletions

diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl
index 7f17663f8..9ee4a8595 100644
--- a/admin/themes/default/template/photos_add_direct.tpl
+++ b/admin/themes/default/template/photos_add_direct.tpl
@@ -142,6 +142,11 @@ jQuery(document).ready(function(){
     return false;
   });
 
+  jQuery("#uploadWarningsSummary a.showInfo").click(function() {
+    jQuery("#uploadWarningsSummary").hide();
+    jQuery("#uploadWarnings").show();
+  });
+
 {/literal}
 {if $upload_mode eq 'html'}
 {literal}
@@ -186,6 +191,9 @@ var sizeLimit = {$upload_max_filesize};
     'fileDesc'       : 'Photo files (*.jpg,*.jpeg,*.png)',
     'fileExt'        : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG',
     'sizeLimit'      : sizeLimit,
+    'onSelect'       : function(event,ID,fileObj) {
+      jQuery("#fileQueue").show();
+    },
     'onAllComplete'  : function(event, data) {
       if (data.errors) {
         return false;
@@ -337,7 +345,7 @@ var sizeLimit = {$upload_max_filesize};
   </div>
   <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
 </fieldset>
-<p><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
+<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
 {else}
 
 <div id="formErrors" class="errors" style="display:none">
@@ -388,29 +396,38 @@ var sizeLimit = {$upload_max_filesize};
     <fieldset>
       <legend>{'Select files'|@translate}</legend>
 
-{if $upload_mode eq 'html'}
-    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p>
+    <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="showInfo" title="{'Learn more'|@translate}">i</a></p>
 
-      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p>
+    <p id="uploadWarnings">
+{'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand}
+{'Allowed file types: %s.'|@translate|@sprintf:$upload_file_types}
+  {if isset($max_upload_resolution)}
+{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate|@sprintf:$max_upload_resolution:$max_upload_width:$max_upload_height}
+  {/if}
+    </p>
 
+{if $upload_mode eq 'html'}
       <div id="uploadBoxes"></div>
       <div id="addUploadBox">
         <a href="javascript:">{'+ Add an upload box'|@translate}</a>
       </div>
+
+    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
     
     </fieldset>
 
     <p>
-      <input class="submit" type="submit" name="submit_upload" value="{'Upload'|@translate}">
+      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
     </p>
 {elseif $upload_mode eq 'multiple'}
+
     <p>
       <input type="file" name="uploadify" id="uploadify">
     </p>
 
-    <p><a href="{$switch_url}">{'... or switch to the old style form'|@translate}</a></p>
+    <div id="fileQueue" style="display:none"></div>
 
-    <div id="fileQueue"></div>
+    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
 
     </fieldset>
     <p>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index ad99e20ce..ff99ff8f7 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -922,6 +922,7 @@ h2:lang(en) { text-transform:capitalize; }
 .pluginActions {display: table-row; font-size:0.95em; color:#777;}
 .pluginActions DIV {display: table-cell; vertical-align: middle; line-height:18px; }
 .showInfo {display:block;position:absolute;top:0;right:5px;width:15px;font-style:italic;font-family:"Georgia",serif;background-color:#464646;font-size:0.9em;border-radius:10px;-moz-border-radius:10px;}
+.showInfo:hover {cursor:pointer}
 
 .warning:before {content:url(icon/warning.png);vertical-align:top;}
 .deactivate_all {text-align:right;font-size:0.95em;}
@@ -1058,4 +1059,14 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
 #mainConfCheck span.property span.filter:first-child a.removeFilter {display:none;} /* can't delete the first field */
 #mainConfCheck span.filter {display:block;margin-left:20px;}
 #mainConfCheck .transparent {opacity:0.5;filter:alpha(opacity=50);}
-#mainConfCheck .order_by_is_custom {display:block;font-weight:normal;font-style:italic;margin-left:20px;}
\ No newline at end of file
+#mainConfCheck .order_by_is_custom {display:block;font-weight:normal;font-style:italic;margin-left:20px;}
+
+/* Upload Form */
+#uploadBoxes .file {margin-bottom:5px;text-align:left;}
+#uploadBoxes {margin-top:20px;}
+#addUploadBox {margin-bottom:2em;}
+
+p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
+p#uploadWarningsSummary .showInfo {position:static;display:inline;padding:1px 6px;margin-left:3px;}
+p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
+p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
\ No newline at end of file