diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
5 files changed, 64 insertions, 58 deletions
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 a549d54a2..a31c95652 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 @@ -209,7 +209,7 @@ </div> <div class="row"> <div class="col text-center"> - <button class="btn skip-btn">Skip to Designer Canvas</button> + <button class="btn skip-btn" (click)="goToDesignerMode(viewedPackage.id)">Skip to Designer Canvas</button> </div> </div> </div> @@ -220,7 +220,7 @@ class="icon-action-back"></i></button> <h1>Create Custom Action</h1> <div class="form-group text-center"> - <input type="text" class="form-control customAction" + <input type="text" [(ngModel)]="customActionName" class="form-control customAction" placeholder="Type Action Name" autofocus> <button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button> </div> 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 0578b10f8..19c10c5fd 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 @@ -13,16 +13,18 @@ import {PackageCreationModes} from '../package-creation/creationModes/PackageCre import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; import {saveAs} from 'file-saver'; import {DesignerStore} from '../designer/designer.store'; +import { DesignerService } from '../designer/designer.service'; @Component({ selector: 'app-configuration-dashboard', templateUrl: './configuration-dashboard.component.html', - styleUrls: ['./configuration-dashboard.component.css'] + styleUrls: ['./configuration-dashboard.component.css'], }) export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) private metadataTabComponent: MetadataTabComponent; + public customActionName: string; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author']; @@ -39,7 +41,8 @@ export class ConfigurationDashboardComponent implements OnInit { private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils, private router: Router, - private designerStore: DesignerStore) { + private designerStore: DesignerStore, + private designerService: DesignerService) { } ngOnInit() { @@ -207,6 +210,7 @@ export class ConfigurationDashboardComponent implements OnInit { } goToDesignerMode(id) { - this.router.navigate(['/packages/designer', id]); + // this.designerService.setActionName(this.customActionName); + this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 04f410c5f..964268de5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -316,17 +316,19 @@ p.compType-4{ color: #C3CDDB; } .actionBtns .btn{ - margin: 0 15px 12px; - padding: 9px 20px; - border-radius: 2px !important; - font-size: 12px; + margin: 0px 15px 16px -90px; + /* padding: 9px 20px; */ + border-radius: 0px; + font-size: 14px; font-weight: bold; - outline: 0 !important; + /* outline: 0 !important; */ + float: left; + } .actionBtns .btn.insert-custom{ - background: #1B3E6F; - border: solid 1px #1B3E6F; - color: #fff; + /* background: white; */ + /* border: solid 1px #1B3E6F; */ + color: #1B3E6F; } .actionBtns .btn.import-action{ border: solid 1px #D0DFF1; @@ -347,6 +349,18 @@ p.compType-4{ .custom-control-label:hover{ cursor: pointer; } +.custom-control{ + padding-top: 10px; + width: 315px; + height: 40px; + margin-left: -15px; + font-size: 14px; + padding-bottom: 0; +} +.custom-control:hover{ + background-color: white; +} + .actionsList .custom-checkbox, .componentsList .list-group-item{ margin-bottom: 10px; @@ -405,8 +419,9 @@ p.compType-4{ /*CANVAS*/ .editBar{ - width: 200px; - margin: 0 auto 0; + width: 1080px; + height: 50px; + margin: 0 auto 0 -392px; padding: 6px 10px; background:#F4F9FE; /* border: solid 1px #E8EFF8; */ 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 3e3528c00..6904d5781 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 @@ -100,12 +100,17 @@ </div> </header> <div class="source-button editBar"> + <div class="btn-group viewBtns" role="group"> + <button (click)="_toggleSidebar1()" class="topologySource active"> + <i style="font-size:24px" class="fa"></i> + </button> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" class="btn btn-secondary topologyView">Scripting</button> </div> </div> + <ng-sidebar-container class="sidebar-container"> <!-- Controller SideBar --> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" @@ -122,21 +127,33 @@ href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> - </nav> + </nav> - <div class="row mt-2"> - <div class="col"> + <div class="row mt-2"> + <div class="col-12"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" aria-labelledby="nav-action-tab"> + <!--Action Search Box--> + <div> + <h1>Search</h1> + </div> + <div class="btn-group actionBtns col-8" role="group"> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom"> - Insert Custom + + New Action </button> - <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> --> </div> + + <div> + <div *ngIf="showAction" class="custom-control"> + <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span> + {{customActionName}} </label> + </div> + </div> </div> + <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab"> <div class="col-12 text-center p-0"> @@ -148,41 +165,7 @@ </div> </div> - <!-- <div class="col-12 actionsList"> - <b>Select from other packages:</b> - <div class="actions-scroll"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck1"> - <label class="custom-control-label" for="customCheck1">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck2"> - <label class="custom-control-label" for="customCheck2">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck3"> - <label class="custom-control-label" for="customCheck3">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck4"> - <label class="custom-control-label" for="customCheck4">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - </div> - <div class="btn-group inserActionBtns" role="group" aria-label="Basic example"> - <button type="button" class="btn btn-secondary mr-3">Insert</button> - <button type="button" class="btn btn-secondary">Cancel</button> - </div> - </div> --> - - + </ng-sidebar> <!-- Page content --> 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 fa3a99b49..fe90b6b90 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 @@ -40,7 +40,6 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; import { ActivatedRoute } from '@angular/router'; import { DesignerService } from './designer.service'; - @Component({ selector: 'app-designer', templateUrl: './designer.component.html', @@ -52,6 +51,8 @@ export class DesignerComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private attributesSideBar: boolean; viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + customActionName: string; + showAction: boolean; boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -69,6 +70,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private designerService: DesignerService) { this.controllerSideBar = true; this.attributesSideBar = false; + this.showAction = false; } private _toggleSidebar1() { @@ -92,10 +94,13 @@ export class DesignerComponent implements OnInit, OnDestroy { */ ngOnInit() { + this.customActionName = this.route.snapshot.paramMap.get('actionName'); + if (this.customActionName != null) { + this.showAction = true; + } this.initializeBoard(); this.initializePalette(); this.stencilPaperEventListeners(); - const id = this.route.snapshot.paramMap.get('id'); this.designerService.getPagedPackages(id).subscribe( (bluePrintDetailModels) => { @@ -103,7 +108,6 @@ export class DesignerComponent implements OnInit, OnDestroy { this.viewedPackage = bluePrintDetailModels[0]; } }); - /** * the code to retrieve from server is commented */ |