Merge pull request #7625 from opf/styling/30910/drag-and-drop

[30910] Improve styling of drag&drop in table

app/assets/stylesheets/content/_work_packages.sass

@@ -31,6 +31,7 @@
 @import work_packages/table_hierarchy
 @import work_packages/table_relations
 @import work_packages/table_inline_create
+@import work_packages/table_drag_and_drop
 
 // WP creation styles
 @import work_packages/new/type_status_row

app/assets/stylesheets/content/work_packages/_table_content.sass

@@ -100,18 +100,6 @@ html:not(.-browser-mobile)
     // Override the default td line-height
     line-height: initial !important
 
-  .wp-table-context-menu-icon,
-  .wp-table--drag-and-drop-handle
-    // Hide from viewers, but allow to be focused
-    opacity: 0
-
-  .issue:hover .wp-table-context-menu-icon,
-  .issue:hover .wp-table--drag-and-drop-handle,
-  .wp-table--context-menu-td:focus,
-  .wp-table-context-menu-icon:focus
-    // Hide by default
-    opacity: 100
-
 // Show context menu button when hovering
 .wp-table--context-menu-td a
   vertical-align: -3px

app/assets/stylesheets/content/work_packages/_table_drag_and_drop.sass

@@ -0,0 +1,30 @@
+//
+// Drag & Drop styles for the table
+//
+.wp--row.gu-mirror
+  border: 1px solid $table-row-border-color
+  background: #E5F2FA !important
+
+  // Align the items correctly since
+  // we're no longer in a table context
+  display: flex
+  align-items: center
+
+// Hide the context menu button outside mobile
+html:not(.-browser-mobile)
+  .wp-table-context-menu-icon,
+  .wp-table--drag-and-drop-handle
+    // Hide from viewers, but allow to be focused
+    opacity: 0
+    display: inline-block
+    height: calc(#{$table-timeline--row-height} - 1px)
+    line-height: calc(#{$table-timeline--row-height} - 1px)
+
+
+  .issue:hover .wp-table-context-menu-icon,
+  .issue:hover .wp-table--drag-and-drop-handle,
+  .wp-table--context-menu-td:focus,
+  .wp-table-context-menu-icon:focus
+    // Hide by default
+    opacity: 100
+

app/assets/stylesheets/vendor/_dragula.sass

@@ -2,7 +2,7 @@
   position: fixed !important
   margin: 0 !important
   z-index: 9999 !important
-  opacity: 0.8
+  opacity: 0.95
 
 .gu-hide
   display: none !important

frontend/src/app/modules/common/drag-and-drop/drag-and-drop.service.ts

@@ -2,6 +2,7 @@ import {Inject, Injectable, Injector, OnDestroy} from "@angular/core";
 import {DOCUMENT} from "@angular/common";
 import {DomAutoscrollService} from "core-app/modules/common/drag-and-drop/dom-autoscroll.service";
 import {DragAndDropHelpers} from "core-app/modules/common/drag-and-drop/drag-and-drop.helpers";
+import DropEvent = JQuery.DropEvent;
 
 export interface DragMember {
   dragContainer:HTMLElement;