add layout element

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts

@@ -182,6 +182,12 @@ export class UmbDocumentHistoryWorkspaceInfoAppElement extends UmbLitElement {
 				gap: var(--uui-size-layout-1);
 			}
 
+			.log-type uui-tag {
+				height: fit-content;
+				margin-top: auto;
+				margin-bottom: auto;
+			}
+
 			uui-pagination {
 				flex: 1;
 				display: flex;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts

@@ -257,8 +257,7 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 				justify-content: space-between;
 				align-items: center;
 				gap: var(--uui-size-6);
-
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
 
 				&:is(a) {
 					cursor: pointer;

src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/manifests.ts

@@ -8,9 +8,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 		alias: 'Umb.WorkspaceInfoApp.Media.History',
 		element: () => import('./media-history-workspace-info-app.element.js'),
 		weight: 80,
-		meta: {
-			label: '#general_history',
-		},
 		conditions: [
 			{
 				alias: UMB_WORKSPACE_CONDITION_ALIAS,

src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.ts

@@ -2,7 +2,7 @@ import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
 import type { UmbMediaAuditLogModel } from '../types.js';
 import { UmbMediaAuditLogRepository } from '../repository/index.js';
 import { getMediaHistoryTagStyleAndText, TimeOptions } from './utils.js';
-import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing, repeat, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
@@ -84,8 +84,16 @@ export class UmbMediaHistoryWorkspaceInfoAppElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
-			${this.#renderPagination()}
+			<umb-workspace-info-app-layout headline="#general_history">
+				<div id="content">
+					${when(
+						this._items,
+						() => this.#renderHistory(),
+						() => html`<div id="loader"><uui-loader></uui-loader></div>`,
+					)}
+					${this.#renderPagination()}
+				</div>
+			</umb-workspace-info-app-layout>
 		`;
 	}
 
@@ -142,30 +150,30 @@ export class UmbMediaHistoryWorkspaceInfoAppElement extends UmbLitElement {
 	static override styles = [
 		UmbTextStyles,
 		css`
-			:host {
+			#content {
 				display: block;
 				padding: var(--uui-size-space-4) var(--uui-size-space-5);
 			}
 
-			uui-loader-circle {
-				font-size: 2rem;
+			#loader {
+				display: flex;
+				justify-content: center;
 			}
 
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
+			.log-type {
+				display: grid;
+				grid-template-columns: var(--uui-size-40) auto;
+				gap: var(--uui-size-layout-1);
 			}
 
-			.log-type {
-				flex-grow: 1;
-				gap: var(--uui-size-space-2);
+			.log-type uui-tag {
+				height: fit-content;
+				margin-top: auto;
+				margin-bottom: auto;
 			}
 
 			uui-pagination {
 				flex: 1;
-				display: inline-block;
-			}
-
-			.pagination {
 				display: flex;
 				justify-content: center;
 				margin-top: var(--uui-size-layout-1);

src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts

@@ -8,9 +8,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 		alias: 'Umb.WorkspaceInfoApp.Media.References',
 		element: () => import('./media-references-workspace-info-app.element.js'),
 		weight: 90,
-		meta: {
-			label: '#references_labelUsedByItems',
-		},
 		conditions: [
 			{
 				alias: UMB_WORKSPACE_CONDITION_ALIAS,

src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts

@@ -155,20 +155,20 @@ export class UmbMediaReferencesWorkspaceInfoAppElement extends UmbLitElement {
 	}
 
 	override render() {
+		if (!this._items?.length) return nothing;
 		return html`
-			${when(
-				this._loading,
-				() => html`<uui-loader></uui-loader>`,
-				() => html`${this.#renderItems()} ${this.#renderPagination()}`,
-			)}
+			<umb-workspace-info-app-layout headline="#references_labelUsedByItems">
+				${when(
+					this._loading,
+					() => html`<uui-loader></uui-loader>`,
+					() => html`${this.#renderItems()} ${this.#renderPagination()}`,
+				)}
+			</umb-workspace-info-app-layout>
 		`;
 	}
 
 	#renderItems() {
-		if (!this._items?.length)
-			return html`<p>
-				<umb-localize key="references_itemHasNoReferences">This item has no references.</umb-localize>
-			</p>`;
+		if (!this._items?.length) return nothing;
 		return html`
 			<uui-table>
 				<uui-table-head>

src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts

@@ -8,9 +8,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 		alias: 'Umb.WorkspaceInfoApp.Media.Links',
 		element: () => import('./media-links-workspace-info-app.element.js'),
 		weight: 100,
-		meta: {
-			label: '#general_links',
-		},
 		conditions: [
 			{
 				alias: UMB_WORKSPACE_CONDITION_ALIAS,

src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/media-links-workspace-info-app.element.ts

@@ -32,7 +32,9 @@ export class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
 	}
 
 	protected override render() {
-		return html` ${this.#renderLinksSection()} `;
+		return html`<umb-workspace-info-app-layout headline="#general_links">
+			${this.#renderLinksSection()}
+		</umb-workspace-info-app-layout> `;
 	}
 
 	#openSvg(imagePath: string) {
@@ -100,7 +102,7 @@ export class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
 			}
 
 			.link-item {
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
 				display: grid;
 				grid-template-columns: 1fr auto;
 				gap: var(--uui-size-6);

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts

@@ -102,10 +102,7 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
 	override render() {
 		return html`
 			<div class="container">
-				<umb-extension-slot
-					id="workspace-info-apps"
-					type="workspaceInfoApp"
-					.renderMethod=${this.#renderInfoApp}></umb-extension-slot>
+				<umb-extension-slot id="workspace-info-apps" type="workspaceInfoApp"></umb-extension-slot>
 			</div>
 			<div class="container">
 				<uui-box headline=${this.localize.term('general_general')} id="general-section"
@@ -115,17 +112,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
 		`;
 	}
 
-	#renderInfoApp(initializer: UmbExtensionElementInitializer<ManifestWorkspaceInfoApp>) {
-		const headline = initializer.manifest?.meta.label;
-		return html`
-			<uui-box
-				headline=${ifDefined(headline ? this.localize.string(headline) : undefined)}
-				style="--uui-box-default-padding:0">
-				${initializer.component}</uui-box
-			>
-		`;
-	}
-
 	#renderGeneralSection() {
 		return html`
 			${this.#renderCreateDate()} ${this.#renderUpdateDate()}