From ff40e2129ff43a6028949d69df0d4733aa6bfdc4 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Sat, 11 Aug 2012 21:41:25 +0200
Subject: [PATCH] Updates dropbox design. Now the content space is the
 dropzone.

---
 src/_h5ai/css/inc/dropbox.less  | 30 +++++++-----------------------
 src/_h5ai/js/inc/ext/dropbox.js | 29 ++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/src/_h5ai/css/inc/dropbox.less b/src/_h5ai/css/inc/dropbox.less
index d551f6da..b1fa3bc7 100644
--- a/src/_h5ai/css/inc/dropbox.less
+++ b/src/_h5ai/css/inc/dropbox.less
@@ -1,31 +1,17 @@
 
-#dropbox {
-	margin: 48px 24px;
-	padding: 24px 12px;
-	overflow: hidden;
+#content {
+	border: 1px dashed #fff;
+	border-radius: 8px;
 
-	background-color: #f8f8f8;
-	border: 1px dashed #ccc;
-	border-radius: 10px;
-
-	.transition(all 0.2s ease-in-out);
-
-	.label {
-		text-align: center;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
+	&.hint {
+		border-color: #ccc;
 	}
-
 	&.match {
-		border-color: #555;
-
-		.label {
-			color: #999;
-		}
+		border-style: solid;
 	}
 }
 
+
 #uploads {
 	width: 450px;
 	margin: 12px auto;
@@ -100,6 +86,4 @@
 			color: #c55;
 		}
 	}
-
 }
-
diff --git a/src/_h5ai/js/inc/ext/dropbox.js b/src/_h5ai/js/inc/ext/dropbox.js
index 2415708a..62b940ec 100644
--- a/src/_h5ai/js/inc/ext/dropbox.js
+++ b/src/_h5ai/js/inc/ext/dropbox.js
@@ -9,7 +9,7 @@ modulejs.define('ext/dropbox', ['_', '$', 'core/settings', 'core/entry', 'core/r
 
 		settings = _.extend({}, defaults, allsettings.dropbox),
 
-		template = '<div id="dropbox"><div class="label">dropbox</div><ul id="uploads" /></div>',
+		template = '<ul id="uploads" />',
 
 		uploadTemplate = '<li class="upload clearfix">' +
 							'<span class="name"></span>' +
@@ -23,12 +23,10 @@ modulejs.define('ext/dropbox', ['_', '$', 'core/settings', 'core/entry', 'core/r
 				return;
 			}
 
-			var $dropbox = $(template).appendTo('#content');
+			var $content = $('#content').append(template);
 
 			var uploads = {},
-				afterUpload = function (err, file, timeout) {
-
-					timeout = timeout || 5000;
+				afterUpload = function (err, file) {
 
 					if (file) {
 						uploads[file.name]
@@ -41,12 +39,11 @@ modulejs.define('ext/dropbox', ['_', '$', 'core/settings', 'core/entry', 'core/r
 								uploads[file.name].remove();
 								delete uploads[file.name];
 							});
-						}, timeout);
+						}, 5000);
 					}
 				};
 
-			// $dropbox.filedrop({
-			$('html').filedrop({
+			$content.filedrop({
 
 				paramname: 'userfile',
 
@@ -58,19 +55,29 @@ modulejs.define('ext/dropbox', ['_', '$', 'core/settings', 'core/entry', 'core/r
 					href: entry.absHref
 				},
 
+				docEnter: function () {
+
+					$content.addClass('hint');
+				},
+
+				docLeave: function () {
+
+					$content.removeClass('hint');
+				},
+
 				dragOver: function () {
 
-					$dropbox.addClass('match');
+					$content.addClass('match');
 				},
 
 				dragLeave: function () {
 
-					$dropbox.removeClass('match');
+					$content.removeClass('match');
 				},
 
 				drop: function () {
 
-					$dropbox.removeClass('match');
+					$content.removeClass('hint match');
 				},