Merge live repo with design changes ccsdk-2309

Issue-ID: CCSDK-2309
Change-Id: Iba91eebc5880a930842e66fa97d20441c52e347b
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Signed-off-by: Dan Timoney <dtimoney@att.com>

5 files changed, 167 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 37a6f9235..04f410c5f 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
@@ -4,12 +4,21 @@ body{
   background-size: 6px 6px !important;  
 }
 
+/*Icons*/
+.icon-info{
+  margin-left: 3px;
+}
+.icon-info::before{
+  color: #fff;
+}
 
 /*Header*/
 header{
+  position: relative;
   height: 60px;
   background-color: #1B3E6F;
   box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+  z-index: 200000000 !important;
 }
 .logo{
   float: left;
@@ -43,9 +52,13 @@ header{
   padding: 4px 10px;
   background: #F4F9FE;
   border-radius: 10px;
-  color: #C3CDDB;
+  color: #1B3E6F;
   font-size: 10px;
 }
+.designer-breadcrumb .fa-angle-right::before {
+  color: #fff;
+  line-height: 38px;
+}
 .sidebar-container{
   height: calc(100vh - 60px) !important;
 }
@@ -68,7 +81,7 @@ header{
 .btn-topology-action,
 .btn-topology-action:hover{
   margin: 0 6px;
-  padding: 6px 10px;
+  padding: 4px 8px;
   color: #fff;
   border-radius: 50%;
   border: solid .5px #fff;
@@ -97,13 +110,15 @@ header{
 .topology-actions .dropdown-text::after{
   right: 15px;
   top: 13px;
-  border-width: 6px 6px 0 6px;
+  border-style: solid !important;
+  border-width: 5px 5px 0 5px !important;
   border-color: #fff transparent transparent transparent;
 }
 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
   top: 13px;
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent #fff transparent
+  border-style: solid !important;
+  border-width: 0 5px 5px 5px !important;
+  border-color: transparent transparent #fff transparent;
 }
 .topology-actions .dropdown-content:hover, 
 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
@@ -123,9 +138,35 @@ header{
   background: #F4F9FE;
   text-decoration: none;
 }
-
-
-
+.package-info-btn{
+  padding: 0 !important;
+}
+.package-info h3{
+  font-size: 15px;
+  font-weight: bold;
+}
+.package-info h3 span{
+  font-size: 11px;
+}
+.package-info .badge{
+  margin-right: 6px;
+  padding: 4px 10px;
+  background: #E0E8F2;
+  border-radius: 12px;
+  color: #1B3E6F;
+  font-size: 11px;
+  font-weight: normal;
+}
+.creator-pic{
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
+.package-info p{
+  margin-bottom: 0;
+  font-size: 11px;
+  line-height: 20px;
+}
 
 
 
@@ -179,7 +220,24 @@ button.rotate{
 .rotate a:hover{
   text-decoration: none;
 }
-
+#board-paper svg{
+  top: 40px;
+  left: 30px;
+}
+.componentsList tspan{
+  width:60px !important; 
+  font: normal 13px sans-serif; 
+  fill: #1B3E6F !important; 
+  overflow-wrap: break-word;
+}
+#board-paper #name tspan{
+  /* fill: green; */
+  text-align: center;
+  
+}
+tspan#type{
+  text-align: center;
+}
 /*ACTIONS & COMPONENTS MENU*/
 .input-search-controller{
   height: 50px;
@@ -252,6 +310,8 @@ p.compType-4{
   color: #C3CDDB;
 }
 .controllerSidebar b{
+  margin-left: 12px;
+  margin-bottom: 9px;
   font-size: 12px;
   color: #C3CDDB;
 }
@@ -261,17 +321,17 @@ p.compType-4{
   border-radius: 2px !important;
   font-size: 12px;
   font-weight: bold;
+  outline: 0 !important;
 }
-.actionBtns .btn:first-child{
+.actionBtns .btn.insert-custom{
   background: #1B3E6F;
   border: solid 1px #1B3E6F;
   color: #fff;
 }
-.actionBtns .btn:last-child{
-  padding-left: 34px !important;
-  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
+.actionBtns .btn.import-action{
   border: solid 1px #D0DFF1;
   color: #1B3E6F;
+  
 }
 .actionsList,
 .componentsList{
@@ -281,6 +341,7 @@ p.compType-4{
   padding-bottom: 0;
   height: calc( 100vh - 218px)!important;
   overflow: scroll;
+  background: #F4F9FE !important;
 }
 .custom-control.custom-checkbox:hover,
 .custom-control-label:hover{
@@ -553,7 +614,7 @@ p.compType-4{
 .source-button{
   position: absolute;
     z-index: 9999999;
-    top: 69px;
+    top: 60px;
     left: 50%;
 }
 /*jointjs paper*/
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 1a2219bab..bd5b07e45 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
@@ -4,17 +4,61 @@
         <div class="col pl-0">
             <p class="logo mb-0"></p>
             <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-0">
+                <ol class="breadcrumb designer-breadcrumb mb-0">
                     <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
                         <a href="#">Package Name</a>
+                        <button type="button" class="btn package-info-btn" data-toggle="modal"
+                            data-target="#exampleModalLong">
+                            <i class="icon-info" aria-hidden="true"></i>
+                        </button>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item active" aria-current="page">
-                        <p class="mb-0">Topology View</p>
+                        <p class="mb-0">Designer Mode</p>
                     </li>
                 </ol>
+                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
+                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <img src="assets/img/icon-close.svg" />
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="row package-info">
+                                    <div class="col-12">
+                                        <h3>Test Package<span>.vLB.CDS</span>
+                                            <span class="package-version">Version 1.0.2</span></h3>
+                                    </div>
+                                    <div class="col-12 mb-3">
+                                        <span class="badge badge-primary">test</span>
+                                        <span class="badge badge-primary">vDNS-CDS</span>
+                                        <span class="badge badge-primary">SCALE-OUT</span>
+                                        <span class="badge badge-primary">MARCO</span>
+                                    </div>
+                                    <div class="col-2">
+                                        <img src="/assets/img/img-user3.jpg" class="creator-pic">
+                                    </div>
+                                    <div class="col-10 pl-0">
+                                        <p><b>Author information:</b></p>
+                                        <p>Abdelmuhaimen Seaudi</p>
+                                        <p>abdelmuhaimen.seaudi@orange.com</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="col pr-0 text-right">
@@ -22,15 +66,15 @@
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Preview">
+                            data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Download">
+                            data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Share">
+                            data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
@@ -58,24 +102,24 @@
 <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']" type="button" class="btn btn-secondary topologyView">Scripting</button>
+        <button [routerLink]="['/designer/source']" 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'"
-                [mode]="'push'"
-                #sidebarLeft>
+        [mode]="'push'" #sidebarLeft>
         <div class="row">
-            
             <h1 class="col-12">Actions</h1>
             <div class="col-12 text-center p-0">
                 <div class="btn-group actionBtns" role="group">
-                    <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button>
-                    <!-- <button type="button" class="btn">Import Action</button> -->
+                    <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">Insert
+                        Custom</button>
+                    <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> -->
                 </div>
             </div>
-      <!-- <div class="col-12 actionsList">
+            <!-- <div class="col-12 actionsList">
         <b>Select from other packages:</b>
         <div class="actions-scroll">
           <div class="custom-control custom-checkbox">
@@ -109,22 +153,22 @@
         </div>
       </div> -->
 
-        <h1 class="col-12">Functions</h1>
-        <b>Drag and drop function to Action’s box</b>
-        <div id="palette-paper" class="col-12 componentsList">
-        </div>
+            <h1 class="col-12">Functions</h1>
+            <b>Drag and drop function to Action’s box</b>
+            <div id="palette-paper" class="col-12 componentsList">
+            </div>
         </div>
     </ng-sidebar>
     <!-- Page content -->
-    
+
     <div ng-sidebar-content id="board-paper">
         <button class="rotate" (click)="_toggleSidebar1()">
-      <span>
-        Controller
-        <i class="fa fa-angle-double-left"></i>
-      </span>
+            <span>
+                Controller
+                <i class="fa fa-angle-double-left"></i>
+            </span>
         </button>
-        
+
         <!-- Canvas -->
         <div class="editBar text-center">
             <div class="btn-group mr-2" role="group" aria-label="First group">
@@ -180,8 +224,7 @@
     </div>
     <!-- Attribute SideBar -->
     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'"
-                #sidebarRight>
+        [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
@@ -203,8 +246,7 @@
                                 <div class="card-header row" id="headingOne">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseOne" aria-expanded="true"
-                                                aria-controls="collapseOne">
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                             Steps
                                         </button>
                                     </h2>
@@ -214,7 +256,7 @@
                                 </div>
 
                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -234,7 +276,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -248,8 +290,7 @@
                                 <div class="card-header row" id="headingTwo">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseTwo" aria-expanded="true"
-                                                aria-controls="collapseTwo">
+                                            data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                             Inputs
                                         </button>
                                     </h2>
@@ -258,7 +299,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -278,7 +319,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -292,8 +333,8 @@
                                 <div class="card-header row" id="headingThree">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseThree" aria-expanded="true"
-                                                aria-controls="collapseThree">
+                                            data-target="#collapseThree" aria-expanded="true"
+                                            aria-controls="collapseThree">
                                             Outputs
                                         </button>
                                     </h2>
@@ -302,7 +343,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -322,7 +363,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
index 42813075c..72019bfa0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
@@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                 <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)">
                     <g id="execute" transform="translate(304.000000, 0.000000)">
                         <g id="Group" transform="translate(7.000000, 0.000000)">
-                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="0" y="0" width="230" height="130" rx="2"></rect>
-                            <g id="Group-4" transform="translate(36.000000, 25.000000)" fill="#FFFFFF">
-                                <g id="database0-copy" transform="translate(61.000000, 0.000000)" fill-rule="nonzero">
+                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect>
+                            <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF">
+                                <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero">
                                     <path d="M35.544,6.00705882 C34.7265882,
                                     2.97882353 28.6425882,0 18,0 C7.35741176,
                                     0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,
@@ -302,11 +302,10 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                                 </g>
                                 <text id="func-board-element-text"
                                     font-family="HelveticaNeue-Bold, Helvetica Neue"
-                                    font-size="14"
+                                    font-size="13"
                                 font-weight="bold" line-spacing="18">
-                                    <tspan id="label" x="52.554" y="59">execute</tspan>
-                                    <tspan x="105.446" y="59" font-family="HelveticaNeue, Helvetica Neue" font-weight="normal"></tspan>
-                                    <tspan id="type" x="0.094" y="77"
+                                    <tspan id="label" x="64" y="18">execute</tspan>
+                                    <tspan id="type" x="64" y="40"
                                     font-family="HelveticaNeue, Helvetica Neue" font-size="12"
                                     font-weight="normal"></tspan>
                                 </text>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
index 896ecaa88..48a680982 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
@@ -34,7 +34,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
 }, {
     markup:
     `<defs>
-        <rect id="pallete-function-rect" x="0" y="0" width="280" height="40" rx="2"></rect>
+        <rect id="pallete-function-rect" x="0" y="0" width="290" height="40" rx="2"></rect>
         <filter x="-3.6%" y="-20.0%" width="107.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -53,7 +53,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                 <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#pallete-function-rect"></use>
                                 <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#pallete-function-rect"></use>
                             </g>
-                            <g id="drag-menu" transform="translate(20.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
+                            <g id="drag-menu" transform="translate(15.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
                                 <g id="left">
                                     <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
                                     <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
@@ -67,7 +67,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                     <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
                                 </g>
                             </g>
-                            <g id="txt" transform="translate(35.000000, 10.000000)" fill="#1B3E6F">
+                            <g id="txt" transform="translate(30.000000, 10.000000)" fill="#1B3E6F">
                                 <g id="browser" fill-rule="nonzero">
                                     <path d="M21.0000051,0.39034364 C20.9994786,
                                     0.29701568 20.9615913,0.207858845 20.8946802,
@@ -254,7 +254,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                     id="Shape"></path>
                                 </g>
                                 <text id="function-type" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="20">
-                                    <tspan id="label" x="32" y="13"></tspan>
+                                    <tspan id="label" x="30" y="13"></tspan>
                                 </text>
                             </g>
                         </g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
index 01ae599a4..75274ba33 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
@@ -49,6 +49,9 @@ header{
   color: #C3CDDB;
   font-size: 10px;
 }
+.designer-breadcrumb .fa-angle-right::before{
+  color: #fff;
+}
 .sidebar-container{
   height: calc(100vh - 60px) !important;
 }
@@ -255,6 +258,7 @@ p.compType-4{
   color: #C3CDDB;
 }
 .controllerSidebar b{
+  margin-left: 12px;
   font-size: 12px;
   color: #C3CDDB;
 }
@@ -272,9 +276,9 @@ p.compType-4{
 }
 .actionBtns .btn:last-child{
   padding-left: 34px !important;
-  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
   border: solid 1px #D0DFF1;
   color: #1B3E6F;
+  outline: 0 !important;
 }
 .actionsList,
 .componentsList{