Updates dropbox design. Now the content space is the dropzone.

This commit is contained in:
Lars Jung 2012-08-11 21:41:25 +02:00
parent 4c3267c1f8
commit ff40e2129f
2 changed files with 25 additions and 34 deletions

View file

@ -1,30 +1,16 @@
#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;
border-style: solid;
}
}
.label {
color: #999;
}
}
}
#uploads {
width: 450px;
@ -100,6 +86,4 @@
color: #c55;
}
}
}

View file

@ -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');
},