Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

BUGFIX: Fixes #6943
  • Loading branch information...
commit 97e44c091581cb022f3f0eba31d92378d5a58aa0 2 parents 1d058ac + 180a305
@halkyon halkyon authored
View
11 admin/scss/_mixins.scss
@@ -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
9 css/AssetUploadField.css
@@ -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
34 javascript/UploadField.js
@@ -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
13 scss/AssetUploadField.scss
@@ -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;
}
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.