Merge pull request #2070 from overleaf/pr-fix-light-drag-and-drop

Change hover highlights and draggable helper when moving files

GitOrigin-RevId: b7a6e9cd1484115fa5fbf1ed40127a6aba525cbd

services/web/public/src/ide/file-tree/directives/draggable.js

@@ -15,7 +15,7 @@ define(['base'], App =>
         if (draggable) {
           return element.draggable({
             delay: 250,
-            opacity: 0.7,
+            opacity: 0.95,
             scroll: true,
             helper: scope.$eval(attrs.draggableHelper)
           })

services/web/public/stylesheets/app/editor/file-tree.less

@@ -59,6 +59,24 @@
 		}
 	}
 
+	li .entity-name.droppable-hover when (@is-overleaf = true) {
+		font-weight: bold;
+		background-color: @file-tree-item-hover-bg;
+		.fake-full-width-bg(@file-tree-item-hover-bg);
+	}
+	li .entity-name.droppable-hover when (@is-overleaf-light = true) {
+		// color: @file-tree-item-selected-color;
+	}
+
+	ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
+		background-color: transparent;
+		.fake-full-width-bg(transparent);
+		&.droppable-hover {
+			background-color: @file-tree-item-hover-bg;
+			.fake-full-width-bg(@file-tree-item-hover-bg);
+		}
+	}
+
 	ul.file-tree-list {
 		margin: 0;
 		overflow-x: hidden;
@@ -98,12 +116,6 @@
 				&.droppable-hover when (@is-overleaf = false) {
 					background-color: fade(@file-tree-droppable-bg-color, 60%);
 				}
-
-				&.droppable-hover when (@is-overleaf = true) {
-					background-color: @file-tree-droppable-bg-color;
-					.fake-full-width-bg(@file-tree-droppable-bg-color);
-				}
-
 			}
 
 			i.fa {
@@ -234,9 +246,12 @@
 	ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
 		background-color: fade(@file-tree-droppable-bg-color, 60%);
 	}
-	ul.droppable-hover.file-tree-list when (@is-overleaf = true) {
-		background-color: @file-tree-droppable-bg-color;
-		.fake-full-width-bg(@file-tree-droppable-bg-color);
+
+	.ui-draggable-dragging when (@is-overleaf = true) {
+		background-color: fade(@file-tree-item-selected-bg, 60%);
+		color: @file-tree-item-selected-color;
+		width: 75%;
+		padding-left: @line-height-computed;
 	}
 }
 

services/web/public/stylesheets/core/ol-light-variables.less

@@ -53,7 +53,7 @@
 @file-tree-item-selected-bg          : @ol-green;
 @file-tree-multiselect-bg            : @ol-blue;
 @file-tree-multiselect-hover-bg      : @ol-dark-blue;
-@file-tree-droppable-bg-color        : tint(@ol-green, 5%);
+@file-tree-droppable-bg-color        : @ol-blue-gray-2;
 
 @content-alt-bg-color            : @ol-blue-gray-0;
 

services/web/public/stylesheets/core/ol-variables.less

@@ -265,7 +265,7 @@
 @file-tree-item-selected-bg          : @ol-green;
 @file-tree-multiselect-bg            : @ol-blue;
 @file-tree-multiselect-hover-bg      : @ol-dark-blue;
-@file-tree-droppable-bg-color        : tint(@ol-green, 5%);
+@file-tree-droppable-bg-color        : @ol-blue-gray-2;
 
 // Editor resizers
 @editor-resizer-bg-color          : @ol-blue-gray-5;