added workflow and template tabs

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

3 files changed, 96 insertions, 8 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 5054a8e9e..8b79844be 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
@@ -24,6 +24,17 @@ body{
   content: "";
 }
 
+.editNavbar .nav-tabs{
+  border-bottom-width: 2px;
+}
+.editNavbar .nav-tabs .nav-link{
+  padding: 12px 15px !important;
+  text-align: center;
+}
+.editNavbar .nav-tabs .nav-link::before{
+  content: "";
+}
+
 /*Header*/
 header{
   position: relative;
@@ -444,6 +455,7 @@ p.compType-4{
   background: #fff;
   border: solid 1px #D9E6F2;
   color: #C3CDDB;
+  margin-top: 14px;
 }
 .controllerSidebar .custom-control label{
   margin-bottom: 0;
@@ -461,8 +473,9 @@ p.compType-4{
  
 /*CANVAS*/
 .editBar{
-  width: 200px;
-  margin: 0 auto 0;
+  width: 73.7%;
+  margin: 0 auto 0 -320px;
+  height: 45px;
   padding: 6px 10px;
   background:#F4F9FE;
   /* border: solid 1px #E8EFF8; */
@@ -486,6 +499,7 @@ p.compType-4{
 .viewBtns .btn{
   background-position: 10px center;
   padding-left: 30px!important;
+  margin-top: 14px;
 }
 .viewBtns .topologySource{
   background-image: url(src/assets/img/icon-topologyView-active.svg);
@@ -738,3 +752,40 @@ p.compType-4{
   margin-left: 150px;
   font-size:15px
 }
+
+.arrow{
+  margin-left: -10px;
+  border-radius: 3%
+}
+.arr-size{
+  font-size: 31px;
+}
+.editBar2{
+  width: 98.7%;
+  margin: 0 auto 0 -640px;
+  height: 45px;
+  padding: 6px 10px;
+  background:#F4F9FE;
+  /* border: solid 1px #E8EFF8; */
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+}
+.editBar2 .btn-group{
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+}
+.editBar2 .btn{
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: left center;
+  border: 0;
+  color: #1B3E6F;
+  font-size: 10px;
+}
+.editBar2 .btn.active{
+  background-color: #1B3E6F !important;
+  color: #fff;
+}
+.editBar2 .viewBtns .btn{
+  background-position: 10px center;
+  padding-left: 30px!important;
+  margin-top: 14px;
+}
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 2bd484258..fe24f9df4 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
@@ -99,17 +99,47 @@
         </div>
     </div>
 </header>
-<div class="source-button editBar">
+<!-- <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>
+</div> -->
+
+<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
+    <button (click)="_toggleSidebar1()" class="active btn arrow">
+        <i class="fa arr-size">&#xf100;</i>
+    </button>
+    <div class="collapse navbar-collapse ">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <nav class="row">
+                    <!--Nav Tabs-->
+                    <div class="col-12">
+                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                            <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
+                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+                            <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
+                                aria-controls=" " aria-selected="false">Template</a>
+                        </div>
+                    </div>
+                </nav>
+            </li>
+        </ul>
+        <ul class="navbar ml-auto" style="list-style: none;">
+            <li class="nav-item">
+                <div class="btn-group viewBtns" role="group">
+                    <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>
+            </li>
+        </ul>
+
+    </div>
+</nav>
 
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
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 9b8781d9b..4f31a08f4 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
@@ -55,6 +55,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
   viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
   customActionName: string;
   showAction: boolean;
+  cl = 'editBar';
 
   boardGraph: joint.dia.Graph;
   boardPaper: joint.dia.Paper;
@@ -73,11 +74,17 @@ export class DesignerComponent implements OnInit, OnDestroy {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
     this.showAction = false;
-    this.functionAttributeSidebar = true;
+    this.functionAttributeSidebar = false;
 
   }
   private _toggleSidebar1() {
     this.controllerSideBar = !this.controllerSideBar;
+    if (this.controllerSideBar === false) {
+      this.cl = 'editBar2';
+   }
+    if (this.controllerSideBar === true) {
+    this.cl = 'editBar';
+   }
   }
   private _toggleSidebar2() {
     this.attributesSideBar = !this.attributesSideBar;