Reposition workspace entity actions (#19199)

* 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ø <niels.lyngso@gmail.com>
2025-05-01 16:44:47 +02:00
parent 60457456f9
commit 04a10c2e8d
10 changed files with 25 additions and 22 deletions
--- 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);
 			}
 		`,
 	];
--- 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);
 					}}></slot>
-				<slot
-					id="navigation-slot"
-					name="navigation"
-					@slotchange=${(e: Event) => {
-						this._navigationSlotHasChildren = this.#hasNodes(e);
-						this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren);
-					}}></slot>
 				<slot
 					id="action-menu-slot"
 					name="action-menu"
@@ -115,6 +108,13 @@ export class UmbBodyLayoutElement extends LitElement {
 						this._actionsMenuSlotHasChildren = this.#hasNodes(e);
 						this.#setSlotVisibility(e.target as HTMLElement, this._actionsMenuSlotHasChildren);
 					}}></slot>
+				<slot
+					id="navigation-slot"
+					name="navigation"
+					@slotchange=${(e: Event) => {
+						this._navigationSlotHasChildren = this.#hasNodes(e);
+						this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren);
+					}}></slot>
 			</div>

 			<!-- This div should be changed for the uui-scroll-container when it gets updated -->
@@ -204,7 +204,6 @@ export class UmbBodyLayoutElement extends LitElement {
 				box-sizing: border-box;
 				min-width: 0;
 			}
-
 			#navigation-slot {
 				margin-left: auto;
 			}
--- 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 {
 			<umb-body-layout main-no-padding .headline=${this.headline} ?loading=${this.loading}>
 				${this.#renderBackButton()}
 				<slot name="header" slot="header"></slot>
-				${this.#renderViews()}
 				<slot name="action-menu" slot="action-menu"></slot>
-				${this.#renderRoutes()}
+				${this.#renderViews()} ${this.#renderRoutes()}
 				<slot></slot>
 				${when(
 					!this.enforceNoFooter,
--- 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`
 					<uui-button
 						id="action-button"
+						data-mark="workspace:action-menu-button"
 						popovertarget="workspace-entity-action-menu-popover"
 						label=${this.localize.term('general_actions')}>
-						${this.localize.term('general_actions')}
-						<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
+						<uui-symbol-more></uui-symbol-more>
 					</uui-button>
 					<uui-popover-container
 						id="workspace-entity-action-menu-popover"
@@ -84,8 +84,8 @@ export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
 		css`
 			:host {
 				height: 100%;
+				margin-left: calc(var(--uui-size-layout-1) * -1);
 			}
-
 			:host > uui-button {
 				height: 100%;
 			}
--- 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;
 			}
--- 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"
--- 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"
--- 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();

--- 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();

--- 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();