adds visual indication for file drag and drop

2 files changed, 15 insertions, 2 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 94eafe27520..c462e27ff14 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -68,9 +68,15 @@
 }
 
 .app-files #app-content {
+	transition: background-color 0.3s ease;
 	overflow-x: hidden;
 }
 
+.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+	transition: background-color 0.3s ease;
+	background-color: rgb(179, 230, 255);
+}
+
 /* icons for sidebar */
 .nav-icon-files {
 	background-image: url('../img/folder.svg');
@@ -113,6 +119,7 @@
 }
 
 #filestable tbody tr {
+	transition: background-color 0.3s ease;
 	background-color: #fff;
 	height: 40px;
 }
@@ -125,6 +132,7 @@
 #filestable tbody tr.selected,
 #filestable tbody tr.searchresult,
 table tr.mouseOver td {
+	transition: background-color 0.3s ease;
 	background-color: #f8f8f8;
 }
 tbody a { color:#000; }
diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js
index 3257ded7b89..eadb57d914d 100644
--- a/apps/files/js/file-upload.js
+++ b/apps/files/js/file-upload.js
@@ -494,7 +494,7 @@ OC.Upload = {
 				 * @param {object} e
 				 * @param {object} data
 				 */
-				done:function(e, data) {
+				done: function(e, data) {
 					OC.Upload.log('done', e, data);
 					// handle different responses (json or body from iframe for ie)
 					var response;
@@ -667,7 +667,12 @@ OC.Upload = {
 						OC.Upload._hideProgressBar();
 					}
 				});
-
+				fileupload.on('fileuploaddragover', function(){
+					$('#app-content').addClass('file-drag');
+				});
+				fileupload.on('fileuploaddragleave fileuploaddrop', function (){
+					$('#app-content').removeClass('file-drag');
+				});
 			} else {
 				// for all browsers that don't support the progress bar
 				// IE 8 & 9