BUGFIX: Fixes #6943

Added classes to dropzone when dragging and dropping files. Added
styles to the dropzone when a file could be dropped. Added a clearfloat
mixin to the mixins file.

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

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.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 span { display: block; font-size: 12px; }
+.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; }

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() {

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