From: Fiete Ostkamp Date: Fri, 6 Mar 2026 09:37:41 +0000 (+0100) Subject: Designer mode improvements part 2 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=d001894a1dff08ed0f662ccea77857a90197b5a7;p=ccsdk%2Fcds.git Designer mode improvements part 2 - fix designer and scripting buttons overflowing outside the navbar on smaller screen sizes - fix close, code and delete buttons in action attributes being only partially clickable because they are being overlayed by the navbar - use the default font for the canvas action element - center the text within the action element horizontally - increase font size fo the text within the action elements - support deleting actions Issue-ID: CCSDK-4177 Change-Id: I399677e18335d64d0761ae6ddc651b058869a8ff Signed-off-by: Fiete Ostkamp --- 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 3b946de15..9ec99dcc7 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 @@ -2,8 +2,10 @@
- - + +
@@ -468,7 +470,7 @@
-
{{tempInput}} +
{{tempInput}}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts index b04e89f21..fb9d5a9c8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {ChangeDetectorRef, Component, EventEmitter, OnInit, Output} from '@angular/core'; import {InputActionAttribute, OutputActionAttribute} from './models/InputActionAttribute'; import {DesignerStore} from '../designer.store'; import {DesignerDashboardState} from '../model/designer.dashboard.state'; @@ -53,9 +53,12 @@ export class ActionAttributesComponent implements OnInit { suggestedDeletedInput: any = {}; suggestedEditedAttribute: any = {}; + @Output() actionRenamed = new EventEmitter<{ oldName: string; newName: string }>(); + constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore, - private packageCreationStore: PackageCreationStore) { + private packageCreationStore: PackageCreationStore, + private cd: ChangeDetectorRef) { } @@ -68,6 +71,10 @@ export class ActionAttributesComponent implements OnInit { this.actionName = this.designerState.actionName; console.log(this.actionName); const action = this.designerState.template.workflows[this.actionName] as Action; + if (!action) { + this.cd.detectChanges(); + return; + } if (action.steps) { const steps = Object.keys(action.steps); this.isFunctionAttributeActive = steps && steps.length > 0; @@ -86,6 +93,7 @@ export class ActionAttributesComponent implements OnInit { this.outputs = this.extractFields(namesOfOutput, action.outputs); } } + this.cd.detectChanges(); }); this.functionsStore.state$.subscribe(functions => { @@ -100,6 +108,24 @@ export class ActionAttributesComponent implements OnInit { } + onActionNameChange(event: Event) { + const inputEl = event.target as HTMLInputElement; + const trimmed = inputEl.value.trim(); + if (!trimmed) { + // Reject empty name – restore the current store value in the DOM. + this.actionName = this.designerState.actionName; + inputEl.value = this.actionName; + return; + } + const oldName = this.designerState.actionName; + if (trimmed === oldName) { + return; + } + this.actionName = trimmed; + this.designerStore.renameAction(oldName, trimmed); + this.actionRenamed.emit({ oldName, newName: trimmed }); + } + private extractFields(namesOfOutput: string[], container: {}) { const fields = []; for (const nameOutput of namesOfOutput) { 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 2c9ae00f8..d6e97b18f 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 @@ -40,6 +40,12 @@ body{ .editNavbar .navbar{ padding: 0; } +.editNavbar .navbar-collapse { + pointer-events: none; +} +.editNavbar .navbar-collapse > * { + pointer-events: auto; +} /*Header*/ header{ @@ -984,7 +990,6 @@ p.compType-4{ } .viewBtns .btn{ - margin-top: 16px; padding: 0 12px !important; border: 0; font-size: 11px; 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 219712761..1b475257b 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 @@ -160,17 +160,13 @@ - - + + +
+ +
@@ -226,7 +222,7 @@ {{customActionName}} -