From 14935f627d62b5755371eb5a771175b31b58ac60 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@openproject.com>
Date: Mon, 19 Aug 2019 15:05:23 +0200
Subject: [PATCH] Show dragged WP table row as flat line

---
 .../content/work_packages/_table_content.sass |  9 ++++++
 .../layout/work_packages/_table.sass          |  1 -
 .../actions/hierarchy-drag-action.service.ts  | 30 -------------------
 .../actions/table-drag-action.service.ts      |  7 ++++-
 .../work_packages/work_packages_table.rb      | 16 ++++++++++
 5 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/content/work_packages/_table_content.sass b/app/assets/stylesheets/content/work_packages/_table_content.sass
index dff152fda8..af280aed18 100644
--- a/app/assets/stylesheets/content/work_packages/_table_content.sass
+++ b/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
diff --git a/app/assets/stylesheets/layout/work_packages/_table.sass b/app/assets/stylesheets/layout/work_packages/_table.sass
index e73623cb43..7c0c7b3e87 100644
--- a/app/assets/stylesheets/layout/work_packages/_table.sass
+++ b/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
diff --git a/frontend/src/app/components/wp-table/drag-and-drop/actions/hierarchy-drag-action.service.ts b/frontend/src/app/components/wp-table/drag-and-drop/actions/hierarchy-drag-action.service.ts
index 474ebece11..2c8840a1c0 100644
--- a/frontend/src/app/components/wp-table/drag-and-drop/actions/hierarchy-drag-action.service.ts
+++ b/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
diff --git a/frontend/src/app/components/wp-table/drag-and-drop/actions/table-drag-action.service.ts b/frontend/src/app/components/wp-table/drag-and-drop/actions/table-drag-action.service.ts
index ad920a07d7..bdd74454c3 100644
--- a/frontend/src/app/components/wp-table/drag-and-drop/actions/table-drag-action.service.ts
+++ b/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;
   }
 }
diff --git a/spec/support/pages/work_packages/work_packages_table.rb b/spec/support/pages/work_packages/work_packages_table.rb
index e8778c1661..f7a96ffde3 100644
--- a/spec/support/pages/work_packages/work_packages_table.rb
+++ b/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