Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

beautify drag-n-drop upload, add icon

Browse source
This commit is contained in:
Felix Niklas 2012-04-22 17:30:47 +02:00
parent af29e1d116
commit a721ff9976
2 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/javascripts/app/lib/fileuploader.js
View file

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

14
app/assets/stylesheets/fileuploader.css
View file

@ -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;}