From 4aae50257246c6a4713916379fa7d47a8333dde5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 30 Jan 2025 14:57:40 +0100 Subject: [PATCH] add layout element --- ...ment-history-workspace-info-app.element.ts | 6 +++ ...cument-links-workspace-info-app.element.ts | 3 +- .../media/audit-log/info-app/manifests.ts | 3 -- ...edia-history-workspace-info-app.element.ts | 40 +++++++++++-------- .../media/reference/info-app/manifests.ts | 3 -- ...a-references-workspace-info-app.element.ts | 18 ++++----- .../media/media/url/info-app/manifests.ts | 3 -- .../media-links-workspace-info-app.element.ts | 6 ++- .../info/media-workspace-view-info.element.ts | 16 +------- 9 files changed, 45 insertions(+), 53 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts index 2a08e9e9b6..264f28b9a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts +++ b/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; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts index ea3346c04c..bfd6d56d45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts +++ b/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; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/manifests.ts index ff6482b7d7..d79e6b6fba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/manifests.ts @@ -8,9 +8,6 @@ export const manifests: Array = [ 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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.ts index 9b1d8104f3..58fa25757a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.ts +++ b/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` `} - ${this.#renderPagination()} + +
+ ${when( + this._items, + () => this.#renderHistory(), + () => html`
`, + )} + ${this.#renderPagination()} +
+ `; } @@ -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; - } - - uui-tag uui-icon { - margin-right: var(--uui-size-space-1); + #loader { + display: flex; + justify-content: center; } .log-type { - flex-grow: 1; - gap: var(--uui-size-space-2); + display: grid; + grid-template-columns: var(--uui-size-40) auto; + gap: var(--uui-size-layout-1); + } + + .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); diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts index 772ac53770..6740bdc27f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts @@ -8,9 +8,6 @@ export const manifests: Array = [ 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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts index 1b2b6ddccc..e552b85540 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts +++ b/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``, - () => html`${this.#renderItems()} ${this.#renderPagination()}`, - )} + + ${when( + this._loading, + () => html``, + () => html`${this.#renderItems()} ${this.#renderPagination()}`, + )} + `; } #renderItems() { - if (!this._items?.length) - return html`

- This item has no references. -

`; + if (!this._items?.length) return nothing; return html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts index fe093b2a41..ac663b2e9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts @@ -8,9 +8,6 @@ export const manifests: Array = [ 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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/media-links-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/media-links-workspace-info-app.element.ts index b3994befd0..114792debb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/media-links-workspace-info-app.element.ts +++ b/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` + ${this.#renderLinksSection()} + `; } #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); diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts index 511de01adb..c201edb13d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts +++ b/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`
- +
) { - const headline = initializer.manifest?.meta.label; - return html` - - ${initializer.component} - `; - } - #renderGeneralSection() { return html` ${this.#renderCreateDate()} ${this.#renderUpdateDate()}