Merge pull request #7554 from opf/feature/30723-When-drag-and-drop-work-packages-indicate-drop-zone-in-work-package-list-as-flat-line-instead-of-entire-row

[30723] When drag and drop work packages indicate drop zone in work package list as flat line instead of entire row

[ci skip]

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

@@ -46,6 +46,15 @@
   &.-collapsed
     display: none
 
+  &.-dragged
+    height: 0px
+    border: none !important
+    outline: 1px solid var(--primary-color)
+    opacity: 1
+
+    .wp-table--cell-td
+      display: none !important
+
 .work-package-table--container table.generic-table tbody td
   padding-left: 0
   padding-top: 0

app/assets/stylesheets/layout/work_packages/_table.sass

@@ -81,7 +81,6 @@
     background: #E5F2FA
     z-index: 1
 
-
 // Left part of the split view
 // == flex container for (table|timeline)
 .work-packages-split-view--tabletimeline-side

frontend/src/app/components/wp-table/drag-and-drop/actions/hierarchy-drag-action.service.ts

@@ -29,36 +29,6 @@ export class HierarchyDragActionService extends TableDragActionService {
     return this.relationHierarchyService.changeParent(workPackage, newParent);
   }
 
-  /**
-   * Indent the shadow element according to the hierarchy level it would be dropped
-   * @param shadowElement
-   * @param backToDefault
-   */
-  public changeShadowElement(shadowElement:HTMLElement, backToDefault:boolean = false) {
-    if (backToDefault) {
-      // Overwrite the indentation back to the original value
-      let hierarchyElement = jQuery(shadowElement).find('.wp-table--hierarchy-span')[0];
-      hierarchyElement.style.width = hierarchyElement.dataset.indentation!;
-      return true;
-    }
-
-    let parent = this.determineParent(shadowElement);
-    let shadowElementHierarchySpan =  jQuery(shadowElement).find('.wp-table--hierarchy-span')[0];
-    let shadowElementIndent:string;
-
-    if (parent) {
-      // When there is a parent, the shadow element is indented accordingly
-      let parentHierarchySpan = jQuery(parent.el).find('.wp-table--hierarchy-span')[0] as HTMLElement;
-      shadowElementIndent = parentHierarchySpan.offsetWidth + 20 + 'px';
-    } else {
-      // Otherwise the original indentation is applied
-      shadowElementIndent = '25px';
-    }
-
-    shadowElementHierarchySpan.style.width = shadowElementIndent;
-    return true;
-  }
-
   /**
    * Find an applicable parent element from the hierarchy information in the table.
    * @param el

frontend/src/app/components/wp-table/drag-and-drop/actions/table-drag-action.service.ts

@@ -56,6 +56,11 @@ export class TableDragActionService {
    * @param backToDefault: Shall the modifications be made undone
    */
   public changeShadowElement(shadowElement:HTMLElement, backToDefault:boolean = false) {
-    return false;
+    if (backToDefault) {
+      shadowElement.classList.remove('-dragged');
+    } else {
+      shadowElement.classList.add('-dragged');
+    }
+    return true;
   }
 }

spec/support/pages/work_packages/work_packages_table.rb

@@ -212,6 +212,22 @@ module Pages
         .click_and_hold(source.find('.wp-table--drag-and-drop-handle', visible: false).native)
         .perform
 
+      ## Hover over each row to be sure,
+      # that the dragged element is reduced to the minimum height.
+      # Thus we can afterwards drag to the correct position.
+      rows.each do |row|
+        next if row == source
+
+        page
+          .driver
+          .browser
+          .action
+          .move_to(row.native)
+          .perform
+      end
+
+      sleep 2
+
       scroll_to_element(target)
 
       page