mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-03-24 14:30:03 +01:00
Updates dropbox design. Now the content space is the dropzone.
This commit is contained in:
parent
4c3267c1f8
commit
ff40e2129f
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -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');
|
||||
},
|
||||
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user