From 32a1d4fac56ff29b0e50fa88bdf88047c51bc0be Mon Sep 17 00:00:00 2001 From: Ahmed Abbas Date: Tue, 19 Nov 2019 19:23:04 +0200 Subject: add main module and hrml of designer component in new cds ui Issue-ID: CCSDK-1779 Signed-off-by: Ahmed Abbas Change-Id: I144c151777d5d036b0f40780edf2c5f36c11956b --- cds-ui/client-frankfurt/package.json | 8 +- .../client-frankfurt/src/app/app-routing.module.ts | 8 + cds-ui/client-frankfurt/src/app/app.component.css | 326 ------------ cds-ui/client-frankfurt/src/app/app.component.html | 82 +--- cds-ui/client-frankfurt/src/app/app.component.ts | 2 +- cds-ui/client-frankfurt/src/app/app.module.ts | 8 +- .../packages/designer/designer.component.css | 545 +++++++++++++++++++++ .../packages/designer/designer.component.html | 337 +++++++++++++ .../packages/designer/designer.component.spec.ts | 25 + .../packages/designer/designer.component.ts | 27 + .../feature-modules/packages/packages.module.ts | 21 + .../packages/packages.routing.module.ts | 15 + 12 files changed, 989 insertions(+), 415 deletions(-) create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts diff --git a/cds-ui/client-frankfurt/package.json b/cds-ui/client-frankfurt/package.json index f40350410..c1ba7ffec 100644 --- a/cds-ui/client-frankfurt/package.json +++ b/cds-ui/client-frankfurt/package.json @@ -11,7 +11,7 @@ }, "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", @@ -23,9 +23,12 @@ "@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" @@ -35,11 +38,12 @@ "@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", diff --git a/cds-ui/client-frankfurt/src/app/app-routing.module.ts b/cds-ui/client-frankfurt/src/app/app-routing.module.ts index b42468b9f..e55393b03 100644 --- a/cds-ui/client-frankfurt/src/app/app-routing.module.ts +++ b/cds-ui/client-frankfurt/src/app/app-routing.module.ts @@ -22,6 +22,14 @@ limitations under the License. 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)], diff --git a/cds-ui/client-frankfurt/src/app/app.component.css b/cds-ui/client-frankfurt/src/app/app.component.css index 4a4a5f153..e69de29bb 100644 --- a/cds-ui/client-frankfurt/src/app/app.component.css +++ b/cds-ui/client-frankfurt/src/app/app.component.css @@ -1,326 +0,0 @@ -/* 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 diff --git a/cds-ui/client-frankfurt/src/app/app.component.html b/cds-ui/client-frankfurt/src/app/app.component.html index b89b29573..0680b43f9 100644 --- a/cds-ui/client-frankfurt/src/app/app.component.html +++ b/cds-ui/client-frankfurt/src/app/app.component.html @@ -1,81 +1 @@ -
- - -
- -
-
- -
-
+ diff --git a/cds-ui/client-frankfurt/src/app/app.component.ts b/cds-ui/client-frankfurt/src/app/app.component.ts index 259653aaf..f60f622ce 100644 --- a/cds-ui/client-frankfurt/src/app/app.component.ts +++ b/cds-ui/client-frankfurt/src/app/app.component.ts @@ -24,7 +24,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { diff --git a/cds-ui/client-frankfurt/src/app/app.module.ts b/cds-ui/client-frankfurt/src/app/app.module.ts index 66093b38c..c52da5cb9 100644 --- a/cds-ui/client-frankfurt/src/app/app.module.ts +++ b/cds-ui/client-frankfurt/src/app/app.module.ts @@ -1,3 +1,4 @@ + /* ============LICENSE_START========================================== =================================================================== @@ -30,13 +31,9 @@ import {MatTabsModule} from '@angular/material/tabs'; import {ApiService} from './common/core/services/api.service'; import {HttpClientModule} from '@angular/common/http'; - - @NgModule({ declarations: [ AppComponent, - - ], imports: [ BrowserModule, @@ -45,8 +42,9 @@ import {HttpClientModule} from '@angular/common/http'; AppRoutingModule, NoopAnimationsModule, MatTabsModule, - HttpClientModule + HttpClientModule, ], + providers: [ApiService], bootstrap: [AppComponent] }) diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css new file mode 100644 index 000000000..d41bf5222 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -0,0 +1,545 @@ + +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 diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html new file mode 100644 index 000000000..0d55439dd --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -0,0 +1,337 @@ + +
+
+
+ + +
+
+ + + +
+
+
+ + + +
+
+
+ +
+
+

Actions

+
+
+ + +
+
+
+ Select from other packages: +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+

Functions

+
+ Drag and drop function to Action’s box +
    +
  • +

    component-resource-resolution

    +
    • +
  • +

    component-netconf-executor

    +
    • +
  • +

    component-remote-ansible-executor

    +
    • +
  • +

    dg-generic

    +
    • +
  • +

    component-resource-resolution

    +
    • +
+
+
+ + +
+ + +
+
+ + +
+
+ + + +
+
+ + +
+
+
+
+ Action 1 +
+
+ + +

config-assign

+

component-resource-resolution

+ + + +

execute

+

component-netconf-executor

+ + + +

function 1

+

dg-generic

+ + + +

execute

+

component-netconf-executor

+ +
+
+ +
+ + +
+
+
+ +
+
+

Action Attributes

+
+
+
+
+ + +
+
+
+
+
+
+

+ +

+
+ +
+
+ +
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+

+ +

+
+ +
+
+
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+

+ +

+
+ +
+
+
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts new file mode 100644 index 000000000..3b767cb81 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DesignerComponent } from './designer.component'; + +describe('DesignerComponent', () => { + let component: DesignerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DesignerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DesignerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts new file mode 100644 index 000000000..2d3557cb1 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -0,0 +1,27 @@ +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() { + } +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts new file mode 100644 index 000000000..63b84ebb8 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts @@ -0,0 +1,21 @@ +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 { +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts new file mode 100644 index 000000000..dc4856806 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -0,0 +1,15 @@ +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 { +} -- cgit 1.2.3-korg