From c16474fd146ada5e63ca1137a00d86e8e00f7faa Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 28 Sep 2023 14:17:10 +0200 Subject: [PATCH] observable sorter --- .../workspace-context.interface.ts | 3 + .../workspace-context/workspace-context.ts | 14 ++++- .../document-type-workspace-editor.element.ts | 20 +++---- .../document-type-workspace-sorter.ts | 36 +++++++++++ .../document-type-workspace.context.ts | 2 + ...-workspace-view-edit-properties.element.ts | 7 +-- ...nt-type-workspace-view-edit-tab.element.ts | 6 +- ...cument-type-workspace-view-edit.element.ts | 59 ++++++++++--------- 8 files changed, 101 insertions(+), 46 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts index 4ff5c395bb..2ffb87ed1f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts @@ -16,4 +16,7 @@ export interface UmbWorkspaceContextInterface { getIsNew(): boolean | undefined; setIsNew(value: boolean): void; + isSorting: Observable; + getIsSorting(): boolean | undefined; + setIsSorting(value: boolean): void; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts index 790f96c653..dffc605cd7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts @@ -24,8 +24,11 @@ export abstract class UmbWorkspaceContext; - } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts index 8314f0f48f..54841ad11f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts @@ -11,15 +11,6 @@ import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { generateAlias } from '@umbraco-cms/backoffice/utils'; @customElement('umb-document-type-workspace-editor') export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { - @state() - private _icon?: string; - - @state() - private _iconColorAlias?: string; - // TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors. - - #workspaceContext?: UmbDocumentTypeWorkspaceContext; - @state() private _name?: string; @@ -29,6 +20,15 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { @state() private _aliasLocked = true; + @state() + private _icon?: string; + + @state() + private _iconColorAlias?: string; + // TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors. + + #workspaceContext?: UmbDocumentTypeWorkspaceContext; + private _modalContext?: UmbModalManagerContext; constructor() { @@ -59,7 +59,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { } this.removeControllerByAlias('_observeIsNew'); }, - '_observeIsNew' + '_observeIsNew', ); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts new file mode 100644 index 0000000000..bb0ace3e49 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts @@ -0,0 +1,36 @@ +import { + DocumentTypePropertyTypeContainerResponseModel, + PropertyTypeContainerModelBaseModel, +} from '@umbraco-cms/backoffice/backend-api'; +import { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; + +const SORTER_CONFIG_HORIZONTAL: UmbSorterConfig = { + compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => { + return element.getAttribute('data-umb-tabs-id') === model.id; + }, + querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { + return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`); + }, + identifier: 'content-type-tabs-sorter', + itemSelector: '[data-umb-tabs-id]', + containerSelector: '#tabs-group', + disabledItemSelector: '[inherited]', + resolveVerticalDirection: () => { + return false; + }, +}; + +const SORTER_CONFIG_VERTICAL: UmbSorterConfig = { + compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => { + return element.getAttribute('data-umb-property-id') === model.id; + }, + querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { + return container.querySelector(`[data-umb-property-id='` + modelEntry.id + `']`); + }, + identifier: 'content-type-property-sorter', + itemSelector: '[data-umb-property-id]', + containerSelector: '#property-list', + disabledItemSelector: '[inherited]', +}; + +export { SORTER_CONFIG_VERTICAL, SORTER_CONFIG_HORIZONTAL }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts index 8abc8eb4f4..3bcddde693 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts @@ -120,6 +120,7 @@ export class UmbDocumentTypeWorkspaceContext if (!data) return undefined; this.setIsNew(true); + this.setIsSorting(false); //this.#draft.next(data); return { data } || undefined; // TODO: Is this wrong? should we return { data }?? @@ -130,6 +131,7 @@ export class UmbDocumentTypeWorkspaceContext if (!data) return undefined; this.setIsNew(false); + this.setIsSorting(false); //this.#draft.next(data); return { data } || undefined; // TODO: Is this wrong? should we return { data }?? diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 5685a84159..7cecdadd3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -18,14 +18,13 @@ const SORTER_CONFIG: UmbSorterConfig = { return element.getAttribute('data-umb-property-id') === model.id; }, querySelectModelToElement: (container: HTMLElement, modelEntry: DocumentTypePropertyTypeResponseModel) => { - return container.querySelector('data-umb-property-id[' + modelEntry.id + ']'); + return container.querySelector('data-umb-property-id=[' + modelEntry.id + ']'); }, placeholderClass: 'select', identifier: 'content-type-property-sorter', itemSelector: '[data-umb-property-id]', disabledItemSelector: '[inherited]', containerSelector: '#property-list', - resolveVerticalDirection: () => false, }; @customElement('umb-document-type-workspace-view-edit-properties') @@ -175,11 +174,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle )} - Add property + Add property `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts index 444cffcf24..93fabafc3f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts @@ -1,6 +1,6 @@ import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js'; import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -59,11 +59,15 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { @state() _hasProperties = false; + @state() + _sortModeActive?: boolean; + constructor() { super(); this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => { this._groupStructureHelper.setStructureManager((context as UmbDocumentTypeWorkspaceContext).structure); + this.observe(context.isSorting, (isSorting) => (this._sortModeActive = isSorting)); }); this.observe(this._groupStructureHelper.containers, (groups) => { this._groups = groups; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts index 0929c258c4..84d2b4bf31 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts @@ -83,7 +83,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement private _activePath = ''; @state() - private sortModeActive = false; + private sortModeActive?: boolean; @state() private _buttonDisabled: boolean = false; @@ -130,11 +130,14 @@ export class UmbDocumentTypeWorkspaceViewEditElement }, '_observeGroups', ); + + this.observe(this._workspaceContext.isSorting, (isSorting) => (this.sortModeActive = isSorting)); } #changeMode() { - this.sortModeActive = !this.sortModeActive; - if (!this._tabs || !this.sortModeActive) return; + this._workspaceContext?.setIsSorting(!this.sortModeActive); + + if (!this._tabs) return; this.sorter = new UmbSorterController(this, this.config); this.sorter.setModel(this._tabs); } @@ -381,6 +384,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement placeholder="Unnamed" label=${tab.name!} value="${tab.name!}" + auto-width @change=${(e: InputEvent) => this.#tabNameChanged(e, tab)} @blur=${(e: InputEvent) => this.#tabNameChanged(e, tab)} @input=${() => (this._buttonDisabled = true)} @@ -440,21 +444,6 @@ export class UmbDocumentTypeWorkspaceViewEditElement static styles = [ UmbTextStyles, css` - uui-tab .no-edit { - pointer-events: none; - } - - .no-edit uui-input { - pointer-events: auto; - } - - .--umb-sorter-placeholder::after { - content: ''; - position: absolute; - inset: 2px; - border: 1px dashed var(--uui-color-divider-emphasis); - } - #buttons-wrapper { flex: 1; display: flex; @@ -500,20 +489,12 @@ export class UmbDocumentTypeWorkspaceViewEditElement border-right: 1px solid var(--uui-color-border); } - uui-tab:not(:hover, :focus) .trash { - opacity: 0; - transition: opacity 120ms; - } - - .inherited { - vertical-align: sub; - } - - uui-input:not(:focus, :hover) { - border: 1px solid transparent; + .no-edit uui-input { + pointer-events: auto; } .no-edit { + pointer-events: none; display: inline-flex; padding-left: var(--uui-size-space-3); border: 1px solid transparent; @@ -526,9 +507,29 @@ export class UmbDocumentTypeWorkspaceViewEditElement transition: opacity 120ms; } + uui-tab:not(:hover, :focus) .trash { + opacity: 0; + transition: opacity 120ms; + } + + uui-input:not(:focus, :hover) { + border: 1px solid transparent; + } + + .inherited { + vertical-align: sub; + } + .--umb-sorter-placeholder > * { visibility: hidden; } + + .--umb-sorter-placeholder::after { + content: ''; + position: absolute; + inset: 2px; + border: 1px dashed var(--uui-color-divider-emphasis); + } `, ]; }