Add droppable ability to menu and icon switch. Fix colour

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

apps/files/css/files.scss

@@ -732,9 +732,9 @@ table.dragshadow td.size {
 	margin-bottom: 2px;
 }
 
-.canDrop,
+.breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {
-	background-color: rgba(255, 255, 140, 1);
+	background-color: rgb(179, 230, 255);
 }
 
 

apps/files/js/breadcrumb.js

@@ -183,13 +183,20 @@
 
 			// setup drag and drop
 			if (this.onDrop) {
-				this.$el.find('.crumb:not(.last)').droppable({
+				this.$el.find('.crumb:not(:last-child):not(.crumbmenu), .crumblist:not(:last-child)').droppable({
 					drop: this.onDrop,
 					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'
+				});
 			}
 			// Menu is destroyed on every change, we need to init it
 			OC.registerMenu($('.crumbmenu'), $('.crumbmenu > .popovermenu'));

core/css/styles.scss

@@ -1406,6 +1406,9 @@ div.crumb {
 		a {
 			opacity: 0.5
 		}
+		&.canDrop .popovermenu {
+			display: block;
+		}
 		// Fix because of the display flex
 		.popovermenu {
 			top: 100%;
@@ -1413,6 +1416,9 @@ div.crumb {
 			ul {
 				max-height: 345px;
 				overflow-y: scroll;
+				li.canDrop span:first-child {
+					background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
+				}
 			}
 			.in-breadcrumb {
 				display: none;