From 27d0c89c337ee5a2281640d0fed68ed26c0a50e1 Mon Sep 17 00:00:00 2001
From: plegall <plg@piwigo.org>
Date: Thu, 18 Aug 2011 15:19:03 +0000
Subject: 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
---
 .../themes/default/template/photos_add_direct.tpl  | 31 +++++++++++++++++-----
 admin/themes/default/theme.css                     | 13 ++++++++-
 2 files changed, 36 insertions(+), 8 deletions(-)

(limited to 'admin/themes/default')

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
-- 
cgit v1.2.3