added redo-undo buttons

Modified zoom in and out button

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

2 files changed, 25 insertions, 12 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 876ba0965..22eeeeb32 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
@@ -832,16 +832,8 @@ ul.editor{
 .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;
+.editor .btn {
+  box-shadow: none;
 }
 .ace_editor{
   top: 5.4vh;
@@ -850,3 +842,9 @@ ul.editor{
 .dsl-editor {
   height: 500px;  
 }
+.vertical_line{
+    border-left: 1px solid rgba(66, 169, 192, 0.1);
+    height: 45px;
+    margin-left: 12px;
+    margin-right: 12px;
+} 
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 503aade9f..7f49d3cf3 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
@@ -127,9 +127,24 @@
         </ul>
 
         <ul class="editor navbar ml-auto">
-            <li class="roundBtn"><button class="btn"><span class="glyphicon">&#x2212;</span></button></li>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
+                    <img src="/assets/img/icon-undoActive.svg">
+                </button>
+            </li>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
+                    <img src="/assets/img/icon-redo.svg">
+                </button>
+            </li>
+            <li class="vertical_line"></li>
+            <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
+                    <img src="/assets/img/icon-zoomOut.svg">
+                </button></li>
             <li>100%</li>
-            <li class="roundBtn"><button class="btn"><span class="glyphicon">&#x2b;</span></button>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
+                    <img src="/assets/img/icon-zoomIn.svg"> </button>
             </li>
         </ul>