fix(treelist): Moved drop slots to tree-list-item to remove white spa…

…ce between rows

Also increased drop slot height from 2px to 5px.
Added showDropSlot attribute to tree-list.
Added index attribute to tree-list-item.

src/app/treelist/examples/treelist-example.component.html

@@ -12,6 +12,7 @@
             [loadTemplate]="treeListLoadTemplate"
             [nodes]="nodes"
             [options]="options"
+            [showDropSlot]="false"
             [showExpander]="false"
             (onMoveNode)="handleMoveNode($event)"
             (onToggle)="handleToggle($event)">
@@ -20,6 +21,7 @@
           </template>
           <template #treeListTemplate let-node="node" let-index="index">
             <alm-tree-list-item
+                [index]="index"
                 [node]="node"
                 (onSelect)="select($event)"
                 [template]="treeListItemTemplate">

src/app/treelist/treelist-item.component.html

@@ -1,6 +1,11 @@
-<div class="list-group-item" [class.tree-item-selected]="isSelected()" (click)="select($event)">
+<div class="list-group-item"
+     [class.tree-item-placeholder]="index !== 0"
+     [class.tree-item-selected]="isSelected()"
+     (click)="select($event)">
+  <TreeNodeDropSlot *ngIf="index === 0" [dropIndex]="index" [node]="node.parent"></TreeNodeDropSlot>
   <div class="tree-list-item">
     <TreeNodeExpander [node]="node"></TreeNodeExpander>
     <template [ngTemplateOutlet]="template" [ngOutletContext]="{ node: node, index: index }"></template>
   </div>
+  <TreeNodeDropSlot [dropIndex]="index + 1" [node]="node.parent"></TreeNodeDropSlot>
 </div>

src/app/treelist/treelist-item.component.scss

@@ -2,10 +2,24 @@
 
 .tree-list {
   .list-group-item {
+    display: block;
     border: none;
     &:first-child {
       border: none;
     }
+    &.tree-item-placeholder {
+      padding-top: 5px;
+    }
+  }
+
+  .node-drop-slot {
+    height: 5px;
+  }
+
+  .node-drop-slot.is-dragging-over {
+    background-color: $color-pf-black-400;
+    border: none;
+    height: 60px;
   }
 }
 
@@ -26,7 +40,7 @@
   }
   &.is-dragging-over {
     .list-group-item {
-      background-color: $color-pf-black-400;
+      background-color: $color-pf-black-200;
     }
   }
 }

src/app/treelist/treelist-item.component.ts

@@ -19,6 +19,7 @@ import { TreeNode } from 'angular2-tree-component';
 })
 
 export class TreeListItemComponent implements OnInit {
+  @Input() index: number = -1;
   @Input() node: TreeNode = null;
   @Input() template: TemplateRef<any>;
 

src/app/treelist/treelist.component.html

@@ -1,5 +1,5 @@
-<div class="list-group list-view-pf">
-  <Tree #tree class="tree-list"
+<div class="">
+  <Tree #tree class="tree-list list-group list-view-pf"
         [nodes]="nodes"
         [focused]="true"
         [options]="options"
@@ -18,17 +18,19 @@
               let-node="node"
               let-index="index"
               let-templates="templates">
-      <div
-          *ngIf="!node.isHidden"
+      <div *ngIf="!node.isHidden"
           class="tree-node tree-node-level-{{ node.level }}"
-          [class]="node.getClass()"
+          [ngClass]="node.getClass()"
           [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
           [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
           [class.tree-node-leaf]="node.isLeaf"
           [class.tree-node-active]="node.isActive"
           [class.tree-node-focused]="node.isFocused">
 
-        <TreeNodeDropSlot *ngIf="index === 0" [dropIndex]="index" [node]="node.parent"></TreeNodeDropSlot>
+        <TreeNodeDropSlot *ngIf="index === 0 && showDropSlot"
+          [dropIndex]="index"
+          [node]="node.parent">
+        </TreeNodeDropSlot>
 
         <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
           <TreeNodeExpander [node]="node" *ngIf="showExpander"></TreeNodeExpander>
@@ -48,7 +50,7 @@
         </div>
 
         <TreeNodeChildren [node]="node" [templates]="templates"></TreeNodeChildren>
-        <TreeNodeDropSlot [dropIndex]="index + 1" [node]="node.parent"></TreeNodeDropSlot>
+        <TreeNodeDropSlot [dropIndex]="index + 1" [node]="node.parent" *ngIf="showDropSlot"></TreeNodeDropSlot>
       </div>
     </template>
   </Tree>

src/app/treelist/treelist.component.scss

@@ -1,15 +1,13 @@
 @import "../../assets/stylesheets/_base";
 
 .tree-list {
-/*
-  .node-drop-slot {
-    height: 4px;
+  &.list-group {
+    border-top: none;
   }
-  */
+
   .node-drop-slot.is-dragging-over {
     background-color: $color-pf-black-400;
     border: none;
-    //height: 66px;
   }
 
   .node-content-wrapper {

src/app/treelist/treelist.component.ts

@@ -15,6 +15,13 @@ import {
 
 // See docs: https://angular2-tree.readme.io/docs
 //
+// listTemplate - Template to show for each tree list item
+// loadTemplate - Template to show when loading children
+// nodes - An array of tree list items
+// options - Underlying angular2-tree-component options
+// showDropSlot - Set to false with alm-tree-list-item (default is true)
+// showExpander - Set to false with alm-tree-list-item (default is true)
+//
 // Supported events:
 //
 // onEvent - Catch-all event that is triggered on every other event that is triggered
@@ -35,6 +42,7 @@ export class TreeListComponent implements OnInit {
   @Input() loadTemplate: TemplateRef<any>;
   @Input() nodes: any[] = null;
   @Input() options: any;
+  @Input() showDropSlot: boolean = true;
   @Input() showExpander: boolean = true;
 
   @Output('onEvent') onEvent = new EventEmitter();