Changeset 11966 for trunk/admin/themes

Timestamp:

Aug 18, 2011, 5:19:03 PM (13 years ago)

Author:

plg

Message:

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)

Location:

trunk/admin/themes/default

Files:

• template/photos_add_direct.tpl (modified) (4 diffs)
• theme.css (modified) (2 diffs)

trunk/admin/themes/default/template/photos_add_direct.tpl

@@ -143 +143 @@
   });
 
+  jQuery("#uploadWarningsSummary a.showInfo").click(function() {
+    jQuery("#uploadWarningsSummary").hide();
+    jQuery("#uploadWarnings").show();
+  });
+
 {/literal}
 {if $upload_mode eq 'html'}
@@ -187 +192 @@
     'fileExt'        : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG',
     'sizeLimit'      : sizeLimit,
+    'onSelect'       : function(event,ID,fileObj) {
+      jQuery("#fileQueue").show();
+    },
     'onAllComplete'  : function(event, data) {
       if (data.errors) {
@@ -338 +346 @@
   <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}
 
@@ -389 +397 @@
       <legend>{'Select files'|@translate}</legend>
 
+    <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 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'}
-    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p>
-
-      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p>
-
       <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"></div>
+    <div id="fileQueue" style="display:none"></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>

trunk/admin/themes/default/theme.css

@@ -923 +923 @@
 .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;}
@@ -1060 +1061 @@
 #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;}
+
+/* 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;}