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