media manager: file uploader improvements

2 files changed, 65 insertions, 62 deletions

diff --git a/lib/scripts/fileuploaderextended.js b/lib/scripts/fileuploaderextended.js
index ed631a9ea..f92d50754 100644
--- a/lib/scripts/fileuploaderextended.js
+++ b/lib/scripts/fileuploaderextended.js
@@ -76,23 +76,24 @@ qq.FileUploaderExtended = function(o){
         listElement: null,
 
         template: '<div class="qq-uploader">' +
-                '<div class="qq-upload-drop-area"><span>' + LANG.media_drop + '</span></div>' +
-                '<div class="qq-upload-button">' + LANG.media_select + '</div>' +
-                '<div class="qq-upload-list"></div>' +
-                '<div><input class="button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button">' +
-                '<label class="check"><input class="dw__ow" type="checkbox" value="1" name="ow"><span>' + LANG.media_overwrt + '</span></label>' +
-                '</div>' +
-             '</div>',
+	        '<div class="qq-upload-drop-area"><span>' + LANG.media_drop + '</span></div>' +
+	        '<div class="qq-upload-button">' + LANG.media_select + '</div>' +
+	        '<ul class="qq-upload-list"></ul>' +
+	        '<div class="qq-action-container">' +
+	        '  <input class="qq-upload-action button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button">' +
+	        '  <label class="qq-overwrite-check"><input type="checkbox" value="1" name="ow" class="dw__ow"> <span>' + LANG.media_overwrt + '</span></label>' +
+	        '</div>' +
+	        '</div>',
 
         // template for one item in file list
-        fileTemplate: '<div class="li">' +
-                '<span class="qq-upload-file qq-upload-file-hidden"></span>' +
-                '<input class="qq-upload-name-input edit" type="text">' +
-                '<span class="qq-upload-spinner-hidden"></span>' +
-                '<span class="qq-upload-size"></span>' +
-                '<a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' +
-                '<span class="qq-upload-failed-text">Failed</span>' +
-            '</div>',
+        fileTemplate: '<li>' +
+	          '<span class="qq-upload-file hidden"></span>' +
+	        '  <input class="qq-upload-name-input edit" type="text" value="" />' +
+	        '  <span class="qq-upload-spinner hidden"></span>' +// @todo: use "qq-upload-spinner hidden" instead
+	        '  <span class="qq-upload-size"></span>' +
+	        '  <a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' +
+	        '  <span class="qq-upload-failed-text error">Failed</span>' +
+	        '</li>',
 
         classes: {
             // used to get elements from templates
@@ -101,6 +102,8 @@ qq.FileUploaderExtended = function(o){
             dropActive: 'qq-upload-drop-area-active',
             list: 'qq-upload-list',
             nameInput: 'qq-upload-name-input',
+            overwriteInput: 'qq-overwrite-check',
+            uploadButton: 'qq-upload-action',
             file: 'qq-upload-file',
 
             spinner: 'qq-upload-spinner',
@@ -111,7 +114,7 @@ qq.FileUploaderExtended = function(o){
             // used in css to hide progress spinner
             success: 'qq-upload-success',
             fail: 'qq-upload-fail',
-            failedText : 'qq-upload-failed-text'
+            failedText: 'qq-upload-failed-text'
         }
     });
 
@@ -160,7 +163,7 @@ qq.extend(qq.FileUploaderExtended.prototype, {
         var nameInput = this._find(item, 'nameInput');
         var fileElement = this._find(item, 'file');
         qq.setText(fileElement, nameInput.value);
-        qq.removeClass(fileElement, 'qq-upload-file-hidden');
+        qq.removeClass(fileElement, 'hidden');
         qq.remove(nameInput);
         jQuery('.qq-upload-button, #mediamanager__upload_button').remove();
         jQuery('.dw__ow').parent().hide();
@@ -211,8 +214,8 @@ qq.extend(qq.UploadHandlerForm.prototype, {
     },
 
     _uploadAll: function(params){
-         jQuery(".qq-upload-spinner-hidden").each(function (i) {
-            jQuery(this).addClass('qq-upload-spinner');
+         jQuery(".qq-upload-spinner").each(function (i) {
+            jQuery(this).removeClass('hidden');
         });
         for (key in this._inputs) {
             this.upload(key, params);
@@ -328,8 +331,8 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
     },
 
     _uploadAll: function(params){
-        jQuery(".qq-upload-spinner-hidden").each(function (i) {
-            jQuery(this).addClass('qq-upload-spinner');
+        jQuery(".qq-upload-spinner").each(function (i) {
+            jQuery(this).removeClass('hidden');
         });
         for (key in this._files) {
             this.upload(key, params);
diff --git a/lib/tpl/default/_fileuploader.css b/lib/tpl/default/_fileuploader.css
index 9e60393a0..458267be0 100644
--- a/lib/tpl/default/_fileuploader.css
+++ b/lib/tpl/default/_fileuploader.css
@@ -1,20 +1,26 @@
+
 .qq-uploader {
     position: relative;
     width: 100%;
 }
 
+.qq-uploader .error {
+    color: #f00;
+    background-color: #fff;
+}
+
+/* select file button */
+
 .qq-upload-button {
     display: inline-block;
     border: 1px solid __border__;
     color: __text__;
-    background-color: __background__;
+    background:  __background__ url(images/buttonshadow.png) repeat-x bottom;
     text-decoration: none;
     font-size: 100%;
     cursor: pointer;
-    margin: 1px;
-    margin-bottom: 5px;
+    margin: 1px 1px 5px;
     padding: 0.125em 0.4em;
-    background:  __background__ url(images/buttonshadow.png) repeat-x bottom;
 }
 
 * html .qq-upload-button,
@@ -23,9 +29,11 @@
 }
 
 .qq-upload-button-focus {
-    outline: 1px dotted black;
+    outline: 1px dotted;
 }
 
+/* drop area */
+
 .qq-upload-drop-area {
     position: absolute;
     top: 0;
@@ -35,15 +43,16 @@
     min-height: 70px;
     z-index: 2;
     background: __background_neu__;
+    color: __text__;
     text-align: center;
 }
 
 .qq-upload-drop-area span {
-    display:block;
-    position:absolute;
+    display: block;
+    position: absolute;
     top: 50%;
-    width:100%;
-    margin-top:-8px;
+    width: 100%;
+    margin-top: -8px;
     font-size: 120%;
 }
 
@@ -51,8 +60,22 @@
     background: __background_alt__;
 }
 
-.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
-    margin-right: 7px;
+/* list of files to upload */
+
+.qq-uploader li {
+    margin-bottom: 5px;
+    color: __text__;
+}
+
+.qq-uploader li span,
+.qq-uploader li input,
+.qq-uploader li a {
+    margin-right: 5px;
+}
+
+.qq-upload-file {
+    display: block;
+    font-weight: bold;
 }
 
 .qq-upload-spinner {
@@ -63,44 +86,21 @@
     vertical-align: text-bottom;
 }
 
-.qq-upload-size,.qq-upload-cancel {
+.qq-upload-size,
+.qq-upload-cancel {
     font-size: 85%;
 }
 
 .qq-upload-failed-text {
-    display:none;
+    display: none;
 }
-
 .qq-upload-fail .qq-upload-failed-text {
-    display:inline;
-}
-
-.qq-upload-file {
-    display: block;
-    font-weight: bold;
-}
-
-.qq-upload-file-hidden {
-    display:none;
+    display: inline;
 }
 
-.qq-upload-cancel {
-    padding-left: 10px;
+.qq-action-container * {
+    vertical-align: middle;
 }
-
-.qq-uploader .dw__ow {
+.qq-overwrite-check input {
     margin-left: 10px;
-    margin-right: 3px;
-}
-
-.qq-uploader .check {
-    line-height: 18px;
-}
-
-.qq-uploader #mediamanager__upload_button {
-    margin-bottom: 10px;
 }
-
-.qq-uploader div.li {
-    margin-bottom: 5px;
-}
\ No newline at end of file