diff options
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 { |