Merge pull request #336 from adrexia/6943-drag-drop-upload-field

BUGFIX: Fixes #6943
This commit is contained in:
Sean Harvey 2012-04-17 19:31:05 -07:00
commit 97e44c0915
4 changed files with 63 additions and 4 deletions

View File

@ -60,3 +60,14 @@
-o-box-shadow: $shadow $outerColor;
box-shadow: $shadow $outerColor;
}
@mixin clearfix{
&:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*:first-child &{ zoom:1;}
}

View File

@ -4,6 +4,10 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
@ -37,5 +41,6 @@ body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { z-index: 1; padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; z-index: -1; }

View File

@ -30,16 +30,47 @@
Config: null,
onmatch: function() {
if(this.is('.readonly,.disabled')) return;
var fileInput = this.find('input');
var dropZone = this.find('.ss-uploadfield-dropzone');
var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
/* Attach classes to dropzone when element can be dropped*/
$(document).unbind('dragover');
$(document).bind('dragover', function (e) {
timeout = window.dropZoneTimeout;
var $target = $(e.target);
if (!timeout) {
dropZone.addClass('active');
} else {
clearTimeout(timeout);
}
if ($target.closest('.ss-uploadfield-dropzone').length > 0) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('active hover');
}, 100);
});
//disable default behaviour if file dropped in the wrong area
$(document).bind('drop dragover', function (e){
e.preventDefault();
});
this.setConfig(config);
this.fileupload($.extend(true,
{
formData: function(form) {
return [
{name: 'SecurityID', value: $(form).find(':input[name=SecurityID]').val()},
{name: 'ID', value: $(form).find(':input[name=ID]').val()}
@ -90,6 +121,7 @@
if (this.data('fileupload')._isXHRUpload({multipart: true})) {
$('.ss-uploadfield-item-uploador').show();
dropZone.show(); // drag&drop avaliable
}
this._super();
},
@ -147,11 +179,13 @@
});
$('div.ss-upload *').entwine({
getUploadField: function() {
return this.parents('div.ss-upload:first');
}
});
$('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item').entwine({
onmatch: function() {
this.closest('.ss-upload').find('.ss-uploadfield-addfile').addClass('borderTop');
},
onunmatch: function() {

View File

@ -3,6 +3,8 @@
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
@import "../admin/scss/themes/default.scss";
#AssetUploadField {
border-bottom: 0;
@include box-shadow(none);
@ -203,17 +205,24 @@ body.cms.ss-uploadfield-edit-iframe {
height: 66px;
width: 300px;
float: left;
&.active{
&.hover{
@include box-shadow(rgba(#fff,0.6) 0 0 3px 3px inset);
}
}
div {
z-index:1;
padding: 15px 0 0;
line-height: 22px;
font-size: 20px;
font-weight: bold;
text-align: center;
display:block;
margin:0 auto;
span {
display: block;
font-size: 12px;
z-index:-1;
}
}
}