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 = '
',
+ template = '',
uploadTemplate = '' +
'' +
@@ -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');
},