custom action name

Issue-ID: CCSDK-2269
Change-Id: I16efe1d6bae9ef13f4c70525db4e37d35154479a
Signed-off-by: Rupinder <rupinsi1@in.ibm.com>

3 files changed, 55 insertions, 53 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 04f410c5f..964268de5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -316,17 +316,19 @@ p.compType-4{
   color: #C3CDDB;
 }
 .actionBtns .btn{
-  margin: 0 15px 12px;
-  padding: 9px 20px;
-  border-radius: 2px !important;
-  font-size: 12px;
+  margin: 0px 15px 16px -90px;
+  /* padding: 9px 20px; */
+  border-radius: 0px;
+  font-size: 14px;
   font-weight: bold;
-  outline: 0 !important;
+  /* outline: 0 !important; */
+  float: left;
+  
 }
 .actionBtns .btn.insert-custom{
-  background: #1B3E6F;
-  border: solid 1px #1B3E6F;
-  color: #fff;
+  /* background: white; */
+  /* border: solid 1px #1B3E6F; */
+  color: #1B3E6F;
 }
 .actionBtns .btn.import-action{
   border: solid 1px #D0DFF1;
@@ -347,6 +349,18 @@ p.compType-4{
 .custom-control-label:hover{
   cursor: pointer;
 }
+.custom-control{
+  padding-top: 10px;
+  width: 315px;
+  height: 40px;
+  margin-left: -15px;
+  font-size: 14px;
+  padding-bottom: 0;
+}
+.custom-control:hover{
+    background-color: white;
+}
+
 .actionsList .custom-checkbox,
 .componentsList .list-group-item{
   margin-bottom: 10px;
@@ -405,8 +419,9 @@ p.compType-4{
  
 /*CANVAS*/
 .editBar{
-  width: 200px;
-  margin: 0 auto 0;
+  width: 1080px;
+  height: 50px;
+  margin: 0 auto 0 -392px;
   padding: 6px 10px;
   background:#F4F9FE;
   /* border: solid 1px #E8EFF8; */
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 3e3528c00..6904d5781 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -100,12 +100,17 @@
     </div>
 </header>
 <div class="source-button editBar">
+    
     <div class="btn-group viewBtns" role="group">
+        <button (click)="_toggleSidebar1()" class="topologySource active">
+            <i style="font-size:24px" class="fa">&#xf101;</i> 
+        </button>
         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
         <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
             class="btn btn-secondary topologyView">Scripting</button>
     </div>
 </div>
+
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
@@ -122,21 +127,33 @@
                         href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
-   </nav>
+        </nav>
 
 
- <div class="row mt-2">
-            <div class="col">
+        <div class="row mt-2">
+            <div class="col-12">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
                         aria-labelledby="nav-action-tab">
+                        <!--Action Search Box-->
+                        <div>
+                            <h1>Search</h1>
+                        </div>
+
                         <div class="btn-group actionBtns col-8" role="group">
                             <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">
-                                Insert Custom
+                               + New Action
                             </button> 
-                      <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> -->
                         </div>
+
+                            <div>
+                              <div *ngIf="showAction" class="custom-control">
+                                <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span>
+                                    {{customActionName}} </label>
+                              </div>
+                            </div>
                     </div>
+
                     <div class="tab-pane fade" id="nav-function" role="tabpanel"
                         aria-labelledby="nav-function-tab">
                         <div class="col-12 text-center p-0">
@@ -148,41 +165,7 @@
             </div>
         </div>
        
-            <!-- <div class="col-12 actionsList">
-        <b>Select from other packages:</b>
-        <div class="actions-scroll">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck1">
-            <label class="custom-control-label" for="customCheck1">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck2">
-            <label class="custom-control-label" for="customCheck2">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck3">
-            <label class="custom-control-label" for="customCheck3">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck4">
-            <label class="custom-control-label" for="customCheck4">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-        </div>
-        <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-secondary mr-3">Insert</button>
-          <button type="button" class="btn btn-secondary">Cancel</button>
-        </div>
-      </div> -->
-
-           
+   
     </ng-sidebar>
     <!-- Page content -->
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index fa3a99b49..fe90b6b90 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -40,7 +40,6 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 import { ActivatedRoute } from '@angular/router';
 import { DesignerService } from './designer.service';
 
-
 @Component({
   selector: 'app-designer',
   templateUrl: './designer.component.html',
@@ -52,6 +51,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
   viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+  customActionName: string;
+  showAction: boolean;
 
   boardGraph: joint.dia.Graph;
   boardPaper: joint.dia.Paper;
@@ -69,6 +70,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
               private designerService: DesignerService) {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
+    this.showAction = false;
 
   }
   private _toggleSidebar1() {
@@ -92,10 +94,13 @@ export class DesignerComponent implements OnInit, OnDestroy {
    */
 
   ngOnInit() {
+    this.customActionName = this.route.snapshot.paramMap.get('actionName');
+    if (this.customActionName != null) {
+      this.showAction = true;
+    }
     this.initializeBoard();
     this.initializePalette();
     this.stencilPaperEventListeners();
-
     const id = this.route.snapshot.paramMap.get('id');
     this.designerService.getPagedPackages(id).subscribe(
       (bluePrintDetailModels) => {
@@ -103,7 +108,6 @@ export class DesignerComponent implements OnInit, OnDestroy {
           this.viewedPackage = bluePrintDetailModels[0];
         }
       });
-
     /**
      * the code to retrieve from server is commented
      */