From 6865eb9f0f44adf47d509416c785e2e30efcc4cc Mon Sep 17 00:00:00 2001
From: Baris Soner Usakli <barisusakli@gmail.com>
Date: Wed, 24 Jul 2013 15:03:49 -0400
Subject: [PATCH] changed the drag and drop image upload, closes #108

---
 public/css/style.less          | 48 ++++++++++++++++++++--------------
 public/src/modules/composer.js | 24 ++++++++---------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index 02a11e43fb..5cd6887afd 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -549,26 +549,34 @@ body .navbar .nodebb-inline-block {
 		}
 		
 		#imagedrop {
-			background: rgba(64, 64, 64, 0.95);
-			padding: 0.5em;
-			display: block;
-			width: 90%;
-			min-height:25px;
-			margin: 1em auto;
-			resize: none;
-			color:white;
-			font-size:20px;
-
-			div {
-				margin-right:10px;
-			}
-			span {
-				line-height:20px;
-				float:left;
-			}
-			button { 
-				padding-left:5px;
-			}
+		  text-align:center;
+		  color:white;
+		  position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height:230px;
+      line-height:230px;
+      font-size:20px;
+      vertical-align: middle;
+		}
+		
+		#imagelist {
+		  position: absolute;
+      bottom: 5px;
+      left: 0px;
+      padding-left:2em;
+      
+      div {
+        margin-right:5px;
+      }
+      span {
+        line-height:20px;
+        float:left;
+      }
+      button { 
+        padding-left:5px;
+      }
 		}
 	}
 }
diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 97c4861f33..3e97fdb92d 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -10,6 +10,7 @@ define(['taskbar'], function(taskbar) {
 	function loadFile(file) {
 		var reader = new FileReader();
 		var dropDiv = $('#imagedrop');
+		var imagelist = $('#imagelist');
 		var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
 		var posts = composer.posts[uuid];
 		
@@ -33,15 +34,11 @@ define(['taskbar'], function(taskbar) {
 				if(index !== -1) {
 					posts.images.splice(index, 1);
 				}
-				
-				if(!dropDiv.children().length) {
-					dropDiv.html('Drag and drop images here');
-				}
 			});
 
 			imageLabel.append(closeButton);      	
-    		dropDiv.append(imageLabel);
-
+    		imagelist.append(imageLabel);
+			dropDiv.hide();
 		});
 	
 		reader.readAsDataURL(file);
@@ -73,9 +70,6 @@ define(['taskbar'], function(taskbar) {
 				var dt = e.dataTransfer;
 				var files = dt.files;
 				
-				if(!posts.images.length)
-					drop.html('');
-				
 				for (var i=0; i<files.length; i++) {
 					loadFile(files[i]);
 				}
@@ -107,8 +101,11 @@ define(['taskbar'], function(taskbar) {
 															'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
 														'</div>' +
 													'</div>' +
-													'<div id="imagedrop" style="display:none;"></div>'+
-													'<textarea tabIndex="2"></textarea>' +
+													'<div style="position:relative;">'+
+														'<div id="imagedrop" class=""><div>Drag and Drop Images Here</div></div>'+
+														'<textarea tabIndex="2"></textarea>' +
+														'<div id="imagelist"></div>'+
+													'</div>'+
 												'</div>';
 
 			document.body.insertBefore(composer.postContainer, taskbar);
@@ -246,9 +243,12 @@ define(['taskbar'], function(taskbar) {
 			btnRect = taskbarBtn.getBoundingClientRect(),
 			taskbarRect = document.getElementById('taskbar').getBoundingClientRect(),
 			dropDiv = $(composer.postContainer).find('#imagedrop'),
+			imagelist = $(composer.postContainer).find('#imagelist'),
 			windowRect, leftPos;
 
-		dropDiv.html('Drag and drop images here').hide();
+		dropDiv.hide();
+		imagelist.empty();
+		
 
 		composer.postContainer.style.display = 'block';
 		windowRect = postWindowEl.getBoundingClientRect();