From 58bb318b848458f7b34c48b2ca010b65ddeeffa7 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 28 May 2024 16:55:23 +0100
Subject: [PATCH] Document Type Workspace, used flexbox for actions

so to have more control over the layout/spacing.
---
 .../content-type-design-editor.element.ts     | 97 +++++++++++--------
 1 file changed, 57 insertions(+), 40 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
index 5046c9228a..8c87055a6d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
@@ -369,7 +369,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		return html`
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					<div id="container-list" class="flex">${this.renderTabsNavigation()} ${this.renderAddButton()}</div>
+					<div id="container-list">${this.renderTabsNavigation()} ${this.renderAddButton()}</div>
 					${this.renderActions()}
 				</div>
 				<umb-router-slot
@@ -388,10 +388,12 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 	renderAddButton() {
 		// TODO: Localize this:
 		if (this._sortModeActive) return;
-		return html`<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab">
-			<uui-icon name="icon-add"></uui-icon>
-			Add tab
-		</uui-button>`;
+		return html`
+			<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab">
+				<uui-icon name="icon-add"></uui-icon>
+				Add tab
+			</uui-button>
+		`;
 	}
 
 	renderActions() {
@@ -399,37 +401,41 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 			? this.localize.term('general_reorderDone')
 			: this.localize.term('general_reorder');
 
-		return html`<div>
-			${this._compositionRepositoryAlias
-				? html`<uui-button
-						look="outline"
-						label=${this.localize.term('contentTypeEditor_compositions')}
-						compact
-						@click=${this.#openCompositionModal}>
-						<uui-icon name="icon-merge"></uui-icon>
-						${this.localize.term('contentTypeEditor_compositions')}
-					</uui-button>`
-				: ''}
-			<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
-				<uui-icon name="icon-navigation"></uui-icon>
-				${sortButtonText}
-			</uui-button>
-		</div>`;
+		return html`
+			<div id="actions">
+				${this._compositionRepositoryAlias
+					? html` <uui-button
+							look="outline"
+							label=${this.localize.term('contentTypeEditor_compositions')}
+							compact
+							@click=${this.#openCompositionModal}>
+							<uui-icon name="icon-merge"></uui-icon>
+							${this.localize.term('contentTypeEditor_compositions')}
+						</uui-button>`
+					: ''}
+				<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
+					<uui-icon name="icon-navigation"></uui-icon>
+					${sortButtonText}
+				</uui-button>
+			</div>
+		`;
 	}
 
 	renderTabsNavigation() {
 		if (!this._tabs || this._tabs.length === 0) return;
 
-		return html`<div id="tabs-group" class="flex">
-			<uui-tab-group>
-				${this.renderRootTab()}
-				${repeat(
-					this._tabs,
-					(tab) => tab.id,
-					(tab) => this.renderTab(tab),
-				)}
-			</uui-tab-group>
-		</div>`;
+		return html`
+			<div id="tabs-group">
+				<uui-tab-group>
+					${this.renderRootTab()}
+					${repeat(
+						this._tabs,
+						(tab) => tab.id,
+						(tab) => this.renderTab(tab),
+					)}
+				</uui-tab-group>
+			</div>
+		`;
 	}
 
 	renderRootTab() {
@@ -439,14 +445,16 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 			// If we don't have any root groups and we are not in sort mode, then we don't want to render the root tab.
 			return nothing;
 		}
-		return html`<uui-tab
-			id="root-tab"
-			class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
-			label=${this.localize.term('general_generic')}
-			.active=${rootTabActive}
-			href=${rootTabPath}>
-			${this.localize.term('general_generic')}
-		</uui-tab>`;
+		return html`
+			<uui-tab
+				id="root-tab"
+				class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
+				label=${this.localize.term('general_generic')}
+				.active=${rootTabActive}
+				href=${rootTabPath}>
+				${this.localize.term('general_generic')}
+			</uui-tab>
+		`;
 	}
 
 	renderTab(tab: UmbPropertyTypeContainerModel) {
@@ -563,10 +571,19 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 				flex-wrap: nowrap;
 			}
 
-			.flex {
+			#container-list {
 				display: flex;
 			}
 
+			#tabs-group {
+				display: flex;
+			}
+
+			#actions {
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+
 			uui-tab-group {
 				flex-wrap: nowrap;
 			}