added zoom in and out button in editBar

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

2 files changed, 28 insertions, 10 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 1441406ce..64ba84579 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
@@ -825,3 +825,21 @@ ul.templateLegend{
 .templateLegend .capability i{
   color: #0ABDE3;
 }
+ul.editor{
+  margin-right: -40px;
+  margin-top: 16px;
+}
+.editor li{
+  list-style: none;
+}
+.roundBtn .btn{
+  width: 15px; 
+  height: 15px; 
+  padding: 0px; 
+  border-radius: 15px; 
+  font-size: 10px; 
+  text-align: center;
+  background-color:rgb(215, 234, 250);
+  color: white;
+  margin: 5px;
+}
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 08f9a0789..503aade9f 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,14 +99,6 @@
         </div>
     </div>
 </header>
-<!-- <div class="source-button editBar">
-
-    <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>
-</div> -->
 
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
@@ -133,7 +125,15 @@
             <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
             <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
         </ul>
-        <ul class="navbar" style="list-style: none;">
+
+        <ul class="editor navbar ml-auto">
+            <li class="roundBtn"><button class="btn"><span class="glyphicon">&#x2212;</span></button></li>
+            <li>100%</li>
+            <li class="roundBtn"><button class="btn"><span class="glyphicon">&#x2b;</span></button>
+            </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>
@@ -619,4 +619,4 @@
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
+</ng-sidebar-container>
\ No newline at end of file