diff options
Diffstat (limited to 'cds-ui/designer-client/src')
72 files changed, 3200 insertions, 195 deletions
diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts index da7ddfbd0..fd07d34c0 100644 --- a/cds-ui/designer-client/src/app/app.module.ts +++ b/cds-ui/designer-client/src/app/app.module.ts @@ -34,6 +34,7 @@ import {SidebarModule} from 'ng-sidebar'; import {SharedModulesModule} from './modules/shared-modules/shared-modules.module'; import {NgxFileDropModule} from 'ngx-file-drop'; import {ResourceDictionaryModule} from './modules/feature-modules/resource-dictionary/resource-dictionary.module'; +import { ToastrModule } from 'ngx-toastr'; @NgModule({ @@ -53,6 +54,7 @@ import {ResourceDictionaryModule} from './modules/feature-modules/resource-dicti NgxFileDropModule, ResourceDictionaryModule, SidebarModule, + ToastrModule.forRoot() // ToastrModule added ], providers: [ApiService], diff --git a/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts new file mode 100644 index 000000000..104fe0090 --- /dev/null +++ b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'search' +}) + +export class SearchPipe implements PipeTransform { + transform(items: any[], searchText: string): any[] { + if (!items) { + return []; + } + if (!searchText) { + return items; + } + searchText = searchText.toLowerCase(); + return items.filter( it => { + if (it.name) { + return it.name.toLowerCase().includes(searchText); + } else { + return items; + } + }); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 6c7e1efc6..a549d54a2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -8,7 +8,7 @@ <ul class="breadcrumb-header"> <li><a routerLink="/packages">CBA Packages</a></li> <i class="fa fa-angle-right ml-2 mr-2"></i> - <li>Package Name</li> + <li>{{viewedPackage.artifactName}}</li> </ul> </h2> <div class="col"> @@ -107,9 +107,547 @@ </div> </div> <div class="col-2 package-view-button pt-3"> - <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer + <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer Mode + </button> --> + <!-- Button trigger modal - 1st Action --> + <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal" + data-target="#exampleModalLong"> + Designer Mode </button> + <!-- Modal --> + <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLongTitle"></h5> + <button type="button" class="close" data-dismiss="modal" + aria-label="Close" title="Close"> + <i class="icon-action-close"></i> + </button> + </div> + <div class="modal-body"> + <div id="carouselExampleIndicators" class="carousel slide" + data-ride="carousel" data-interval="false"> + <div class="carousel-inner" style="height: 480px"> + <!--OPTIONS SLIDE--> + <div class="carousel-item active"> + <h1>Let’s create the 1st Action</h1> + <div class="row"> + <!--Custom Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="1"> + <div class="card actionType custom"> + <div class="card-body"> + <h3>Custom</h3> + <p>Start with your own settings</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="1" class="btn"> + Create + </button> + </div> + </div> + </a> + </div> + <!--Default Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="2"> + <div class="card actionType default"> + <div class="card-body"> + <h3>Default</h3> + <p>Explore preset actions from CDS + Action Catalog</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="2" class="btn"> + Select + </button> + </div> + </div> + </a> + </div> + <!--Recent Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="3"> + <div class="card actionType recent"> + <div class="card-body"> + <h3>Recent</h3> + <p>Re-use recent actions of your + recent + packages</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="3" class="btn"> + Select + </button> + </div> + </div> + </a> + </div> + <!--Import Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="4"> + <div class="card actionType import"> + <div class="card-body"> + <h3>Import</h3> + <p>Import your own action files</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="4" class="btn"> + Browse</button> + </div> + </div> + </a> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <button class="btn skip-btn">Skip to Designer Canvas</button> + </div> + </div> + </div> + <!--Custom Action Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Create Custom Action</h1> + <div class="form-group text-center"> + <input type="text" class="form-control customAction" + placeholder="Type Action Name" autofocus> + <button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button> + </div> + + </div> + <!--Default Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from CDS Default Package </h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Version</label> + <div class="dropdown" style="width: 90px"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">1.6.2</div> + <ul class="dropdown-content"> + <li> + <a>1.1.8</a> + </li> + <li> + <a>2.1.8</a> + </li> + </ul> + </div> + </div> + <div class="col"> + <input type="text" + class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" + required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" + required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" + required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" + required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start</button> + </div> + </div> + </div> + </div> + <!--Recent Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from Recent Packages</h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Package + Name</label> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">CDS (v 1.0.0) + </div> + <ul class="dropdown-content"> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + </ul> + </div> + </div> + <div class="col"> + <input type="text" + class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" + required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" + required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" + required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" + required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" + class="btn submit">Start</button> + </div> + </div> + </div> + </div> + <!--Import Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Import Action(s)</h1> + <div class="actionFormWrapper"> + <div class="row"> + <div class="col"> + <ngx-file-drop accept=".json" + dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" + (onFileLeave)="fileLeave($event)"> + <ng-template ngx-file-drop-content-tmp + let-openFileSelector="openFileSelector"> + <div class="folder-upload"> + <img + src="assets/img/folder-upload.svg" /> + </div> + <div class="folder-upload-text"> + Drag & Drop file + </div> + <div class="folder-upload-text">or + <button type="button" + class="btn btn-sm btn-primary" + (click)="openFileSelector()">Browse + Files + </button> + </div> + <div class="folder-upload-type"> + Allowed file + type: json</div> + </ng-template> + </ngx-file-drop> + <div class="upload-table"> + <table class="table"> + <thead> + <tr + *ngFor="let item of uploadedFiles; let i=index"> + <th width="40"><img + src="assets/img/icon-file-code.svg" /> + </th> + <th>{{ item.name }}</th> + <th width="40" + class="text-right"> + <img + src="assets/img/icon-remove-file.svg" /> + </th> + </tr> + </thead> + </table> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <button type="button" + class="btn submit mt-4">Import</button> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i class="fa fa-play-circle"></i> Deploy </button> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 6de76f949..0578b10f8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -206,7 +206,7 @@ export class ConfigurationDashboardComponent implements OnInit { this.router.navigate(['/packages']); } - goToDesignerMode() { - this.router.navigate(['/packages/designer']); - } + goToDesignerMode(id) { + this.router.navigate(['/packages/designer', id]); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 6e072b18d..3e3528c00 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -10,7 +10,7 @@ </li> <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> - <a href="#">Package Name</a> + <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> @@ -102,7 +102,7 @@ <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> - <button [routerLink]="['/designer/source']" type="button" + <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" class="btn btn-secondary topologyView">Scripting</button> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 5adce7ea0..fa3a99b49 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2019 Orange. All rights reserved. =================================================================== +Modification Copyright (c) 2020 IBM +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -34,6 +36,9 @@ import { FunctionsStore } from './functions.store'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { ActivatedRoute } from '@angular/router'; +import { DesignerService } from './designer.service'; @Component({ @@ -46,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private attributesSideBar: boolean; + viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -58,7 +64,9 @@ export class DesignerComponent implements OnInit, OnDestroy { constructor(private designerStore: DesignerStore, private functionStore: FunctionsStore, private graphUtil: GraphUtil, - private graphGenerator: GraphGenerator) { + private graphGenerator: GraphGenerator, + private route: ActivatedRoute, + private designerService: DesignerService) { this.controllerSideBar = true; this.attributesSideBar = false; @@ -88,6 +96,14 @@ export class DesignerComponent implements OnInit, OnDestroy { this.initializePalette(); this.stencilPaperEventListeners(); + const id = this.route.snapshot.paramMap.get('id'); + this.designerService.getPagedPackages(id).subscribe( + (bluePrintDetailModels) => { + if (bluePrintDetailModels) { + this.viewedPackage = bluePrintDetailModels[0]; + } + }); + /** * the code to retrieve from server is commented */ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts index aa3a6a668..771c44ba8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2019 Orange. All rights reserved. =================================================================== +Modification Copyright (c) 2020 IBM +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -22,8 +24,9 @@ limitations under the License. import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.typed.service'; -import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; +import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants'; import {ModelType} from './model/ModelType.model'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @Injectable({ @@ -31,11 +34,20 @@ import {ModelType} from './model/ModelType.model'; }) export class DesignerService { - constructor(private api: ApiService<ModelType>) { + constructor(private api: ApiService<ModelType>, + private api2: ApiService<BluePrintDetailModel>) { } getFunctions(modelDefinitionType: string): Observable<ModelType[]> { return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType); } + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + return this.api2.getOne(BlueprintURLs.getOneBlueprint + '/' + id); + } + + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html index 2a558517c..05f6eeb5a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html @@ -8,7 +8,7 @@ <a href="#">CBA Packages</a> </li> <li class="breadcrumb-item"> - <a href="#">Package Name</a> + <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> </li> <li class="breadcrumb-item active" aria-current="page"> <p class="mb-0">Topology View</p> @@ -56,7 +56,7 @@ </header> <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> - <button (click)="convertAndOpenInDesingerView()" type="button" class="btn btn-secondary topologySource">Designer</button> + <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button" class="btn btn-secondary topologySource">Designer</button> <button type="button" class="btn btn-secondary topologyView active">Scripting</button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts index 34194e42f..e70d98d04 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts @@ -1,8 +1,11 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { DesignerStore } from '../designer.store'; import { PackageCreationUtils } from '../../package-creation/package-creation.utils'; -import { RouterLink, Router } from '@angular/router'; +import { RouterLink, Router, ActivatedRoute } from '@angular/router'; import { Subject } from 'rxjs'; +import { BluePrintDetailModel } from '../../model/BluePrint.detail.model'; +import { viewClassName } from '@angular/compiler'; +import { SourceViewService } from './source-view.service'; @Component({ selector: 'app-designer-source-view', @@ -15,10 +18,13 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { lang = 'json'; private controllerSideBar: boolean; private ngUnsubscribe = new Subject(); + viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); constructor(private store: DesignerStore, private packageCreationUtils: PackageCreationUtils, - private router: Router) { + private router: Router, + private route: ActivatedRoute, + private sourceViewService: SourceViewService) { this.controllerSideBar = true; } @@ -29,13 +35,20 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { this.content = this.packageCreationUtils.transformToJson(state.template); }); + const id = this.route.snapshot.paramMap.get('id'); + this.sourceViewService.getPagedPackages(id).subscribe( + (bluePrintDetailModels) => { + if (bluePrintDetailModels) { + this.viewedPackage = bluePrintDetailModels[0]; + } + }); } - convertAndOpenInDesingerView() { + convertAndOpenInDesingerView(id) { // TODO validate json against scheme console.log('convertAndOpenInDesingerView ...', this.content); this.store.saveSourceContent(this.content); - this.router.navigateByUrl('/packages/designer'); + this.router.navigate(['/packages/designer', id]); } ngOnDestroy() { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts new file mode 100644 index 000000000..758952221 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts @@ -0,0 +1,26 @@ +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import { ApiService } from 'src/app/common/core/services/api.typed.service'; +import { BluePrintDetailModel } from '../../model/BluePrint.detail.model'; +import { ModelType } from '../model/ModelType.model'; +import { ResourceDictionaryURLs, BlueprintURLs } from 'src/app/common/constants/app-constants'; + + + +@Injectable({ + providedIn: 'root' +}) +export class SourceViewService { + + constructor(private api1: ApiService<BluePrintDetailModel>) { + } + + + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + return this.api1.getOne(BlueprintURLs.getOneBlueprint + '/' + id); + } + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index ac02c50e2..d487de3d1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -36,38 +36,39 @@ <div class="card"> <div class="card-header" [id]="'head-'+mapIndex"> <h5 class="mb-0 d-flex justify-content-between"> - <button class="btn btn-link " data-toggle="collapse" - aria-expanded="false" - (click)="changeDivShow(mapIndex)" > + <button class="btn btn-link " data-toggle="collapse" aria-expanded="false" + (click)="changeDivShow(mapIndex)"> <i class="icon-file-code"></i> {{file.key}} </button> - - <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i - class="icon-delete-sm"></i></a> - - <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> --> - <!-- Delete Modal --> - <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">Delete File</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - <p>Are you sure you want to delete file <span>artifact_types.json</span>?</p> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" - data-dismiss="modal">Cancel</button> - <button type="button" class="btn btn-primary">Delete</button> + + <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal" + class="accordion-delete"><i class="icon-delete-sm"></i></a> + + <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> --> + <!-- Delete Modal --> + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Delete File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete file + <span>{{fileToDelete?.key?.split('/')[1]}}</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" + data-dismiss="modal">Cancel</button> + <button type="button" data-dismiss="modal" (click)="removeFile()" + class="btn btn-primary">Delete</button> + </div> </div> </div> </div> - </div> </h5> </div> <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" @@ -153,7 +154,8 @@ <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" (click)="resetTheUploadedFiles()">Cancel </button> - <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()"> + <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" (click)="setFilesToStore()"> Import </button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index 35c0918de..9858fd580 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -1,7 +1,7 @@ -import {Component, OnInit} from '@angular/core'; -import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; -import {PackageCreationStore} from '../package-creation.store'; -import {PackageCreationUtils} from '../package-creation.utils'; +import { Component, OnInit } from '@angular/core'; +import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; +import { PackageCreationStore } from '../package-creation.store'; +import { PackageCreationUtils } from '../package-creation.utils'; @Component({ @@ -14,7 +14,7 @@ export class ImportsTabComponent implements OnInit { public definitionFiles: Map<string, string> = new Map<string, string>(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); - + fileToDelete: any = {}; public files: NgxFileDropEntry[] = []; constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { @@ -40,11 +40,21 @@ export class ImportsTabComponent implements OnInit { } } } - - removeFile(fileIndex: number) { - const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; + initDelete(file) { + console.log(file); + this.fileToDelete = file; + } + removeFile() { + const filename = this.fileToDelete.key; this.packageCreationStore.removeFileFromDefinition(filename); - this.uploadedFiles.splice(fileIndex, 1); + + for (let i = 0; i < this.uploadedFiles.length; i++) { + console.log(this.uploadedFiles[i]); + if (this.uploadedFiles[i].name === filename) { + this.uploadedFiles.splice(i, 1); + break; + } + } } public fileOver(event) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 6622f6700..50d9eea08 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -50,7 +50,7 @@ <div class="model-note-container error-message">{{errorMessage}}</div> </div> <div class="single-line-model"> - <label class="label-name">Description</label> + <label class="label-name">Description <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index ee4368711..baf6ea9e3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -20,7 +20,7 @@ <div class="container-fluid body-container"> <div class="container"> <div class="creat-action-container"> - <a href="#" class="action-button save" (click)="saveBluePrint()"> + <a class="action-button save" (click)="saveBluePrint()"> <i class="icon-save-sm" aria-hidden="true"></i> <span>Save</span> </a> @@ -106,4 +106,4 @@ </div> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts index 0808223cd..8302697fe 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts @@ -84,6 +84,10 @@ export class PackageCreationStore extends Store<CBAPackage> { this.state.scripts.files.delete(name); } + fileExist(key: string) { + return this.state.templates.files.has(key); + } + removeFileFromDefinition(filename) { this.state.definitions.imports.delete(filename); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index 79c444061..1ecf2985e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -20,12 +20,12 @@ <div class="card"> <div [id]="'head-script-'+mapIndex" class="card-header"> <h5 class="mb-0 d-flex justify-content-between"> - <button (click)="changeDivShow(mapIndex)" - aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse"> + <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed" + data-toggle="collapse"> <i class="icon-file-code"></i> {{file.key}} </button> - <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i - class="icon-delete-sm"></i></a> + <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal" + class="accordion-delete"><i class="icon-delete-sm"></i></a> <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i class="icon-delete-sm"></i></a> --> <!-- Delete Modal --> @@ -40,12 +40,14 @@ </button> </div> <div class="modal-body"> - <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p> + <p>Are you sure you want to delete script file + <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" class="btn btn-primary">Delete</button> + <button type="button" (click)="removeFile(fileToDelete?.key,0)" + data-dismiss="modal" class="btn btn-primary">Delete</button> </div> </div> </div> @@ -120,4 +122,4 @@ </div> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index efe28e9a4..a85ccf146 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -3,6 +3,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../package-creation.store'; import 'ace-builds/src-noconflict/ace'; import 'ace-builds/webpack-resolver'; +declare var $: any; @Component({ selector: 'app-scripts-tab', @@ -15,6 +16,7 @@ export class ScriptsTabComponent implements OnInit { public uploadedFiles: FileSystemFileEntry[] = []; public files: NgxFileDropEntry[] = []; private fileNames: Set<string> = new Set(); + fileToDelete: any = {}; constructor( private packageCreationStore: PackageCreationStore, @@ -42,7 +44,9 @@ export class ScriptsTabComponent implements OnInit { } } } - + initDelete(file) { + this.fileToDelete = file; + } removeFile(filePath: string, FileIndex: number) { const filename = filePath.split('/')[2] || ''; // const filename = 'Scripts/' + this.getFileType(this.uploadedFiles[fileIndex].name) + '/' + this.uploadedFiles[fileIndex].name; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts new file mode 100644 index 000000000..f2b73016c --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; + +import { Observable, of, BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + + // based on edit Mode, edit=false + mode = new BehaviorSubject(false); + constructor() { + } + + isEdit(): Observable<boolean> { + return this.mode.asObservable(); + } + enableEdit() { + this.mode.next(true); + } + disableEdit() { + this.mode.next(false); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css index e69de29bb..3a0d9461c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css @@ -0,0 +1,9 @@ +.accordian-title { + color: #a09e9e; + font-size: .9em; +} + +.mapping-source-load { + background-color: white; + border: 0 +}
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 16c3101f2..164f0ac73 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -1,4 +1,13 @@ -<h6 class="create-title">CREATE</h6> + +<div class="row template-mapping-action"> + <div class="col"> + <h6 class="create-title">Create Template</h6> + </div> + <div class="col text-right"> + <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button> + <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Finish</button> + </div> +</div> <div class="card creat-card"> <div class="single-line-model"> <label class="label-name">Name @@ -6,19 +15,20 @@ </label> <div class="label-input"> - <input type="input" [(ngModel)]="fileName" placeholder="Template name"> + <input type="input" [disabled]="edit" [(ngModel)]="fileName" placeholder="Template name" name="templateName" + autofocus [autofocus]="true"> </div> </div> </div> <div class="template-mapping-accordion"> - <div id="accordion"> + <div class="accordion" id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0 d-flex justify-content-between"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - 1. Create Template + 1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span> </button> </h5> @@ -70,7 +80,8 @@ <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> - 2. Manage Mapping + 2. Manage Mapping <span + class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span> </button> </h5> </div> @@ -78,11 +89,13 @@ <div class="card-body"> <p class="text-center"><b>Select a source to load config parameters</b></p> <div class="text-center"> - <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load"> + <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)" + (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0 + ?'hover-enable':'hover-disable'"> <i class="icon-use-attributes"></i> <br /> <span>Use Current Template Instance</span> - </a> + </button> <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal" class="mapping-source-load"> <i class="icon-upload-attributes"></i> @@ -119,8 +132,10 @@ <tbody> <tr *ngFor="let dict of resourceDictionaryRes"> <td> - <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg"> + <img *ngIf="dict.definition?.property?.required" + src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict.definition?.property?.required" + src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict.name }}</td> <td>{{ dict.name }}</td> @@ -166,8 +181,10 @@ <tbody> <tr *ngFor="let dict of mappingRes"> <td> - <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg"> + <img *ngIf="dict.definition?.property?.required" + src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict.definition?.property?.required" + src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict['name'] }}</td> <td>{{ dict['name'] }}</td> @@ -193,10 +210,7 @@ </div> - <div class="template-mapping-action"> - <button class="btn btn-outline-secondary">Cancel</button> - <button (click)="saveToStore()" class="btn btn-primary">Submit</button> - </div> + </div> </div> @@ -212,8 +226,8 @@ </button> </div> <div class="modal-body"> - <ngx-file-drop [multiple]="false" [accept]="allowedExt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> + <ngx-file-drop [multiple]="false" [accept]="allowedExt" dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector"> <div class="folder-upload"> <img src="assets/img/folder-upload.svg" /> @@ -248,8 +262,9 @@ <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" (click)="resetTheUploadedFiles()">Cancel </button> - <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" - (click)="uploadFile();openListView()"> + + <button (click)="uploadFile();openListView()" class="btn btn-sm btn-primary" data-dismiss="modal" + type="button"> Import </button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 628d963ce..5129b38d9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../../package-creation.store'; import { TemplateInfo, TemplateStore } from '../../template.store'; @@ -7,7 +7,10 @@ import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.mode import { DataTableDirective } from 'angular-datatables'; import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.model'; import { PackageCreationUtils } from '../../package-creation.utils'; -import { JsonConvert } from 'json2typescript'; +import { JsonConvert, Any } from 'json2typescript'; +import { ToastrService } from 'ngx-toastr'; +import { Router, ActivatedRoute } from '@angular/router'; +import { SharedService } from '../shared-service'; @Component({ selector: 'app-templ-mapp-creation', @@ -16,14 +19,14 @@ import { JsonConvert } from 'json2typescript'; }) export class TemplMappCreationComponent implements OnInit, OnDestroy { @Output() showListViewParent = new EventEmitter<any>(); - + @Output() openList = new EventEmitter<any>(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); private jsonConvert = new JsonConvert(); public files: NgxFileDropEntry[] = []; fileName: any; templateInfo = new TemplateInfo(); - private variables: string[] = []; + variables: string[] = []; dtOptions: DataTables.Settings = {}; // We use this trigger because fetching the list of persons can be quite long, // thus we ensure the data is fetched before rendering @@ -40,35 +43,74 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { dependancies = new Map<string, Array<string>>(); dependanciesSource = new Map<string, string>(); mappingRes = []; - - + currentTemplate: any; + currentMapping: any; + edit = false; constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, - private packageCreationUtils: PackageCreationUtils + private packageCreationUtils: PackageCreationUtils, + private toastr: ToastrService, + private router: ActivatedRoute, + private sharedService: SharedService ) { } ngOnInit() { + if (this.router.snapshot.paramMap.has('id')) { + console.log('URL contains Id'); + this.sharedService.enableEdit(); + } + this.templateStore.state$.subscribe(templateInfo => { - console.log('----------'); + // init Template&mapping vars + console.log('Oninit'); console.log(templateInfo); this.templateInfo = templateInfo; this.fileName = templateInfo.fileName.split('/')[1]; - if (templateInfo.type === 'mapping') { + if (this.fileName) { + this.fileName = this.fileName.split('-')[0]; + } + if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { this.mappingRes = templateInfo.mapping; + this.currentMapping = Object.assign({}, templateInfo); this.resourceDictionaryRes = []; this.resTableDtTrigger.next(); } else { + this.mappingRes = []; + this.currentMapping = Any; + } + this.templateFileContent = templateInfo.fileContent; + this.currentTemplate = Object.assign({}, templateInfo); + + if (templateInfo.type === 'template' || templateInfo.type.includes('template')) { + this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl'; + } else { + this.currentTemplate = Any; + } + + }); + + this.sharedService.isEdit().subscribe(res => { + console.log('------------------------'); + console.log(res); + this.edit = res; - this.templateFileContent = templateInfo.fileContent; + if (!this.edit) { + console.log('remove ----'); + this.currentMapping = {}; + this.currentTemplate = {}; + this.fileName = ''; + this.templateFileContent = ''; + this.resourceDictionaryRes = []; + this.mappingRes = []; } }); this.dtOptions = { pagingType: 'full_numbers', - pageLength: 10, + pageLength: 25, destroy: true, retrieve: true, }; @@ -202,7 +244,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.showListViewParent.emit('tell parent to open create views'); } + closeCreationForm() { + this.openList.emit('close create form and open list'); + } + getMappingTableFromTemplate(e) { + console.log('-' + this.templateFileContent + '-'); this.resourceDictionaryRes = []; if (e) { e.preventDefault(); @@ -210,10 +257,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { if (this.variables && this.variables.length > 0) { console.log('base'); this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => { + let message = 'Attributes are Fetched'; this.mappingRes = []; this.resourceDictionaryRes = res; console.log(this.resourceDictionaryRes); this.rerender(); + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) { + message = 'No values for those attributes'; + } + this.toastr.success(message, 'Success'); + }, err => { + this.toastr.error('Error'); }); } } @@ -224,28 +278,50 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } return map.key; } + cancel() { + this.fileName = ''; + this.templateFileContent = ''; + this.resourceDictionaryRes = []; + this.mappingRes = []; + this.currentMapping = {}; + this.currentTemplate = {}; + this.closeCreationForm(); + } saveToStore() { - console.log(this.dependancies); - console.log(this.dependanciesSource); if (this.fileName) { - // Save Mapping to Store - if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { - const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); - this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', - this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); - this.resourceDictionaryRes = []; - } - // Save Template to store - if (this.templateFileContent) { - this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(), - this.templateFileContent); - this.templateFileContent = ''; + // check file duplication + console.log('----------- mode ' + this.edit); + if ( + (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json') + || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) + || this.edit + ) { + // Save Mapping to Store + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { + const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); + this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', + this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); + this.resourceDictionaryRes = []; + } + // Save Template to store + if (this.templateFileContent) { + this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(), + this.templateFileContent); + this.templateFileContent = ''; + } + this.fileName = ''; + this.toastr.success('File is created', 'success'); + this.closeCreationForm(); + } else { + console.log('this file already exist'); + this.toastr.error('File name already exist', 'Error'); } } else { - + this.toastr.error('Add the file name', 'Error'); } } + selectSource(dict, e) { const source = e.target.value; let keyDepend = null; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index f5e683f28..6ae5c1122 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -1,10 +1,10 @@ -<a *ngIf="isCreate" (click)="openCreationView()" class="create-template-mapping-button"> +<a (click)="openCreationView()" class="create-template-mapping-button"> <i class="fa fa-plus"></i> <span>Create</span> </a> -<div class="template-mapping-accordion"> - <div id="accordion"> +<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0"> + <div class="accordion" id="listAccordion"> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0 d-flex justify-content-between"> @@ -16,15 +16,20 @@ </h5> </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> + <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#listAccordion"> <div class="card-body max-height-list"> <div class="row"> <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">--> <div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)"> - <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{file}} + <a (click)="setSourceCodeEditor(file)" class="template-mapping-list" + [ngClass]="{'active':currentFile == file}">{{file}} <span *ngIf="getValue(file).isMapping">Mapping</span> <span *ngIf="getValue(file).isTemplate">Template</span> + <button type="button" class="deleteTemplate" title="Delete Template"> + <i class="icon-delete-sm"></i> + </button> </a> + </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 372fbca03..338c8f7cd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -4,6 +4,7 @@ import { Mapping, Template } from '../../mapping-models/CBAPacakge.model'; import { TemplateInfo, TemplateStore } from '../../template.store'; import { TemplateAndMapping } from '../TemplateAndMapping'; import { ActivatedRoute } from '@angular/router'; +import { SharedService } from '../shared-service'; @Component({ @@ -13,21 +14,29 @@ import { ActivatedRoute } from '@angular/router'; }) export class TemplMappListingComponent implements OnInit { @Output() showCreationViewParentNotification = new EventEmitter<any>(); + @Output() showFullView = new EventEmitter<any>(); private templateAndMappingMap = new Map<string, TemplateAndMapping>(); private templates: Template; private mapping: Mapping; isCreate = true; + currentFile: string; + edit = false; constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, - private route: ActivatedRoute + private route: ActivatedRoute, + private sharedService: SharedService ) { } ngOnInit() { if (this.route.snapshot.paramMap.has('id')) { this.isCreate = false; + this.sharedService.isEdit().subscribe(res => { + this.edit = res; + }); + } this.packageCreationStore.state$.subscribe(cba => { if (cba.templates) { @@ -69,32 +78,40 @@ export class TemplMappListingComponent implements OnInit { openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); + console.log('disable edit mode'); + this.sharedService.disableEdit(); + + } + FullView() { + this.showFullView.emit('show full view'); } setSourceCodeEditor(key: string) { + this.currentFile = key; const templateKey = 'Templates/' + key + '-template.vtl'; this.packageCreationStore.state$.subscribe(cba => { console.log('cba ------'); console.log(cba); console.log(key); console.log(this.templateAndMappingMap); + const templateInfo = new TemplateInfo(); if (cba.templates && cba.templates.files.has(templateKey)) { const fileContent = cba.templates.getValue(templateKey.trim()); console.log(fileContent); - const templateInfo = new TemplateInfo(); templateInfo.fileContent = fileContent; templateInfo.fileName = templateKey; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type = 'template'; } const mappingKey = 'Templates/' + key + '-mapping.json'; if (cba.mapping && cba.mapping.files.has(mappingKey)) { const obj = JSON.parse(cba.mapping.getValue(mappingKey)); - const templateInfo = new TemplateInfo(); templateInfo.mapping = obj; templateInfo.fileName = mappingKey; - templateInfo.type = 'mapping'; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type += 'mapping'; } + this.templateStore.changeTemplateInfo(templateInfo); + this.FullView(); + this.sharedService.enableEdit(); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html index f8cfe7a6a..80df7c637 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html @@ -1,9 +1,10 @@ <div *ngIf="!listView"> - <app-templ-mapp-listing - (showCreationViewParentNotification)="openCreationView($event)"> + <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)" + (showFullView)="openListView($event)"> </app-templ-mapp-listing> </div> -<div *ngIf="!creationView"> - <app-templ-mapp-creation (showListViewParent)="openListView($event)"></app-templ-mapp-creation> -</div> +<div [hidden]="creationView"> + <app-templ-mapp-creation (showListViewParent)="openListView($event)" (openList)="closeCreationView()"> + </app-templ-mapp-creation> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts index 106765834..d2e25ef6f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts @@ -8,8 +8,8 @@ import { PackageCreationStore } from '../package-creation.store'; styleUrls: ['./template-mapping.component.css'] }) export class TemplateMappingComponent implements OnInit { - creationView = true; - listView = false; + creationView = false; + listView = true; constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) { } @@ -17,7 +17,7 @@ export class TemplateMappingComponent implements OnInit { ngOnInit() { if (this.route.snapshot.paramMap.has('id')) { console.log('Edit mode'); - this.creationView = false; + this.creationView = true; this.listView = false; } else { console.log('Create mode'); @@ -34,4 +34,9 @@ export class TemplateMappingComponent implements OnInit { this.creationView = false; } + closeCreationView() { + this.creationView = true; + this.listView = false; + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts index 2332d8e53..8275f8c6c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts @@ -37,10 +37,12 @@ export class PackagesApiService { } getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> { + const sortType = sortBy.includes('DATE') ? 'DESC' : 'ASC'; return this.api.get(BlueprintURLs.getPagedBlueprints, { offset: pageNumber, limit: pageSize, - sort: sortBy + sort: sortBy, + sortType }); } @@ -56,11 +58,12 @@ export class PackagesApiService { } getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) { - + const sortType = sortBy.includes('DATE') ? 'DESC' : 'ASC'; return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, { offset: pageNumber, limit: pageSize, - sort: sortBy + sort: sortBy, + sortType }); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 07c192d2c..c65d08e77 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,6 +1,6 @@ <div class="dropdown packagesFilter w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Filter By Tags {{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div> + <div class="dropdown-text">Filter By Tags <span class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div> <ul class="dropdown-content w-100"> <li> <div class="form-group"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 9db3ce110..9c789941d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -3,7 +3,7 @@ <!--Add Package Card--> <div class="card addPaackage-card"> <div class="card-body text-center"> - <img src="/assets/img/icon-addPackage.svg" width="40%"> + <img src="/assets/img/icon-addPackage.svg" width="30%"> </div> <div class="card-footer row"> <div class="col text-center"> @@ -12,7 +12,7 @@ Package </a> <br /> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i + <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i class="icon-import-blue" aria-hidden="true"></i>Import Package </a> </div> @@ -30,7 +30,7 @@ <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> --> <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom"> {{bluePrint.artifactName}}</p> - <span class="package-version">{{bluePrint.artifactVersion}}</span> + <span class="package-version">version {{bluePrint.artifactVersion}}</span> </a> </div> @@ -107,15 +107,16 @@ </div> <div class="card-footer"> <div class="row"> + + <div class="col"> + <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i + class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> + </div> <div class="col"> <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode </button> </div> - <div class="col"> - <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i - class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> - </div> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts index 49f91316b..c242b7e72 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts @@ -1,6 +1,5 @@ -import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {PackagesStore} from '../../packages.store'; -import {map} from 'rxjs/operators'; @Component({ selector: 'app-package-pagination', @@ -18,7 +17,7 @@ export class PackagePaginationComponent implements OnInit { this.packagesStore.state$ .subscribe(state => { - this.pageNumber = state.currentPage; + this.pageNumber = state.currentPage + 1; this.totalCount = state.totalPackages; }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts index ad06cf15f..f357bc167 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -12,10 +12,10 @@ const routes: Routes = [ path: '', component: PackagesDashboardComponent }, - {path: 'designer', component: DesignerComponent}, - { path: 'designer/source', component: DesignerSourceViewComponent }, + {path: 'designer/:id', component: DesignerComponent}, + {path: 'designer/source/:id', component: DesignerSourceViewComponent}, {path: 'package/:id', component: ConfigurationDashboardComponent}, - {path: 'createPackage', component: PackageCreationComponent}, + {path: 'createPackage', component: PackageCreationComponent} ]; @NgModule({ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts index 96d188a54..7911c028c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts @@ -21,10 +21,6 @@ import { Sources } from './sources.model'; export class Definition { - tag: string; - name: string; - property: string; - updatedBy: string; sources: Sources[]; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts index e4b9be75f..609b066e2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts @@ -26,4 +26,7 @@ export class MetaData { public entrySchema: string; public updatedBy: string; public createdDate: string; + public libraryInstance: string; + public required: string; + public derivedFrom: string; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts new file mode 100644 index 000000000..85686551e --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts @@ -0,0 +1,26 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { MetaData } from './metaData.model'; +import { Definition } from './definition.model'; + +export class ResourceDictionary { + public metaData: MetaData; + public definition: Definition; +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts index 4074e5138..35d3f77c3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts @@ -17,8 +17,6 @@ * limitations under the License. * ============LICENSE_END========================================================= */ - export class Sources { sources: []; - } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts new file mode 100644 index 000000000..896c7caf0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts @@ -0,0 +1,31 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { TestBed } from '@angular/core/testing'; + +import { DictionaryCreationService } from './dictionary-creation.service'; + +describe('DictionaryCreationService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: DictionaryCreationService = TestBed.get(DictionaryCreationService); + expect(service).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts new file mode 100644 index 000000000..df90e6cd1 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts @@ -0,0 +1,37 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { ResourceDictionaryURLs } from 'src/app/common/constants/app-constants'; +import { Observable } from 'rxjs'; +import { Sources } from '../model/sources.model'; +import { ApiService } from 'src/app/common/core/services/api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class DictionaryCreationService { + + constructor(private api: ApiService) { } + + getSources() { + return this.api.get(ResourceDictionaryURLs.getSources); +} + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts new file mode 100644 index 000000000..20cec7448 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts @@ -0,0 +1,53 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { Store } from 'src/app/common/core/stores/Store'; +import { ResourceDictionary } from '../model/resource-dictionary.model'; +import { DictionaryCreationService } from './dictionary-creation.service'; +import { MetaData } from '../model/metaData.model'; +import { Sources } from '../model/sources.model'; +import { SourcesStore } from './sources-template/sources.store'; + +@Injectable({ + providedIn: 'root' +}) +export class DictionaryCreationStore extends Store<ResourceDictionary> { + constructor(private dictionaryCreationService: DictionaryCreationService, private sourcesStore: SourcesStore) { + super(new ResourceDictionary()); + } + + changeMetaData(metaDataObject: MetaData) { + console.log(metaDataObject); + this.setState({ + ...this.state, + metaData: metaDataObject + }); + } + + getSources() { + this.sourcesStore.state$.subscribe(data => { + console.log(data); + }); + } + + SaveResourceDictionary(resourceDictionary: ResourceDictionary) { + console.log(this.setState); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css new file mode 100644 index 000000000..f263c0086 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html new file mode 100644 index 000000000..93d7df7d1 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html @@ -0,0 +1,22 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/--> +<ace-editor [(text)]="text" [mode]="'javascript'" [autoUpdateContent]="true" +[durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:500px;"> +</ace-editor> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts new file mode 100644 index 000000000..09dcdbd37 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { DictionaryEditorComponent } from './dictionary-editor.component'; + +describe('DictionaryEditorComponent', () => { + let component: DictionaryEditorComponent; + let fixture: ComponentFixture<DictionaryEditorComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DictionaryEditorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DictionaryEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts new file mode 100644 index 000000000..92b27c24c --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts @@ -0,0 +1,38 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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-dictionary-editor', + templateUrl: './dictionary-editor.component.html', + styleUrls: ['./dictionary-editor.component.css'] +}) +export class DictionaryEditorComponent implements OnInit { + constructor() { + } + + ngOnInit() { + } + + textChanged(event) { + console.log(event); + } +} + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css new file mode 100644 index 000000000..f263c0086 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html new file mode 100644 index 000000000..bea6081c0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html @@ -0,0 +1,91 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/--> +<div class="card creat-card col-11"> + <div class="single-line-model"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.name" + placeholder="Topology name.vLB.CDS"> + </div> + <!-- <div class="model-note-container error-message"> + Package name already exists with this version. Please enter a different name or enter different version + number. + </div> --> + </div> + + <!-- <div class="single-line-model"> + <label class="label-name">Version <span>*</span></label> + <div class="label-input"> + <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version" + (input)="validatePackageNameAndVersion()" placeholder="Example: 1.0.0"> + </div> + <div class="model-note-container error-message">{{errorMessage}}</div> + </div> --> + <div class="single-line-model"> + <label class="label-name">Entry Schema</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.entrySchema" placeholder="Entry Schema"> + </div> + </div> + <div class="single-line-model"> + <label class="label-name">Data Type</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.dataType" placeholder="Data Type"> + </div> + </div> + <div class="single-line-model"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> + </div> + </div> + <div class="single-line-model"> + <label class="label-name">Required</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.updatedBy" placeholder="required"> + </div> + </div> + <div class="single-line-model"> + <label class="label-name">Library Instance</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance"> + </div> + </div> + <div class="single-line-model"> + <label class="label-name">Derived From</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From"> + </div> + </div> + + <div class="single-line-model"> + <label class="label-name">Tags</label> + <div class="label-input"> + <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags" + placeholder="Ex., vDNS-CDS"> + + </div> + <div class="model-note-container tag-notes">Seprate tags with comma or space</div> + <div class="model-note-container tages-container"> + <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)" + class="fa fa-times-circle"></i></span> + </div> + </div> +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts new file mode 100644 index 000000000..ce9335ff9 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { DictionaryMetadataComponent } from './dictionary-metadata.component'; + +describe('DictionaryMetadataComponent', () => { + let component: DictionaryMetadataComponent; + let fixture: ComponentFixture<DictionaryMetadataComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DictionaryMetadataComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DictionaryMetadataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts new file mode 100644 index 000000000..d5c4a109b --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts @@ -0,0 +1,78 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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'; +import { ActivatedRoute } from '@angular/router'; +import { DictionaryModel } from '../../model/dictionary.model'; +import { DictionaryCreationService } from '../dictionary-creation.service'; +import { DictionaryCreationStore } from '../dictionary-creation.store'; +import { MetaData } from '../../model/metaData.model'; + +@Component({ + selector: 'app-dictionary-metadata', + templateUrl: './dictionary-metadata.component.html', + styleUrls: ['./dictionary-metadata.component.css'] +}) +export class DictionaryMetadataComponent implements OnInit { + packageNameAndVersionEnables = true; + counter = 0; + tags = new Set<string>(); + private metaDataTab: MetaData = new MetaData(); + private errorMessage: string; + + constructor( + private route: ActivatedRoute, + private dictionaryCreationService: DictionaryCreationService, + private dictionaryCreationStore: DictionaryCreationStore + ) {} + + ngOnInit() { + this.dictionaryCreationStore.state$.subscribe(element => { + if (element && element.metaData) { + this.metaDataTab.name = element.metaData.name; + this.metaDataTab.description = element.metaData.description; + this.metaDataTab.dataType = element.metaData.dataType; + this.metaDataTab.tags = element.metaData.tags; + this.metaDataTab.entrySchema = element.metaData.entrySchema; + this.metaDataTab.required = element.metaData.required; + this.metaDataTab.libraryInstance = element.metaData.libraryInstance; + this.metaDataTab.derivedFrom = element.metaData.derivedFrom; + console.log(element); + } + }); + console.log(this.metaDataTab.name); + } + + removeTag(value) { + this.tags.delete(value); + } + + addTag(event) { + const value = event.target.value; + console.log(value); + if (value && value.trim().length > 0) { + event.target.value = ''; + this.tags.add(value); + } + } + + saveMetaDataToStore() { + this.dictionaryCreationStore.changeMetaData(this.metaDataTab); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css new file mode 100644 index 000000000..f02bd233d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css @@ -0,0 +1,37 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/ +.edit-button{ + color:white; + background:#1B3E6F; + margin-right: 60px; + border: none; + width: 80px; + height: 20px; + margin-top: 25px; + font-size: 10px; + padding-left:5px; + padding-top: 3px; + } + .ed{ + justify-content: space-between; + } + .single-line-model{ + margin:20px; + }
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html new file mode 100644 index 000000000..bf183216d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html @@ -0,0 +1,122 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/--> +<app-header></app-header> + +<div class="new-wrapper"> + <div class="container-fluid main-container"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0 pb-0"> + <ul class="breadcrumb-header"> + <li><a routerLink="/resource-dictionary">Resource Dictionary</a></li> + <i class="fa fa-angle-right ml-2 mr-2"></i> + <li>Dictionary Name</li> + </ul> + </h2> + </div> + </header> + <div class="container-fluid body-container"> + <div class="container card creat-card col-11"> + <div class="single-line-model customKeyTitle"> + <h5 class="label-name w-100 "> + Dictionary Name + </h5> + <!-- <label class="label-name"></label> --> + <span>Last modified {{createDate}} by me</span> + </div> + </div> + </div> + <div class="container-fluid body-container"> + <div class="container"> + <div class="creat-action-container"> + <a class="action-button" (click)="saveDictionaryToStore()"> + <i class="icon-save-sm" aria-hidden="true"></i> + <span>Save</span> + </a> + <a href="#" class="action-button" (click)="goBackToDashBorad()"> + <i class="icon-discard-sm" aria-hidden="true"></i> + <span>Discard Changes</span> + </a> + <a href="#" class="action-button"> + <i class="icon-clone-sm" aria-hidden="true"></i> + <span>Clone</span> + </a> + <a href="#" class="action-button delete"> + <i class="icon-delete-sm" aria-hidden="true"></i> + <span>Delete</span> + </a> + </div> + <nav class="row"> + <!--Nav Tabs--> + <div class="col"> + <div class="nav nav-tabs ed" id="nav-tab" role="tablist"> + <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" + href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false" + autofocus #nameit (focusout)="test()">METADATA</a> + <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor" + role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a> + + </div> + </div> + </nav> + <div> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <app-dictionary-metadata></app-dictionary-metadata> + <nav class="row"> + <!--Nav Tabs--> + <div class="col"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a class="nav-item nav-link active" id="nav-source-tab" data-toggle="tab" + href="#nav-source" role="tab" aria-controls="nav-source" aria-selected="false" + >SOURCES</a> + </div> + </div> + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-source" role="tabpanel" + aria-labelledby="nav-source-tab"> + <app-sources-template></app-sources-template> + </div> + </div> + </div> + </div> + </div> + <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel" + aria-labelledby="nav-editor-tab"> + <div class="card creat-card"> + <div class="editor-container"> + <app-dictionary-editor></app-dictionary-editor> + </div></div> + </div> + </div> + </div> + </div> + + + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts new file mode 100644 index 000000000..b1e6b6d24 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { ResourceDictionaryCreationComponent } from './resource-dictionary-creation.component'; + +describe('ResourceDictionaryCreationComponent', () => { + let component: ResourceDictionaryCreationComponent; + let fixture: ComponentFixture<ResourceDictionaryCreationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceDictionaryCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceDictionaryCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts new file mode 100644 index 000000000..1a3484bae --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts @@ -0,0 +1,76 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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, ViewChild, ElementRef } from '@angular/core'; +import { Router } from '@angular/router'; +import { DictionaryCreationStore } from './dictionary-creation.store'; +import { DictionaryModel } from '../model/dictionary.model'; +import { Definition } from '../model/definition.model'; +import { DictionaryMetadataComponent } from './dictionary-metadata/dictionary-metadata.component'; +import { SourcesTemplateComponent } from './sources-template/sources-template.component'; + +@Component({ + selector: 'app-resource-dictionary-creation', + templateUrl: './resource-dictionary-creation.component.html', + styleUrls: ['./resource-dictionary-creation.component.css'] +}) +export class ResourceDictionaryCreationComponent implements OnInit { + + constructor(private router: Router, private dictionaryCreationStore: DictionaryCreationStore) { + } + + modes: object[] = [ + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'} + ]; + + private metaDataTab: DictionaryModel = new DictionaryModel(); + private definition: Definition = new Definition(); + + @ViewChild(DictionaryMetadataComponent, {static: false}) + private metadataTabComponent: DictionaryMetadataComponent; + + @ViewChild(SourcesTemplateComponent, {static: false}) + private sourcesTemplateComponent: SourcesTemplateComponent; + + @ViewChild('nameit', {static: true}) + private elementRef: ElementRef; + + ngOnInit() { + this.elementRef.nativeElement.focus(); + // this.elementRef2.nativeElement.focus(); + } + + saveDictionaryToStore() { + this.dictionaryCreationStore.getSources(); + this.dictionaryCreationStore.state$.subscribe(dd => { + console.log(dd); + }); + } + + test() { + this.metadataTabComponent.saveMetaDataToStore(); + this.sourcesTemplateComponent.saveSorcesDataToStore(); + } + + goBackToDashBorad() { + this.router.navigate(['/resource-dictionary']); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css new file mode 100644 index 000000000..7799d915f --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css @@ -0,0 +1,208 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/ +.source{ + left: 20px; + width: 72%; +} +.source1{ + width: 25%; + background-color:#F4F9FE; +} +h5{ + padding-top: 10px; + padding-left: 10px; + background-color:white; + height: 40px; + width: 100%; +} +.mat-form-field + .mat-form-field { + margin-left: 8px; +} +mat-expansion-panel-header{ + background-color:#E0E8F2; +} +mat-panel-title{ + color:#1B3E6F; +} +mat-expansion-panel{ + border-radius: 0px; + border-left: none; +} +.example-list .card{ + margin-bottom: 10px !important; +} +.expansion-panel{ + border: none; + background: white; + border-radius: 0px; + overflow: hidden; + display: block; + width: 100%; + color:#1B3E6F; + } +.example-container { + width: 230px; + max-width: 100%; + margin: 10px 10px 15px 0; + display: inline-block; + vertical-align: top; + border-radius: 2px; + height: 260px; + background-color:#F4F9FE; + } + .example-container2 { + width: 630px; + max-width: 100%; + margin: 10px 10px 5px 0; + display: inline-block; + vertical-align: top; + border-radius: 2px; + height: 300px; + background-color:#F4F9FE; + } + + .example-list { + min-height: 12px; + border-radius: 0px; + overflow: hidden; + display: block; + margin: 5px; + overflow-y:scroll; + overflow-x:hidden; + margin-left: 15px; + width: 195px; + margin-top: 15px; + } + + .example-list1 { + min-height: 12px; + border-radius: 0px; + overflow: hidden; + display: block; + margin: 5px; + overflow-y:hidden; + overflow-x:hidden; + } + + .checkbox{ + margin-left: 11%; + } + .example-box { + padding: 2px 1px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + box-sizing: border-box; + cursor: move; + font-size: 14px; + + } + .example-box1 { + padding: 1px 1px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + box-sizing: border-box; + cursor: move; + font-size: 14px; + border-radius: 0px !important; + } + + .cdk-drag-preview { + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + + .cdk-drag-placeholder { + opacity: 0; + } + + .cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + + .example-box:last-child { + border: none; + } + + .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + +.searchText{ + width: 180px; + /* border-top: solid 2px #F4F9FE; */ + border: 0px; + color: #1B3E6F; + font-size: 13px; + margin-top: 2px; +} +.searchBox{ + position: relative; + top: 0%; + right: 0%; + height: 35px; + border-top: solid 2px #F4F9FE; + width: 100%; + margin-left:0px; + background-color:white; +} + +.searchButton1{ + float: left; + padding-left: 0 !important; + height: 30px; + width:30px; + background: url(src/assets/img/icon-search.svg) center center no-repeat; + border: 0 !important; + margin-right:0px; +} +.action-button1{ + margin-left:50px; + padding: 1px 6px; + box-shadow: none; + color:white; + font-size: 14px; + height: 25px; + background-color:#007bff; + border-radius:16px; + border:solid 0.5px #ededed; +} +.footer{ + margin: 1px 0px; +} +.delete{ + color: red; + font-size: 14px; + margin: 2px; +} +.footer input{ + margin: 6px 0px 1px 5px; +} +.select-button{ + color: #007bff; + font-size: 14px; + margin: 2px; +}
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html new file mode 100644 index 000000000..b274ce95d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html @@ -0,0 +1,85 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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========================================================= +*/--> +<div class="col-11"> + <div class= "row "> + <div class="card creat-card source1"> + <h5 class="label-name"> Sources Options</h5> + <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i> + <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources"> + </div> + + <div class="example-container"> + <div + cdkDropList + #todoList="cdkDropList" + [cdkDropListData]="option" + [cdkDropListConnectedTo]="[doneList]" + class="example-list" + (cdkDropListDropped)="drop($event)"> + <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag> + <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)"> + {{item.name}} + </div> + + </div> + + </div> + <div class="footer row"> + <a class="select-button col-sm-05">Select all</a> + <button class="action-button1 col-sm-04" >Add to list</button> + </div> + </div> + + <div class="card creat-card source"> + <h5 class="label-name">Sources List</h5> + <div class="example-container2 card creat-card"> + <div + cdkDropList + #doneList="cdkDropList" + [cdkDropListData]="sourcesOptions" + [cdkDropListConnectedTo]="[todoList]" + class="example-list1" + (cdkDropListDropped)="drop($event)"> + + <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag> + <input type="checkbox" value="item.name"> + <mat-expansion-panel class="expansion-panel"> + <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'"> + <mat-panel-title> + {{item.name}} + </mat-panel-title> + </mat-expansion-panel-header> + <br> + <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true" + [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> + </ace-editor> + </mat-expansion-panel> + </div> + + </div> + + </div> + <div> + <a type="submit" class="delete">Delete</a> + </div> + </div> +</div> +</div> + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts new file mode 100644 index 000000000..e9bd4ff43 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { SourcesTemplateComponent } from './sources-template.component'; + +describe('SourcesTemplateComponent', () => { + let component: SourcesTemplateComponent; + let fixture: ComponentFixture<SourcesTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SourcesTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SourcesTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts new file mode 100644 index 000000000..4a4f215cd --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts @@ -0,0 +1,109 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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'; +import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; +import { SourcesStore } from './sources.store'; + +@Component({ + selector: 'app-sources-template', + templateUrl: './sources-template.component.html', + styleUrls: ['./sources-template.component.css'] +}) +export class SourcesTemplateComponent implements OnInit { + private searchQuery = ''; + lang = 'json'; + sources = []; + option = []; + sourcesOptions = []; + textValue: any; + selectItem: boolean; + ddSource = []; + checked: boolean; + selectedArray = []; + constructor(private sourcesStore: SourcesStore) { + this.sourcesStore.state$.subscribe(sources => { + this.sources = sources.sources; + for (const key in this.sources) { + if (key) { + const sourceObj = { name: key, value: JSON.stringify(this.sources[key] )}; + this.option.push(sourceObj); + } + } + }); + } + + ngOnInit() { + this.sourcesStore.getAllSources(); + } + + saveSorcesDataToStore() { + this.sourcesStore.saveSources(this.ddSource); + } + + drop(event: CdkDragDrop<string[]>) { + this.ddSource = []; + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem(event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex); + } + + for (const key2 in this.sources) { + if (key2) { + const originalSources = this.sourcesOptions; + for (const key of originalSources) { + if (key.name === key2) { + const obj = `{${key.name}: ${key.value}}`; + this.ddSource.push(obj); + } + } + } + } + } + + searchDictionary(event: any) { + this.searchQuery = event.target.value; + this.searchQuery = this.searchQuery.trim(); + console.log(this.searchQuery); + // this.dictionaryStore.search(this.searchQuery); + } + + onChange(item: string, isChecked: boolean) { + if (isChecked) { + this.selectedArray.push(item); + } + } + + textChanged(event, item) { + const editedData = JSON.parse(event); + const originalSources = this.sources; + for (const key in originalSources) { + if (key === item.name) { + this.sources[key] = editedData; + } + } + this.option = []; + this.sourcesStore.changeSources(this.sources); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts new file mode 100644 index 000000000..7da8f03d3 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts @@ -0,0 +1,60 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file 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 { Sources } from '../../model/sources.model'; +import { Store } from 'src/app/common/core/stores/Store'; +import { Injectable } from '@angular/core'; +import { DictionaryCreationService } from '../dictionary-creation.service'; +import { Definition } from '../../model/definition.model'; + +@Injectable({ + providedIn: 'root' +}) +export class SourcesStore extends Store<Sources> { + constructor(private dictionaryCreationService: DictionaryCreationService) { + super(new Sources()); + } + + public getAllSources() { + console.log('getting all sources...'); + this.getSources(); + } + + protected getSources() { + this.dictionaryCreationService.getSources() + .subscribe((sou) => { + console.log(sou); + this.setState({ + ...this.state, + sources: sou + }); + }); + } + + public changeSources(sou) { + this.setState({ + ...this.state, + sources: sou + }); + } + + public saveSources(sources) { + console.log(sources); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html index 1cedeeb09..b6fbf5939 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html @@ -28,7 +28,7 @@ <div class="card-footer row"> <div class="col text-center"> <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true" - class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package + class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Dictionary </a> <br/> <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts index eb29c4c87..04b66c7bd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts @@ -17,15 +17,19 @@ * limitations under the License. * ============LICENSE_END========================================================= */ - import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component'; +import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component'; const routes: Routes = [ { path: '', component: ResourceDictionaryDashboardComponent + }, + { + path: 'createDictionary', + component: ResourceDictionaryCreationComponent } ]; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts index 5bd6710f8..3f0f89b0d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts @@ -36,6 +36,13 @@ import { SortDictionaryComponent } from './resource-dictionary-dashboard/sort-di import { DictionaryPaginationComponent } from './resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component'; import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; import { DictionaryListComponent } from './resource-dictionary-dashboard/dictionary-list/dictionary-list.component'; +import { SearchPipe } from 'src/app/common/core/pipes/search.pipe'; +import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component'; +import { DictionaryMetadataComponent } from './resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component'; +import { SourcesTemplateComponent } from './resource-dictionary-creation/sources-template/sources-template.component'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { MatExpansionModule } from '@angular/material'; +import { DictionaryEditorComponent } from './resource-dictionary-creation/dictionary-editor/dictionary-editor.component'; @NgModule({ declarations: [ @@ -46,6 +53,11 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction SortDictionaryComponent, DictionaryPaginationComponent, DictionaryListComponent, + ResourceDictionaryCreationComponent, + DictionaryMetadataComponent, + SourcesTemplateComponent, + SearchPipe, + DictionaryEditorComponent, ], imports: [ CommonModule, @@ -57,6 +69,8 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction NgxFileDropModule, AceEditorModule, DataTablesModule, + DragDropModule, + MatExpansionModule, ] }) export class ResourceDictionaryModule { } diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differindex 3f1e99995..01dd66cf8 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg index 456e5d20d..6d0d75fd1 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg @@ -10,6 +10,8 @@ <glyph unicode="" glyph-name="icon-use-attributes" horiz-adv-x="1317" d="M503.303 834.341l-16.724 93.659h-468.293v-967.805h1280v874.146h-794.983zM611.456 459.707v-249.756h-93.659v249.756h93.659zM424.139 553.366v-343.415h-93.659v343.415h93.659zM798.774 209.951h-93.659v374.634h93.659v-374.634zM986.091 209.951h-93.659v312.195h93.659v-312.195z" /> <glyph unicode="" glyph-name="icon-upload-attributes" horiz-adv-x="922" d="M529.527 737.239h109.614l-167.773 176.492v-118.106c0-31.992 25.947-58.386 58.159-58.386zM347.671 292.095h-194.394c-9.841 0-17.894 8.045-17.894 17.894 0 9.841 8.053 17.894 17.894 17.894h206.25c11.402 29.076 26.614 53.689 45.409 78.295h-251.659c-9.841 0-17.894 8.045-17.894 17.894 0 9.841 8.053 17.894 17.894 17.894h285.659c53.682 46.977 124.818 76.947 202.439 76.947 7.379 0 13.424-0.667 22.371-1.341v183.879h-134.22c-51.894 0-93.947 42.5-93.947 94.174v145.174h-343.144c-44.295 0-79.636-36.235-79.636-80.75v-682.712c0-44.515 35.341-79.856 79.636-79.856h269.545c-15.432 35.788-23.932 76.053-23.932 118.106-0.227 26.394 3.356 51.902 9.621 76.508zM153.277 553.815h226.606c9.841 0 17.894-8.053 17.894-17.902 0-9.841-8.053-17.894-17.894-17.894h-226.606c-9.841 0-17.894 8.053-17.894 17.894 0 9.848 8.053 17.902 17.894 17.902zM641.148 482.452c-147.409 0-267.311-119.894-267.311-267.311 0-147.409 119.902-267.311 267.311-267.311 147.417 0 267.318 119.902 267.318 267.311 0 147.417-119.902 267.311-267.318 267.311zM784.095 211.118c-3.356-3.136-7.833-4.705-12.083-4.705-4.697 0-9.394 2.015-12.977 5.598l-99.765 107.371v-255.455c0-9.848-8.053-17.902-17.894-17.902s-17.894 8.053-17.894 17.902v255.674l-100.212-107.371c-6.712-7.159-18.348-7.606-25.508-0.894-7.152 6.712-7.606 18.121-0.894 25.28l131.083 140.705c3.356 3.576 8.053 5.591 13.197 5.591 5.152 0 9.621-2.015 13.205-5.591l131.083-140.705c6.265-7.386 5.811-18.795-1.341-25.5z" /> <glyph unicode="" glyph-name="icon-enter-link" d="M677.571 421.241h-644.248c-18.395 0-33.323 14.929-33.323 33.323s14.929 33.323 33.323 33.323h644.248c18.395 0 33.323-14.929 33.323-33.323s-14.929-33.323-33.323-33.323zM499.849 243.519c-8.534 0-17.060 3.238-23.552 9.771-13.017 13.017-13.017 34.121 0 47.146l154.177 154.169-154.177 154.177c-13.017 13.017-13.017 34.129 0 47.146 13.025 13.017 34.129 13.017 47.146 0l177.722-177.73c13.017-13.017 13.017-34.121 0-47.137l-177.722-177.722c-6.533-6.582-15.059-9.82-23.593-9.82v0zM533.173-34.18c-202.21 0-380.728 121.651-454.884 309.957-6.753 17.060 1.684 36.431 18.793 43.184 17.060 6.663 36.48-1.643 43.232-18.842 64.027-162.573 218.245-267.652 392.859-267.652 232.726 0 422.098 189.372 422.098 422.098s-189.372 422.098-422.098 422.098c-174.614 0-328.832-105.079-392.859-267.652-6.801-17.199-26.172-25.505-43.232-18.842-17.109 6.753-25.546 26.123-18.793 43.184 74.156 188.306 252.675 309.957 454.884 309.957 269.475 0 488.744-219.27 488.744-488.744s-219.27-488.744-488.744-488.744z" /> +<glyph unicode="" glyph-name="icon-action-close" d="M1011.886 947.884c-16.154 16.154-42.344 16.154-58.498 0l-941.272-941.27c-16.154-16.154-16.154-42.344 0-58.498 8.076-8.080 18.664-12.116 29.25-12.116s21.172 4.039 29.25 12.119l941.27 941.27c16.152 16.152 16.152 42.342 0 58.496zM1011.884 6.612l-941.272 941.27c-16.152 16.154-42.344 16.154-58.496 0-16.154-16.152-16.154-42.342 0-58.496l941.272-941.272c8.076-8.078 18.664-12.117 29.25-12.117s21.174 4.039 29.248 12.115c16.15 16.156 16.15 42.346-0.002 58.5z" /> +<glyph unicode="" glyph-name="icon-action-back" horiz-adv-x="1422" d="M479.778 915.244c19.067 19.733 50.8 19.733 70.533 0 19.067-19.067 19.067-50.8 0-69.822l-357.644-357.644h1180.178c27.511-0.044 49.378-21.911 49.378-49.422s-21.867-50.089-49.378-50.089h-1180.178l357.644-356.978c19.067-19.733 19.067-51.511 0-70.533-19.733-19.733-51.511-19.733-70.533 0l-442.311 442.311c-19.733 19.067-19.733 50.8 0 69.822l442.311 442.356z" /> <glyph unicode="" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" /> <glyph unicode="" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" /> <glyph unicode="" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" /> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf Binary files differindex 85433c9af..d08d2740b 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differindex 7062f6c01..b6d35bcac 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css index 4e99ab416..dc7de38e5 100755 --- a/cds-ui/designer-client/src/assets/icomoon/style.css +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?njx1om'); - src: url('fonts/icomoon.eot?njx1om#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?njx1om') format('truetype'), - url('fonts/icomoon.woff?njx1om') format('woff'), - url('fonts/icomoon.svg?njx1om#icomoon') format('svg'); + src: url('fonts/icomoon.eot?hdnbak'); + src: url('fonts/icomoon.eot?hdnbak#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?hdnbak') format('truetype'), + url('fonts/icomoon.woff?hdnbak') format('woff'), + url('fonts/icomoon.svg?hdnbak#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -35,6 +35,14 @@ -moz-osx-font-smoothing: grayscale; } +.icon-action-back:before { + content: "\e904"; + color: #1b3e6f; +} +.icon-action-close:before { + content: "\e903"; + color: #1b3e6f; +} .icon-enter-link:before { content: "\e902"; } diff --git a/cds-ui/designer-client/src/assets/img/icon-action-custom-hover.svg b/cds-ui/designer-client/src/assets/img/icon-action-custom-hover.svg new file mode 100644 index 000000000..593fc5cc7 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-custom-hover.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="157px" viewBox="0 0 131 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon+hover</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.1.1-Designer---Blank-action" transform="translate(-280.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="custom"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon+hover" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(-0.000000, 7.222222)"> + <polygon id="Path" fill="#E0E8F2" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,-3.83693077e-13 L14.3221933,-3.83693077e-13 C11.7443396,-3.83693077e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429687,18.9959491 L125.429687,110.806568 C125.429687,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601562,113.054109 91.6601562,115.630787 L91.6601562,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.547327 96.2516275,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-3.83693077e-13 125.279225,-3.83693077e-13 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 L98.8964844,130.253906 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-custom.svg b/cds-ui/designer-client/src/assets/img/icon-action-custom.svg new file mode 100644 index 000000000..2ecdf204c --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-custom.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="157px" viewBox="0 0 131 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.0-Designer---First-action-options" transform="translate(-280.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="custom"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(-0.000000, 7.222222)" fill="#E0E8F2"> + <polygon id="Path" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,-3.83693077e-13 L14.3221933,-3.83693077e-13 C11.7443396,-3.83693077e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429687,18.9959491 L125.429687,110.806568 C125.429687,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601562,113.054109 91.6601562,115.630787 L91.6601562,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.547327 96.2516275,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-3.83693077e-13 125.279225,-3.83693077e-13 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 L98.8964844,130.253906 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-default-hover.svg b/cds-ui/designer-client/src/assets/img/icon-action-default-hover.svg new file mode 100644 index 000000000..22959e9f0 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-default-hover.svg @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="157px" viewBox="0 0 131 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon-hover</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.2.1-Designer---Default-action" transform="translate(-530.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(130.000000, 132.000000)"> + <g id="default" transform="translate(220.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon-hover" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 7.222222)"> + <polygon id="Path" fill="#E0E8F2" points="110.957031 86.6995804 110.957031 86.8406395 12.0605469 86.3986545 11.4751518 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M129.95298,38.443287 C129.95298,29.2156758 122.446289,21.7089844 113.218678,21.7089844 C103.991066,21.7089844 96.484375,29.2156758 96.484375,38.443287 C96.484375,46.9033022 102.796766,53.9127604 110.957031,55.0200739 L110.957031,62.5643808 L115.480324,62.5643808 L115.480324,55.0200739 C123.641764,53.9127604 129.95298,46.9033022 129.95298,38.443287 Z M113.218678,50.6542969 C106.48546,50.6542969 101.007668,45.1765046 101.007668,38.443287 C101.007668,31.7100694 106.48546,26.2322772 113.218678,26.2322772 C119.951895,26.2322772 125.429688,31.7100694 125.429688,38.443287 C125.429688,45.1765046 119.951895,50.6542969 113.218678,50.6542969 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <path d="M106.132812,60.3027344 L106.132812,79.4491464 C106.132812,82.0258247 108.22989,84.1229022 110.806568,84.1229022 L115.630787,84.1229022 C118.207465,84.1229022 120.304543,82.0258247 120.304543,79.4491464 L120.304543,60.3027344 L106.132812,60.3027344 Z" id="Path" fill="#E0E8F2"></path> + <path d="M125.279225,-5.40012479e-13 L14.3221933,-5.40012479e-13 C11.7443396,-5.40012479e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429688,18.9959491 L125.429688,23.9706308 L129.95298,23.9706308 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-5.40012479e-13 125.279225,-5.40012479e-13 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <path d="M125.429688,110.806568 C125.429688,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601563,113.054109 91.6601563,115.630787 L91.6601563,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.548502 96.250452,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,52.9159433 L125.429688,52.9159433 L125.429688,110.806568 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,125.128762 L98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <g id="action" transform="translate(34.000000, 35.000000)"> + <g id="1"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="2" transform="translate(21.000000, 0.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="3" transform="translate(41.000000, 0.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="4" transform="translate(0.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="5" transform="translate(21.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="6" transform="translate(41.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-default.svg b/cds-ui/designer-client/src/assets/img/icon-action-default.svg new file mode 100644 index 000000000..98c1e2bd3 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-default.svg @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="157px" viewBox="0 0 131 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.0-Designer---First-action-options" transform="translate(-530.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="default" transform="translate(250.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 7.222222)" fill="#E0E8F2"> + <polygon id="Path" points="110.957031 86.6995804 110.957031 86.8406395 12.0605469 86.3986545 11.4751518 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M129.95298,38.443287 C129.95298,29.2156758 122.446289,21.7089844 113.218678,21.7089844 C103.991066,21.7089844 96.484375,29.2156758 96.484375,38.443287 C96.484375,46.9033022 102.796766,53.9127604 110.957031,55.0200739 L110.957031,62.5643808 L115.480324,62.5643808 L115.480324,55.0200739 C123.641764,53.9127604 129.95298,46.9033022 129.95298,38.443287 Z M113.218678,50.6542969 C106.48546,50.6542969 101.007668,45.1765046 101.007668,38.443287 C101.007668,31.7100694 106.48546,26.2322772 113.218678,26.2322772 C119.951895,26.2322772 125.429688,31.7100694 125.429688,38.443287 C125.429688,45.1765046 119.951895,50.6542969 113.218678,50.6542969 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <path d="M106.132812,60.3027344 L106.132812,79.4491464 C106.132812,82.0258247 108.22989,84.1229022 110.806568,84.1229022 L115.630787,84.1229022 C118.207465,84.1229022 120.304543,82.0258247 120.304543,79.4491464 L120.304543,60.3027344 L106.132812,60.3027344 Z" id="Path" fill="#E0E8F2"></path> + <path d="M125.279225,-5.40012479e-13 L14.3221933,-5.40012479e-13 C11.7443396,-5.40012479e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429688,18.9959491 L125.429688,23.9706308 L129.95298,23.9706308 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-5.40012479e-13 125.279225,-5.40012479e-13 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <path d="M125.429688,110.806568 C125.429688,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601563,113.054109 91.6601563,115.630787 L91.6601563,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.548502 96.250452,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,52.9159433 L125.429688,52.9159433 L125.429688,110.806568 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,125.128762 L98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <g id="action" transform="translate(34.000000, 35.000000)"> + <g id="1"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="2" transform="translate(21.000000, 0.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="3" transform="translate(41.000000, 0.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="4" transform="translate(0.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="5" transform="translate(21.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="6" transform="translate(41.000000, 25.000000)"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-import-hover.svg b/cds-ui/designer-client/src/assets/img/icon-action-import-hover.svg new file mode 100644 index 000000000..4d5a11202 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-import-hover.svg @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="173px" viewBox="0 0 131 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon-hover</title> + <desc>Created with Sketch.</desc> + <defs> + <rect id="path-1" x="0" y="0" width="40.5" height="47"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.4.1-Designer---Import-action" transform="translate(-1030.000000, -377.000000)"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="import" transform="translate(750.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 23.000000)"> + <g id="icon-hover" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 24.222222)" fill-rule="nonzero"> + <polygon id="Path" fill="#E0E8F2" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,17 L14.3221933,17 C11.7443396,17 9.6484375,19.0959021 9.6484375,21.6737558 L9.6484375,113.183449 L120.455006,113.183449 L120.455006,108.660156 L14.1717303,108.660156 L14.1717303,35.9959491 L125.429687,35.9959491 L125.429687,127.806568 C125.429687,127.890028 125.362685,127.957031 125.279225,127.957031 L96.333912,127.957031 C93.7572338,127.957031 91.6601562,130.054109 91.6601562,132.630787 L91.6601562,137.605469 L12.0605469,137.605469 L12.0605469,171.074074 L117.892433,171.074074 L117.892433,137.605469 L96.1834491,137.605469 L96.1834491,132.630787 C96.1834491,132.547327 96.2516275,132.480324 96.333912,132.480324 L125.279225,132.480324 C127.855903,132.480324 129.95298,130.383247 129.95298,127.806568 L129.95298,21.6737558 C129.95298,19.0959021 127.855903,17 125.279225,17 Z M60.0018084,142.128762 L69.9511719,142.128762 L69.9511719,147.253906 L60.0018084,147.253906 L60.0018084,142.128762 Z M60.0018084,151.777199 L69.9511719,151.777199 L69.9511719,156.902344 L60.0018084,156.902344 L60.0018084,151.777199 Z M45.5291522,142.128762 L55.4785156,142.128762 L55.4785156,147.253906 L45.5291522,147.253906 L45.5291522,142.128762 Z M45.5291522,151.777199 L55.4785156,151.777199 L55.4785156,156.902344 L45.5291522,156.902344 L45.5291522,151.777199 Z M26.5332031,166.550781 L16.5838397,166.550781 L16.5838397,161.425637 L26.5332031,161.425637 L26.5332031,166.550781 Z M26.5332031,156.902344 L16.5838397,156.902344 L16.5838397,151.777199 L26.5332031,151.777199 L26.5332031,156.902344 Z M26.5332031,147.253906 L16.5838397,147.253906 L16.5838397,142.128762 L26.5332031,142.128762 L26.5332031,147.253906 Z M41.0058594,166.550781 L31.0564959,166.550781 L31.0564959,161.425637 L41.0058594,161.425637 L41.0058594,166.550781 Z M41.0058594,156.902344 L31.0564959,156.902344 L31.0564959,151.777199 L41.0058594,151.777199 L41.0058594,156.902344 Z M41.0058594,147.253906 L31.0564959,147.253906 L31.0564959,142.128762 L41.0058594,142.128762 L41.0058594,147.253906 Z M84.4238281,166.550781 L45.5291522,166.550781 L45.5291522,161.425637 L84.4238281,161.425637 L84.4238281,166.550781 Z M84.4238281,156.902344 L74.4744647,156.902344 L74.4744647,151.777199 L84.4238281,151.777199 L84.4238281,156.902344 Z M84.4238281,147.253906 L74.4744647,147.253906 L74.4744647,142.128762 L84.4238281,142.128762 L84.4238281,147.253906 Z M98.8964844,166.550781 L88.9471209,166.550781 L88.9471209,161.425637 L98.8964844,161.425637 L98.8964844,166.550781 Z M98.8964844,156.902344 L88.9471209,156.902344 L88.9471209,151.777199 L98.8964844,151.777199 L98.8964844,156.902344 Z M103.419777,142.128762 L113.369141,142.128762 L113.369141,147.253906 L103.419777,147.253906 L103.419777,142.128762 Z M103.419777,151.777199 L113.369141,151.777199 L113.369141,156.902344 L103.419777,156.902344 L103.419777,151.777199 Z M103.419777,161.425637 L113.369141,161.425637 L113.369141,166.550781 L103.419777,166.550781 L103.419777,161.425637 Z M98.8964844,147.253906 L88.9471209,147.253906 L88.9471209,142.128762 L98.8964844,142.128762 L98.8964844,147.253906 Z M14.1717303,31.4726562 L14.1717303,21.6737558 C14.1717303,21.5902958 14.2387333,21.5232928 14.3221933,21.5232928 L125.279225,21.5232928 C125.362685,21.5232928 125.429688,21.5902958 125.429688,21.6737558 L125.429688,31.4726562 L14.1717303,31.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F" fill-rule="nonzero"></path> + <polygon id="Path" stroke="#FFFFFF" fill="#1B3E6F" fill-rule="nonzero" points="96.7252852 92.4505702 92.6085365 96.5673189 92.6085365 73 89.3914635 73 89.3914635 96.5673189 85.2747148 92.4505702 83 94.7252853 90.9999999 102.725285 99 94.7252853"></polygon> + <g id="action" transform="translate(64.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 4.959849)" fill-rule="nonzero"> + <polygon id="Path" fill="#E0E8F2" points="43.7054389 57.9271781 5.84230707 57.9271781 5.84230707 0.0230647733 0 0.0230647733 0 63.7694851 44.8148545 63.7694851 44.8148545 57.9271781"></polygon> + <polygon id="Path" fill="#5DBDBA" points="11.7584214 50.9016481 14.1248671 50.9016481 14.1248671 53.1204793 11.7584214 53.1204793"></polygon> + <polygon id="Path" fill="#5DBDBA" points="16.4913129 50.9016481 18.8577586 50.9016481 18.8577586 53.1204793 16.4913129 53.1204793"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.2242044 50.9016481 23.5906501 50.9016481 23.5906501 53.1204793 21.2242044 53.1204793"></polygon> + </g> + <path d="M49.8148545,12.4820787 L37.3327757,0 L5,0 L5,63.7464203 L49.8148545,63.7464203 L49.8148545,17.6745358 L47.5960233,17.6745358 L47.5960233,61.5275892 L7.21883119,61.5275892 L7.21883119,2.21883119 L35.7637946,2.21883119 L35.7637946,15.2342827 L49.8148545,15.2342827 L49.8148545,12.4820787 Z M37.9826258,13.0154516 L37.9826258,3.78723577 L47.2108416,13.0154516 L37.9826258,13.0154516 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <g id="3" transform="translate(7.000000, 15.000000)"> + <mask id="mask-2" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use> + <g mask="url(#mask-2)"> + <g transform="translate(2.000000, 31.000000)"> + <g id="Group" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2.836930, 2.684715)"> + <polygon id="Path" fill="#E0E8F2" fill-rule="nonzero" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" fill="#E0E8F2" fill-rule="nonzero" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA" fill-rule="nonzero"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA" fill-rule="nonzero"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA" fill-rule="nonzero"></path> + </g> + </g> + </g> + <g id="1" transform="translate(9.000000, 15.000000)" fill-rule="nonzero"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + <g id="2" transform="translate(29.000000, 24.000000)" fill-rule="nonzero"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#5DBDBA"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#5DBDBA"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-import.svg b/cds-ui/designer-client/src/assets/img/icon-action-import.svg new file mode 100644 index 000000000..1c7fd6b1b --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-import.svg @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="131px" height="173px" viewBox="0 0 131 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon</title> + <desc>Created with Sketch.</desc> + <defs> + <rect id="path-1" x="0" y="0" width="40.5" height="47"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.0-Designer---First-action-options" transform="translate(-1030.000000, -377.000000)"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="import" transform="translate(750.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 23.000000)"> + <g id="icon" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 24.222222)" fill="#E0E8F2" fill-rule="nonzero"> + <polygon id="Path" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,17 L14.3221933,17 C11.7443396,17 9.6484375,19.0959021 9.6484375,21.6737558 L9.6484375,113.183449 L120.455006,113.183449 L120.455006,108.660156 L14.1717303,108.660156 L14.1717303,35.9959491 L125.429687,35.9959491 L125.429687,127.806568 C125.429687,127.890028 125.362685,127.957031 125.279225,127.957031 L96.333912,127.957031 C93.7572338,127.957031 91.6601562,130.054109 91.6601562,132.630787 L91.6601562,137.605469 L12.0605469,137.605469 L12.0605469,171.074074 L117.892433,171.074074 L117.892433,137.605469 L96.1834491,137.605469 L96.1834491,132.630787 C96.1834491,132.547327 96.2516275,132.480324 96.333912,132.480324 L125.279225,132.480324 C127.855903,132.480324 129.95298,130.383247 129.95298,127.806568 L129.95298,21.6737558 C129.95298,19.0959021 127.855903,17 125.279225,17 Z M60.0018084,142.128762 L69.9511719,142.128762 L69.9511719,147.253906 L60.0018084,147.253906 L60.0018084,142.128762 Z M60.0018084,151.777199 L69.9511719,151.777199 L69.9511719,156.902344 L60.0018084,156.902344 L60.0018084,151.777199 Z M45.5291522,142.128762 L55.4785156,142.128762 L55.4785156,147.253906 L45.5291522,147.253906 L45.5291522,142.128762 Z M45.5291522,151.777199 L55.4785156,151.777199 L55.4785156,156.902344 L45.5291522,156.902344 L45.5291522,151.777199 Z M26.5332031,166.550781 L16.5838397,166.550781 L16.5838397,161.425637 L26.5332031,161.425637 L26.5332031,166.550781 Z M26.5332031,156.902344 L16.5838397,156.902344 L16.5838397,151.777199 L26.5332031,151.777199 L26.5332031,156.902344 Z M26.5332031,147.253906 L16.5838397,147.253906 L16.5838397,142.128762 L26.5332031,142.128762 L26.5332031,147.253906 Z M41.0058594,166.550781 L31.0564959,166.550781 L31.0564959,161.425637 L41.0058594,161.425637 L41.0058594,166.550781 Z M41.0058594,156.902344 L31.0564959,156.902344 L31.0564959,151.777199 L41.0058594,151.777199 L41.0058594,156.902344 Z M41.0058594,147.253906 L31.0564959,147.253906 L31.0564959,142.128762 L41.0058594,142.128762 L41.0058594,147.253906 Z M84.4238281,166.550781 L45.5291522,166.550781 L45.5291522,161.425637 L84.4238281,161.425637 L84.4238281,166.550781 Z M84.4238281,156.902344 L74.4744647,156.902344 L74.4744647,151.777199 L84.4238281,151.777199 L84.4238281,156.902344 Z M84.4238281,147.253906 L74.4744647,147.253906 L74.4744647,142.128762 L84.4238281,142.128762 L84.4238281,147.253906 Z M98.8964844,166.550781 L88.9471209,166.550781 L88.9471209,161.425637 L98.8964844,161.425637 L98.8964844,166.550781 Z M98.8964844,156.902344 L88.9471209,156.902344 L88.9471209,151.777199 L98.8964844,151.777199 L98.8964844,156.902344 Z M103.419777,142.128762 L113.369141,142.128762 L113.369141,147.253906 L103.419777,147.253906 L103.419777,142.128762 Z M103.419777,151.777199 L113.369141,151.777199 L113.369141,156.902344 L103.419777,156.902344 L103.419777,151.777199 Z M103.419777,161.425637 L113.369141,161.425637 L113.369141,166.550781 L103.419777,166.550781 L103.419777,161.425637 Z M98.8964844,147.253906 L88.9471209,147.253906 L88.9471209,142.128762 L98.8964844,142.128762 L98.8964844,147.253906 Z M14.1717303,31.4726562 L14.1717303,21.6737558 C14.1717303,21.5902958 14.2387333,21.5232928 14.3221933,21.5232928 L125.279225,21.5232928 C125.362685,21.5232928 125.429688,21.5902958 125.429688,21.6737558 L125.429688,31.4726562 L14.1717303,31.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F" fill-rule="nonzero"></path> + <polygon id="Path" stroke="#FFFFFF" fill="#1B3E6F" fill-rule="nonzero" points="96.7252852 92.4505702 92.6085365 96.5673189 92.6085365 73 89.3914635 73 89.3914635 96.5673189 85.2747148 92.4505702 83 94.7252853 90.9999999 102.725285 99 94.7252853"></polygon> + <g id="action" transform="translate(64.000000, 0.000000)"> + <g id="Group" transform="translate(0.000000, 4.959849)" fill-rule="nonzero"> + <polygon id="Path" fill="#E0E8F2" points="43.7054389 57.9271781 5.84230707 57.9271781 5.84230707 0.0230647733 0 0.0230647733 0 63.7694851 44.8148545 63.7694851 44.8148545 57.9271781"></polygon> + <polygon id="Path" fill="#5DBDBA" points="11.7584214 50.9016481 14.1248671 50.9016481 14.1248671 53.1204793 11.7584214 53.1204793"></polygon> + <polygon id="Path" fill="#5DBDBA" points="16.4913129 50.9016481 18.8577586 50.9016481 18.8577586 53.1204793 16.4913129 53.1204793"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.2242044 50.9016481 23.5906501 50.9016481 23.5906501 53.1204793 21.2242044 53.1204793"></polygon> + </g> + <path d="M49.8148545,12.4820787 L37.3327757,0 L5,0 L5,63.7464203 L49.8148545,63.7464203 L49.8148545,17.6745358 L47.5960233,17.6745358 L47.5960233,61.5275892 L7.21883119,61.5275892 L7.21883119,2.21883119 L35.7637946,2.21883119 L35.7637946,15.2342827 L49.8148545,15.2342827 L49.8148545,12.4820787 Z M37.9826258,13.0154516 L37.9826258,3.78723577 L47.2108416,13.0154516 L37.9826258,13.0154516 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <g id="3" transform="translate(7.000000, 15.000000)"> + <mask id="mask-2" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use> + <g mask="url(#mask-2)"> + <g transform="translate(2.000000, 31.000000)"> + <g id="Group" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2.836930, 2.684715)"> + <polygon id="Path" fill="#E0E8F2" fill-rule="nonzero" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" fill="#E0E8F2" fill-rule="nonzero" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F" fill-rule="nonzero"></path> + </g> + </g> + </g> + <g id="1" transform="translate(9.000000, 15.000000)" fill-rule="nonzero"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + <g id="2" transform="translate(29.000000, 24.000000)" fill-rule="nonzero"> + <g id="Group" transform="translate(2.836930, 2.684715)" fill="#E0E8F2"> + <polygon id="Path" points="0.349703874 0.411818739 9.98166155 0.411818739 9.98166155 5.18449572 0.349703874 5.18449572"></polygon> + <polygon id="Path" points="5.90316753 12.212929 9.98166155 12.212929 9.98166155 16.291423 5.90316753 16.291423"></polygon> + </g> + <path d="M0.40990173,21.7528702 L15.5953231,21.7528702 L15.5953231,0.319802285 L0.40990173,0.319802285 L0.40990173,21.7528702 Z M1.71166392,1.62156448 L14.2935609,1.62156448 L14.2935609,20.451108 L1.71166392,20.451108 L1.71166392,1.62156448 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M8.74009721,13.4226747 L12.8185912,13.4226747 L12.8185912,9.34418073 L8.74009721,9.34418073 L8.74009721,13.4226747 Z M10.0418594,10.6459429 L11.516829,10.6459429 L11.516829,12.1209126 L10.0418594,12.1209126 L10.0418594,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,18.9761384 L7.26512758,18.9761384 L7.26512758,14.8976444 L3.18663356,14.8976444 L3.18663356,18.9761384 Z M4.48839575,16.1994066 L5.96336539,16.1994066 L5.96336539,17.6743762 L4.48839575,17.6743762 L4.48839575,16.1994066 Z" id="Shape" fill="#1B3E6F"></path> + <path d="M3.18663356,13.4226747 L7.26512758,13.4226747 L7.26512758,9.34418073 L3.18663356,9.34418073 L3.18663356,13.4226747 Z M4.48839575,10.6459429 L5.96336539,10.6459429 L5.96336539,12.1209126 L4.48839575,12.1209126 L4.48839575,10.6459429 Z" id="Shape" fill="#1B3E6F"></path> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-recent-hover.svg b/cds-ui/designer-client/src/assets/img/icon-action-recent-hover.svg new file mode 100644 index 000000000..193961656 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-recent-hover.svg @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="144px" height="157px" viewBox="0 0 144 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon-hover</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.3.1-Designer---Recent-action" transform="translate(-780.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="recent" transform="translate(500.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon-hover" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(-0.000000, 7.222222)"> + <polygon id="Path" fill="#E0E8F2" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" fill="#5DBDBA" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" fill="#5DBDBA" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,-3.83693077e-13 L14.3221933,-3.83693077e-13 C11.7443396,-3.83693077e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429687,18.9959491 L125.429687,110.806568 C125.429687,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601562,113.054109 91.6601562,115.630787 L91.6601562,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.547327 96.2516275,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-3.83693077e-13 125.279225,-3.83693077e-13 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 L98.8964844,130.253906 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <g id="list" transform="translate(29.000000, 31.000000)"> + <g> + <g id="Group" transform="translate(0.000000, -0.000000)"> + <polygon id="Path" fill="#E0E8F2" points="0.134469486 0.0137213762 2.95009588 0.0137213762 2.95009588 2.65371415 0.134469486 2.65371415"></polygon> + <polygon id="Path" fill="#E0E8F2" points="5.76572227 0.0137213762 8.58134865 0.0137213762 8.58134865 2.65371415 5.76572227 2.65371415"></polygon> + <polygon id="Path" fill="#E0E8F2" points="11.396975 0.0137213762 14.2126014 0.0137213762 14.2126014 2.65371415 11.396975 2.65371415"></polygon> + <polygon id="Path" fill="#5DBDBA" points="0.222286294 14.0918533 8.49353185 14.0918533 8.49353185 22.3630989 0.222286294 22.3630989"></polygon> + <polygon id="Path" fill="#5DBDBA" points="0.222286294 26.7621721 8.49353185 26.7621721 8.49353185 35.0334176 0.222286294 35.0334176"></polygon> + <polygon id="Path" fill="#5DBDBA" points="0.222286294 39.4324908 8.49353185 39.4324908 8.49353185 47.7037364 0.222286294 47.7037364"></polygon> + </g> + <polygon id="Path" fill="#1B3E6F" points="11.396975 14.0918533 39.5532389 14.0918533 39.5532389 16.7318461 11.396975 16.7318461"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 7.05278735 26.8829202 7.05278735 26.8829202 9.69278012 11.396975 9.69278012"></polygon> + <polygon id="Path" fill="#1B3E6F" points="0.134469486 7.05278735 8.58134865 7.05278735 8.58134865 9.69278012 0.134469486 9.69278012"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 19.7231061 26.8829202 19.7231061 26.8829202 22.3630989 11.396975 22.3630989"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 26.7621721 39.5532389 26.7621721 39.5532389 29.4021649 11.396975 29.4021649"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 32.3934249 26.8829202 32.3934249 26.8829202 35.0334176 11.396975 35.0334176"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 39.4324908 39.5532389 39.4324908 39.5532389 42.0724836 11.396975 42.0724836"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 45.0637436 26.8829202 45.0637436 26.8829202 47.7037364 11.396975 47.7037364"></polygon> + </g> + <g id="recent" transform="translate(77.722272, 34.733652)"> + <path d="M18.5231598,0 C8.3091772,0 0,8.31000246 0,18.5231598 C0,28.7371424 8.3091772,37.0463197 18.5231598,37.0463197 C28.7371424,37.0463197 37.0463197,28.7371424 37.0463197,18.5231598 C37.0463197,8.31000246 28.7371424,0 18.5231598,0 Z" id="Path" fill="#E0E8F2"></path> + <path d="M18.5231598,30.2722109 C12.0445104,30.2722109 6.77410871,25.0018092 6.77410871,18.5231598 C6.77410871,12.0445104 12.0445104,6.77410871 18.5231598,6.77410871 C25.0018092,6.77410871 30.2722109,12.0445104 30.2722109,18.5231598 C30.2722109,25.0018092 25.0018092,30.2722109 18.5231598,30.2722109 Z M18.5231598,9.94988482 C13.7958091,9.94988482 9.94988482,13.7958091 9.94988482,18.5231598 C9.94988482,23.2505105 13.7958091,27.0964348 18.5231598,27.0964348 C23.2505105,27.0964348 27.0964348,23.2505105 27.0964348,18.5231598 C27.0964348,13.7958091 23.2505105,9.94988482 18.5231598,9.94988482 Z" id="Shape" fill="#1B3E6F"></path> + <polygon id="Path" fill="#1B3E6F" points="16.2593464 23.0334551 14.0136898 20.7877985 16.9352718 17.8653913 16.9352718 13.4425783 20.1110479 13.4425783 20.1110479 19.1809284"></polygon> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-action-recent.svg b/cds-ui/designer-client/src/assets/img/icon-action-recent.svg new file mode 100644 index 000000000..da6ecf742 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-action-recent.svg @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="144px" height="157px" viewBox="0 0 144 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>icon</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="7.0-Designer---First-action-options" transform="translate(-780.000000, -393.000000)" fill-rule="nonzero"> + <g id="modal-new" transform="translate(120.000000, 222.000000)"> + <g id="options" transform="translate(100.000000, 132.000000)"> + <g id="recent" transform="translate(500.000000, 0.000000)"> + <g id="icon+text" transform="translate(30.000000, 40.000000)"> + <g id="icon" transform="translate(30.000000, 0.000000)"> + <g id="Group" transform="translate(-0.000000, 7.222222)" fill="#E0E8F2"> + <polygon id="Path" points="113.218678 86.6995804 11.9100839 86.3986545 11.6173865 11.7737269 11.9100839 11.7737269 11.9100839 7.25043403 0 7.25043403 0 98.6096644 115.480324 98.6096644 115.480324 86.6995804"></polygon> + <polygon id="Path" points="21.5585214 0.0141059028 26.3827402 0.0141059028 26.3827402 4.53739873 21.5585214 4.53739873"></polygon> + <polygon id="Path" points="31.2069589 0.0141059028 36.0311777 0.0141059028 36.0311777 4.53739873 31.2069589 4.53739873"></polygon> + <polygon id="Path" points="40.8553964 0.0141059028 45.6796152 0.0141059028 45.6796152 4.53739873 40.8553964 4.53739873"></polygon> + </g> + <path d="M125.279225,-3.83693077e-13 L14.3221933,-3.83693077e-13 C11.7443396,-3.83693077e-13 9.6484375,2.09590213 9.6484375,4.67375579 L9.6484375,96.1834491 L120.455006,96.1834491 L120.455006,91.6601562 L14.1717303,91.6601562 L14.1717303,18.9959491 L125.429687,18.9959491 L125.429687,110.806568 C125.429687,110.890028 125.362685,110.957031 125.279225,110.957031 L96.333912,110.957031 C93.7572338,110.957031 91.6601562,113.054109 91.6601562,115.630787 L91.6601562,120.605469 L12.0605469,120.605469 L12.0605469,154.074074 L117.892433,154.074074 L117.892433,120.605469 L96.1834491,120.605469 L96.1834491,115.630787 C96.1834491,115.547327 96.2516275,115.480324 96.333912,115.480324 L125.279225,115.480324 C127.855903,115.480324 129.95298,113.383247 129.95298,110.806568 L129.95298,4.67375579 C129.95298,2.09590213 127.855903,-3.83693077e-13 125.279225,-3.83693077e-13 Z M60.0018084,125.128762 L69.9511719,125.128762 L69.9511719,130.253906 L60.0018084,130.253906 L60.0018084,125.128762 Z M60.0018084,134.777199 L69.9511719,134.777199 L69.9511719,139.902344 L60.0018084,139.902344 L60.0018084,134.777199 Z M45.5291522,125.128762 L55.4785156,125.128762 L55.4785156,130.253906 L45.5291522,130.253906 L45.5291522,125.128762 Z M45.5291522,134.777199 L55.4785156,134.777199 L55.4785156,139.902344 L45.5291522,139.902344 L45.5291522,134.777199 Z M26.5332031,149.550781 L16.5838397,149.550781 L16.5838397,144.425637 L26.5332031,144.425637 L26.5332031,149.550781 Z M26.5332031,139.902344 L16.5838397,139.902344 L16.5838397,134.777199 L26.5332031,134.777199 L26.5332031,139.902344 Z M26.5332031,130.253906 L16.5838397,130.253906 L16.5838397,125.128762 L26.5332031,125.128762 L26.5332031,130.253906 Z M41.0058594,149.550781 L31.0564959,149.550781 L31.0564959,144.425637 L41.0058594,144.425637 L41.0058594,149.550781 Z M41.0058594,139.902344 L31.0564959,139.902344 L31.0564959,134.777199 L41.0058594,134.777199 L41.0058594,139.902344 Z M41.0058594,130.253906 L31.0564959,130.253906 L31.0564959,125.128762 L41.0058594,125.128762 L41.0058594,130.253906 Z M84.4238281,149.550781 L45.5291522,149.550781 L45.5291522,144.425637 L84.4238281,144.425637 L84.4238281,149.550781 Z M84.4238281,139.902344 L74.4744647,139.902344 L74.4744647,134.777199 L84.4238281,134.777199 L84.4238281,139.902344 Z M84.4238281,130.253906 L74.4744647,130.253906 L74.4744647,125.128762 L84.4238281,125.128762 L84.4238281,130.253906 Z M98.8964844,149.550781 L88.9471209,149.550781 L88.9471209,144.425637 L98.8964844,144.425637 L98.8964844,149.550781 Z M98.8964844,139.902344 L88.9471209,139.902344 L88.9471209,134.777199 L98.8964844,134.777199 L98.8964844,139.902344 Z M103.419777,125.128762 L113.369141,125.128762 L113.369141,130.253906 L103.419777,130.253906 L103.419777,125.128762 Z M103.419777,134.777199 L113.369141,134.777199 L113.369141,139.902344 L103.419777,139.902344 L103.419777,134.777199 Z M103.419777,144.425637 L113.369141,144.425637 L113.369141,149.550781 L103.419777,149.550781 L103.419777,144.425637 Z M98.8964844,130.253906 L88.9471209,130.253906 L88.9471209,125.128762 L98.8964844,125.128762 L98.8964844,130.253906 Z M14.1717303,14.4726562 L14.1717303,4.67375579 C14.1717303,4.59029579 14.2387333,4.52329282 14.3221933,4.52329282 L125.279225,4.52329282 C125.362685,4.52329282 125.429688,4.59029579 125.429688,4.67375579 L125.429688,14.4726562 L14.1717303,14.4726562 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#1B3E6F"></path> + <g id="list" transform="translate(29.000000, 31.000000)"> + <g> + <g id="Group" transform="translate(0.000000, -0.000000)" fill="#E0E8F2"> + <polygon id="Path" points="0.134469486 0.0137213762 2.95009588 0.0137213762 2.95009588 2.65371415 0.134469486 2.65371415"></polygon> + <polygon id="Path" points="5.76572227 0.0137213762 8.58134865 0.0137213762 8.58134865 2.65371415 5.76572227 2.65371415"></polygon> + <polygon id="Path" points="11.396975 0.0137213762 14.2126014 0.0137213762 14.2126014 2.65371415 11.396975 2.65371415"></polygon> + <polygon id="Path" points="0.222286294 14.0918533 8.49353185 14.0918533 8.49353185 22.3630989 0.222286294 22.3630989"></polygon> + <polygon id="Path" points="0.222286294 26.7621721 8.49353185 26.7621721 8.49353185 35.0334176 0.222286294 35.0334176"></polygon> + <polygon id="Path" points="0.222286294 39.4324908 8.49353185 39.4324908 8.49353185 47.7037364 0.222286294 47.7037364"></polygon> + </g> + <polygon id="Path" fill="#1B3E6F" points="11.396975 14.0918533 39.5532389 14.0918533 39.5532389 16.7318461 11.396975 16.7318461"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 7.05278735 26.8829202 7.05278735 26.8829202 9.69278012 11.396975 9.69278012"></polygon> + <polygon id="Path" fill="#1B3E6F" points="0.134469486 7.05278735 8.58134865 7.05278735 8.58134865 9.69278012 0.134469486 9.69278012"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 19.7231061 26.8829202 19.7231061 26.8829202 22.3630989 11.396975 22.3630989"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 26.7621721 39.5532389 26.7621721 39.5532389 29.4021649 11.396975 29.4021649"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 32.3934249 26.8829202 32.3934249 26.8829202 35.0334176 11.396975 35.0334176"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 39.4324908 39.5532389 39.4324908 39.5532389 42.0724836 11.396975 42.0724836"></polygon> + <polygon id="Path" fill="#1B3E6F" points="11.396975 45.0637436 26.8829202 45.0637436 26.8829202 47.7037364 11.396975 47.7037364"></polygon> + </g> + <g id="recent" transform="translate(77.722272, 34.733652)"> + <path d="M18.5231598,0 C8.3091772,0 0,8.31000246 0,18.5231598 C0,28.7371424 8.3091772,37.0463197 18.5231598,37.0463197 C28.7371424,37.0463197 37.0463197,28.7371424 37.0463197,18.5231598 C37.0463197,8.31000246 28.7371424,0 18.5231598,0 Z" id="Path" fill="#E0E8F2"></path> + <path d="M18.5231598,30.2722109 C12.0445104,30.2722109 6.77410871,25.0018092 6.77410871,18.5231598 C6.77410871,12.0445104 12.0445104,6.77410871 18.5231598,6.77410871 C25.0018092,6.77410871 30.2722109,12.0445104 30.2722109,18.5231598 C30.2722109,25.0018092 25.0018092,30.2722109 18.5231598,30.2722109 Z M18.5231598,9.94988482 C13.7958091,9.94988482 9.94988482,13.7958091 9.94988482,18.5231598 C9.94988482,23.2505105 13.7958091,27.0964348 18.5231598,27.0964348 C23.2505105,27.0964348 27.0964348,23.2505105 27.0964348,18.5231598 C27.0964348,13.7958091 23.2505105,9.94988482 18.5231598,9.94988482 Z" id="Shape" fill="#1B3E6F"></path> + <polygon id="Path" fill="#1B3E6F" points="16.2593464 23.0334551 14.0136898 20.7877985 16.9352718 17.8653913 16.9352718 13.4425783 20.1110479 13.4425783 20.1110479 19.1809284"></polygon> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-error.sketch b/cds-ui/designer-client/src/assets/img/icon-error.sketch Binary files differnew file mode 100644 index 000000000..0a17404bc --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-error.sketch diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 3c0a049bf..a705b2744 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -18,6 +18,9 @@ body{ transition: 0.3s !important; } /*Bootstrap*/ +.btn:disabled:hover{ + cursor: default; +} .custom-control-label::before{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; @@ -45,6 +48,33 @@ body{ width: 14px !important; height: 14px; } +.card-header .btn[aria-expanded="true"], +.card-header .btn[aria-expanded="false"]{ + padding-left: 25px !important; + padding-right: 25px !important; + border-radius: 0 !important; +} +.card-header .btn[aria-expanded="true"]{ + background-color:#F4F9FE; +} +.card-header .btn[aria-expanded="false"]{ + background-color:#fff; +} +/*NGX-TOASTR*/ +.ngx-toastr{ + border-radius: 2px !important; + color: #1B3E6F !important; + font-size: 13px !important; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; +} +.toast-success{ + border-left: solid 5px #66BB00 !important; + background: url(/assets/img/icon-required-yes.svg) 12px center #fff no-repeat !important; +} +.toast-error{ + border-left: solid 5px #FF6469 !important; + background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important; +} /*ICONS*/ .icon-menuDots{ font-size: 3px !important; @@ -330,6 +360,7 @@ background-color: #333; font-size: 12px; } .import-container-all .accordion .card-header{ + padding: 0 !important; background: #fff !important; border-bottom: 0 !important; } @@ -338,6 +369,9 @@ background-color: #333; } .import-container-all .card-header .accordion-delete{ display: none; + position: absolute; + right: 15px; + background: #F4F9FE; } .import-container-all .card-header:hover .accordion-delete{ display: inline; @@ -468,6 +502,9 @@ height: 40px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } +.packages-card .card:hover .packageName{ + color: #1273EB !important; +} .packages-card .card-title{ margin-bottom: 0 !important; font-size: 13px; @@ -484,12 +521,14 @@ height: 40px; color: #D0D7E4; } .packages-card p.package-desc{ + margin-top: 6px; font-size: 13px; text-align: left; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; + color: #1B3E6F; } .packages-card p.package-desc:hover{ color: #1B3E6F !important; @@ -518,7 +557,7 @@ height: 40px; } .addPaackage-card a{ margin: 0; - padding: 8px 15px; + padding: 7px 15px; font-weight: bold; font-size: 12px; border-radius: 2px; @@ -656,8 +695,14 @@ height: 40px; width: 240px; border-bottom: solid 1px #C3CDDB; } +.searchBox:hover > .searchInput::placeholder{ + color: #C3CDDB; +} .searchBox > .searchInput:focus{ border-bottom: solid 1px #1B3E6F !important; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); } .searchBox:hover > .searchButton{ color: #1B3E6F; @@ -841,7 +886,7 @@ height: 40px; animation-direction: alternate; } */ .card-body{ - padding: 20px !important; + padding: 10px 20px 20px !important; } /*Main Container*/ @@ -968,6 +1013,13 @@ height: 40px; font-size: 13px !important; text-indent: 6px !important; } +.fillteredTags{ + margin-left: 3px; + padding: 3px 3px; + background: #1B3E6F; + color: #fff; + border-radius: 4px; +} /**Packages Sort**/ .sort-packages{ font-size: 12px; @@ -1058,7 +1110,7 @@ height: 40px; margin-bottom: 0; display: inline-block; width: auto; - max-width: 76%; + max-width: 64%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1075,6 +1127,7 @@ height: 40px; padding-bottom: 0 !important; } .packages-card .card-footer .col{ + padding-left: 3px !important; text-align: left; } @@ -1099,7 +1152,13 @@ height: 40px; } .btn-create-package, .btn-import-package{ - margin-bottom: 9px !important; + width: 145px; +} +.btn-create-package{ + margin-bottom: 6px !important; +} +.btn-import-package{ + margin-bottom: 4px !important; } .btn-create-package, .btn-create-package:hover{ @@ -1156,6 +1215,7 @@ height: 40px; .packages-card .dropdown-content a:hover{ background-color: #172B4D; text-decoration: unset; + color: #fff; } .packages-card .dropdown-content:hover, .packages-card .dropdown-toggle:focus ~ .dropdown-content{ @@ -1176,7 +1236,7 @@ height: 40px; box-shadow: none; } .package-version{ - color: #C3CDDB !important; + /* color: #C3CDDB !important; */ } .package-version::before{ content: "|"; @@ -1187,7 +1247,7 @@ height: 40px; /***Contributers***/ ul.package-contributers{ - /*margin-bottom: 0 !important;*/ + margin-bottom: 9px !important; padding-left: 0 !important; } .package-contributers li{ @@ -1303,13 +1363,252 @@ ul.package-contributers{ } +/*CREATE NEW ACTION MODAL*/ +.createActionModal .modal-dialog{ + max-width: 85%; +} +.createActionModal .modal-header{ + padding-top: 21px !important; + padding-bottom: 0 !important; + border-bottom: 0; +} +.createActionModal .close{ + margin: 0 !important; + padding: 6px 13px 10px !important; + width: auto; + opacity: 1 !important; + border-radius: 100%; +} +.createActionModal .close:hover{ + background-color: #E0E8F2; +} +.createActionModal .icon-action-close{ + font-size: 14px; + font-weight: bold; +} +.createActionModal .modal-body{ + padding-top: 0 !important; + padding-bottom: 10px !important; +} +.createActionModal .modal-body .carousel-item{ + padding-left: 20px; + padding-right: 10px; +} +@keyframes fadeInScale { + 0% { + opacity: 0; + -webkit-transform: scale(0) translateY(50%); + transform: scale(0) translateY(50%); + } + 90% { + -webkit-transform: scale(1.05); + transform: scale(1.05); + } + 100% { + opacity: 1; + -webkit-transform: scale(1) translateY(0); + transform: scale(1) translateY(0); + } +} +.card.actionType{ + margin-bottom: 25px !important; + padding: 220px 25px 50px; + box-shadow: none; + border-radius: 0; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.card.actionType:hover{ + box-shadow: 0 10px 20px 0 rgba(27,62,111,.1); + transition: 0.3s !important; +} +.createActionModal h1{ + margin-bottom: 21px; + font-size: 22px; + text-align: center; + font-weight: normal; +} +.createActionModal .skip-btn{ + float: unset; + width: auto; + color: #1273EB; + font-weight: normal !important; + font-size: 13px; + border: solid 1px #F1F2FA; + border-radius: 2px; +} +.actionType, +.actionType:hover{ + text-align: center; + line-height: 40px; + background-position: center 40px; + background-repeat: no-repeat; + background-size: 144px 172px; +} +.actionType h3, +.actionType p{ + margin: 0; +} +.actionType h3{ + text-transform: uppercase; + font-size: 13px; + font-weight: bold; +} +.actionType p{ + font-size: 13px !important; + line-height: 24px; +} +.actionType .btn, +.actionType:hover .btn{ + opacity: 0; + position: absolute; + bottom: 0; + left: 30% !important; + margin-bottom: 26px; + width: 100px; + height: 30px; + background: #1B3E6F; + color: #fff; + font-size: 12px; + font-weight: bold; + border-radius: 15px !important; + -webkit-transform: translateY(-20%); + transform: translateY(-20%); + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.actionType:hover .btn{ + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); +} +.actionType.custom{ + background-image: url(/assets/img/icon-action-custom.svg); +} +.actionType.custom:hover{ + cursor: pointer; + background-image: url(/assets/img/icon-action-custom-hover.svg); +} +.actionType.default{ + background-image: url(/assets/img/icon-action-default.svg); +} +.actionType.default:hover{ + cursor: pointer; + background-image: url(/assets/img/icon-action-default-hover.svg); +} +.actionType.recent{ + background-image: url(/assets/img/icon-action-recent.svg); +} +.actionType.recent:hover{ + cursor: pointer; + background-image: url(/assets/img/icon-action-recent-hover.svg); +} +.actionType.import{ + background-image: url(/assets/img/icon-action-import.svg); +} +.actionType.import:hover{ + cursor: pointer; + background-image: url(/assets/img/icon-action-import-hover.svg); +} +.createActionModal .carousel-indicators{ + margin: 0; +} +.createActionModal .carousel-indicators li{ + margin: 0; + padding: 0; + text-indent: 0; + border: 0; +} +.createActionModal .back{ + position: fixed !important; + top: 83px; + width: auto; + padding:0 !important; +} - - - - - - +.actionFormWrapper{ + width: 60%; + margin: 0 auto; +} +.createActionModal .form-control.customAction{ + width: 55%; + margin: 70px auto; + padding-left: 0; + border-radius: 0; + border: 0; + border-bottom: solid 1px #E0E8F2; + color: #1B3E6F !important; + font-size: 14px; +} +.createActionModal .form-control:focus{ + border-bottom: solid 1px #1B3E6F; + background: transparent !important; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + text-shadow: none; +} +.createActionModal .form-control::placeholder{ + color: #C3CDDB; + +} +.createActionModal .submit, +.createActionModal .submit:hover{ + float: unset; + width: 100px; + height: 30px; + background: #1B3E6F; + color: #fff; + font-size: 12px; + font-weight: bold; + border-radius: 15px !important; +} +.actionlabel{ + margin-right: 2px; + color: #C3CDDB; + font-size: 11px; + font-weight: bold; +} +.form-control.searchInput, +.form-control.searchInput:focus{ + float: right; + width: 250px !important; + height: 30px !important; + padding-left: 32px !important; + border: solid 1px #E0E8F2 !important; + border-radius: 2px !important; + background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important; + font-size: 13px !important; + color: #1B3E6F; +} +.actionsListScroll{ + height: 228px; + max-height: 228px; + overflow: auto; +} +.createActionModal .actionName{ + margin-bottom: 15px; + padding: 9px 18px; + box-shadow: 0 2px 6px rgba(47,83,151,0.15); +} +.createActionModal p.selectedActions{ + margin-top: 20px; + margin-bottom: 10px; + color: #8D9FB7; + font-size: 13px; +} +.createActionModal .sort-packages .dropdown{ + width: 60%; +} +.createActionModal .sort-packages .dropdown-text::after { + right: 6px; +} +.createActionModal .sort-packages .dropdown-content{ + width: 100%; +} +.createActionModal .folder-upload-text button{ + float: unset; +} /* Border Fade */ .border-fade { display: inline-block; @@ -1653,9 +1952,8 @@ padding-left: 20px !important; margin-top: 6px; } .package-view-button .btn{ - padding: 6px 12px; - border-radius: 2px; - font-weight: bold; + padding: 6px 21px; + border-radius: 18px; } .package-view-button .btn:hover{ opacity: .9; @@ -1729,6 +2027,9 @@ padding-left: 20px !important; .single-line-model input:focus, .single-line-custom-key input:focus{ border-bottom-color: #1B3E6F !important; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); } .model-note-container{ width: calc(100% - 325px); @@ -1814,6 +2115,18 @@ padding-left: 20px !important; color: #1B3E6F; transition: all 250ms ease-out; } +.label-input input:focus{ + border-bottom: solid 1px #1B3E6F; + background: transparent !important; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + text-shadow: none; +} +.label-input input:disabled{ + background: #fff; + opacity: .5; +} .label-input input[type=radio]{ width: auto; } @@ -1929,7 +2242,7 @@ hr{ .action-button{ margin-bottom: 12px; padding: 3px 30px; - color: #BABBC3; + color: #BABBC3 !important; font-size: 10px; font-weight: bold; display: inline-block; @@ -1949,6 +2262,9 @@ hr{ font-size: 17px; display: inline-block; } +.action-button i:hover{ + background: #dee2e6; +} .action-button i.icon-save-sm{ background: #1273EB; color: #fff; @@ -1959,10 +2275,10 @@ hr{ color: #C3CDDB; } .action-button.save{ - color: #1273EB; + color: #1273EB !important; } -.action-button.delete{ - color: #BABBC3; +.action-button.save:hover{ + opacity: .9; } .action-button.delete i{ color: #BABBC3; @@ -2004,6 +2320,7 @@ hr{ padding: .7rem 1.5rem !important; } .modal-footer{ + padding-top: 0 !important; border-top: 0 !important; } .modal-footer .btn{ @@ -2077,9 +2394,11 @@ hr{ font-size: 12px; } .create-title{ - margin-bottom: 15px; + margin-bottom: 0; font-size: 14px; font-weight: bold; + /* text-transform: uppercase; */ + line-height: 32px; } .folder-upload-text{ margin-top: 10px; @@ -2116,6 +2435,10 @@ hr{ font-weight: normal; font-size: 13px; } +.upload-table .table thead th:first-child{ + width: 24px; + padding-right: 0; +} .upload-table tr:last-child th{ border-bottom: 0 !important; } @@ -2218,6 +2541,11 @@ hr{ .template-mapping-accordion{ width: 100%; } +.template-mapping-accordion .accordian-title{ + color: #C3CDDB !important; + font-size: 12px !important; + font-weight: normal !important; +} .card{ border-radius: 2px; border: 0; @@ -2246,6 +2574,9 @@ hr{ margin-bottom: 0px !important; border-top: 1px solid #ECEDF2 !important; } +.accordion > .card > .card-header{ + padding: 0 !important; +} .template-mapping-accordion .card{ margin-bottom: 25px !important; } @@ -2387,7 +2718,8 @@ padding: 0 10px 0 0; color: #1B3E6F; font-size: 10px; font-weight: bold; - display: inline-table; + display: inline-block; + vertical-align: top; margin-top: 20px; margin-bottom: 10px; margin:15px 30px 20px; @@ -2416,6 +2748,15 @@ padding: 0 10px 0 0; color:#C3CDDB ; font-size: 8px; } +.mapping-source-load.hover-disable{ + opacity: .5; +} +.mapping-source-load.hover-disable:hover span{ + color: #1B3E6F; +} +.mapping-source-load.hover-disable:hover i{ + background: transparent; +} .template-mapping-list{ background: #F4F9FE; border: 1px solid #E9F3FF; @@ -2426,12 +2767,13 @@ padding: 0 10px 0 0; margin-bottom: 20px; color: #1B3E6F; } -.template-mapping-list:hover, .template-mapping-list.active { - background: #1B3E6F; +.template-mapping-list:hover, +.template-mapping-list.active { + /* background: #1B3E6F; */ text-decoration: none; - color: #fff !important; + /* color: #fff !important; */ border-radius: 4px; - + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3); } .template-mapping-list:hover{ opacity: .9; @@ -2439,13 +2781,30 @@ padding: 0 10px 0 0; .template-mapping-list span{ background: #fff; + border: solid 1px #E9F3FF; color: #2A81ED; font-size: 8px; float: right; border-radius: 50px; - padding: 4px 10px; + padding: 3px 10px; margin-left: 5px; - +} +.template-mapping-list:hover span{ + display: none; +} +.deleteTemplate{ + display: none; + position: absolute; + right: 21px; + top: 7px; + border: 0; + background: transparent; +} +.deleteTemplate i{ + color: #FF6469; +} +.template-mapping-list:hover .deleteTemplate{ + display: inline; } .max-height-list{ max-height: 232px; @@ -2453,11 +2812,12 @@ padding: 0 10px 0 0; overflow: auto; } .create-template-mapping-button{ -background: #C3CDDB; -border-radius: 50px; -font-size: 12px; -padding: 10px 20px; -margin-bottom: 20px; + background: #C3CDDB; + border-radius: 50px; + font-size: 12px; + font-weight: bold; + padding: 10px 20px; + margin-bottom: 20px; display: inline-block; cursor: pointer; } @@ -2542,13 +2902,11 @@ margin-right: 5px; height: 20px; } .template-mapping-action{ - width: 100%; - text-align: center; - margin-bottom: 30px; + margin-bottom: 20px; } .template-mapping-action button{ border-radius: 50px; - padding: 6px 20px; + padding: 4px 20px; font-size: 14px; } .template-mapping-action .btn-primary{ @@ -2582,7 +2940,7 @@ margin-right: 5px; margin-bottom: 6px; color: #1B3E6F !important; font-size: 13px; - font-weight: bold; + /* font-weight: bold; */ } .dataTables_filter input{ @@ -2687,6 +3045,14 @@ table.dataTable.no-footer{ background: transparent; color: #1B3E6F; } + +/* Windows View as 150% */ +@media (resolution: 150dpi) { + /* @media (-webkit-device-pixel-ratio: 1.5) { */ + .body-container > .container{ + max-width: 960px !important; + } +} /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .page-title{ |
