yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor content editor views

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-14 09:02:58 +01:00
parent dec16b4f24
commit accd6d8221
8 changed files with 68 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts
View File

@@ -2,16 +2,16 @@ import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token
import type { UmbBlockWorkspaceElementManagerNames } from '../../block-workspace.context.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type {
UmbPropertyContainerTypes,
UmbContentTypeModel,
UmbPropertyTypeModel,
} from '@umbraco-cms/backoffice/content-type';
import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-block-workspace-view-edit-properties')
export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
#managerName?: UmbBlockWorkspaceElementManagerNames;
#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
@property({ attribute: false })
public get managerName(): UmbBlockWorkspaceElementManagerNames | undefined {
return this.#managerName;
@@ -20,24 +20,13 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
this.#managerName = value;
this.#setStructureManager();
}
#managerName?: UmbBlockWorkspaceElementManagerNames;
#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
@property({ type: String, attribute: 'container-name', reflect: false })
public get containerName(): string | undefined {
return this.#propertyStructureHelper.getContainerName();
public get containerId(): string | null | undefined {
return this.#propertyStructureHelper.getContainerId();
}
public set containerName(value: string | undefined) {
this.#propertyStructureHelper.setContainerName(value);
}
@property({ type: String, attribute: 'container-type', reflect: false })
public get containerType(): UmbPropertyContainerTypes | undefined {
return this.#propertyStructureHelper.getContainerType();
}
public set containerType(value: UmbPropertyContainerTypes | undefined) {
this.#propertyStructureHelper.setContainerType(value);
public set containerId(value: string | null | undefined) {
this.#propertyStructureHelper.setContainerId(value);
}
@state()

50
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts
View File

@@ -47,11 +47,14 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
@property({ type: String })
public get containerId(): string | null | undefined {
return this.#groupStructureHelper.getParentId();
return this._containerId;
}
public set containerId(value: string | null | undefined) {
this._containerId = value;
this.#groupStructureHelper.setParentId(value);
}
@state()
private _containerId?: string | null;
/**
* If true, the group box will be hidden, if we are to only represents one group.
@@ -95,30 +98,27 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
}
render() {
return html`
${this._hasProperties ? this.#renderPart(this._tabName) : ''}
${repeat(
this._groups,
(group) => group.name,
(group) => this.#renderPart(group.name, group.name),
)}
`;
}
#renderPart(groupName: string | null | undefined, boxName?: string | null | undefined) {
return this.hideSingleGroup && this._groups.length === 1
? html` <umb-block-workspace-view-edit-properties
.managerName=${this.#managerName}
class="properties"
container-type="Group"
container-name=${groupName || ''}></umb-block-workspace-view-edit-properties>`
: html` <uui-box .headline=${boxName || ''}
><umb-block-workspace-view-edit-properties
.managerName=${this.#managerName}
class="properties"
container-type="Group"
container-name=${groupName || ''}></umb-block-workspace-view-edit-properties
></uui-box>`;
return this._containerId
? html`
${this._hasProperties
? html` <umb-block-workspace-view-edit-properties
.managerName=${this.#managerName}
class="properties"
.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>`
: ''}
${repeat(
this._groups,
(group) => group.name,
(group) =>
html` <uui-box .headline=${group.name || ''}
><umb-block-workspace-view-edit-properties
.managerName=${this.#managerName}
class="properties"
.containerId=${group.id}></umb-block-workspace-view-edit-properties
></uui-box>`,
)}
`
: '';
}
static styles = [

20
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts
View File

@@ -1,27 +1,19 @@
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
@customElement('umb-document-workspace-view-edit-properties')
export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', reflect: false })
public get containerName(): string | undefined {
return this.#propertyStructureHelper.getContainerName();
@property({ type: String, attribute: 'container-id', reflect: false })
public get containerId(): string | null | undefined {
return this.#propertyStructureHelper.getContainerId();
}
public set containerName(value: string | undefined) {
this.#propertyStructureHelper.setContainerName(value);
}
@property({ type: String, attribute: 'container-type', reflect: false })
public get containerType(): UmbPropertyContainerTypes | undefined {
return this.#propertyStructureHelper.getContainerType();
}
public set containerType(value: UmbPropertyContainerTypes | undefined) {
this.#propertyStructureHelper.setContainerType(value);
public set containerId(value: string | null | undefined) {
this.#propertyStructureHelper.setContainerId(value);
}
#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbDocumentTypeDetailModel>(this);

11
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
View File

@@ -28,11 +28,14 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
@property({ type: String })
public get containerId(): string | null | undefined {
return this.#groupStructureHelper.getParentId();
return this._containerId;
}
public set containerId(value: string | null | undefined) {
this._containerId = value;
this.#groupStructureHelper.setParentId(value);
}
@state()
private _containerId?: string | null;
#groupStructureHelper = new UmbContentTypeContainerStructureHelper<any>(this);
@@ -63,8 +66,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
<uui-box>
<umb-document-workspace-view-edit-properties
class="properties"
container-type="Tab"
container-name=${this.tabName ?? ''}></umb-document-workspace-view-edit-properties>
.containerId=${this._containerId}></umb-document-workspace-view-edit-properties>
</uui-box>
`
: ''}
@@ -75,8 +77,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
html`<uui-box .headline=${group.name ?? ''}>
<umb-document-workspace-view-edit-properties
class="properties"
container-type="Group"
container-name=${group.name ?? ''}></umb-document-workspace-view-edit-properties>
.containerId=${group.id}></umb-document-workspace-view-edit-properties>
</uui-box>`,
)}
`;

18
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/edit/media-workspace-view-edit-properties.element.ts
View File

@@ -1,26 +1,18 @@
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../media-workspace.context-token.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-media-workspace-view-edit-properties')
export class UmbMediaWorkspaceViewEditPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', reflect: false })
public get containerName(): string | undefined {
return this._propertyStructureHelper.getContainerName();
public get containerId(): string | null | undefined {
return this._propertyStructureHelper.getContainerId();
}
public set containerName(value: string | undefined) {
this._propertyStructureHelper.setContainerName(value);
}
@property({ type: String, attribute: 'container-type', reflect: false })
public get containerType(): UmbPropertyContainerTypes | undefined {
return this._propertyStructureHelper.getContainerType();
}
public set containerType(value: UmbPropertyContainerTypes | undefined) {
this._propertyStructureHelper.setContainerType(value);
public set containerId(value: string | null | undefined) {
this._propertyStructureHelper.setContainerId(value);
}
_propertyStructureHelper = new UmbContentTypePropertyStructureHelper<any>(this);

11
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/edit/media-workspace-view-edit-tab.element.ts
View File

@@ -28,11 +28,14 @@ export class UmbMediaWorkspaceViewEditTabElement extends UmbLitElement {
@property({ type: String })
public get containerId(): string | null | undefined {
return this.#groupStructureHelper.getParentId();
return this._containerId;
}
public set containerId(value: string | null | undefined) {
this._containerId = value;
this.#groupStructureHelper.setParentId(value);
}
@state()
private _containerId?: string | null;
#groupStructureHelper = new UmbContentTypeContainerStructureHelper<any>(this);
@@ -63,8 +66,7 @@ export class UmbMediaWorkspaceViewEditTabElement extends UmbLitElement {
<uui-box>
<umb-media-workspace-view-edit-properties
class="properties"
container-type="Tab"
container-name=${this.tabName || ''}></umb-media-workspace-view-edit-properties>
.containerId=${this._containerId}></umb-media-workspace-view-edit-properties>
</uui-box>
`
: ''}
@@ -75,8 +77,7 @@ export class UmbMediaWorkspaceViewEditTabElement extends UmbLitElement {
html`<uui-box .headline=${group.name || ''}>
<umb-media-workspace-view-edit-properties
class="properties"
container-type="Group"
container-name=${group.name || ''}></umb-media-workspace-view-edit-properties>
.containerId=${group.id}></umb-media-workspace-view-edit-properties>
</uui-box>`,
)}
`;

18
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/content/member-workspace-view-content-properties.element.ts
View File

@@ -1,26 +1,18 @@
import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-member-workspace-view-content-properties')
export class UmbMemberWorkspaceViewContentPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', reflect: false })
public get containerName(): string | undefined {
return this._propertyStructureHelper.getContainerName();
public get containerId(): string | null | undefined {
return this._propertyStructureHelper.getContainerId();
}
public set containerName(value: string | undefined) {
this._propertyStructureHelper.setContainerName(value);
}
@property({ type: String, attribute: 'container-type', reflect: false })
public get containerType(): UmbPropertyContainerTypes | undefined {
return this._propertyStructureHelper.getContainerType();
}
public set containerType(value: UmbPropertyContainerTypes | undefined) {
this._propertyStructureHelper.setContainerType(value);
public set containerName(value: string | null | undefined) {
this._propertyStructureHelper.setContainerId(value);
}
_propertyStructureHelper = new UmbContentTypePropertyStructureHelper<any>(this);

11
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/content/member-workspace-view-content-tab.element.ts
View File

@@ -28,11 +28,14 @@ export class UmbMemberWorkspaceViewContentTabElement extends UmbLitElement {
@property({ type: String })
public get containerId(): string | null | undefined {
return this.#groupStructureHelper.getParentId();
return this._containerId;
}
public set containerId(value: string | null | undefined) {
this._containerId = value;
this.#groupStructureHelper.setParentId(value);
}
@state()
private _containerId?: string | null;
#groupStructureHelper = new UmbContentTypeContainerStructureHelper<any>(this);
@@ -63,8 +66,7 @@ export class UmbMemberWorkspaceViewContentTabElement extends UmbLitElement {
<uui-box>
<umb-member-workspace-view-content-properties
class="properties"
container-type="Tab"
container-name=${this.tabName || ''}></umb-member-workspace-view-content-properties>
.containerId=${this._containerId}></umb-member-workspace-view-content-properties>
</uui-box>
`
: ''}
@@ -75,8 +77,7 @@ export class UmbMemberWorkspaceViewContentTabElement extends UmbLitElement {
html`<uui-box .headline=${group.name || ''}>
<umb-member-workspace-view-content-properties
class="properties"
container-type="Group"
container-name=${group.name || ''}></umb-member-workspace-view-content-properties>
.containerId=${group.id}></umb-member-workspace-view-content-properties>
</uui-box>`,
)}
`;