diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules')
6 files changed, 75 insertions, 66 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html index 63cf4bd6c..f7ba40ce1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html @@ -225,14 +225,14 @@ <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label> <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" name="customRadioInline1" + <input type="radio" id="customRadioInline3" name="customRadioInline3" class="custom-control-input" (click)="setOutputRequired(true)"> - <label class="custom-control-label" for="customRadioInline1">True</label> + <label class="custom-control-label" for="customRadioInline3">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" name="customRadioInline1" + <input type="radio" id="customRadioInline4" name="customRadioInline3" class="custom-control-input"> - <label class="custom-control-label" for="customRadioInline2" + <label class="custom-control-label" for="customRadioInline4" (click)="setOutputRequired(false)">False</label> </div> </div> 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 1d2a939bd..f15d735f6 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 @@ -266,12 +266,13 @@ button.rotate{ .rotate a:hover{ text-decoration: none; } -#board-paper svg{ +/*PAUSE*/ +/* #board-paper svg{ top: 30px; left: 0; height: 95%; -} -.componentsList tspan{ +} */ +.functionsList tspan{ /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; @@ -307,7 +308,7 @@ tspan#type{ text-shadow: none; border-color: #DEE8F3; } -.componentsList p{ +.functionsList p{ margin-bottom: 0; padding-left: 30px; background-position: left center; @@ -385,8 +386,9 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } -.controllerSidebar .joint-paper{ - width: 98% !important; +/*PAUSE*/ +.functionsList .joint-paper{ + width: 100% !important; height: 72vh !important; margin: 0 !important; } @@ -411,15 +413,9 @@ p.compType-4{ .new-action:hover{ background: #D7E7F9; } -.componentsList{ - margin-top: 16px; - padding: 0 20px 10px; -} -.componentsList{ - padding-bottom: 0; - /* height: calc( 100vh - 218px)!important; - overflow: scroll;*/ - background: #F4F9FE !important; +.functionsList{ + height: calc(100vh - 200px); + overflow-y: auto; } .custom-control.custom-checkbox:hover, .custom-control-label:hover{ @@ -433,8 +429,7 @@ p.compType-4{ .custom-control:hover{ background-color: white; } -.actionsList, -.componentsList{ +.actionsList{ height: 65vh !important; overflow-y: auto; } @@ -444,13 +439,16 @@ p.compType-4{ .actionsList li{ list-style: none; } -.componentsList .list-group-item{ +.functionsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; background: #fff; box-shadow: 0 2px 6px rgba(47, 83, 151, .15); border-radius: 2px; } +.functionsList .joint-paper{ + background: transparent !important; +} .actionsList .custom-control-label{ width: 100%; padding: 6px; @@ -499,7 +497,7 @@ p.compType-4{ margin-right: 9px; } /*Components List*/ -.componentsList .list-group-item{ +.functionsList .list-group-item{ padding-left: 36px; border: 0; font-size: 14px; @@ -1043,13 +1041,13 @@ p.compType-4{ background-color: #1B3E6F !important; color: #fff !important; } - - +/*PAUSE*/ +/* .joint-paper{ width: 96.4% !important; height: 80vh !important; margin: 60px auto 0 !important; -} +} */ ul.templateLegend{ margin: 0; } 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 d4fea67bb..76717b03c 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 @@ -12,7 +12,7 @@ <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal" - data-target="#exampleModalLong" data-tooltip="Package Details"> + data-target="#exampleModalLong" data-tooltip="Package Details"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg"/> + <img src="assets/img/icon-close.svg" /> </button> </div> <div class="modal-body package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -107,7 +107,7 @@ <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <!--Actions/Functions Side Menu Toogole Button--> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <!--Nav Tabs--> @@ -119,9 +119,9 @@ <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> @@ -162,7 +162,7 @@ <div class="btn-group viewBtns" role="group"> <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 + class="btn btn-secondary topologyView">Scripting </button> </div> </li> @@ -173,23 +173,24 @@ <ng-sidebar-container class="sidebar-container"> <!--Left Side Menu--> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> + [mode]="'push'" #sidebarLeft> <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 col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> <div class="row"> <div class="col"> <div class="tab-content" id="nav-tabContent"> + <!--Action List--> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> @@ -218,17 +219,20 @@ <li *ngFor="let customActionName of actions"> <label> <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openFunctionAttributes(customActionName)"></i> + (click)="openFunctionAttributes(customActionName)"></i> {{customActionName}} </label> </li> </ul> </div> </div> </div> + <!--Function List--> <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab"> <!--Function Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Functions"> - <div id="palette-paper" class="componentsList"></div> + <div class="functionsList"> + <div id="palette-paper"></div> + </div> </div> </div> </div> @@ -275,7 +279,7 @@ <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight1> + [position]="'right'" #sidebarRight1> <div class="container-fluid0"> <div class="row m-0"> <div class="col attributesContainer"> @@ -288,9 +292,9 @@ <div class="col-3 pl-0"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn view-source" tooltip="View Action Source" - placement="bottom"><i class="icon-source"></i></button> + placement="bottom"><i class="icon-source"></i></button> <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1" - class="btn trash-item" tooltip="Delete Action" placement="bottom"><i + class="btn trash-item" tooltip="Delete Action" placement="bottom"><i class="icon-delete-sm" aria-hidden="true"></i></button> </div> </div> @@ -302,24 +306,24 @@ </ng-sidebar> <!--Right Side Menu - Function Attribute--> <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'" - [position]="'right'" #sidebarRight2> + [position]="'right'" #sidebarRight2> <div class="container-fluid0"> <div class="row m-0"> <div class="col attributesContainer"> <div class="row m-0 attributesContainertTitle"> <div class="col-2 pl-0"> <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close" - placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i> + placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i> </button> </div> <h6 class="col pl-0">Function Attributes</h6> <div class="col-3 pl-0"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn view-source" tooltip="View Function Source" - placement="bottom"><i class="icon-source"></i></button> + placement="bottom"><i class="icon-source"></i></button> <button type="button" class="btn trash-item" tooltip="Delete Function" - placement="bottom"><i class="icon-delete-sm" type="button" - aria-hidden="true"></i></button> + placement="bottom"><i class="icon-delete-sm" type="button" + aria-hidden="true"></i></button> </div> </div> </div> @@ -330,5 +334,4 @@ </ng-sidebar> -</ng-sidebar-container> - +</ng-sidebar-container>
\ No newline at end of file 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 1475f1ac3..d0af828e8 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 @@ -251,6 +251,7 @@ export class DesignerComponent implements OnInit, OnDestroy { el: $('#palette-paper'), model: this.paletteGraph, width: 318, + // height: '100%', height: $('#palette-paper').height(), // background: { // color: 'rgba(0, 255, 0, 0.3)' @@ -268,12 +269,12 @@ export class DesignerComponent implements OnInit, OnDestroy { this.boardPaper = new joint.dia.Paper({ el: $('#board-paper'), model: this.boardGraph, - // height: 720, - // width: 1100, + height: 720, + width: 1100, gridSize: 10, drawGrid: true, - // background: { - // color: 'rgba(0, 255, 0, 0.3)' + // background: { + // color: 'rgba(0, 255, 0, 0.3)' // }, cellViewNamespace: joint.shapes }); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index b7a0ff9d5..417f60ba4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -14,9 +14,8 @@ declare module 'jointjs' { } } } - -const rectWidth = '100%'; -const rectHeight = '100%'; +const rectWidth = 616; +const rectHeight = 381; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, { @@ -40,8 +39,19 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> <g id="workflow-container" transform="translate(401.000000, 137.000000)"> <g id="Card"> - <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use> - <use fill-rule="evenodd" xlink:href="#custom-action"></use> + <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> + <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> + </g> + <g id="name"> + <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, + 0.8954305 87,2 L87,30 L87,30 L0,30 L0, + 2 C-1.3527075e-16,0.8954305 0.8954305, + 2.02906125e-16 2,0 Z" id="Rectangle" + fill="#C3CDDB"></path> + <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" + font-size="12" font-weight="bold" fill="#1B3E6F"> + <tspan id="label" x="20" y="20">Action 1</tspan> + </text> </g> </g> </g> 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 82010db1c..256789586 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 @@ -233,9 +233,6 @@ <input type="text" class="form-control" #velocity (input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)"> </td> - - - </ng-container> <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> @@ -259,11 +256,11 @@ <!------ View Table-------> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> <div class="mat-elevation-z8"> + <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator> <mat-form-field class="tableFilter float-right"> <mat-label>Filter</mat-label> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> + </mat-form-field> <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort> <!-- Required Column --> <ng-container matColumnDef="Required"> |