From 04a10c2e8d4bfe41b795f0fcf7a7b9cad41593fa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 1 May 2025 16:44:47 +0200 Subject: [PATCH] Reposition workspace entity actions (#19199) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add border to description * reposition menu * reposition menu * try and fix e2e tests * add data-mark * use correct function * bump helpers * style correction --------- Co-authored-by: Niels Lyngsø --- ...ontent-type-workspace-editor-header.element.ts | 5 ++++- .../components/body-layout/body-layout.element.ts | 15 +++++++-------- .../workspace-editor/workspace-editor.element.ts | 3 +-- .../workspace-entity-action-menu.element.ts | 6 +++--- .../workspace/webhook-workspace-editor.element.ts | 2 ++ .../package-lock.json | 8 ++++---- tests/Umbraco.Tests.AcceptanceTest/package.json | 2 +- .../DefaultConfig/Members/MemberGroups.spec.ts | 2 +- .../tests/DefaultConfig/Members/Members.spec.ts | 2 +- .../tests/DefaultConfig/Users/UserGroups.spec.ts | 2 +- 10 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/global-components/content-type-workspace-editor-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/global-components/content-type-workspace-editor-header.element.ts index 16d1524652..aed4ff718d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/global-components/content-type-workspace-editor-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/global-components/content-type-workspace-editor-header.element.ts @@ -126,15 +126,16 @@ export class UmbContentTypeWorkspaceEditorHeaderElement extends UmbLitElement { display: flex; flex: 1 1 auto; flex-direction: column; - gap: var(--uui-size-space-1); } #name { width: 100%; + z-index: 1; } #description { width: 100%; + margin-top: 1px; --uui-input-height: var(--uui-size-8); --uui-input-border-color: transparent; } @@ -147,6 +148,8 @@ export class UmbContentTypeWorkspaceEditorHeaderElement extends UmbLitElement { font-size: var(--uui-size-8); height: 60px; width: 60px; + --uui-button-border-color: transparent; + --uui-button-border-color-hover: var(--uui-color-border); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts index a9a5ff2f54..14a5caa954 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts @@ -101,13 +101,6 @@ export class UmbBodyLayoutElement extends LitElement { this._headerSlotHasChildren = this.#hasNodes(e); this.#setSlotVisibility(e.target as HTMLElement, this._headerSlotHasChildren); }}> - { - this._navigationSlotHasChildren = this.#hasNodes(e); - this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren); - }}> + { + this._navigationSlotHasChildren = this.#hasNodes(e); + this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren); + }}> @@ -204,7 +204,6 @@ export class UmbBodyLayoutElement extends LitElement { box-sizing: border-box; min-width: 0; } - #navigation-slot { margin-left: auto; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts index ae686a5243..6c16b3aac4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts @@ -90,9 +90,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { ${this.#renderBackButton()} - ${this.#renderViews()} - ${this.#renderRoutes()} + ${this.#renderViews()} ${this.#renderRoutes()} ${when( !this.enforceNoFooter, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts index b1f5f733a2..eb38a8fa53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts @@ -56,10 +56,10 @@ export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement { ? html` - ${this.localize.term('general_actions')} - + uui-button { height: 100%; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/webhook-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/webhook-workspace-editor.element.ts index bc43bceb77..c5cef0767e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/webhook-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/webhook-workspace-editor.element.ts @@ -74,10 +74,12 @@ export class UmbWebhookWorkspaceEditorElement extends UmbLitElement { #name { width: 100%; + z-index: 1; } #description { width: 100%; + margin-top: -1px; --uui-input-height: var(--uui-size-8); --uui-input-border-color: transparent; } diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 88ff1443eb..05e729b5ca 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -8,7 +8,7 @@ "hasInstallScript": true, "dependencies": { "@umbraco/json-models-builders": "^2.0.33", - "@umbraco/playwright-testhelpers": "^16.0.7", + "@umbraco/playwright-testhelpers": "^16.0.9", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" @@ -66,9 +66,9 @@ } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "16.0.7", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.7.tgz", - "integrity": "sha512-mb6i3lxz3M+PXko8wkX7dcRNU669CTroRX10O0EyXLQWmLXHOzUCOcdSiAjaVGczv9Ht0fmjXBL8BtU93bIZlA==", + "version": "16.0.9", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.9.tgz", + "integrity": "sha512-nfoRZNYrD2PP6k/GljiINCEA8VM6uvOAlqmkhYOdiTzrgLmVRqZExsNskm1BhlcxDhE6+XZlpjTcFIotFBKLFQ==", "dependencies": { "@umbraco/json-models-builders": "2.0.33", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index 94e5f3dc0b..585fe02588 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@umbraco/json-models-builders": "^2.0.33", - "@umbraco/playwright-testhelpers": "^16.0.7", + "@umbraco/playwright-testhelpers": "^16.0.9", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/MemberGroups.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/MemberGroups.spec.ts index ad603889fc..54618fa4a7 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/MemberGroups.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/MemberGroups.spec.ts @@ -58,7 +58,7 @@ test('can delete a member group', {tag: '@smoke'}, async ({umbracoApi, umbracoUi // Act await umbracoUi.memberGroup.clickMemberGroupLinkByName(memberGroupName); - await umbracoUi.memberGroup.clickActionsButton(); + await umbracoUi.memberGroup.clickActionButton(); await umbracoUi.memberGroup.clickDeleteButton(); await umbracoUi.memberGroup.clickConfirmToDeleteButton(); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/Members.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/Members.spec.ts index d8d9540b2e..a36e52b530 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/Members.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/Members.spec.ts @@ -217,7 +217,7 @@ test('can delete member', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => { // Act await umbracoUi.member.clickMemberLinkByName(memberName); - await umbracoUi.memberGroup.clickActionsButton(); + await umbracoUi.memberGroup.clickActionButton(); await umbracoUi.memberGroup.clickDeleteButton(); await umbracoUi.memberGroup.clickConfirmToDeleteButton(); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/UserGroups.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/UserGroups.spec.ts index a2ac69290f..3f554a32ab 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/UserGroups.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/UserGroups.spec.ts @@ -115,7 +115,7 @@ test('can delete a user group', async ({umbracoApi, umbracoUi}) => { await umbracoUi.userGroup.clickUserGroupWithName(userGroupName); // Act - await umbracoUi.userGroup.clickActionsButton(); + await umbracoUi.userGroup.clickActionButton(); await umbracoUi.userGroup.clickDeleteButton(); await umbracoUi.userGroup.clickConfirmToDeleteButton();