Changeset 29393

Timestamp:

Sep 3, 2014, 7:33:29 PM (10 years ago)

Author:

mistic100

Message:

feature:2616 move "add files" and "start upload" buttons

Location:

trunk/admin/themes

Files:

• clear/theme.css (modified) (2 diffs)
• default/template/photos_add_direct.tpl (modified) (8 diffs)
• default/theme.css (modified) (1 diff)
• roma/theme.css (modified) (1 diff)

trunk/admin/themes/clear/theme.css

@@ -306 +306 @@
   letter-spacing:1px;
   border:none;
-  background-color:#666666;
+  background-color:#666;
   color:#fff;
   padding:2px 5px;
@@ -322 +322 @@
 }
 
+.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;}
 

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

@@ -64 +64 @@
         jQuery("#uploader").pluploadQueue({
                 // General settings
+    browse_button : 'addFiles',
+    
                 // runtimes : 'html5,flash,silverlight,html4',
                 runtimes : 'html5',
@@ -69 +71 @@
                 // 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',
@@ -86 +85 @@
                 // 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)
@@ -96 +92 @@
       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
@@ -112 +121 @@
 
         // You can override settings before the file is uploaded
-        // up.setOption('url', 'upload.php?id=' + file.id);
         up.setOption(
           'multipart_params',
@@ -126 +134 @@
       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);
@@ -146 +157 @@
       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();
@@ -235 +246 @@
     <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>

trunk/admin/themes/default/theme.css

@@ -1009 +1009 @@
 #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;}

trunk/admin/themes/roma/theme.css

@@ -240 +240 @@
 }
 
+.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;