diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-definition')
3 files changed, 35 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html index f3043ffebd..bf36df0593 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html @@ -69,15 +69,20 @@ <span class="cell header-cell field-description header-description"> {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }} </span> + <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span> </div> - <div class="data-row" *ngFor="let operation of interface1.operations" (click)="onSelectInterfaceOperation(interface1, operation)"> - <span class="cell field-name">{{operation.name}}</span> - <span class="cell field-description" [ngClass]="{'collapsed': operation.isCollapsed}"> - {{operation.getDescriptionEllipsis()}} + <div class="data-row" *ngFor="let operation of interface1.operations"> + <span class="cell field-name" + (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span> + <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)" + [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}} <span class="more-or-less link" (click)="operation.toggleCollapsed($event)"> {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}} - </span> </span> + </span> + <span class="cell field-delete" *ngIf="!readonly"> + <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button> + </span> </div> </div> </div> diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less index 2b76c8c0ec..464732e016 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less @@ -20,10 +20,21 @@ */ @import '../../../../assets/styles/variables.less'; @import '../../../../assets/styles/override.less'; - +@import '../../../../assets/styles/sprite-old.less'; .interface-definition { font-size: 14px; + .delete-col-header{ + .sprite; + .sprite.e-sdc-small-icon-delete; + } + + .field-delete{ + display: flex; + align-items: center; + justify-content: center; + } + .interface-empty-msg { .bold-message { font-family: @font-opensans-bold; @@ -184,10 +195,18 @@ .data-row { cursor: pointer; + .table-delete-btn{ + .sprite; + .sprite.e-sdc-small-icon-delete; + border: none; + display: none !important; + } &:hover { background: @sdcui_color_light-silver; - + .table-delete-btn{ + display: inline-block !important; + } .cell { &.field-name { color: @sdcui_color_dark-blue; diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts index 5372fc919d..2a25ad90df 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts @@ -398,8 +398,10 @@ export class InterfaceDefinitionComponent { return this.interfaces.filter((interfaceData) => interfaceData.operations && interfaceData.operations.length > 0).length > 0; } - onRemoveOperation = (event: Event, operation: OperationModel): void => { - event.stopPropagation(); + onRemoveOperation(operation: OperationModel): void { + if (this.readonly) { + return; + } const deleteButton: IModalButtonComponent = { id: 'deleteButton', |