issue #50 partly styling the new uploader

3 files changed, 26 insertions, 11 deletions

diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
index ba80c493c..4f5367ecf 100644
--- a/inc/lang/en/lang.php
+++ b/inc/lang/en/lang.php
@@ -353,4 +353,10 @@ $lang['js']['media_diff_both']     = 'Both images';
 $lang['js']['media_diff_opacity']  = 'Changeable opacity of images';
 $lang['js']['media_diff_portions'] = 'Portions of images';
 
+$lang['js']['media_select']     = 'Select files';
+$lang['js']['media_upload_btn'] = 'Start uploading';
+$lang['js']['media_drop']       = 'Drop files here to upload';
+$lang['js']['media_cancel']     = 'remove';
+$lang['js']['media_overwrt']    = 'Overwrite existing files';
+
 //Setup VIM: ex: et ts=2 :
diff --git a/lib/scripts/fileuploaderextended.js b/lib/scripts/fileuploaderextended.js
index fd2104e8e..822c32958 100644
--- a/lib/scripts/fileuploaderextended.js
+++ b/lib/scripts/fileuploaderextended.js
@@ -74,20 +74,20 @@ qq.FileUploaderExtended = function(o){
         listElement: null,
 
         template: '<div class="qq-uploader">' +
-                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
-                '<div class="qq-upload-button">Upload a file</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>' +
-                '<label class="check" for="dw__ow"><input id="dw__ow" type="checkbox" value="1" name="ow"><span>Overwrite existing file</span></label>' +
-                '<div><input class="button" type="submit" value="Upload" id="mediamanager__upload_button"></div>' +
+                '<label class="check" for="dw__ow"><input id="dw__ow" type="checkbox" value="1" name="ow"><span>' + LANG.media_overwrt + '</span></label>' +
+                '<div><input class="button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button"></div>' +
              '</div>',
 
         // template for one item in file list
         fileTemplate: '<li>' +
-                '<span class="qq-upload-file"></span>' +
-                '<label>Upload as (optional): <input class="qq-upload-name-input" type="text"></label>' +
+                '<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="#">Cancel</a>' +
+                '<a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' +
                 '<span class="qq-upload-failed-text">Failed</span>' +
             '</li>',
 
@@ -154,14 +154,17 @@ qq.extend(qq.FileUploaderExtended.prototype, {
         var nameInput = this._find(item, 'nameInput');
         var fileElement = this._find(item, 'file');
         qq.setText(fileElement, nameInput.value);
-        qq.remove(nameInput.parentNode);
+        qq.removeClass(fileElement, 'qq-upload-file-hidden');
+        qq.remove(nameInput);
+        jQuery('.qq-upload-button, #mediamanager__upload_button').remove();
+        jQuery('#dw__ow').parent().remove();
 
         if (result.success){
             qq.addClass(item, this._classes.success);
         } else {
             qq.addClass(item, this._classes.fail);
             var fail = this._find(item, 'failedText');
-            qq.setText(fail, result.error);
+            if (result.error) qq.setText(fail, result.error);
         }
     }
 
diff --git a/lib/tpl/default/fileuploader.css b/lib/tpl/default/fileuploader.css
index 9f5e30dab..bf187d3c0 100644
--- a/lib/tpl/default/fileuploader.css
+++ b/lib/tpl/default/fileuploader.css
@@ -47,10 +47,12 @@
 }
 
 .qq-upload-list {
-    margin: 15px 35px !important;
+    margin: 0 !important;
     padding: 0;
-    list-style: disc;
+    list-style: none !important;
     margin-top: 10px !important;
+    margin-bottom: 10px !important;
+    color: black !important;
 }
 
 .qq-upload-list li {
@@ -90,6 +92,10 @@
     font-weight: bold;
 }
 
+.qq-upload-file-hidden {
+    display:none !important;
+}
+
 .qq-upload-list li .qq-upload-cancel {
     padding-left: 10px;
 }
\ No newline at end of file