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,12 +66,16 @@
 	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{
-	background-color: rgb(179, 230, 255)!important;
+	background-color: rgb(179, 230, 255) !important;
 }
 
 /* icons for sidebar */

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

@@ -117,32 +117,32 @@
 				ownerDisplayName = $('#ownerDisplayName').val();
 			if (usedSpacePercent > 98) {
 				if (owner !== oc_current_user) {
-					OC.Notification.show(t('files', 'Storage of {owner} is full, files can not be updated or synced anymore!', 
+					OC.Notification.show(t('files', 'Storage of {owner} is full, files can not be updated or synced anymore!',
 						{owner: ownerDisplayName}), {type: 'error'}
 					);
 					return;
 				}
-				OC.Notification.show(t('files', 
-					'Your storage is full, files can not be updated or synced anymore!'), 
+				OC.Notification.show(t('files',
+					'Your storage is full, files can not be updated or synced anymore!'),
 					{type : 'error'}
 				);
 				return;
 			}
 			if (usedSpacePercent > 90) {
 				if (owner !== oc_current_user) {
-					OC.Notification.show(t('files', 'Storage of {owner} is almost full ({usedSpacePercent}%)', 
+					OC.Notification.show(t('files', 'Storage of {owner} is almost full ({usedSpacePercent}%)',
 						{
-							usedSpacePercent: usedSpacePercent,  
+							usedSpacePercent: usedSpacePercent,
 							owner: ownerDisplayName
 						}),
-						{  
+						{
 							type: 'error'
 						}
 					);
 					return;
 				}
 				OC.Notification.show(t('files', 'Your storage is almost full ({usedSpacePercent}%)',
-					{usedSpacePercent: usedSpacePercent}), 
+					{usedSpacePercent: usedSpacePercent}),
 					{type : 'error'}
 				);
 			}
@@ -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,8 +1406,11 @@ div.crumb {
 		a {
 			opacity: 0.5
 		}
-		&.canDrop .popovermenu {
-			display: block;
+		&.canDropChildren,
+		&.canDrop {
+			.popovermenu {
+				display: block;
+			}
 		}
 		// Fix because of the display flex
 		.popovermenu {