Edit Designer tabs ui and fix canvas scroll bar

Issue-ID: CCSDK-2446

Issue-ID: CCSDK-2447

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I74d7aca0f382a60f668f9acb3bb08e285be81a47

3 files changed, 105 insertions, 62 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 8b79844be..1441406ce 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
@@ -1,7 +1,9 @@
 
 body{
-  background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
-  background-size: 6px 6px !important;  
+  /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
+  background-size: 6px 6px !important;   */
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important;
+  background-color: #fff !important;
 }
 
 /*Icons*/
@@ -25,22 +27,29 @@ body{
 }
 
 .editNavbar .nav-tabs{
-  border-bottom-width: 2px;
+  border-bottom-width: 0;
 }
 .editNavbar .nav-tabs .nav-link{
-  padding: 12px 15px !important;
+  padding: 12px 28px !important;
   text-align: center;
 }
 .editNavbar .nav-tabs .nav-link::before{
   content: "";
 }
+.editNavbar .nav-link{
+  text-transform: initial !important;
+}
+.editNavbar .navbar,
+.editNavbar .navbar{
+  padding: 0;
+}
 
 /*Header*/
 header{
   position: relative;
   height: 60px;
   background-color: #1B3E6F;
-  box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+  /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */
   z-index: 200000000 !important;
 }
 .logo{
@@ -101,6 +110,9 @@ header{
 .topology-actions .btn-group{
   margin-top: 11px;
 }
+.btn-group > .btn:not(:first-child){
+  margin-left: 0;
+}
 .btn-topology-action,
 .btn-topology-action:hover{
   margin: 0 6px;
@@ -122,11 +134,11 @@ header{
 .dropdown-toggle:focus ~ .dropdown-text{
   top: 7px;
   text-indent: 15px;
-  background: #1273EB;
-  border-radius: 15px;
+  background: #1273EB !important;
+  border-radius: 15px !important;
   border: 0;
   box-shadow: none;
-  color: #fff;
+  color: #fff !important;
   font-weight: bold;
   font-size: 13px;
 }
@@ -244,8 +256,8 @@ button.rotate{
   text-decoration: none;
 }
 #board-paper svg{
-  top: 40px;
-  left: 30px;
+  top: 70px;
+  left: 0;
 }
 .componentsList tspan{
   /* width:30px !important;  */
@@ -329,7 +341,7 @@ p.compType-4{
   padding-left: 20px;
   background: #fff;
   border-top: solid 1px #C1CDDD;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 40px;
   color: #0070F4;
 }
@@ -472,35 +484,52 @@ p.compType-4{
 }
  
 /*CANVAS*/
-.editBar{
-  width: 73.7%;
-  margin: 0 auto 0 -320px;
+.source-button.editBar{
+  position: absolute;
+  z-index: 9999999;
+  top: 60px;
+  /* left: 50%; */
+}
+.editBar,
+.editBar2{
+  width: calc(100% - 320px);
+  margin: 0 auto 0 320px;
   height: 45px;
-  padding: 6px 10px;
+  padding: 0;
+  padding-right: 20px;
   background:#F4F9FE;
-  /* border: solid 1px #E8EFF8; */
+  border-bottom: solid 1px #E8EFF8;
   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 }
-.editBar .btn-group{
+
+.editBar .btn-group,
+.editBar2 .btn-group{
   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 }
-.editBar .btn{
+.editBar .toggoleBtn,
+.editBar2 .toggoleBtn{
+  height: 43px;
+  margin-right: 12px;
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: left center;
   border: 0;
   color: #1B3E6F;
   font-size: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 4px;
 }
-.editBar .btn.active{
+.editBar .toggoleBtn i,
+.editBar2 .toggoleBtn i{
+  font-size: 20px;
+}
+.editBar .toggoleBtn.active,
+.editBar2 .toggoleBtn.active{
   background-color: #1B3E6F !important;
   color: #fff;
 }
-.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);
 }
@@ -701,12 +730,12 @@ p.compType-4{
   font-size: 10px;
 
 }
-.source-button{
+/* .source-button{
   position: absolute;
     z-index: 9999999;
     top: 60px;
     left: 50%;
-}
+} */
 /*jointjs paper*/
 /* #board-paper {
     position: relative;
@@ -753,39 +782,46 @@ p.compType-4{
   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);
+  width: 100%;
+  margin: 0;
 }
-.editBar2 .btn{
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: left center;
+
+.viewBtns .btn{
+  margin-top: 14px;
+  padding-left: 30px!important;
   border: 0;
-  color: #1B3E6F;
-  font-size: 10px;
+  font-size: 12px;
+  color: #1B3E6F !important;
+  background-color: #fff !important;
+  background-repeat: no-repeat;
+  background-position: 10px center;
 }
-.editBar2 .btn.active{
+.viewBtns .btn.active{
   background-color: #1B3E6F !important;
-  color: #fff;
+  color: #fff !important;
 }
-.editBar2 .viewBtns .btn{
-  background-position: 10px center;
-  padding-left: 30px!important;
-  margin-top: 14px;
+
+
+.joint-paper{
+  width: 94% !important;
+  height: 100vh !important;
+  margin: 0 auto !important;
+}
+ul.templateLegend{
+  margin: 0;
+}
+.templateLegend li{
+  float: left;
+  list-style: none;
+  font-size: 11px;
+}
+.templateLegend li:not(:last-child){
+  margin-right: 24px;
+}
+.templateLegend .requirement i{
+  color: #FF6B6B;
+}
+.templateLegend .capability i{
+  color: #0ABDE3;
 }
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 fe24f9df4..08f9a0789 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
@@ -109,11 +109,12 @@
 </div> -->
 
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
-    <button (click)="_toggleSidebar1()" class="active btn arrow">
+    <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
+        data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <div class="collapse navbar-collapse ">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav">
             <li class="nav-item active">
                 <nav class="row">
                     <!--Nav Tabs-->
@@ -128,7 +129,11 @@
                 </nav>
             </li>
         </ul>
-        <ul class="navbar ml-auto" style="list-style: none;">
+        <ul class="templateLegend ml-auto mr-auto p-0">
+            <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;">
             <li class="nav-item">
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
@@ -184,7 +189,9 @@
                 </div>
             </div>
         </div>
-        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div>
+        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
+                href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
+        </div>
     </ng-sidebar>
     <!-- Page content -->
 
@@ -612,4 +619,4 @@
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
\ No newline at end of file
+</ng-sidebar-container>
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 4f31a08f4..e2a8d642b 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
@@ -205,8 +205,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
       this.boardPaper = new joint.dia.Paper({
           el: $('#board-paper'),
           model: this.boardGraph,
-          height: 720,
-          width: 1100,
+          // height: 720,
+          // width: 1100,
           gridSize: 10,
           drawGrid: true,
           // background: {