Improve drag & drop and fix some background issue if d&d on narrow windows

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files/css/files.scss

@@ -66,8 +66,12 @@
 	background-color: rgb(179, 230, 255)!important;
 }
 
-.app-files #app-content.dir-drop, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
-	background-color: rgba(0, 0, 0, 0)!important;
+.app-files #app-content.dir-drop {
+	background-color: $color-main-background !important;
+}
+
+.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
+	background-color: transparent !important;
 }
 
 .app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir{

apps/files/js/breadcrumb.js

@@ -189,14 +189,8 @@
 					over: this.onOver,
 					out: this.onOut,
 					tolerance: 'pointer',
-					hoverClass: 'canDrop'
-				});
-				// Only toggle class to open the menu
-				this.$el.find('.crumb.crumbmenu').droppable({
-					over: this.onOver,
-					out: this.onOut,
-					tolerance: 'pointer',
-					hoverClass: 'canDrop'
+					hoverClass: 'canDrop',
+					greedy: true
 				});
 			}
 			// Menu is destroyed on every change, we need to init it

apps/files/js/filelist.js

@@ -842,7 +842,6 @@
 
 			if ($targetDir !== undefined && e.which === 1) {
 				e.preventDefault();
-				console.log('Triggered dir change');
 				this.changeDirectory($targetDir, true, true);
 				this.updateSearch();
 			}
@@ -864,8 +863,8 @@
 		_onDropOnBreadCrumb: function( event, ui ) {
 			var self = this;
 			var $target = $(event.target);
-			if (!$target.is('.crumb')) {
-				$target = $target.closest('.crumb');
+			if (!$target.is('.crumb, .crumblist')) {
+				$target = $target.closest('.crumb, .crumblist');
 			}
 			var targetPath = $(event.target).data('dir');
 			var dir = this.getCurrentDirectory();

apps/files/js/files.js

@@ -396,6 +396,8 @@ var dragOptions={
 		}
 		$selectedFiles.closest('tr').addClass('animate-opacity dragging');
 		$selectedFiles.closest('tr').filter('.ui-droppable').droppable( 'disable' );
+		// Show breadcrumbs menu
+		$('.crumbmenu').addClass('canDropChildren');
 
 	},
 	stop: function(event, ui) {
@@ -411,6 +413,8 @@ var dragOptions={
 		setTimeout(function() {
 			$tr.removeClass('animate-opacity');
 		}, 300);
+		// Hide breadcrumbs menu
+		$('.crumbmenu').removeClass('canDropChildren');
 	},
 	drag: function(event, ui) {
 		var scrollingArea = FileList.$container;

core/css/styles.scss

@@ -1406,9 +1406,12 @@ div.crumb {
 		a {
 			opacity: 0.5
 		}
-		&.canDrop .popovermenu {
+		&.canDropChildren,
+		&.canDrop {
+			.popovermenu {
 				display: block;
 			}
+		}
 		// Fix because of the display flex
 		.popovermenu {
 			top: 100%;