From 20d2861bce98ffc742b6521b630aa7917cf3b80d Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 24 May 2024 21:26:28 +0100 Subject: [PATCH 1/4] Relation Types Collection: adds toolbar to remove the visual gap in the header. --- .../relation-types/collection/manifests.ts | 1 + .../relation-types-collection.element.ts | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts index 1d2cc270a2..7f882314dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts @@ -10,6 +10,7 @@ const collectionManifest: ManifestCollection = { kind: 'default', alias: UMB_RELATION_TYPE_COLLECTION_ALIAS, name: 'Relation Type Collection', + element: () => import('./relation-types-collection.element.js'), meta: { repositoryAlias: UMB_RELATION_TYPE_COLLECTION_REPOSITORY_ALIAS, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts new file mode 100644 index 0000000000..4b3a9a276f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts @@ -0,0 +1,19 @@ +import { customElement, html } from '@umbraco-cms/backoffice/external/lit'; +import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection'; + +@customElement('umb-relation-types-collection') +export class UmbRelationTypesCollectionElement extends UmbCollectionDefaultElement { + + // NOTE: Returns empty toolbar, so to remove the header padding. + protected renderToolbar() { + return html``; + } +} + +export default UmbRelationTypesCollectionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-relation-types-collection': UmbRelationTypesCollectionElement; + } +} From 4282e6a5a44df2435eae0d058d506285975f9b28 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 24 May 2024 21:26:53 +0100 Subject: [PATCH 2/4] Relation Type Workspace: adds loader --- .../relation-type-detail-workspace-view.element.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts index 66655f1cd7..a44e71b5f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts @@ -34,6 +34,9 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp @state() _totalPages = 1; + @state() + _loading = false; + #workspaceContext?: typeof UMB_RELATION_TYPE_WORKSPACE_CONTEXT.TYPE; #relationCollectionRepository = new UmbRelationCollectionRepository(this); #paginationManager = new UmbPaginationManager(); @@ -73,6 +76,8 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp } async #requestRelations() { + this._loading = true; + const relationTypeUnique = this.#workspaceContext?.getUnique(); if (!relationTypeUnique) throw new Error('Relation type unique is required'); @@ -87,6 +92,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp if (data) { this._relations = data.items; this.#paginationManager.setTotalItems(data.total); + this._loading = false; } } @@ -164,6 +170,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp } #renderRelations() { + if (this._loading) return html``; return html`
@@ -207,6 +214,10 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp grid-template-columns: 1fr 350px; } + uui-loader { + text-align: center; + } + uui-pagination { margin-top: var(--uui-size-layout-1); display: block; From 349fcae371817f3522b17ef1f33a760ac6eb1afd Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 24 May 2024 21:27:20 +0100 Subject: [PATCH 3/4] Relation Type root workspace: headline localization --- .../relation-type-root-workspace.element.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts index 61b0e50365..3a80fc0f81 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts @@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-relation-type-root-workspace') export class UmbRelationTypeRootWorkspaceElement extends UmbLitElement { render() { - return html` - ; - `; + return html` + + ; + + `; } } From 8ecd241d20bbaf48c1872d8aa2bb1f45e0bd3c51 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sat, 25 May 2024 19:38:24 +0200 Subject: [PATCH 4/4] singular form --- .../relations/relation-types/collection/manifests.ts | 2 +- ....element.ts => relation-type-collection.element.ts} | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/{relation-types-collection.element.ts => relation-type-collection.element.ts} (55%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts index 7f882314dd..fa2f027bca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts @@ -10,7 +10,7 @@ const collectionManifest: ManifestCollection = { kind: 'default', alias: UMB_RELATION_TYPE_COLLECTION_ALIAS, name: 'Relation Type Collection', - element: () => import('./relation-types-collection.element.js'), + element: () => import('./relation-type-collection.element.js'), meta: { repositoryAlias: UMB_RELATION_TYPE_COLLECTION_REPOSITORY_ALIAS, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts similarity index 55% rename from src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts index 4b3a9a276f..53fbc181bf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-types-collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts @@ -1,19 +1,19 @@ import { customElement, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection'; -@customElement('umb-relation-types-collection') -export class UmbRelationTypesCollectionElement extends UmbCollectionDefaultElement { - +const elementName = 'umb-relation-type-collection'; +@customElement(elementName) +export class UmbRelationTypeCollectionElement extends UmbCollectionDefaultElement { // NOTE: Returns empty toolbar, so to remove the header padding. protected renderToolbar() { return html``; } } -export default UmbRelationTypesCollectionElement; +export default UmbRelationTypeCollectionElement; declare global { interface HTMLElementTagNameMap { - 'umb-relation-types-collection': UmbRelationTypesCollectionElement; + [elementName]: UmbRelationTypeCollectionElement; } }