Fix duplicate style files in designer

Issue-ID: CCSDK-2454

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

4 files changed, 57 insertions, 584 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 64ba84579..876ba0965 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
@@ -843,3 +843,10 @@ ul.editor{
   color: white;
   margin: 5px;
 }
+.ace_editor{
+  top: 5.4vh;
+  height: 92vh !important;
+}
+.dsl-editor {
+  height: 500px;  
+}
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 bc1890bdb..e69de29bb 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
@@ -1,582 +0,0 @@
-.dsl-editor {
-    height: 500px;  
-}
-
-body{
-  background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
-  background-size: 6px 6px !important;  
-}
-/*Header*/
-header{
-  height: 60px;
-  background-color: #1B3E6F;
-  box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
-}
-.logo{
-  float: left;
-  width: 50px;
-  height: 60px;
-  background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
-}
-
-/**Bread Crumb**/
-.breadcrumb{
-  padding: 9px 20px;
-  background: transparent;
-  line-height: 40px;
-}
-.breadcrumb a,
-.breadcrumb a:hover{
-  color: #fff;
-}
-.breadcrumb .breadcrumb-item{
-  font-size: 12px;
-  font-weight: bold;
-}
-.breadcrumb .breadcrumb-item:first-child{
-  font-size: 16px;
-}
-.breadcrumb-item + .breadcrumb-item::before{
-  color: #fff;
-}
-.breadcrumb .breadcrumb-item.active p{
-  display: inline;
-  padding: 4px 10px;
-  background: #F4F9FE;
-  border-radius: 10px;
-  color: #C3CDDB;
-  font-size: 10px;
-}
-.designer-breadcrumb .fa-angle-right::before{
-  color: #fff;
-}
-.sidebar-container{
-  height: calc(100vh - 60px) !important;
-}
-/**Topology Actions**/
-.topology-actions{
-  margin: 0;
-  height: 60px;
-}
-.topology-actions > li{
-  height: 59px;
-  display: inline-block;
-  padding: 0 20px;
-}
-.topology-actions > li:first-child{
-  border-right: solid 1px #16396A;
-}
-.topology-actions .btn-group{
-  margin-top: 11px;
-}
-.btn-topology-action,
-.btn-topology-action:hover{
-  margin: 0 6px;
-  padding: 6px 10px;
-  color: #fff;
-  border-radius: 50%;
-  border: solid .5px #fff;
-}
-.btn-topology-action:last-child{
-  margin-right: 0;
-}
-.btn-topology-action .fa{
-  width: 16px;
-  height: 16px;
-  text-align: center;
-}
-.topology-actions .dropdown-text,
-.dropdown-toggle:hover ~ .dropdown-text, 
-.dropdown-toggle:focus ~ .dropdown-text{
-  top: 7px;
-  text-indent: 15px;
-  background: #1273EB;
-  border-radius: 15px;
-  border: 0;
-  box-shadow: none;
-  color: #fff;
-  font-weight: bold;
-  font-size: 13px;
-}
-.topology-actions .dropdown-text::after{
-  right: 15px;
-  top: 13px;
-  border-width: 6px 6px 0 6px;
-  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
-}
-.topology-actions .dropdown-content:hover, 
-.topology-actions .dropdown-toggle:focus ~ .dropdown-content{
-  padding: 12px 0;
-  text-indent: 0;
-  background: #fff;
-  border: 0;
-  border-radius: 2px;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
-}
-.topology-actions .dropdown-content a{
-  padding: 0 20px;
-  color: #1B3E6F;
-  font-size: 13px;
-}
-.topology-actions .dropdown-content a:hover{
-  background: #F4F9FE;
-  text-decoration: none;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*Rotated Text*/
-button.rotate{
-  position: absolute;
-  margin-top: 1px;
-  padding: 0;
-  background: transparent;
-  border: 0;
-}
-.rotate{
-  vertical-align: bottom;
-  /* text-align: center; */
-}
-.rotate span{
-  display: inline-table !important;
-  -ms-writing-mode: tb-rl;
-  -webkit-writing-mode: vertical-rl;
-  writing-mode: vertical-rl !important;
-  transform: rotate(180deg);
-  white-space: nowrap;
-  background: #1B3E6F; 
-  padding: 15px 12px;
-  font-weight: bold;
-  font-size: 12px;
-  color:#fff;
-  /* border-bottom-left-radius: 2px; */
-  border-top-left-radius: 2px;
-}
-.rotate i{
-  margin-right: 3px;
-  margin-top: 9px;
-  font-size: 15px;
-}
-.rotate span:first-child{
-  margin-bottom: 0;
-}
-.rotate a:hover{
-  text-decoration: none;
-}
-
-/*ACTIONS & COMPONENTS MENU*/
-.input-search-controller{
-  height: 50px;
-  padding-left: 30px;
-  background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
-  border-radius: 0;
-  border: 0;
-  border-bottom: solid 1px #D7E7F9;
-  color: #1B3E6F;
-  font-size: 13px;
-}
-.input-search-controller::placeholder{
-  color: #D0D7E4;
-  font-size: 11px;
-}
-.input-search-controller:focus{
-  
-  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
-  border-color: #DEE8F3;
-}
-.actions-scroll{
-  max-height: 29vh;
-  overflow-y: auto;
-  margin-top: 12px;
-  margin-bottom: 20px;
-}
-.componentsList p{
-  margin-bottom: 0;
-  padding-left: 30px;
-  background-position: left center;
-  background-repeat: no-repeat;
-}
-p.compType-1{
-  background-image: url(/assets/img/icon-comType1-sm.svg);
-}
-p.compType-2{
-  background-image: url(/assets/img/icon-comType2-sm.svg);
-}
-p.compType-3{
-  background-image: url(/assets/img/icon-comType3-sm.svg);
-}
-p.compType-4{
-  background-image: url(/assets/img/icon-comType4-sm.svg);
-}
-/*Actions Wrapper*/
-.actions-wrapper{
-  position: absolute;
-  width: 100%;
-  top: 0;
-}
-.actions-container{
-  width: 92%;
-  margin: 0 auto;
-  background: red;
-}
-
-.controllerSidebar{
-  width: 320px;
-  background: #F4F9FE;
-  border: solid 1px #C1CDDD;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
-}
-.controllerSidebar h1{
-  margin-bottom: 15px;
-  padding: 12px 0 12px 12px;
-  background: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #C3CDDB;
-}
-.controllerSidebar b{
-  margin-left: 12px;
-  font-size: 12px;
-  color: #C3CDDB;
-}
-.actionBtns .btn{
-  margin: 0 15px 12px;
-  padding: 9px 20px;
-  border-radius: 2px !important;
-  font-size: 12px;
-  font-weight: bold;
-}
-.actionBtns .btn:first-child{
-  background: #1B3E6F;
-  border: solid 1px #1B3E6F;
-  color: #fff;
-}
-.actionBtns .btn:last-child{
-  padding-left: 34px !important;
-  border: solid 1px #D0DFF1;
-  color: #1B3E6F;
-  outline: 0 !important;
-}
-.actionsList,
-.componentsList{
-  padding: 0 12px 20px;
-}
-.componentsList{
-  padding-bottom: 0;
-}
-.custom-control.custom-checkbox:hover,
-.custom-control-label:hover{
-  cursor: pointer;
-}
-.actionsList .custom-checkbox,
-.componentsList .list-group-item{
-  margin-bottom: 10px;
-  padding-left: 40px;
-  background: #fff;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
-  border-radius: 2px;
-}
-.actionsList .custom-control-label{
-  width: 100%;
-  padding: 6px;
-  vertical-align: unset;
-  color: #1B3E6F;
-  font-size: 14px;
-  line-height: 20px;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.actionsList .custom-control-label::before,
-.actionsList .custom-control-label::after{
-  top: 1.25rem;
-}
-.actionsList .custom-control-label p{
-  color: #C7D0DD;
-  font-size: 12px;
-}
-.custom-control-input:checked ~ .custom-control-label{
-  background-color: #1B3E6F !important;
-  color: #fff;
-}
-.inserActionBtns .btn{
-  border-radius: 15px !important;
-  padding: 6px 20px;
-  font-size: 12px;
-  font-weight: bold;
-  border: 0;
-
-}
-.inserActionBtns .btn:first-child{
-  background: #1273EB;
-  border: solid 1px #1273EB;
-  color: #fff;
-}
-.inserActionBtns .btn:last-child{
-  background: #fff;
-  border: solid 1px #D9E6F2;
-  color: #C3CDDB;
-}
-/*Components List*/
-.componentsList .list-group-item{
-  padding-left: 36px;
-  border: 0;
-  font-size: 14px;
-  background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
-}
- 
-/*CANVAS*/
-.editBar{
-  width: 200px;
-  margin: 0 auto 0;
-  padding: 6px 10px;
-  background:#F4F9FE;
-  /* border: solid 1px #E8EFF8; */
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
-}
-.editBar .btn-group{
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
-}
-.editBar .btn{
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: left center;
-  border: 0;
-  color: #1B3E6F;
-  font-size: 10px;
-}
-.editBar .btn.active{
-  background-color: #1B3E6F !important;
-  color: #fff;
-}
-.viewBtns .btn{
-  background-position: 10px center;
-  padding-left: 30px!important;
-}
-.viewBtns .topologySource{
-  background-image: url(src/assets/img/icon-topologyView-active.svg);
-}
-.viewBtns .topologyView{
-  background-image: url(src/assets/img/icon-topologySource.svg);
-}
-.card.actionContainer{
-  margin: 20px 20px 40px 60px;
-  background: transparent;
-  border: 0;
-}
-.actionContainer .card-header{
-  padding: 0;
-  background: transparent;
-  border: 0;
-}
-.actionContainer .card-header span{
-  padding: 12px 20px;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  font-size: 12px;
-  line-height: 38px;
-  font-weight: bold;
-  color: #1B3E6F;
-  background: #C3CDDB;
-}
-.actionContainer .card-body{
-  min-height: 170px;
-  padding: 15px 20px !important;
-  border: solid 1px #C3CDDB;
-  background: #fff;
-  box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
-}
-.actionContainer a{
-  display: inline-block;
-  width: 230px;
-  height: 130px;
-  margin: 20px;
-  padding: 24px;
-  background: #1B3E6F;
-  color: #fff !important;
-  text-align: center;
-  border-radius: 2px;
-  border: solid 1px #1B3E6F;
-}
-.actionContainer a:hover{
-  cursor: pointer;
-  border: dashed 1px #E9FCC6;
-}.componentContainer img{
-  height: 38px;
-}
-.componentContainer h2{
-  margin-top: 9px;
-  font-size: 14px;
-  font-weight: bold;
-}
-.componentContainer p{
-  font-size: 12px;
-}
-
-/*ATTRIBUTES SIDE BAR*/
-.attributesSideBar{
-  width: 396px;
-  padding: 0;
-}
-.attributesSideBar .attributesContainer{
-  background: #fff;
-  border: solid 1px #C1CDDD;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
-}
-.closeBar{
-  float: right;
-  width: 90%;
-  height: 40px;
-  background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
-  border: 0;
-  outline: 0;
-}
-.closeBar:focus{
-  outline: none;
-}
-.attributesContainer h1{
-  margin-bottom: 10px;
-  padding: 12px 0 12px 15px;
-  background: #DEE8F3;
-  font-size: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #1B3E6F;
-}
-.actionName{
-  margin-bottom: 21px;
-}
-.attributesContainer label{
-  color: #1B3E6F;
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: bold;
-}
-.attributesContainer .form-group{
-  margin-bottom: 9px;
-}
-.attributesContainer .form-control{
-  border-color: #F0F5FC;
-  border-radius: 2px;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
-  color: #103D73;
-  font-size: 13px;
-}
-.attributesContainer .form-control:focus{
-  border-color: #66bfff;
-  box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
-}
-.attributesContainer .form-control::placeholder{
-  color: #CFD7E5;
-}
-.scrolll{
-  max-height: 88.75vh;
-  overflow-y: auto;
-}
-.accordion > .card{
-  margin-bottom: 0 !important;
-  border: 0;
-}
-.accordion > .card .card-header{
-  margin: 0;
-  padding: 0;
-  background-color: #F4F9FE;
-  border: 0;
-  border-radius: 0;
-}
-.accordion > .card .card-body{
-  padding-bottom: 10px !important; 
-}
-.accordion .btn-link{
-  padding: 0;
-  color: #C3CDDB;
-  font-weight: bold;
-  font-size: 13px;
-  text-transform: uppercase;
-  line-height: 38px;
-}
-.accordion .btn-link:hover{
-  color: #103D73;
-  text-decoration: unset;
-}
-.accordion .card-header .btn-link[aria-expanded="true"]:after,
-.accordion .card-header .btn-link[aria-expanded="false"]:after{
-  margin-right: 9px;
-  font-family: 'FontAwesome';
-  float: left;
-  font-weight: normal;
-  font-size: 12px;
-}
-.accordion .card-header .btn-link[aria-expanded="true"]:after{
-  content: "\f078";    
-}
-.accordion .card-header .btn-link[aria-expanded="false"]:after{    
-  content: "\f054";    
-}
-.btn-addAttribute{
-  width: 20px;
-  height: 20px;
-  background-image: url(/assets/img/icon-add.svg);
-  background-position: center center;
-  background-repeat: no-repeat; 
-  vertical-align: sub;
-}
-.btn-addAttribute:hover{
-  background-image: url(/assets/img/icon-add-hover.svg);
-}
-.btn-deleteAttribute{
-  padding: 5px 10px;
-  background: #FFE6E7;
-  border: solid .5px #FFC9CB;
-  border-radius: 2px;
-  color: #FF6469;
-  font-size: 10px;
-
-}
-.source-button{
-  position: absolute;
-    z-index: 9999999;
-    top: 69px;
-    left: 50%;
-}
-/*jointjs paper*/
-/* #board-paper {
-    position: relative;
-    border: 1px solid gray;
-    display: inline-block;
-    background: transparent;
-    overflow: hidden;
-}
-#board-paper svg {
-    background: transparent;
-}
-#board-paper svg .link {
-    z-index: 2;
-}
-.html-element {
-    position: absolute;
-    background: #F4F9FE;
-    pointer-events: none;
-    -webkit-user-select: none;
-    z-index: 2;
-} */
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
index 05f6eeb5a..c6b442bb6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
@@ -3,17 +3,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/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</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>
                     </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">
+                                        <h3>Test Package
+                                            <span class="package-version">Version 1.0.2</span></h3>
+                                    </div>
+                                    <div class="col 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">
@@ -71,6 +115,9 @@
            
             
         </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>
 <div ng-sidebar-content id="board-paper">
     <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
index e6b00f413..487c19ad1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
@@ -10,7 +10,8 @@ import { SourceViewService } from './source-view.service';
 @Component({
     selector: 'app-designer-source-view',
     templateUrl: './source-view.component.html',
-    styleUrls: ['./source-view.component.css']
+    // styleUrls: ['./source-view.component.css']
+    styleUrls: ['../designer.component.css']
 })
 export class DesignerSourceViewComponent implements OnInit, OnDestroy {