From 4ab5227f97c9b38b8fe1e447c780c5a745b5890b Mon Sep 17 00:00:00 2001
From: Dan <dlabrecq@redhat.com>
Date: Mon, 20 Mar 2017 23:25:55 -0400
Subject: [PATCH] fix(treelist): Added styling to mimic dnd mockup

Modified styling to mimic mockups at: https://redhat.invisionapp.com/share/YV9U2DO2R#/screens/212276939.
Default drop slot height can be overridden via planner using:
.node-drop-slot.is-dragging-over {height: 66px;}
---
 src/app/treelist/treelist-item.component.scss | 32 ++++++++++++++-----
 src/app/treelist/treelist.component.html      |  1 +
 src/app/treelist/treelist.component.scss      | 11 +++++--
 src/app/treelist/treelist.component.ts        |  7 +++-
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/app/treelist/treelist-item.component.scss b/src/app/treelist/treelist-item.component.scss
index 62810ec..de25a3a 100644
--- a/src/app/treelist/treelist-item.component.scss
+++ b/src/app/treelist/treelist-item.component.scss
@@ -1,16 +1,32 @@
 @import "../../assets/stylesheets/_base";
 
-.list-group-item {
-  border: none;
-  cursor: pointer;
-  padding-left: 0;
-  &:hover {
-    background-color: $color-pf-black-200;
+.tree-list {
+  .list-group-item {
+    border: none;
+    &:first-child {
+      border: none;
+    }
   }
-  &.tree-item-selected {
-    background-color: $color-pf-blue-100;
+}
+
+.node-content-wrapper {
+  .list-group-item {
+    border: none;
+    cursor: pointer;
+    padding-left: 0;
     &:hover {
+      background-color: $color-pf-black-200;
+    }
+    &.tree-item-selected {
       background-color: $color-pf-blue-100;
+      &:hover {
+        background-color: $color-pf-blue-100;
+      }
+    }
+  }
+  &.is-dragging-over {
+    .list-group-item {
+      background-color: $color-pf-black-400;
     }
   }
 }
diff --git a/src/app/treelist/treelist.component.html b/src/app/treelist/treelist.component.html
index 292c3d2..dc022f9 100644
--- a/src/app/treelist/treelist.component.html
+++ b/src/app/treelist/treelist.component.html
@@ -36,6 +36,7 @@
                (click)="node.mouseAction('click', $event)"
                (dblclick)="node.mouseAction('dblClick', $event)"
                (contextmenu)="node.mouseAction('contextMenu', $event)"
+               (dragstart)="handleDragStart($event)"
                (treeDrop)="node.onDrop($event)"
                [treeAllowDrop]="node.allowDrop.bind(node)"
                [treeDrag]="node"
diff --git a/src/app/treelist/treelist.component.scss b/src/app/treelist/treelist.component.scss
index f7dc93a..c50983e 100644
--- a/src/app/treelist/treelist.component.scss
+++ b/src/app/treelist/treelist.component.scss
@@ -5,16 +5,23 @@
   .node-drop-slot {
     height: 4px;
   }
+  */
   .node-drop-slot.is-dragging-over {
-    height: 60px;
+    background-color: $color-pf-black-400;
+    border: none;
+    //height: 66px;
   }
-*/
 
   .node-content-wrapper {
     display: inherit;
     padding: 0;
     border-radius: inherit;
     transition: none;
+    &.is-dragging-over {
+      background-color: $color-pf-black-400;
+      border: none;
+      box-shadow: none;
+    }
   }
 
   .node-wrapper {
diff --git a/src/app/treelist/treelist.component.ts b/src/app/treelist/treelist.component.ts
index b939959..6eefcf0 100644
--- a/src/app/treelist/treelist.component.ts
+++ b/src/app/treelist/treelist.component.ts
@@ -51,7 +51,12 @@ export class TreeListComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  // Events
+  // Drag effect: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+  handleDragStart($event: any) {
+    $event.dataTransfer.effectAllowed = "copyMove";
+  }
+
+  // Tree events
 
   handleEvent($event: any): void {
     this.onEvent.emit($event);