beautify drag-n-drop upload, add icon
This commit is contained in:
parent
af29e1d116
commit
a721ff9976
2 changed files with 16 additions and 12 deletions
|
@ -485,8 +485,8 @@ qq.FileUploader = function(o){
|
|||
listElement: null,
|
||||
|
||||
template: '<div class="qq-uploader">' +
|
||||
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
|
||||
'<div class="qq-upload-button">Upload a file</div>' +
|
||||
'<div class="qq-upload-drop-area btn"><i class="icon-attachment"></i> Drop to attach files</div>' +
|
||||
'<div class="qq-upload-button btn"><i class="icon-attachment"></i> Attach files</div>' +
|
||||
'<ul class="qq-upload-list"></ul>' +
|
||||
'</div>',
|
||||
|
||||
|
@ -549,7 +549,8 @@ qq.extend(qq.FileUploader.prototype, {
|
|||
},
|
||||
_setupDragDrop: function(){
|
||||
var self = this,
|
||||
dropArea = this._find(this._element, 'drop');
|
||||
dropArea = this._find(this._element, 'drop'),
|
||||
button = this._find(this._element, 'button');
|
||||
|
||||
var dz = new qq.UploadDropZone({
|
||||
element: dropArea,
|
||||
|
@ -565,6 +566,7 @@ qq.extend(qq.FileUploader.prototype, {
|
|||
},
|
||||
onDrop: function(e){
|
||||
dropArea.style.display = 'none';
|
||||
button.style.display = 'inline-block';
|
||||
qq.removeClass(dropArea, self._classes.dropActive);
|
||||
self._uploadFileList(e.dataTransfer.files);
|
||||
}
|
||||
|
@ -575,7 +577,8 @@ qq.extend(qq.FileUploader.prototype, {
|
|||
qq.attach(document, 'dragenter', function(e){
|
||||
if (!dz._isValidFileDrag(e)) return;
|
||||
|
||||
dropArea.style.display = 'block';
|
||||
dropArea.style.display = 'block';
|
||||
button.style.display = 'none';
|
||||
});
|
||||
qq.attach(document, 'dragleave', function(e){
|
||||
if (!dz._isValidFileDrag(e)) return;
|
||||
|
@ -583,7 +586,8 @@ qq.extend(qq.FileUploader.prototype, {
|
|||
var relatedTarget = document.elementFromPoint(e.clientX, e.clientY);
|
||||
// only fire when leaving document out
|
||||
if ( ! relatedTarget || relatedTarget.nodeName == "HTML"){
|
||||
dropArea.style.display = 'none';
|
||||
dropArea.style.display = 'none';
|
||||
button.style.display = 'inline-block';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
@ -1,21 +1,21 @@
|
|||
.qq-uploader { position:relative; width: 100%;}
|
||||
|
||||
.qq-upload-button {
|
||||
display:block; /* or inline-block */
|
||||
width: 105px; padding: 7px 0; text-align:center;
|
||||
background:#880000; border-bottom:1px solid #ddd;color:#fff;
|
||||
/*display:block; /* or inline-block */
|
||||
/*width: 105px; padding: 7px 0; text-align:center;
|
||||
background:#880000; border-bottom:1px solid #ddd;color:#fff;*/
|
||||
}
|
||||
.qq-upload-button-hover {background:#cc0000;}
|
||||
.qq-upload-button-focus {outline:1px dotted black;}
|
||||
|
||||
.qq-upload-drop-area {
|
||||
position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
|
||||
background:#FF9797; text-align:center;
|
||||
/*position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
|
||||
background:#FF9797; text-align:center; */
|
||||
}
|
||||
.qq-upload-drop-area span {
|
||||
display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
|
||||
/*display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;*/
|
||||
}
|
||||
.qq-upload-drop-area-active {background:#FF7171;}
|
||||
.qq-upload-drop-area-active {}
|
||||
|
||||
.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
|
||||
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
|
||||
|
|
Loading…
Reference in a new issue