},
"private": true,
"dependencies": {
- "@angular/animations": "~8.2.9",
+ "@angular/animations": "^8.2.13",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.2.9",
"@angular/compiler": "~8.2.9",
"@angular/platform-browser-dynamic": "~8.2.9",
"@angular/router": "~8.2.9",
"@ng-bootstrap/ng-bootstrap": "^5.1.1",
+ "angular-animations": "0.0.10",
"angular-font-awesome": "^3.1.2",
+ "angular-material-expansion-panel": "^0.7.2",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
+ "ng-sidebar": "^9.1.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
"@angular/cli": "~8.3.9",
"@angular/compiler-cli": "~8.2.9",
"@angular/language-service": "~8.2.9",
- "@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
+ "@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
+ "jasmine-marbles": "^0.6.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
+const routes: Routes = [
+ {path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+ {
+ path: '',
+ redirectTo: 'packages',
+ pathMatch: 'full'
+ },
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
-/* Menu Styles */
-.primary-nav{
- position: fixed;
- z-index: 999;
-}
-.menu{
- position: relative;
-}
-.menu ul{
- margin: 0;
- padding: 0;
- list-style: none;
-}
-.open-panel{
- border: none;
- background-color:#fff;
- padding: 0;
-}
-
- .logo-icon {
- background: #fff;
- position: relative;
- display: block;
- text-align: center;
- padding: 16px 0;
- width: 50px;
- height: 60px;
- left: 0;
- top: 0;
- z-index: 1000;
- cursor: pointer;
- }
-
- /* .logo-icon:before {
- content:"\2630";
- display: block;
- color: #000;
- line-height: 32px;
- font-size: 16px;
- } */
-
- /* .openNav .logo-icon:before {
- content:"\2715";
- display: block;
- color: #000;
- line-height: 32px;
- font-size: 16px;
- }
-
- .logo-icon:hover:before {
- color: #777;
- } */
-
- .primary-nav .menu li {
- position: relative;
- }
-
- .menu .icon {
- position: absolute;
- top: 12px;
- right: 10px;
- pointer-events: none;
- width: 30px;
- height: 30px;
- color: #fff;
- text-align: center;
- }
- .menu .icon .fa{
- vertical-align: middle;
- }
- .menu,
- .menu a,
- .menu a:visited {
- color: #fff;
- text-decoration: none!important;
- position: relative;
- }
-
-.menu a{
- display: block;
- white-space: nowrap;
- padding: 10px 1em;
- font-size: 12px;
- font-weight: bold;
- height: 52px;
-line-height: 30px;
-}
-
- .menu a:hover {
- color: #fff;
- }
-
- /* .menu {
- margin-bottom: 3em;
- } */
-
- .menu-dropdown li .icon{
- padding: 2px 6px;
- color: #fff;
-
- }
-
- .menu-dropdown li.active .icon {
- color: #fff;
- background: #265699;
- border-radius: 50%;
- }
- .menu-dropdown li:hover{
- background: #172B4D;
- }
-
-
- .menu label {
- margin-bottom: 0;
- display: block;
- }
-
- .menu label:hover {
- cursor: pointer;
- }
-
- .menu input[type="checkbox"] {
- display: none;
- }
-
- input#menu[type="checkbox"] {
- display: none;
- }
-
-
-
-
-
-
- .sub-menu-dropdown {
- display: none;
- }
-
- .new-wrapper {
- position: absolute;
- left: 50px;
- width: calc(100% - 50px);
- transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
- }
-
- #menu:checked + ul.menu-dropdown {
-
- left: 0;
- -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
- animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
- }
-
- .sub-menu-checkbox:checked + ul.sub-menu-dropdown {
- display: block!important;
- -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
- animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
- }
-
-
- .openNav .new-wrapper {
- position: absolute;
- transform: translate3d(200px, 0, 0);
- width: calc(100% - 250px);
- transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
- }
-
-
- .downarrow {
- background: transparent;
- position: absolute;
- right: 50px;
- top: 12px;
- color: #fff;
- width: 24px;
- height: 24px;
- text-align: center;
- display: block;
- }
-
- .downarrow:hover {
- color: #fff;
- }
-
- .menu {
- position: absolute;
- display: block;
- left: -200px;
- top: 0;
- width: 250px;
- height: 100vh;
- transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
- background-color: #1B3E6F;
- z-index: 999;
- }
-
- .menu-dropdown {
- top: 0;
- overflow-y: auto;
- }
-
- .overflow-container {
- position: relative;
- height: calc(100vh - 60px)!important;
- overflow-y: auto;
- border-top: 60px solid #fff;
- z-index: -1;
- display:block;
- }
-
- .menu .logotype {
- position: absolute !important;
- top: 16px;
- left: 55px;
- display: block;
- }
-
- .sub-menu-dropdown {
- background-color: #333;
- }
-
- .menu:hover {
- position: absolute;
- left: 0;
- top: 0;
- }
-
- .openNav .menu:hover {
- position: absolute;
- left: -200px;
- top: 60px;
- }
-
- .openNav .menu {
- top: 60px;
- transform: translate3d(200px, 0, 0);
- transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
- }
-
- /* label.logo-icon {
- display: none;
- } */
-
-
-
-
-
-
-
-
-
-
-
-
-
- /* look and feel only, not needed for core menu*/
-
- @-webkit-keyframes grow {
-
- 0% {
- display: none;
- opacity: 0;
- }
- 50% {
- display: block;
- opacity: 0.5;
- }
- 100% {
- opacity: 1;
- }
-
- }
-
- @keyframes grow {
-
- 0% {
- display: none;
- opacity: 0;
- }
- 50% {
- display: block;
- opacity: 0.5;
- }
- 100% {
- opacity: 1
- }
-
- }
-
-/*User Profile*/
-.userProfile .dropdown{
- width: 100%;
-}
-.userProfile .dropdown:hover{
- background: #172B4D;
-}
-.userProfile .dropdown-text{
- background: transparent;
- border: 0;
- box-shadow: none;
- font-size: 13px;
- line-height: 40px;
-}
-.userProfile .dropdown-toggle{
- height: 40px;
-}
-.userProfile .dropdown-text::after{
- right: 14px;
- top: 8px;
- width: 24px;
- height: 24px;
- background: url(../assets/img/img-userProfile.png) center center no-repeat;
- border: 0;
- border-radius: 50%;
-}
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
-<div class="primary-nav">
- <img class="logo-icon open-panel nav-toggle" src="../assets/img/logo-icon.svg" title="CDS">
- <nav role="navigation" class="menu">
- <img class="logotype" src="../assets/img/logo-text.svg">
- <div class="overflow-container">
- <ul class="menu-dropdown">
- <li class="active">
- <a href="packages/list">Packages</a>
- <span class="icon">
- <!-- <i class="fa fa-dashboard"></i> -->
- <img src="../assets/img/icon-nav-packages.svg">
- </span>
- </li>
- <li class="menu-hasdropdown">
- <a href="#">Data Dictionary</a>
- <span class="icon">
- <img src="../assets/img/icon-nav-dictionary.svg">
- </span>
- <label title="toggle menu" for="settings">
- <span class="downarrow">
- <i class="fa fa-caret-down"></i>
- </span>
- </label>
- <input type="checkbox" class="sub-menu-checkbox" id="settings" />
- <ul class="sub-menu-dropdown">
- <li>
- <a href="">Link</a>
- </li>
- <li>
- <a href="">Link</a>
- </li>
- <li>
- <a href="">Link</a>
- </li>
- </ul>
- </li>
- <!-- <li>
- <a href="#">Favourites</a>
- <span class="icon">
- <i class="fa fa-heart"></i>
- </span>
- </li>
- <li>
- <a href="#">Messages</a>
- <span class="icon">
- <i class="fa fa-envelope"></i>
- </span>
- </li> -->
- </ul>
- </div>
- <ul class="menu-dropdown userProfile">
- <li>
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">User name</div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Settings</a>
- </li>
- <li>
- <a href="#">Projects</a>
- </li>
- <li>
- <a href="#">Log out</a>
- </li>
- </ul>
- </div>
- <!-- <span class="icon">
- <img src="../assets/img/img-userProfile.png">
- </span> -->
- </li>
- </ul>
-
- </nav>
-</div>
-
-<div class="new-wrapper">
- <div class="container-fluid main-container">
- <router-outlet></router-outlet>
- </div>
-</div>
+<router-outlet></router-outlet>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.css'],
})
export class AppComponent {
+
/*
============LICENSE_START==========================================
===================================================================
import {ApiService} from './common/core/services/api.service';
import {HttpClientModule} from '@angular/common/http';
-
-
@NgModule({
declarations: [
AppComponent,
-
-
],
imports: [
BrowserModule,
AppRoutingModule,
NoopAnimationsModule,
MatTabsModule,
- HttpClientModule
+ HttpClientModule,
],
+
providers: [ApiService],
bootstrap: [AppComponent]
})
--- /dev/null
+
+body{
+ background-image: linear-gradient(-45deg, #000 6%, #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;
+}
+.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(/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: 160px;
+ 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{
+ 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;
+ background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
+ border: solid 1px #D0DFF1;
+ color: #1B3E6F;
+}
+.actionsList,
+.componentsList{
+ padding: 0 12px 20px;
+}
+.componentsList{
+ padding-bottom: 0;
+}
+.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(/assets/img/icon-drag.svg) #fff 20px center no-repeat;
+}
+
+/*CANVAS*/
+.editBar{
+ width: 350px;
+ 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;
+}
+.viewBtns .topologySource{
+ background-image: url(/assets/img/icon-topologyView-active.svg);
+}
+.viewBtns .topologyView{
+ background-image: url(/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{
+ 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;
+
+}
\ No newline at end of file
--- /dev/null
+<!--Header-->
+<header>
+ <div class="row m-0">
+ <div class="col pl-0">
+ <p class="logo mb-0"></p>
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb mb-0">
+ <li class="breadcrumb-item">
+ <a href="#">CBA Packages</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="#">Package Name</a>
+ </li>
+ <li class="breadcrumb-item active" aria-current="page">
+ <p class="mb-0">Topology View</p>
+ </li>
+ </ol>
+ </nav>
+ </div>
+ <div class="col pr-0 text-right">
+ <ul class="topology-actions">
+ <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">
+ <i class="fa fa-eye"></i>
+ </a>
+ <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" 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">
+ <i class="fa fa-share-square"></i>
+ </a>
+ </div>
+ </li>
+ <li>
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">Save</div>
+ <ul class="dropdown-content">
+ <li>
+ <a href="">Save</a>
+ </li>
+ <li>
+ <a href="">Save & Deploy</a>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+
+
+ </div>
+ </div>
+</header>
+<ng-sidebar-container class="sidebar-container">
+ <!-- Controller SideBar -->
+ <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'"
+ #sidebarLeft>
+ <div class="row">
+ <div class="col-12 p-0">
+ <form>
+ <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions">
+ </form>
+ </div>
+ <h1 class="col-12">Actions</h1>
+ <div class="col-12 text-center p-0">
+ <div class="btn-group actionBtns" role="group">
+ <button type="button" class="btn">Insert Custom</button>
+ <button type="button" class="btn">Import Action</button>
+ </div>
+ </div>
+ <div class="col-12 actionsList">
+ <b>Select from other packages:</b>
+ <div class="actions-scroll">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck1">
+ <label class="custom-control-label" for="customCheck1">Action name
+ <p class="m-0">Toplogy name</p>
+ </label>
+ </div>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck2">
+ <label class="custom-control-label" for="customCheck2">Action name
+ <p class="m-0">Toplogy name</p>
+ </label>
+ </div>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck3">
+ <label class="custom-control-label" for="customCheck3">Action name
+ <p class="m-0">Toplogy name</p>
+ </label>
+ </div>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck4">
+ <label class="custom-control-label" for="customCheck4">Action name
+ <p class="m-0">Toplogy name</p>
+ </label>
+ </div>
+ </div>
+ <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+ <button type="button" class="btn btn-secondary mr-3">Insert</button>
+ <button type="button" class="btn btn-secondary">Cancel</button>
+ </div>
+ </div>
+ <h1 class="col-12">Functions</h1>
+ <div class="col-12 componentsList">
+ <b>Drag and drop function to Action’s box</b>
+ <ul class="list-group actions-scroll">
+ <li class="list-group-item">
+ <p class="compType-1">component-resource-resolution</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-2">component-netconf-executor</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-3">component-remote-ansible-executor</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-4">dg-generic</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-1">component-resource-resolution</p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </ng-sidebar>
+ <!-- Page content -->
+ <div ng-sidebar-content>
+ <button class="rotate" (click)="_toggleSidebar1()">
+ <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">
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
+ <img src="/assets/img/icon-undoActive.svg">
+ </button>
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
+ <img src="/assets/img/icon-redo.svg">
+ </button>
+ </div>
+ <div class="btn-group mr-2" role="group" aria-label="Second group">
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
+ <img src="/assets/img/icon-zoomOut.svg">
+ </button>
+ <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
+ <img src="/assets/img/icon-zoomIn.svg">
+ </button>
+ </div>
+ <div class="btn-group viewBtns" role="group" aria-label="Third group">
+ <button type="button" class="btn btn-secondary topologySource active">View</button>
+ <button type="button" class="btn btn-secondary topologyView">Source</button>
+ </div>
+ </div>
+ <div class="card actionContainer">
+ <div class="card-header">
+ <span>Action 1</span>
+ </div>
+ <div class="card-body">
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType1.svg" title="">
+ <h2>config-assign</h2>
+ <p>component-resource-resolution</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType2.svg" title="">
+ <h2>execute</h2>
+ <p>component-netconf-executor</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType3.svg" title="">
+ <h2>function 1</h2>
+ <p>dg-generic</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType2.svg" title="">
+ <h2>execute</h2>
+ <p>component-netconf-executor</p>
+ </a>
+ </div>
+ </div>
+ <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+ </div>
+ <!-- Attribute SideBar -->
+ <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'"
+ #sidebarRight>
+ <div class="container-fluid0">
+ <div class="row m-0">
+ <div class="col-2 pr-0">
+ <button (click)="sidebarRight.close()" class="closeBar"></button>
+ </div>
+ <div class="col-10 attributesContainer p-0">
+ <h1>Action Attributes</h1>
+ <div class="scrolll">
+ <div class="row m-0">
+ <div class="col-12">
+ <div class="form-group actionName">
+ <label for="exampleInputEmail1">Action Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ </div>
+ </div>
+ <div class="accordion" id="accordionExample">
+ <div class="card">
+ <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">
+ Steps
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
+
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <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">
+ Inputs
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
+ <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <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">
+ Outputs
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
+ <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-sidebar>
+
+</ng-sidebar-container>
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DesignerComponent } from './designer.component';
+
+describe('DesignerComponent', () => {
+ let component: DesignerComponent;
+ let fixture: ComponentFixture<DesignerComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DesignerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DesignerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'app-designer',
+ templateUrl: './designer.component.html',
+ styleUrls: ['./designer.component.css'],
+ encapsulation: ViewEncapsulation.None
+})
+export class DesignerComponent implements OnInit {
+
+ private controllerSideBar: boolean;
+ private attributesSideBar: boolean;
+ constructor() {
+ this.controllerSideBar = true;
+ this.attributesSideBar = false;
+ }
+ private _toggleSidebar1() {
+ this.controllerSideBar = !this.controllerSideBar;
+ }
+ private _toggleSidebar2() {
+ this.attributesSideBar = !this.attributesSideBar;
+ }
+
+
+ ngOnInit() {
+ }
+}
--- /dev/null
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PackagesRoutingModule} from './packages.routing.module';
+import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
+import { DesignerComponent } from './designer/designer.component';
+import { SidebarModule } from 'ng-sidebar';
+
+
+@NgModule({
+ declarations: [DesignerComponent],
+ imports: [
+ CommonModule,
+ PackagesRoutingModule,
+ NgbPaginationModule,
+ SidebarModule.forRoot(),
+ ],
+ providers: [],
+ bootstrap: []
+})
+export class PackagesModule {
+}
--- /dev/null
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import { DesignerComponent } from './designer/designer.component';
+
+
+const routes: Routes = [
+ { path: 'designer', component: DesignerComponent },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class PackagesRoutingModule {
+}
Code Review / ccsdk / cds.git / commitdiff