merge from ecomp a88f0072 - Modern UI

[vid.git] / vid-webpack-master / src / app / drawingBoard / service-planning / service-planning.component.html

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
index 5b2f22d..059937f 100644 (file)
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
@@ -1,13 +1,13 @@
-<div class="service-planning-header">
-  <drawing-board-header></drawing-board-header>
-</div>
-<div class="service-planning-content row">
-  <available-models-tree class="left-side col-md-6" (highlightInstances)="highlightInstancesBySelectingNode($event)"></available-models-tree>
-  <!--<no-content-message-and-icon *ngIf="!isShowTree()" class="span-over"-->
-                               <!--data-title="Please add objects (VNFs, network, modules etc.) from the left tree to design the service instance"-->
-                               <!--subtitle="Once done, click Deploy to start instantiation"-->
-                               <!--iconPath="./img/UPLOAD.svg"-->
-                               <!--iconClass="upload-icon-service-planing"></no-content-message-and-icon>-->
-  <drawing-board-tree *ngIf="isShowTree()" class="span-over col-md-6" (highlightNode)="highlightNodeBySelectingInstance($event)"></drawing-board-tree>
+<div [attr.id]="pageMode"  clickOutside [classElements]="['angular-tree-component']" (clickOutsideTrigger)="clickOutside();">
+  <div class="service-planning-header" >
+    <drawing-board-header></drawing-board-header>
+  </div>
+  <div class="service-planning-content">
+    <available-models-tree class="left-side" [ngClass]="isShowComponentInfo() ?'col-md-5':'col-md-6'"
+                           (highlightInstances)="highlightInstancesBySelectingNode($event)"></available-models-tree>
+    <drawing-board-tree *ngIf="isShowTree()" class="span-over" [ngClass]="isShowComponentInfo() ?'col-md-5':'col-md-6'" (highlightNode)="highlightNodeBySelectingInstance($event)"></drawing-board-tree>
+    <component-info *ngIf="isShowComponentInfo()" class="col-md-2"></component-info>
+  </div>
+
 </div>