From a721ff9976ca8d4ea06a9d077fe6ab468b9603c1 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Sun, 22 Apr 2012 17:30:47 +0200
Subject: [PATCH] beautify drag-n-drop upload, add icon

---
 app/assets/javascripts/app/lib/fileuploader.js | 14 +++++++++-----
 app/assets/stylesheets/fileuploader.css        | 14 +++++++-------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/app/lib/fileuploader.js b/app/assets/javascripts/app/lib/fileuploader.js
index b4eac37e4..6da5d90b3 100644
--- a/app/assets/javascripts/app/lib/fileuploader.js
+++ b/app/assets/javascripts/app/lib/fileuploader.js
@@ -485,8 +485,8 @@ qq.FileUploader = 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 btn"><i class="icon-attachment"></i> Drop to attach files</div>' +
+                '<div class="qq-upload-button btn"><i class="icon-attachment"></i> Attach files</div>' +
                 '<ul class="qq-upload-list"></ul>' + 
              '</div>',
 
@@ -549,7 +549,8 @@ qq.extend(qq.FileUploader.prototype, {
     },
     _setupDragDrop: function(){
         var self = this,
-            dropArea = this._find(this._element, 'drop');                        
+            dropArea = this._find(this._element, 'drop'),
+            button = this._find(this._element, 'button');                     
 
         var dz = new qq.UploadDropZone({
             element: dropArea,
@@ -565,6 +566,7 @@ qq.extend(qq.FileUploader.prototype, {
             },
             onDrop: function(e){
                 dropArea.style.display = 'none';
+                button.style.display = 'inline-block';
                 qq.removeClass(dropArea, self._classes.dropActive);
                 self._uploadFileList(e.dataTransfer.files);    
             }
@@ -575,7 +577,8 @@ qq.extend(qq.FileUploader.prototype, {
         qq.attach(document, 'dragenter', function(e){     
             if (!dz._isValidFileDrag(e)) return; 
             
-            dropArea.style.display = 'block';            
+            dropArea.style.display = 'block';
+            button.style.display = 'none';          
         });                 
         qq.attach(document, 'dragleave', function(e){
             if (!dz._isValidFileDrag(e)) return;            
@@ -583,7 +586,8 @@ qq.extend(qq.FileUploader.prototype, {
             var relatedTarget = document.elementFromPoint(e.clientX, e.clientY);
             // only fire when leaving document out
             if ( ! relatedTarget || relatedTarget.nodeName == "HTML"){               
-                dropArea.style.display = 'none';                                            
+                dropArea.style.display = 'none'; 
+                button.style.display = 'inline-block';                                           
             }
         });                
     },
diff --git a/app/assets/stylesheets/fileuploader.css b/app/assets/stylesheets/fileuploader.css
index 0e3f111a9..69d380f1c 100644
--- a/app/assets/stylesheets/fileuploader.css
+++ b/app/assets/stylesheets/fileuploader.css
@@ -1,21 +1,21 @@
 .qq-uploader { position:relative; width: 100%;}
 
 .qq-upload-button {
-    display:block; /* or inline-block */
-    width: 105px; padding: 7px 0; text-align:center;    
-    background:#880000; border-bottom:1px solid #ddd;color:#fff;
+    /*display:block; /* or inline-block */
+    /*width: 105px; padding: 7px 0; text-align:center;    
+    background:#880000; border-bottom:1px solid #ddd;color:#fff;*/
 }
 .qq-upload-button-hover {background:#cc0000;}
 .qq-upload-button-focus {outline:1px dotted black;}
 
 .qq-upload-drop-area {
-    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
-    background:#FF9797; text-align:center; 
+    /*position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
+    background:#FF9797; text-align:center; */
 }
 .qq-upload-drop-area span {
-    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
+    /*display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;*/
 }
-.qq-upload-drop-area-active {background:#FF7171;}
+.qq-upload-drop-area-active {}
 
 .qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
 .qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}