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

@@ -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;
     }
   }
 }

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"

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 {

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);