From 6ee4d31800a68975294ef11156bea9a595b23adf Mon Sep 17 00:00:00 2001 From: Ahmed Abbas Date: Wed, 20 Nov 2019 11:32:53 +0200 Subject: add pacakges dashboard component to new cds ui Issue-ID: CCSDK-1951 Signed-off-by: Ahmed Abbas Change-Id: I0c320e5f49a50e442068f5af1fd79c41c97bb74d --- .../client-frankfurt/src/app/app-routing.module.ts | 1 + cds-ui/client-frankfurt/src/app/app.component.html | 6 + cds-ui/client-frankfurt/src/app/app.module.ts | 5 + .../src/app/common/constants/app-constants.ts | 5 +- .../src/app/common/core/services/api.service.ts | 110 +- .../app/common/core/services/api.typed.service.ts | 51 + .../src/app/common/core/stores/Store.ts | 22 + .../client-frankfurt/src/app/common/model/page.ts | 21 + .../packages/blueprint.page.mock.ts | 50 + .../packages/model/BluePrint.model.ts | 58 + .../package-list/package-list.component.css | 0 .../package-list/package-list.component.html | 92 ++ .../package-list/package-list.component.spec.ts | 36 + .../package-list/package-list.component.ts | 28 + .../package-pagination.component.css | 0 .../package-pagination.component.html | 4 + .../package-pagination.component.spec.ts | 25 + .../package-pagination.component.ts | 30 + .../packages-dahsboard.component.spec.ts | 44 + .../packages-dashboard.component.css | 0 .../packages-dashboard.component.html | 67 + .../packages-dashboard.component.ts | 36 + .../search-by-tags/search-by-tags.component.css | 0 .../search-by-tags/search-by-tags.component.html | 46 + .../search-by-tags.component.spec.ts | 46 + .../search-by-tags/search-by-tags.component.ts | 94 ++ .../search-by-tags/search-by-tags.service.spec.ts | 12 + .../packages/packages-list.service.ts | 74 + .../feature-modules/packages/packages.module.ts | 16 +- .../packages/packages.routing.module.ts | 5 + .../packages/packages.store.spec.ts | 44 + .../feature-modules/packages/packages.store.ts | 57 + .../shared-modules/header/header.component.css | 12 + .../shared-modules/header/header.component.html | 72 + .../shared-modules/header/header.component.spec.ts | 25 + .../shared-modules/header/header.component.ts | 15 + .../shared-modules/shared-modules.module.ts | 13 + .../client-frankfurt/src/assets/css/designer.css | 0 .../src/assets/css/orangeHelvetica.css | 0 cds-ui/client-frankfurt/src/assets/css/style1.css | 0 cds-ui/client-frankfurt/src/assets/css/style2.css | 3 + .../src/assets/fonts/HelvNeue55_W1G.eot | Bin .../src/assets/fonts/HelvNeue55_W1G.svg | 0 .../src/assets/fonts/HelvNeue55_W1G.ttf | Bin .../src/assets/fonts/HelvNeue55_W1G.woff | Bin .../src/assets/fonts/HelvNeue55_W1G.woff2 | Bin .../src/assets/fonts/HelvNeue75_W1G.eot | Bin .../src/assets/fonts/HelvNeue75_W1G.svg | 0 .../src/assets/fonts/HelvNeue75_W1G.ttf | Bin .../src/assets/fonts/HelvNeue75_W1G.woff | Bin .../src/assets/fonts/HelvNeue75_W1G.woff2 | Bin .../src/assets/fonts/icon-orange.eot | Bin .../src/assets/fonts/icon-orange.svg | 0 .../src/assets/fonts/icon-orange.ttf | Bin .../src/assets/fonts/icon-orange.woff | Bin .../src/assets/fonts/icon-orange.woff2 | Bin .../src/assets/img/icon-add-hover.svg | 12 + .../client-frankfurt/src/assets/img/icon-add.svg | 19 + .../client-frankfurt/src/assets/img/icon-close.svg | 15 + .../src/assets/img/icon-comType1-sm.svg | 28 + .../src/assets/img/icon-comType1.svg | 26 + .../src/assets/img/icon-comType2-sm.svg | 23 + .../src/assets/img/icon-comType2.svg | 21 + .../src/assets/img/icon-comType3-sm.svg | 65 + .../src/assets/img/icon-comType3.svg | 63 + .../src/assets/img/icon-comType4-sm.svg | 23 + .../client-frankfurt/src/assets/img/icon-drag.svg | 32 + .../client-frankfurt/src/assets/img/icon-edit.svg | 21 + .../client-frankfurt/src/assets/img/icon-redo.svg | 19 + .../src/assets/img/icon-search-light.svg | 17 + .../src/assets/img/icon-topologySource.svg | 28 + .../src/assets/img/icon-topologyView-active.svg | 27 + .../src/assets/img/icon-undoActive.svg | 19 + .../src/assets/img/icon-zoomIn.svg | 19 + .../src/assets/img/icon-zoomOut.svg | 19 + .../client-frankfurt/src/assets/img/img-user1.jpeg | Bin 0 -> 25183 bytes .../client-frankfurt/src/assets/img/img-user2.jpg | Bin 0 -> 242904 bytes .../client-frankfurt/src/assets/img/img-user3.jpg | Bin 0 -> 194503 bytes cds-ui/client-frankfurt/src/styles.css | 1672 ++++++++++++++------ 79 files changed, 2774 insertions(+), 619 deletions(-) create mode 100644 cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts create mode 100644 cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts create mode 100644 cds-ui/client-frankfurt/src/app/common/model/page.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts create mode 100644 cds-ui/client-frankfurt/src/assets/css/designer.css mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css create mode 100644 cds-ui/client-frankfurt/src/assets/css/style1.css create mode 100644 cds-ui/client-frankfurt/src/assets/css/style2.css mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2 mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2 mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff mode change 100644 => 100755 cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2 create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-add.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-close.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-drag.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-edit.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-redo.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg create mode 100644 cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg create mode 100644 cds-ui/client-frankfurt/src/assets/img/img-user2.jpg create mode 100644 cds-ui/client-frankfurt/src/assets/img/img-user3.jpg 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 e55393b03..c6e42cb0b 100644 --- a/cds-ui/client-frankfurt/src/app/app-routing.module.ts +++ b/cds-ui/client-frankfurt/src/app/app-routing.module.ts @@ -24,6 +24,7 @@ import {Routes, RouterModule} from '@angular/router'; const routes: Routes = [ {path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'}, + // { path: '', component: MainAppComponent }, { path: '', redirectTo: 'packages', diff --git a/cds-ui/client-frankfurt/src/app/app.component.html b/cds-ui/client-frankfurt/src/app/app.component.html index 0680b43f9..693dba7c3 100644 --- a/cds-ui/client-frankfurt/src/app/app.component.html +++ b/cds-ui/client-frankfurt/src/app/app.component.html @@ -1 +1,7 @@ + diff --git a/cds-ui/client-frankfurt/src/app/app.module.ts b/cds-ui/client-frankfurt/src/app/app.module.ts index c52da5cb9..20b9b4d7b 100644 --- a/cds-ui/client-frankfurt/src/app/app.module.ts +++ b/cds-ui/client-frankfurt/src/app/app.module.ts @@ -30,6 +30,9 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MatTabsModule} from '@angular/material/tabs'; import {ApiService} from './common/core/services/api.service'; import {HttpClientModule} from '@angular/common/http'; +import {PackagesModule} from './modules/feature-modules/packages/packages.module'; +import { SidebarModule } from 'ng-sidebar'; +import {SharedModulesModule} from './modules/shared-modules/shared-modules.module'; @NgModule({ declarations: [ @@ -43,6 +46,8 @@ import {HttpClientModule} from '@angular/common/http'; NoopAnimationsModule, MatTabsModule, HttpClientModule, + PackagesModule, + SharedModulesModule, ], providers: [ApiService], diff --git a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts index 11d0598d9..cfe8061f3 100644 --- a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts +++ b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts @@ -88,13 +88,16 @@ export const GlobalContants = { export const BlueprintURLs = { getAllBlueprints: '/controllerblueprint/all', + getPagedBlueprints: '/controllerblueprint/paged', searchByTag: '/controllerblueprint/searchByTags/', save: '/controllerblueprint/create-blueprint', publish: '/controllerblueprint/publish', enrich: '/controllerblueprint/enrich-blueprint', download: '/controllerblueprint/download-blueprint/', deploy: '/controllerblueprint/deploy-blueprint', - getMetaDate: '/controllerblueprint/meta-data/' + getMetaDate: '/controllerblueprint/meta-data/', + countOfAllBluePrints: '/controllerblueprint/list/count', + getMetaDatePageable: '/controllerblueprint/metadata/paged' }; export const ResourceDictionaryURLs = { diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts index b26558b01..de8aab886 100644 --- a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts +++ b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts @@ -1,4 +1,3 @@ - /* ============LICENSE_START========================================== =================================================================== @@ -22,103 +21,10 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ */ -export const GlobalContants = { - endpoints: {}, - cbawizard: { - stepsRequired: - { - stepCount: 4, - steps: [{ - name: 'CBA Metadata', - componentURL: '/controllerBlueprint/selectTemplate', - label: 'CBA Metadata', - link: '/blueprint/selectTemplate', - index: 0, - component: 'SelectTemplateComponent' - }, - { - name: 'Controller Blueprint Designer', - componentURL: '/controllerBlueprint/modifyTemplate', - label: 'Controller Blueprint Designer', - link: '/blueprint/modifyTemplate', - index: 1, - component: 'ModifyTemplateComponent' - }, - { - name: 'Test', - componentURL: '/controllerBlueprint/testTemplate', - label: 'Test', - link: '/blueprint/testTemplate', - index: 2, - component: 'TestTemplateComponent' - }, - { - name: 'Deploy', - componentURL: '/controllerBlueprint/deployTemplate', - label: 'Deploy', - link: '/blueprint/deployTemplate', - index: 3, - component: 'DeployTemplateComponent' - }] - } - }, - datadictionary: { - stepsRequired: - { - stepCount: 3, - steps: [{ - name: 'Resource Creation', componentURL: '/dataDictionary/selectTemplate', - label: 'Resource Creation', - component: 'ResourceCreationComponent' - - }, - { - name: 'Edit/Validate', componentURL: '/dataDictionary/modifyTemplate', - label: 'Edit/Validate', - component: 'ResourceEditComponent' - }, - { - name: 'Save', componentURL: '/dataDictionary/saveTemplate', - label: 'Save Resource', - component: 'SaveResourceComponent' - }] - } - - } -}; - -export const BlueprintURLs = { - getAllBlueprints: '/controllerblueprint/all', - searchByTag: '/controllerblueprint/searchByTags/', - save: '/controllerblueprint/create-blueprint', - publish: '/controllerblueprint/publish', - enrich: '/controllerblueprint/enrich-blueprint', - download: '/controllerblueprint/download-blueprint/', - deploy: '/controllerblueprint/deploy-blueprint', - getMetaDate: '/controllerblueprint/meta-data/' -}; - -export const ResourceDictionaryURLs = { - saveResourceDictionary: '/resourcedictionary/save', - searchResourceDictionaryByTags: '/resourcedictionary/search', - searchResourceDictionaryByName: '', - getSources: '/resourcedictionary/source-mapping', - getModelType: '/resourcedictionary/model-type', - getDataType: '/resourcedictionary/model-type/by-definition/data_type' -}; - -export const ControllerCatalogURLs = { - searchControllerCatalogByTags: '/controllercatalog/search', - saveControllerCatalog: '/controllercatalog/save', - getDefinition: '/controllercatalog/model-type/by-definition', - getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom' -}; - - import {Injectable} from '@angular/core'; -import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse} from '@angular/common/http'; -import {Observable} from 'rxjs'; +import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams} from '@angular/common/http'; +import {Observable, of} from 'rxjs'; @Injectable() export class ApiService { @@ -126,8 +32,16 @@ export class ApiService { constructor(private httpClient: HttpClient) { } - get(url: string, params?: any): Observable { - return this.httpClient.get(url, params); + get(url: string, params?: {}): Observable { + console.log('params', params); + let httpParams = new HttpParams(); + for (const key in params) { + if (params.hasOwnProperty(key)) { + httpParams = httpParams.append(key, params[key]); + } + } + const options = {params: httpParams}; + return this.httpClient.get(url, options); } post(url: string, body: any | null, options?: any): Observable { diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts new file mode 100644 index 000000000..2f3778c1a --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts @@ -0,0 +1,51 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 IBM Intellectual Property. All rights reserved. + +Modifications Copyright (C) 2019 Orange + +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; + +@Injectable() +export class ApiService { + + constructor(private httpClient: HttpClient) { + } + + get(url: string, params?: {}): Observable { + console.log('params', params); + let httpParams = new HttpParams(); + for (const key in params) { + if (params.hasOwnProperty(key)) { + httpParams = httpParams.append(key, params[key]); + } + } + const options = {params: httpParams}; + return this.httpClient.get(url, options); + } + + post(url: string, body: any | null, options?: any): Observable { + + return this.httpClient.post(url, body, options); + } +} diff --git a/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts b/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts new file mode 100644 index 000000000..1d5b0afc1 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts @@ -0,0 +1,22 @@ +import {Observable, BehaviorSubject} from 'rxjs'; +import { Injectable } from '@angular/core'; + +export class Store { + state$: Observable; + private subject: BehaviorSubject; + + protected constructor(initialState: T) { + this.subject = new BehaviorSubject(initialState); + this.state$ = this.subject.asObservable(); + } + + get state(): T { + return this.subject.getValue(); + } + + protected setState(nextState: T): void { + console.log('setting state', this.subject); + this.subject.next(nextState); + } + +} diff --git a/cds-ui/client-frankfurt/src/app/common/model/page.ts b/cds-ui/client-frankfurt/src/app/common/model/page.ts new file mode 100644 index 000000000..7c3a0c4f3 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/common/model/page.ts @@ -0,0 +1,21 @@ +export class Page { + content: T[]; + pageable: { + sort: { + unsorted: boolean, + sorted: boolean, + empty: boolean + }; + + offset: number, + pageSize: number, + pageNumber: number, + paged: boolean, + unpaged: boolean, + }; + totalPages: number; + totalElements: number; + last: boolean; + first: boolean; + empty: boolean; +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts new file mode 100644 index 000000000..9e0ce71d2 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts @@ -0,0 +1,50 @@ +import { BluePrintPage } from './model/BluePrint.model'; +export function getBluePrintPageMock(): BluePrintPage { + return { + content: [ + { + id: 'bc0dabea-3112-4202-a4b9-6a525bcc19a9', + artifactUUId: null, + artifactType: 'SDNC_MODEL', + artifactVersion: '1.0.0', + artifactDescription: 'Controller Blueprint for vLB_CDS123:1.0.0', + internalVersion: null, + createdDate: '2019-10-30T13:55:16.000Z', + artifactName: 'vLB_CDS123', + published: 'N', + updatedBy: 'Abdelmuhaimen Seaudi', + tags: 'test, vDNS-CDS, SCALE-OUT, MARCO' + }, + { + id: 'a741913f-2b1b-4eb8-94b3-8c6b08928f0a', + artifactUUId: null, + artifactType: 'SDNC_MODEL', + artifactVersion: '1.0.0', + artifactDescription: 'Controller Blueprint for vLB_CDS12312312:1.0.0', + internalVersion: null, + createdDate: '2019-10-30T14:58:04.000Z', + artifactName: 'vLB_CDS12312312', + published: 'N', + updatedBy: 'Abdelmuhaimen Seaudi', + tags: 'test, vDNS-CDS, SCALE-OUT, MARCO' + } + ], + pageable: { + sort: { + sorted: true, + unsorted: false, + empty: false + }, + offset: 0, + pageSize: 2, + pageNumber: 0, + paged: true, + unpaged: false + }, + last: false, + totalElements: 4, + totalPages: 2, + first: true, + empty: false + }; +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts new file mode 100644 index 000000000..46dab88f8 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts @@ -0,0 +1,58 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import { Page } from 'src/app/common/model/page'; + +export class BlueprintModel { + + + constructor(id: string, artifactUUId: null, artifactType: string, + artifactVersion: string, artifactDescription: string, + internalVersion: null, createdDate: string, artifactName: string, + published: string, updatedBy: string, tags: string) { + this.id = id; + this.artifactUUId = artifactUUId; + this.artifactType = artifactType; + this.artifactVersion = artifactVersion; + this.artifactDescription = artifactDescription; + this.internalVersion = internalVersion; + this.createdDate = createdDate; + this.artifactName = artifactName; + this.published = published; + this.updatedBy = updatedBy; + this.tags = tags; + } + + id: string; + artifactUUId?: null; + artifactType: string; + artifactVersion: string; + artifactDescription: string; + internalVersion?: null; + createdDate: string; + artifactName: string; + published: string; + updatedBy: string; + tags: string; +} + +export class BluePrintPage extends Page { +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html new file mode 100644 index 000000000..f67b3ca6a --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -0,0 +1,92 @@ +
+ +
+
+ +
+
+
+ Create Package + +
+
+ Import Package + +
+
+
+
+
+ + +
+
+
+
+
+
{{bluePrint.artifactName}}
+

Last modified {{bluePrint.createdDate}} by {{bluePrint.updatedBy}}

+ +
+
+ +
+ +
+ +
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+ + + +
+
+
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts new file mode 100644 index 000000000..f45f25996 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PackageListComponent } from './package-list.component'; +import { PackagesStore } from '../../packages.store'; +import { getBluePrintPageMock } from '../../blueprint.page.mock'; +import { of } from 'rxjs'; + +describe('PackageListComponent', () => { + let component: PackageListComponent; + let fixture: ComponentFixture; + let store: Partial; + + beforeEach(async(() => { + + store = { state$: of(getBluePrintPageMock()) }; + + TestBed.configureTestingModule({ + declarations: [ PackageListComponent ], + providers: [{ provide: PackagesStore, useValue: store }] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PackageListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + + // TODO create another test with store in mind +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts new file mode 100644 index 000000000..4ef0faf45 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { BlueprintModel } from '../../model/BluePrint.model'; +import { PackagesStore } from '../../packages.store'; + +@Component({ + selector: 'app-packages-list', + templateUrl: './package-list.component.html', + styleUrls: ['./package-list.component.css'] +}) +export class PackageListComponent implements OnInit { + + viewedPackages: BlueprintModel[] = []; + numberOfPackages: number; + + + constructor(private packagesStore: PackagesStore) { + console.log('PackageListComponent'); + this.packagesStore.state$.subscribe(page => { + console.log(page); + this.viewedPackages = page.content; + }); + } + + ngOnInit() { + // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize); + } + +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html new file mode 100644 index 000000000..cdc0aaa1f --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html @@ -0,0 +1,4 @@ +
+ +
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts new file mode 100644 index 000000000..ce7f99f62 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PackagePaginationComponent } from './package-pagination.component'; + +describe('PackagePaginationComponent', () => { + let component: PackagePaginationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PackagePaginationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PackagePaginationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts new file mode 100644 index 000000000..49a88c6c2 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { PackagesStore } from '../../packages.store'; + +@Component({ + selector: 'app-package-pagination', + templateUrl: './package-pagination.component.html', + styleUrls: ['./package-pagination.component.css'], +}) +export class PackagePaginationComponent implements OnInit { + pageNumber = 0; + totalCount = 4; + pageSize: number; + + constructor(private packagesStore: PackagesStore) { + this.pageSize = packagesStore.pageSize; + } + + ngOnInit() { + } + + public getPageFromService(page) { + console.log('getPageFromService', page); + if (isNaN(page)) { + page = 1; + console.log('page change to first...', page); + } + this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize); + } + +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts new file mode 100644 index 000000000..fe156b6cb --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts @@ -0,0 +1,44 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { PackagesDashboardComponent } from './packages-dashboard.component'; + +describe('PackagesDashboardComponent', () => { + let component: PackagesDashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + + + TestBed.configureTestingModule({ + declarations: [PackagesDashboardComponent ], + }) + .compileComponents(); + + fixture = TestBed.createComponent(PackagesDashboardComponent); + component = fixture.componentInstance; + })); + + fit('should create', () => { + fixture.detectChanges(); + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html new file mode 100644 index 000000000..09a343546 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -0,0 +1,67 @@ + + +
+
+ + +
+
+

CBA Packages + (20 packages) +

+
+
+
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts new file mode 100644 index 000000000..0820d9356 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts @@ -0,0 +1,36 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-packages-dashboard', + templateUrl: './packages-dashboard.component.html', + styleUrls: ['./packages-dashboard.component.css'] +}) +export class PackagesDashboardComponent implements OnInit { + + constructor() { + } + + ngOnInit() { + console.log('PackagesDashboardComponent'); + } +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html new file mode 100644 index 000000000..ea6c742a0 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html @@ -0,0 +1,46 @@ + +
+
+
+
+ + +
+
+
+
+ +
ALL PACKAGES TAGS
+
    +
  • +
    + +
    +
    • +
  • +
    + + +
    + +
    • + +
+
+
+
+
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts new file mode 100644 index 000000000..aaacfb9e8 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts @@ -0,0 +1,46 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchByTagsComponent } from './search-by-tags.component'; + +describe('SearchByTagsComponent', () => { + let component: SearchByTagsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchByTagsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchByTagsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts new file mode 100644 index 000000000..b5cc52fc0 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts @@ -0,0 +1,94 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; +import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model'; + +@Component({ + selector: 'app-search-by-tags', + templateUrl: './search-by-tags.component.html', + styleUrls: ['./search-by-tags.component.css'] +}) + +export class SearchByTagsComponent implements OnInit { + + page: BluePrintPage; + tags: string[] = []; + viewedTags: string[] = []; + searchTag = ''; + viewedPackages: BlueprintModel[] = []; + private checkBoxTages = ''; + private searchPackage = ''; + + constructor(private packagesStore: PackagesStore, + ) { + } + + ngOnInit() { + + } + + reloadChanges(event: any) { + this.searchTag = event.target.value; + this.filterItem(this.searchTag); + } + + private assignTags() { + this.viewedTags = this.tags; + } + + private filterItem(value) { + if (!value) { + this.assignTags(); + } + this.viewedTags = this.tags.filter( + item => item.toLowerCase().indexOf(value.toLowerCase()) > -1 + ); + } + + reloadPackages(event: any) { + + if (!event.target.checked) { + this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '') + .replace(event.target.id, ''); + } else { + this.checkBoxTages += event.target.id.trim() + ','; + } + console.log(this.checkBoxTages); + if (!this.checkBoxTages.includes(',')) { + return; + } + this.viewedPackages = []; + this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); + } + + searchPackages(event: any) { + this.searchPackage = event.target.value; + this.searchPackage = this.searchPackage.trim(); + if (this.searchPackage) { + this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2); + + } else { + this.packagesStore.getPagedPackages(0, 2); + } + } +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts new file mode 100644 index 000000000..116441bc2 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts @@ -0,0 +1,12 @@ +import {TestBed} from '@angular/core/testing'; + +import {SearchByTagsService} from './search-by-tags.service'; + +describe('SearchByTagsService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: SearchByTagsService = TestBed.get(SearchByTagsService); + expect(service).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts new file mode 100644 index 000000000..deaa4d957 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts @@ -0,0 +1,74 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {ApiService} from '../../../common/core/services/api.typed.service'; +import {BlueprintURLs} from '../../../common/constants/app-constants'; +import {BlueprintModel, BluePrintPage} from './model/BluePrint.model'; + + +@Injectable({ + providedIn: 'root' +}) +export class PackagesListService { + packages: BlueprintModel[] = []; + originalPackage: BlueprintModel[] = []; + private bluePrintModel: BlueprintModel; + private numberOfPackages: number; + + constructor(private api: ApiService) { + } + + getPagedPackages(pageNumber: number, pageSize: number): Observable { + return this.api.get(BlueprintURLs.getPagedBlueprints, { + offset: pageNumber, + limit: pageSize, + sort: 'DATE' + }); + } + + searchByTags(keyword: string): Observable { + return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword); + } + + + // getPackageNumber(): number { + // this.getCountOfAllPackages(this.api.get(BlueprintURLs.countOfAllBluePrints)); + // return this.numberOfPackages; + + // } + + getCountOfAllPackages(observable: Observable) { + observable.subscribe(data => { + this.numberOfPackages = data; + console.log(data); + }); + } + + getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) { + return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, { + offset: pageNumber, + limit: pageSize, + sort: 'DATE' + }); + } +} 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 index 63b84ebb8..0bcd0fa99 100644 --- 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 @@ -1,20 +1,32 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; +import {ApiService} from '../../../common/core/services/api.typed.service'; import {PackagesRoutingModule} from './packages.routing.module'; import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap'; +import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; +import {SearchByTagsComponent} from './packages-dashboard/search-by-tags/search-by-tags.component'; +import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component'; +import { PackageListComponent } from './packages-dashboard/package-list/package-list.component'; import { DesignerComponent } from './designer/designer.component'; import { SidebarModule } from 'ng-sidebar'; +import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component'; @NgModule({ - declarations: [DesignerComponent], + declarations: [PackagesDashboardComponent, + SearchByTagsComponent, + PackageListComponent, + DesignerComponent, + PackagePaginationComponent + ], imports: [ CommonModule, PackagesRoutingModule, NgbPaginationModule, + SharedModulesModule, SidebarModule.forRoot(), ], - providers: [], + providers: [ApiService], 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 index dc4856806..ad9f36979 100644 --- 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 @@ -1,9 +1,14 @@ import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; +import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; import { DesignerComponent } from './designer/designer.component'; const routes: Routes = [ + { + path: '', + component: PackagesDashboardComponent + }, { path: 'designer', component: DesignerComponent }, ]; diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts new file mode 100644 index 000000000..b091ed90e --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts @@ -0,0 +1,44 @@ +import { TestBed } from '@angular/core/testing'; +import { PackagesStore } from './packages.store'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { PackagesListService } from './packages-list.service'; +import { of } from 'rxjs'; +import { BluePrintPage } from './model/BluePrint.model'; +import { getBluePrintPageMock } from './blueprint.page.mock'; + +describe('PackagesStore', () => { + let store: PackagesStore; + + const MOCK_BLUEPRINTS_PAGE: BluePrintPage = getBluePrintPageMock(); + + let httpMock: HttpTestingController; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule + ], + providers: [ + PackagesStore, + PackagesListService + ] + }); + httpMock = TestBed.get(HttpTestingController); + + }); + + it('should correctly get page of packages', () => { + const packagesServiceSpy = jasmine.createSpyObj('PackagesListService', ['getPagedPackages']); + + // set the value to return when the `getPagedPackages` spy is called. + packagesServiceSpy.getPagedPackages.and.returnValue(of([MOCK_BLUEPRINTS_PAGE])); + store = new PackagesStore(packagesServiceSpy); + + store.getPagedPackages(0, 2); + store.state$.subscribe(page => { + expect(store.state).toEqual(MOCK_BLUEPRINTS_PAGE); + }); + + }); +}); + diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts new file mode 100644 index 000000000..799946dbc --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts @@ -0,0 +1,57 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {Injectable} from '@angular/core'; +import {BluePrintPage} from './model/BluePrint.model'; +import {Store} from '../../../common/core/stores/Store'; +import {PackagesListService} from './packages-list.service'; + + +@Injectable({ + providedIn: 'root' +}) +export class PackagesStore extends Store { + private bluePrintModels: BluePrintPage; + + // TDOD fixed for now as there is no requirement to change it from UI + public pageSize = 2; + + constructor(private packagesServiceList: PackagesListService) { + super(new BluePrintPage()); + } + + getPagedPackages(pageNumber: number, pageSize: number) { + this.packagesServiceList.getPagedPackages(pageNumber, pageSize) + .subscribe((pages: BluePrintPage[]) => { + this.setState(pages[0]); + }); + } + + getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) { + this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize) + .subscribe((pages: BluePrintPage[]) => { + this.setState(pages[0]); + }); + + } + + +} diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css new file mode 100644 index 000000000..240f9dfae --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html new file mode 100644 index 000000000..541b38d1a --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html @@ -0,0 +1,72 @@ +
+ + +
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts new file mode 100644 index 000000000..2d0479d7d --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts new file mode 100644 index 000000000..3ee4d0f65 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.css'] +}) +export class HeaderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts new file mode 100644 index 000000000..6b6d39689 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HeaderComponent } from './header/header.component'; + + + +@NgModule({ + declarations: [HeaderComponent], + imports: [ + CommonModule + ], exports : [HeaderComponent] +}) +export class SharedModulesModule { } diff --git a/cds-ui/client-frankfurt/src/assets/css/designer.css b/cds-ui/client-frankfurt/src/assets/css/designer.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css b/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/css/style1.css b/cds-ui/client-frankfurt/src/assets/css/style1.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/client-frankfurt/src/assets/css/style2.css b/cds-ui/client-frankfurt/src/assets/css/style2.css new file mode 100644 index 000000000..df65e6753 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/css/style2.css @@ -0,0 +1,3 @@ +body { + background: black +} \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2 old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2 old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2 old mode 100644 new mode 100755 diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg b/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg new file mode 100644 index 000000000..66a8e1b88 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg @@ -0,0 +1,12 @@ + + + + icon-add-hover + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-add.svg b/cds-ui/client-frankfurt/src/assets/img/icon-add.svg new file mode 100644 index 000000000..13020ba0f --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-add.svg @@ -0,0 +1,19 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-close.svg b/cds-ui/client-frankfurt/src/assets/img/icon-close.svg new file mode 100644 index 000000000..bdd51b26f --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-close.svg @@ -0,0 +1,15 @@ + + + + Path + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg new file mode 100644 index 000000000..d0dd6aed9 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg @@ -0,0 +1,28 @@ + + + + browser + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg new file mode 100644 index 000000000..aab6e1ed1 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg @@ -0,0 +1,26 @@ + + + + browser + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg new file mode 100644 index 000000000..b28bd927a --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg @@ -0,0 +1,23 @@ + + + + database0 + Created with Sketch. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg new file mode 100644 index 000000000..e1f75962e --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg @@ -0,0 +1,21 @@ + + + + database0 + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg new file mode 100644 index 000000000..f823d8c19 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg @@ -0,0 +1,65 @@ + + + + server + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg new file mode 100644 index 000000000..1d43c82da --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg @@ -0,0 +1,63 @@ + + + + server + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg new file mode 100644 index 000000000..18bb8f952 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg @@ -0,0 +1,23 @@ + + + + language + Created with Sketch. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg b/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg new file mode 100644 index 000000000..844043d1e --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg @@ -0,0 +1,32 @@ + + + + drag menu + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg b/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg new file mode 100644 index 000000000..d4f10aae6 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg @@ -0,0 +1,21 @@ + + + + edit + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg b/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg new file mode 100644 index 000000000..e48e59537 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg @@ -0,0 +1,19 @@ + + + + redo + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg b/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg new file mode 100644 index 000000000..e6bea0cc9 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg @@ -0,0 +1,17 @@ + + + + search + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg b/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg new file mode 100644 index 000000000..3d53d447d --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg @@ -0,0 +1,28 @@ + + + + source-page + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg b/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg new file mode 100644 index 000000000..dad285835 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg @@ -0,0 +1,27 @@ + + + + sketch + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg b/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg new file mode 100644 index 000000000..2ae0cb6b3 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg @@ -0,0 +1,19 @@ + + + + undo + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg b/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg new file mode 100644 index 000000000..857787634 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg @@ -0,0 +1,19 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg b/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg new file mode 100644 index 000000000..5449f63f4 --- /dev/null +++ b/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg @@ -0,0 +1,19 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg b/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg new file mode 100644 index 000000000..8b9f98b03 Binary files /dev/null and b/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg differ diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg b/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg new file mode 100644 index 000000000..d107129c4 Binary files /dev/null and b/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg differ diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg b/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg new file mode 100644 index 000000000..23e305930 Binary files /dev/null and b/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg differ diff --git a/cds-ui/client-frankfurt/src/styles.css b/cds-ui/client-frankfurt/src/styles.css index 0a88e5d79..850f6824a 100644 --- a/cds-ui/client-frankfurt/src/styles.css +++ b/cds-ui/client-frankfurt/src/styles.css @@ -3,6 +3,8 @@ html, body{ } body{ background: #FAFAFA !important; + /* background-image: linear-gradient(-45deg, #000 10%, #fff 0); + background-size: 6px 6px; */ margin: 0; font-family: 'HelvNeueOrange', 'Helvetica Neue', sans-serif !important; color: #1B3E6F !important; @@ -10,7 +12,6 @@ body{ *:focus{ outline: none; } - /*Bootstrap*/ .custom-control-label::before{ border: solid 1px #1B3E6F !important; @@ -19,350 +20,246 @@ body{ .custom-control-input:checked ~ .custom-control-label::before{ background: #1B3E6F !important; } - + /*Components*/ -/**Tab Nav**/ -.nav-tabs{ - border-bottom-color: #ECEDF2 !important; +/* Menu Styles */ +.primary-nav{ + /* left: 0; */ + position: fixed; + z-index: 999; } -.nav-link{ - padding: 15px 20px 15px 0 !important; - text-transform: uppercase !important; - font-size: 12px; - font-weight: bold; - color: #C3CDDB !important; - border: none !important; +.menu{ + position: relative; } -.nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover{ - border: 0 !important; +.menu ul{ + margin: 0; + padding: 0; + list-style: none; } -.nav-tabs .nav-link:hover{ - color: #1B3E6F !important; +.open-panel{ + border: none; + background-color:#fff; + padding: 0; } -.nav-tabs .nav-link.active{ - color: #1B3E6F !important; - background: transparent !important; - border: 0 !important; - border-bottom: solid 2px #1B3E6F !important; +.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; } -.nav-tabs .nav-link::before{ - content: "|"; - padding-right: 20px !important; - color: #C3CDDB; - font-weight: normal; +.primary-nav .menu li{ + position: relative; } -.nav-tabs .nav-link:first-child::before{ - content: none; +.menu .icon{ + position: absolute; + top: 12px; + right: 10px; + pointer-events: none; + width: 30px; + height: 30px; + color: #fff; + text-align: center; } -.nav-tabs .nav-link:first-child{ - padding-left: 20px !important; +.menu .icon .fa{ +vertical-align: middle; } -/**Sliding Search Input**/ -.searchBox{ - position: absolute; - top: 0%; - right: 0%; - transform: translate(0%,-0%); - height: 40px; +.menu, +.menu a, +.menu a:visited{ + color: #fff; + text-decoration: none!important; + position: relative; } -.searchButton{ - float: right; - margin-top: 14px; - padding-left: 0 !important; - padding-right: 24px !important; - width: 60px; - height: 24px; - background: url(../src/assets/img/icon-search.svg) center center no-repeat; - background-size: 28%; - border: 0 !important; - border-right: solid 1px #1B3E6F !important; - display: flex; - justify-content: center; - align-items: center; - transition: 0.4s; +.menu a{ + display: block; + white-space: nowrap; + padding: 10px 1em; + font-size: 12px; + font-weight: bold; + height: 52px; + line-height: 30px; } -.searchBox:hover > .searchInput{ - width: 240px; - border-bottom: solid 1px #C3CDDB; +.menu a:hover{ + color: #fff; } -.searchBox:hover > .searchButton{ - color: #1B3E6F; +.menu-dropdown li .icon{ + padding: 2px 6px; + color: #fff; } -.searchInput{ - border: none; - background: none; - outline: none; - float: left; - padding: 0; - color: #1B3E6F; - font-size: 14px; - transition: 0.4s; - line-height: 40px; - width: 0px; +.menu-dropdown li.active .icon{ + color: #fff; + background: #265699; + border-radius: 50%; } -.searchInput::placeholder{ - color: #BABBC3; +.menu-dropdown li:hover{ + background: #172B4D; } -/**Drop Down Menu**/ -.dropdown{ - position: relative; - display: inline-block; - text-align: left; - width: 132px; - z-index: 200; +.menu label{ + margin-bottom: 0; + display: block; } -.dropdown-text{ +.menu label:hover{ cursor: pointer; - position: relative; - text-indent: 10px; - line-height: 32px; - background-color: #eee; - border: 1px solid #ccc; - border-radius: 3px; - box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); - width: 100%; } -.dropdown-text:after{ +.menu input[type="checkbox"]{ + display: none; +} +input#menu[type="checkbox"]{ + display: none; +} +.sub-menu-dropdown{ + display: none; +} +.new-wrapper{ position: absolute; - right: 6px; - top: 15px; - content: ''; - width: 0px; - height: 0px; - border-style: solid; - border-width: 5px 4px 0 4px; - border-color: #555 transparent transparent transparent; + left: 50px; + width: calc(100% - 50px); + transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } -.dropdown-toggle{ - font-size: 0; - z-index: 1; - cursor: pointer; +#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); + border-top: solid 2px #1B3E6F; +} +.openNav .new-wrapper{ position: absolute; - top: 0; - border: none; - padding: 0; - margin: 0 0 0 1px; + transform: translate3d(200px, 0, 0); + width: calc(100% - 250px); + transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); +} +.downarrow{ background: transparent; - text-indent: -10px; - height: 34px; - width: 100%; + position: absolute; + right: 50px; + top: 12px; + color: #fff; + width: 24px; + height: 24px; + text-align: center; + display: block; } -.dropdown-toggle:focus{ - outline: 0; +.downarrow:hover{ + color: #fff; } -.dropdown-content{ +.menu{ position: absolute; - top: 32px; - width: 140px; - margin: 0; - padding: 0; - opacity: 0; - visibility:hidden; - -webkit-transition: all .25s ease; - -moz-transition: all .25s ease; - -ms-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; - list-style-type: none; - border-radius: 3px; - text-indent: 10px; - line-height: 32px; - background-color: #eee; - border: 1px solid #ccc; -} -.dropdown-content a{ 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; } -.dropdown-content a:hover{ - background: #e8e8e8; +.menu-dropdown{ + top: 0; + overflow-y: auto; } -.dropdown-toggle:hover ~ .dropdown-text, -.dropdown-toggle:focus ~ .dropdown-text{ - background-color: #e8e8e8; +.overflow-container{ + position: relative; + height: calc(100vh - 60px)!important; + overflow-y: auto; + border-top: 60px solid #fff; + z-index: -1; + display:block; } -.dropdown-toggle:focus ~ .dropdown-text{ - box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); - z-index: 2; + +.menu .logotype{ + position: absolute !important; + top: 16px; + left: 55px; + display: block; } -.dropdown-toggle:focus ~ .dropdown-text:after{ - border-width: 0 4px 5px 4px; - border-color: transparent transparent #555 transparent; +/* .sub-menu-dropdown{ +background-color: #333; +} */ +.menu:hover{ + position: absolute; + left: 0; + top: 0; } -.dropdown-content:hover, -.dropdown-toggle:focus ~ .dropdown-content{ - opacity: 1; - visibility:visible; - top: 42px; +.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); } -/**Card**/ -/* Hover Shadow */ -@keyframes hover { +@-webkit-keyframes grow{ + 0% { + display: none; + opacity: 0; + } 50% { - transform: translateY(-3px); + display: block; + opacity: 0.5; } 100% { - transform: translateY(-6px); + opacity: 1; } } -@keyframes card { +@keyframes grow{ + 0% { - transform: translateY(6px); - opacity: .3; + display: none; + opacity: 0; } 50% { - transform: translateY(3px); - opacity: .8; + display: block; + opacity: 0.5; } 100% { - transform: translateY(6px); - opacity: .3; - } -} -.card { - /* display: inline-block; - position: relative; - transition-duration: 0.2s; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); */ - margin-bottom: 25px !important; - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} -/* .card:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: 100%; - left: 5%; - height: 10px; - width: 90%; - opacity: 0; - background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%); - transition-duration: 0.2s; - transition-property: transform opacity; -} */ -/* .card:hover { - transform: translateY(-3px); - animation-name: hover; - animation-duration: 1s; - animation-delay: 0.2s; - animation-timing-function: linear; - animation-iteration-count: 1; - animation-direction: alternate; -} -.card:hover:before { - opacity: .4; - transform: translateY(3px); - animation-name: card; - animation-duration: 1s; - animation-delay: .2s; - animation-timing-function: linear; - animation-iteration-count: 1; - animation-direction: alternate; -} */ -.card-body{ - padding: 20px !important; + opacity: 1 + } } - -/*Main Container*/ -.main-container{ - padding: 0 !important; -} -/*Page Title*/ -.page-title{ - padding: 21px 30px; - background:#fff; - border-left: solid 1px #FAFAFA; - margin-bottom: 30px; - -webkit-box-shadow: 0 4px 10px 0 #eef0f5; - box-shadow: 0 4px 10px 0 #eef0f5; - position: relative; - z-index: 8; -} -.page-title h2{ - font-size: 16px; - font-weight: bold; -} -.page-title h2 span{ - color: #BABBC3; - font-size: 14px; -} -/*Content*/ -.body-container{ - padding: 0 30px !important; -} -.search-filter-col{ - padding-right: 0 !important; - border-bottom: solid 1px #ECEDF2 !important; -} -/**Packages Filter**/ -.packagesFilter{ - margin-top: 12px; +/*User Profile*/ +.userProfile .dropdown{ + width: 100%; } -.packagesFilter .dropdown-toggle{ - height: 36px !important; +.userProfile .dropdown:hover{ + background: #172B4D !important; } -.packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ - border-color: transparent transparent #1B3E6F transparent; -} -.packagesFilter .dropdown-text{ +.userProfile .dropdown-text{ background: transparent; border: 0; box-shadow: none; - text-indent: 14px; - line-height: 30px; - font-size: 12px; -} -.packagesFilter .dropdown-text::after{ - right: 12px; - border-color: #1B3E6F transparent transparent transparent; -} -.packagesFilter .dropdown-toggle:hover ~ .dropdown-text, -.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ - background-color: transparent; - box-shadow: none; - border-radius: 0; -} -.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ - background: #fff; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); -} -.packagesFilter .dropdown-text::after{ - top: 12px; -} -.packagesFilter .dropdown-content{ - padding: 6px 0 15px; - background: #fff; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - border: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; -} -.packagesFilter .dropdown-content:hover, -.packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ - top: 30px; -} -.packagesFilter .form-control{ - padding: 12px 9px 12px 38px !important; - border: 0 !important; - border-bottom: solid 1px #D7E7F9 !important; - background: url(../src/assets/img/icon-search.svg) 15px center no-repeat; - background-size: 4%; - border-radius: 0 !important; - color: #1B3E6F; font-size: 13px; + line-height: 40px; } -.packagesFilter .form-control::placeholder{ - color: #BABBC3; -} -.packagesFilter .form-control:focus{ +/* .userProfile .dropdown-toggle{ +height: 40px; +} */ +.userProfile .dropdown-toggle:hover ~ .dropdown-text, +.userProfile .dropdown-toggle:focus ~ .dropdown-text{ + background: transparent !important; + border-radius: 0 !important; box-shadow: none !important; - border-bottom: solid 1px #1B3E6F !important; } + +.userProfile .dropdown-text::after { + right: 14px; + top: 8px; + width: 24px; + height: 24px; + background: url(/assets/img/img-userProfile.png) center center no-repeat; + } .packagesFilter .custom-checkbox{ margin-left: 8px; } @@ -509,270 +406,1009 @@ body{ right: 0; width: 120px; padding: 6px 0; + border: 0; - text-indent: 0; - border-radius: 2px; - border-top-left-radius: 0; - border-top-right-radius: 0; - background: #1B3E6F; -} -.packages-card .dropdown-content a{ - padding-left: 45px; - color: #fff; - font-size: 13px; - background-position: 20px center; - background-size: 10%; - background-repeat: no-repeat; -} -.packages-card .dropdown-content a:hover{ - background-color: #172B4D; - text-decoration: unset; -} -.packages-card .action-clone a, -.packages-card .action-clone a:hover{ - background-image: url(../src/assets/img/icon-clone-sm.svg); -} -.packages-card .action-archive a, -.packages-card .action-archive a:hover{ - background-image: url(../src/assets/img/icon-archive-sm.svg); -} -.packages-card .action-delete a, -.packages-card .action-delete a:hover{ - background-image: url(../src/assets/img/icon-delete-sm.svg); -} -.packages-card .dropdown-content:hover, -.packages-card .dropdown-toggle:focus ~ .dropdown-content{ - top: 24px; -} -.packages-card .dropdown-toggle:hover ~ .dropdown-text{ - background: transparent; - opacity: 1; -} -.packages-card .dropdown-toggle:focus ~ .dropdown-text{ - opacity: 1; - background: #1B3E6F; - box-shadow: none; -} -/***Contributers***/ -ul.package-contributers{ - margin-bottom: 0 !important; - padding-left: 0 !important; -} -.package-contributers li{ - list-style: none; - display: inline-block; -} -.package-contributers li{ - margin-left: -5px; -} -.package-contributers li:first-child{ - margin-left: 0; -} -.package-contributers li:last-child{ - margin-left: 9px; -} -.package-contributers button{ - padding: 0 !important; - border-radius: 100%; - border: 0 !important; - /*Hover Effect*/ - -webkit-transition: box-shadow 0.2s ease; - -moz-transition: box-shadow 0.2s ease; - transition: box-shadow 0.2s ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - display: inline-block; - position: relative; -} -.package-contributers button:before{ - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; border-radius: 50%; - bottom: 0; - box-shadow: 0 0 0 2px #fff; - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0; -} -.package-contributers button:hover{ - box-shadow: 0 0 0 2px #D7E7F9; - text-decoration: none; -} -.package-contributers button:hover:before{ - -webkit-transform: scale(0.925); - -moz-transform: scale(0.925); - -ms-transform: scale(0.925); - -o-transform: scale(0.925); - transform: scale(0.925); - box-shadow: 0 0 0 1px #D7E7F9; - opacity: 0.5; -} -.package-contributers button img{ - width: 28px; - height: 28px; - object-fit: cover; - vertical-align: top; - border-radius: 100%; +} +/* .userProfile .dropdown-content{ + bottom: 40px !important; + top: unset !important; + width: 100%; +} */ +/**Tab Nav**/ +.nav-tabs{ + border-bottom-color: #ECEDF2 !important; } -.package-contributers a{ +.nav-link{ + padding: 15px 20px 15px 0 !important; + text-transform: uppercase !important; font-size: 12px; - color: #1273EB; -} -.package-contributers a:hover{ - text-decoration: unset; -} -/***Package Footer***/ -.packages-card .card-footer{ - padding: 0 20px !important; - background: transparent !important; - border-top-color: #F7F6F6 !important; -} -.packages-card .card-footer .col:first-child{ - border-right: solid 1px #F7F6F6; -} -.packages-card .card-footer .btn{ - background-color: transparent !important; + font-weight: bold; color: #C3CDDB !important; - border: 0; - font-size: 13px; - opacity: .7; -} -.packages-card .card-footer .btn:hover{ - opacity: 1; -} -.btn-card-config, -.btn-card-topology{ - padding: 15px 0 15px 28px !important; - background-size: 16%; - background-position: left center; - background-repeat: no-repeat; -} -.btn-card-config{ - background-image: url(../src/assets/img/icon-btn-card-config.svg); -} -.btn-card-topology{ - background-image: url(../src/assets/img/icon-btn-card-topology.svg); + border: none !important; } -.icon-deployed{ - margin-right: 5px; - display: inline; - background: url(../src/assets/img/icon-deploy.svg) center center no-repeat; +.nav-tabs .nav-link:focus, +.nav-tabs .nav-link:hover{ + border: 0 !important; } - - - + .nav-tabs .nav-link:hover{ + color: #1B3E6F !important; + } + .nav-tabs .nav-link.active{ + color: #1B3E6F !important; + background: transparent !important; + border: 0 !important; + border-bottom: solid 2px #1B3E6F !important; + } + .nav-tabs .nav-link::before{ + content: "|"; + padding-right: 20px !important; + color: #C3CDDB; + font-weight: normal; + } + .nav-tabs .nav-link:first-child::before{ + content: none; + } + .nav-tabs .nav-link:first-child{ + padding-left: 20px !important; + } + /**Sliding Search Input**/ + .searchBox{ + position: absolute; + top: 0%; + right: 0%; + transform: translate(0%,-0%); + height: 40px; + } + .searchButton{ + float: right; + margin-top: 14px; + padding-left: 0 !important; + padding-right: 24px !important; + width: 60px; + height: 24px; + background: url(../src/assets/img/icon-search.svg) center center no-repeat; + background-size: 28%; + border: 0 !important; + border-right: solid 1px #1B3E6F !important; + display: flex; + justify-content: center; + align-items: center; + transition: 0.4s; + } + .searchBox:hover > .searchInput{ + width: 240px; + border-bottom: solid 1px #C3CDDB; + } + .searchBox:hover > .searchButton{ + color: #1B3E6F; + } + .searchInput{ + border: none; + background: none; + outline: none; + float: left; + padding: 0; + color: #1B3E6F; + font-size: 14px; + transition: 0.4s; + line-height: 40px; + width: 0px; + } + .searchInput::placeholder{ + color: #BABBC3; + } + /**Drop Down Menu**/ + .dropdown{ + position: relative; + display: inline-block; + text-align: left; + width: 132px; + z-index: 200; + } + .dropdown-text{ + cursor: pointer; + position: relative; + text-indent: 10px; + line-height: 32px; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); + width: 100%; + } + .dropdown-text:after{ + position: absolute; + right: 6px; + top: 15px; + content: ''; + width: 0px; + height: 0px; + border-style: solid; + border-width: 5px 4px 0 4px; + border-color: #555 transparent transparent transparent; + } + .dropdown-toggle{ + font-size: 0; + z-index: 1; + cursor: pointer; + position: absolute; + top: 0; + border: none; + padding: 0; + margin: 0 0 0 1px; + background: transparent; + text-indent: -10px; + height: 34px; + width: 100%; + } + .dropdown-toggle:focus{ + outline: 0; + } + .dropdown-content{ + position: absolute; + top: 32px; + width: 140px; + margin: 0; + padding: 0; + opacity: 0; + visibility:hidden; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; + list-style-type: none; + border-radius: 3px; + text-indent: 10px; + line-height: 32px; + background-color: #eee; + border: 1px solid #ccc; + } + .dropdown-content a{ + display: block; + } + .dropdown-content a:hover{ + background: #e8e8e8; + } + .dropdown-toggle:hover ~ .dropdown-text, + .dropdown-toggle:focus ~ .dropdown-text{ + background-color: #e8e8e8; + } + .dropdown-toggle:focus ~ .dropdown-text{ + box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); + z-index: 2; + } + .dropdown-toggle:focus ~ .dropdown-text:after{ + border-width: 0 4px 5px 4px; + border-color: transparent transparent #555 transparent; + } + .dropdown-content:hover, + .dropdown-toggle:focus ~ .dropdown-content{ + opacity: 1; + visibility:visible; + top: 42px; + } + /**Card**/ + /* Hover Shadow */ + @keyframes hover { + 50% { + transform: translateY(-3px); + } + 100% { + transform: translateY(-6px); + } + } + @keyframes card { + 0% { + transform: translateY(6px); + opacity: .3; + } + 50% { + transform: translateY(3px); + opacity: .8; + } + 100% { + transform: translateY(6px); + opacity: .3; + } + } + .card { + /* display: inline-block; + position: relative; + transition-duration: 0.2s; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); */ + margin-bottom: 25px !important; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + /* .card:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%); + transition-duration: 0.2s; + transition-property: transform opacity; + } */ + /* .card:hover { + transform: translateY(-3px); + animation-name: hover; + animation-duration: 1s; + animation-delay: 0.2s; + animation-timing-function: linear; + animation-iteration-count: 1; + animation-direction: alternate; + } + .card:hover:before { + opacity: .4; + transform: translateY(3px); + animation-name: card; + animation-duration: 1s; + animation-delay: .2s; + animation-timing-function: linear; + animation-iteration-count: 1; + animation-direction: alternate; + } */ + .card-body{ + padding: 20px !important; + } - - - - - - -/* Border Fade */ -.border-fade { - display: inline-block; - transition-duration: 0.3s; - transition-property: box-shadow; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); - box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} -.border-fade:hover { - box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} -/*Content*/ - -/**Title Action Buttons**/ -.page-title-actions li{ - display: inline-block; - text-align: center; -} -.title-action{ - -webkit-transition: box-shadow 0.2s ease; - -moz-transition: box-shadow 0.2s ease; - transition: box-shadow 0.2s ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - border-radius: 50%; - color: #6a75eb; - display: inline-block; - font-size: 0.889em; - height: 4em; - margin: 0 1em 1em; + /*Main Container*/ + .main-container{ + padding: 0 !important; + } + /*Page Title*/ + .page-title{ + padding: 21px 30px; + background:#fff; + border-left: solid 1px #FAFAFA; + margin-bottom: 21px; + -webkit-box-shadow: 0 4px 10px 0 #eef0f5; + box-shadow: 0 4px 10px 0 #eef0f5; + position: relative; + z-index: 8; + } + .page-title h2{ + font-size: 16px; + font-weight: bold; + } + .page-title h2 span{ + color: #BABBC3; + font-size: 14px; + } + /*Content*/ + .body-container{ + padding: 0 30px !important; + } + .search-filter-col{ + padding-right: 0 !important; + border-bottom: solid 1px #ECEDF2 !important; + } + /**Packages Filter**/ + .packagesFilter{ + margin-top: 12px; + } + .packagesFilter .dropdown-toggle{ + height: 36px !important; + } + .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ + border-color: transparent transparent #1B3E6F transparent; + } + .packagesFilter .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + text-indent: 14px; + line-height: 30px; + font-size: 12px; + } + .packagesFilter .dropdown-text::after{ + right: 12px; + border-color: #1B3E6F transparent transparent transparent; + } + .packagesFilter .dropdown-toggle:hover ~ .dropdown-text, + .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ + background-color: transparent; + box-shadow: none; + border-radius: 0; + } + .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ + background: #fff; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + } + .packagesFilter .dropdown-text::after{ + top: 12px; + } + .packagesFilter .dropdown-content{ + padding: 6px 0 15px; + background: #fff; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + border: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + .packagesFilter .dropdown-content:hover, + .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ + top: 30px; + } + .packagesFilter .form-control{ + padding: 12px 9px 12px 38px !important; + border: 0 !important; + border-bottom: solid 1px #D7E7F9 !important; + background: url(../src/assets/img/icon-search.svg) 15px center no-repeat; + background-size: 4%; + border-radius: 0 !important; + color: #1B3E6F; + font-size: 13px; + } + .packagesFilter .form-control::placeholder{ + color: #BABBC3; + } + .packagesFilter .form-control:focus{ + box-shadow: none !important; + border-bottom: solid 1px #1B3E6F !important; + } + .packagesFilter .custom-checkbox{ + margin-left: 8px; + } + .packagesFilter .custom-control-label{ + line-height: 28px !important; + font-size: 13px !important; + text-indent: 6px !important; + } + /**Packages Sort**/ + .sort-packages{ + font-size: 12px; + font-weight: bold; + color: #C3CDDB; + } + .sort-packages .dropdown{ + width: 88px; + } + .sort-packages .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + color: #1B3E6F; + } + .sort-packages .dropdown-text::after{ + border-color: #1B3E6F transparent transparent transparent; + } + .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ + border-color: transparent transparent #1B3E6F transparent; + } + .sort-packages .dropdown-toggle:hover ~ .dropdown-text, + .sort-packages .dropdown-toggle:focus ~ .dropdown-text{ + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + background: #fff; + } + .sort-packages .dropdown-content:hover, + .sort-packages .dropdown-toggle:focus ~ .dropdown-content{ + top: 30px; + } + .sort-packages .dropdown-content{ + width: 88px; + padding: 6px 0; + background: #fff; + border-radius: 2px; + border: 0; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + } + .sort-packages .dropdown-content a{ + color: #1B3E6F; + font-size: 12px; + } + .sort-packages .dropdown-content a:hover{ + background-color: #F4F9FE; + text-decoration: unset; + } + /**Pagination**/ + .page-item .page-link, + .page-item.disabled .page-link{ + background: transparent !important; + border: 0; + color: #1B3E6F !important; + font-size: 14px; + } + .page-link:hover{ + color: #fff !important; + background-color: #C3CDDB !important; + border-radius: 100%; + } + /**Packages Cards***/ + /***Package Info Card***/ + .packages-card .card{ + margin: 0 9px; + border-radius: 2px; + border: 0; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); + } + .packages-card .card:hover{ + box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15); + transition: all 0.5s ease; + } + .packages-card .card-title{ + margin-bottom: 0 !important; + font-size: 15px; + font-weight: bold; + } + .packages-card p{ + font-size: 14px; + color: #D0D7E4; + } + /***Add Package Card***/ + .addPaackage-card{ + background: #F4F9FE !important; + border: solid 1px #D7E7F9 !important; + } + .addPaackage-card:hover{ + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; + } + .addPaackage-card img{ + margin-bottom: 12px; + margin-top: 8px; + } + .addPaackage-card a{ + margin: 0 0 20px; + padding: 10px 10px 10px 32px; + font-weight: bold; + font-size: 10px; + text-transform: uppercase; + border-radius: 2px; + border-width: .5px; + border-style: solid; + background-position: 10px center; + background-repeat: no-repeat; + text-align: left; + } + .addPaackage-card a:hover{ + text-decoration: unset; + } + .btn-create-package, + .btn-create-package:hover{ + background-color: #1B3E6F; + border-color: #1B3E6F; + color: #fff; + background-image: url(../src/assets/img/icon-create-white.svg); + background-repeat: no-repeat; + } + .btn-import-package, + .btn-import-package:hover{ + color: #1B3E6F; + background-image: url(../src/assets/img/icon-import-blue.svg); + } + /***Actions Menu***/ + .packages-card .dropdown{ + width: auto; + float: right; + } + .packages-card .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + text-indent: 0; + line-height: unset; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + opacity: .6; + } + .packages-card .dropdown-text::after{ + display: none; + } + .packages-card .dropdown-text img{ + padding: 9px 7px; + } + .packages-card .dropdown-content{ + right: 0; + width: 120px; + padding: 6px 0; + border: 0; + text-indent: 0; + border-radius: 2px; + border-top-left-radius: 0; + border-top-right-radius: 0; + background: #1B3E6F; + } + .packages-card .dropdown-content a{ + padding-left: 45px; + color: #fff; + font-size: 13px; + background-position: 20px center; + background-size: 10%; + background-repeat: no-repeat; + } + .packages-card .dropdown-content a:hover{ + background-color: #172B4D; + text-decoration: unset; + } + .packages-card .action-clone a, + .packages-card .action-clone a:hover{ + background-image: url(../src/assets/img/icon-clone-sm.svg); + } + .packages-card .action-archive a, + .packages-card .action-archive a:hover{ + background-image: url(../src/assets/img/icon-archive-sm.svg); + } + .packages-card .action-delete a, + .packages-card .action-delete a:hover{ + background-image: url(../src/assets/img/icon-delete-sm.svg); + } + .packages-card .dropdown-content:hover, + .packages-card .dropdown-toggle:focus ~ .dropdown-content{ + top: 24px; + } + .packages-card .dropdown-toggle:hover ~ .dropdown-text{ + background: transparent; + opacity: 1; + } + .packages-card .dropdown-toggle:focus ~ .dropdown-text{ + opacity: 1; + background: #1B3E6F; + box-shadow: none; + } + /***Contributers***/ + ul.package-contributers{ + margin-bottom: 0 !important; + padding-left: 0 !important; + } + .package-contributers li{ + list-style: none; + display: inline-block; + } + .package-contributers li{ + margin-left: -5px; + } + .package-contributers li:first-child{ + margin-left: 0; + } + .package-contributers li:last-child{ + margin-left: 9px; + } + .package-contributers button{ + padding: 0 !important; + border-radius: 100%; + border: 0 !important; + /*Hover Effect*/ + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + display: inline-block; + position: relative; + } + .package-contributers button:before{ + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 2px #fff; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } + .package-contributers button:hover{ + box-shadow: 0 0 0 2px #D7E7F9; + text-decoration: none; + } + .package-contributers button:hover:before{ + -webkit-transform: scale(0.925); + -moz-transform: scale(0.925); + -ms-transform: scale(0.925); + -o-transform: scale(0.925); + transform: scale(0.925); + box-shadow: 0 0 0 1px #D7E7F9; + opacity: 0.5; + } + .package-contributers button img{ + width: 28px; + height: 28px; + object-fit: cover; + vertical-align: top; + border-radius: 100%; + } + .package-contributers a{ + font-size: 12px; + color: #1273EB; + } + .package-contributers a:hover{ + text-decoration: unset; + } + /***Package Footer***/ + .packages-card .card-footer{ + padding: 0 20px !important; + background: transparent !important; + border-top-color: #F7F6F6 !important; + } + .packages-card .card-footer .col:first-child{ + border-right: solid 1px #F7F6F6; + } + .packages-card .card-footer .btn{ + background-color: transparent !important; + color: #C3CDDB !important; + border: 0; + font-size: 13px; + opacity: .7; + } + .packages-card .card-footer .btn:hover{ + opacity: 1; + } + .btn-card-config, + .btn-card-topology{ + padding: 15px 0 15px 28px !important; + background-size: 16%; + background-position: left center; + background-repeat: no-repeat; + } + .btn-card-config{ + background-image: url(../src/assets/img/icon-btn-card-config.svg); + } + .btn-card-topology{ + background-image: url(../src/assets/img/icon-btn-card-topology.svg); + } + .icon-deployed{ + margin-right: 5px; + display: inline; + background: url(../src/assets/img/icon-deploy.svg) center center no-repeat; + } + + + + + + + + + + + /* Border Fade */ + .border-fade { + display: inline-block; + transition-duration: 0.3s; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + .border-fade:hover { + box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + /*Content*/ + + /**Title Action Buttons**/ + .page-title-actions li{ + display: inline-block; + text-align: center; + } + .title-action{ + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 50%; + color: #6a75eb; + display: inline-block; + font-size: 0.889em; + height: 4em; + margin: 0 1em 1em; + position: relative; + text-align: center; + text-transform: lowercase; + width: 4em; + line-height: 4em; + } + + .title-action:before{ + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 1px #000; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } + .title-action:hover{ + box-shadow: 0 0 0 7px #07819b; + text-decoration: none; + } + .title-action:hover:before{ + -webkit-transform: scale(0.925); + -moz-transform: scale(0.925); + -ms-transform: scale(0.925); + -o-transform: scale(0.925); + transform: scale(0.925); + box-shadow: 0 0 0 1px #07819b; + opacity: 0.5; + } + + /*Animation Button*/ + /**Float**/ + .float { + display: inline-block; + transition-duration: 0.3s; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .float:hover { + transform: translateY(-5px); + } + +/*TOOLTIP*/ +/* Base styles for the element that has a tooltip */ +[data-tooltip], +.tooltip { position: relative; + cursor: pointer; text-align: center; - text-transform: lowercase; - width: 4em; - line-height: 4em; } -.title-action:before{ - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; - border-radius: 50%; - bottom: 0; - box-shadow: 0 0 0 1px #000; - content: ""; - left: 0; +/* Base styles for the entire tooltip */ +[data-tooltip]:before, +[data-tooltip]:after, +.tooltip:before, +.tooltip:after { position: absolute; - right: 0; - top: 0; -} -.title-action:hover{ - box-shadow: 0 0 0 7px #07819b; - text-decoration: none; + visibility: hidden; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -moz-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + pointer-events: none; } -.title-action:hover:before{ - -webkit-transform: scale(0.925); - -moz-transform: scale(0.925); - -ms-transform: scale(0.925); - -o-transform: scale(0.925); - transform: scale(0.925); - box-shadow: 0 0 0 1px #07819b; - opacity: 0.5; + +/* Show the entire tooltip on hover and focus */ +[data-tooltip]:hover:before, +[data-tooltip]:hover:after, +[data-tooltip]:focus:before, +[data-tooltip]:focus:after, +.tooltip:hover:before, +.tooltip:hover:after, +.tooltip:focus:before, +.tooltip:focus:after { + visibility: visible; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; } -/*Animation Button*/ -/**Float**/ -.float { - display: inline-block; - transition-duration: 0.3s; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} -.float:hover { - transform: translateY(-5px); +/* Base styles for the tooltip's directional arrow */ +.tooltip:before, +[data-tooltip]:before { + z-index: 1001; + border: 6px solid transparent; + background: transparent; + content: ""; } +/* Base styles for the tooltip's content area */ +.tooltip:after, +[data-tooltip]:after { + z-index: 1000; + padding: 8px; + width: auto; + background-color: #DEE8F3; + background-color: rgba(222, 232, 243, 1.0); + color: #1B3E6F; + content: attr(data-tooltip); + font-size: 10px; + line-height: 1.2; + border-radius: 2px; +} +/* Directions */ +/* Top (default) */ +[data-tooltip]:before, +[data-tooltip]:after, +.tooltip:before, +.tooltip:after, +.tooltip-top:before, +.tooltip-top:after { + bottom: 100%; + left: 50%; +} +[data-tooltip]:before, +.tooltip:before, +.tooltip-top:before { + margin-left: 0; + margin-bottom: -12px; + + border-bottom-color: #DEE8F3; + border-bottom-color: rgba(222, 232, 243, 1.0); +} +/* Horizontally align top/bottom tooltips */ +[data-tooltip]:after, +.tooltip:after, +.tooltip-top:after { + margin-left: -50%; +} +[data-tooltip]:hover:before, +[data-tooltip]:hover:after, +[data-tooltip]:focus:before, +[data-tooltip]:focus:after, +.tooltip:hover:before, +.tooltip:hover:after, +.tooltip:focus:before, +.tooltip:focus:after, +.tooltip-top:hover:before, +.tooltip-top:hover:after, +.tooltip-top:focus:before, +.tooltip-top:focus:after { + -webkit-transform: translateY(-12px); + -moz-transform: translateY(-12px); + transform: translateY(-12px); +} +/* Left */ +.tooltip-left:before, +.tooltip-left:after { + right: 100%; + bottom: 50%; + left: auto; +} +.tooltip-left:before { + margin-left: 0; + margin-right: -12px; + margin-bottom: 0; + border-top-color: transparent; + border-left-color: #000; + border-left-color: hsla(0, 0%, 20%, 0.9); +} +.tooltip-left:hover:before, +.tooltip-left:hover:after, +.tooltip-left:focus:before, +.tooltip-left:focus:after { + -webkit-transform: translateX(-12px); + -moz-transform: translateX(-12px); + transform: translateX(-12px); +} +/* Bottom */ +.tooltip-bottom:before, +.tooltip-bottom:after { + top: 100%; + bottom: auto; + left: 20%; +} +.tooltip-bottom:before { + margin-top: -12px; + margin-bottom: 0; + border-top-color: transparent; + border-bottom-color: #DEE8F3; + border-bottom-color: rgba(222, 232, 243, 1.0); +} +.tooltip-bottom:hover:before, +.tooltip-bottom:hover:after, +.tooltip-bottom:focus:before, +.tooltip-bottom:focus:after { + -webkit-transform: translateY(12px); + -moz-transform: translateY(12px); + transform: translateY(12px); +} +/* Right */ +.tooltip-right:before, +.tooltip-right:after { + bottom: 50%; + left: 20%; +} +.tooltip-right:before { + margin-bottom: 0; + margin-left: -12px; + border-top-color: transparent; + border-right-color: #000; + border-right-color: hsla(0, 0%, 20%, 0.9); +} +.tooltip-right:hover:before, +.tooltip-right:hover:after, +.tooltip-right:focus:before, +.tooltip-right:focus:after { + -webkit-transform: translateX(12px); + -moz-transform: translateX(12px); + transform: translateX(12px); +} +/* Move directional arrows down a bit for left/right tooltips */ +.tooltip-left:before, +.tooltip-right:before { + top: 3px; +} +/* Vertically center tooltip content for left/right tooltips */ +.tooltip-left:after, +.tooltip-right:after { + margin-left: 0; + margin-bottom: -16px; +} +/* Extra small devices (portrait phones, less than 576px) */ +@media (max-width: 575.98px) { + .page-title{ + padding: 18px; + } +} +/* Small devices (landscape phones, 576px and up) */ +@media (min-width: 576px) and (max-width: 767.98px) { +} +/* Medium devices (tablets, 768px and up) */ +@media (min-width: 768px) and (max-width: 991.98px) { + +} +/* Large devices (desktops, 992px and up) */ +@media (min-width: 992px) and (max-width: 1199.98px) { +} +/* Extra large devices (large desktops, 1200px and up) */ +@media (min-width: 1200px) { +} + + + + + + + + + + + + + + + + + + + + + -- cgit 1.2.3-korg