From d001894a1dff08ed0f662ccea77857a90197b5a7 Mon Sep 17 00:00:00 2001 From: Fiete Ostkamp Date: Fri, 6 Mar 2026 10:37:41 +0100 Subject: [PATCH] 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 --- .../action-attributes.component.html | 8 +- .../action-attributes.component.ts | 30 +- .../packages/designer/designer.component.css | 7 +- .../packages/designer/designer.component.html | 51 ++- .../packages/designer/designer.component.spec.ts | 241 +++++++++- .../packages/designer/designer.component.ts | 161 ++++++- .../packages/designer/designer.store.ts | 28 ++ .../designer/jointjs/elements/action.element.ts | 6 +- .../jointjs/elements/board.function.element.ts | 13 +- .../source-view/source-view.component.html | 17 +- .../package-creation-extraction.service.ts | 49 +- .../cba-zips/RT-resource-resolution-1.0.0.zip | Bin 10639 -> 8929 bytes cds-ui/e2e-playwright/package-lock.json | 14 +- cds-ui/e2e-playwright/tests/designer.spec.ts | 507 ++++++++++++++++++++- .../resource-dictionary-create-validation.spec.ts | 3 +- cds-ui/server/package.json | 2 +- 16 files changed, 1028 insertions(+), 109 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 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}} -