diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/index.ts deleted file mode 100644 index bad3345390..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './tree-context-menu-page.service.js'; -export * from './tree-context-menu.service.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu-page.service.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu-page.service.ts deleted file mode 100644 index f31c9bd4f6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu-page.service.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, nothing, PropertyValueMap , customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDeepState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -// TODO: Refactor this, its not a service and the data should be handled by a context api. -@customElement('umb-tree-context-menu-page-service') -export class UmbTreeContextMenuPageServiceElement extends UmbLitElement { - @property({ type: Object }) - public actionEntity: any = { key: '', name: '' }; - - #entity = new UmbDeepState({ key: '', name: '' } as any); - public readonly entity = this.#entity.asObservable(); - - @state() - private _pages: Array = []; - - connectedCallback() { - super.connectedCallback(); - this.provideContext(UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN, this); - this.openFreshPage('umb-tree-context-menu-page-action-list'); - } - - protected updated(_changedProperties: PropertyValueMap | Map): void { - super.updated(_changedProperties); - - if (_changedProperties.has('actionEntity')) { - this.#entity.next(this.actionEntity); - //TODO: Move back to first page - this.openFreshPage('umb-tree-context-menu-page-action-list'); - } - } - - public openPage(elementName: string) { - const element = document.createElement(elementName) as any; - this._pages.push(element); - this.requestUpdate('_pages'); - } - - public openFreshPage(elementName: string) { - this._pages = []; - this.openPage(elementName); - } - - public closeTopPage() { - this._pages.pop(); - this.requestUpdate('_pages'); - } - - private _renderTopPage() { - if (this._pages.length === 0) { - return nothing; - } - - return this._pages[this._pages.length - 1]; - } - - render() { - return this._renderTopPage(); - } - - static styles = [UUITextStyles, css``]; -} - -export const UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN = - new UmbContextToken('UmbTreeContextMenuService'); - -declare global { - interface HTMLElementTagNameMap { - 'umb-tree-context-menu-page-service': UmbTreeContextMenuPageServiceElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu.service.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu.service.ts deleted file mode 100644 index 26429dbc67..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu.service.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, nothing , customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -@customElement('umb-tree-context-menu-service') -export class UmbTreeContextMenuServiceElement extends UmbLitElement { - @state() - private _modalOpen = false; - - @state() - private entity: { name: string; key: string } = { name: '', key: '' }; - - connectedCallback() { - super.connectedCallback(); - this.provideContext(UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN, this); - } - - public open(entity: any) { - this.entity = entity; - this._modalOpen = true; - } - - public close() { - this._modalOpen = false; - } - - private _renderBackdrop() { - // eslint-disable-next-line lit-a11y/click-events-have-key-events - return this._modalOpen ? html`
` : nothing; - } - - private _renderModal() { - return this._modalOpen - ? html`` - : nothing; - } - - render() { - return html` - ${this._renderBackdrop()} -
- - ${this._renderModal()} -
- `; - } - - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - z-index: 1; - } - #backdrop { - content: ''; - position: absolute; - inset: 0px; - background-color: black; - opacity: 0.5; - width: 100vw; - height: 100vh; - z-index: -1; - } - #relative-wrapper { - background-color: var(--uui-color-surface); - position: relative; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } - #action-modal { - position: absolute; - left: var(--umb-section-sidebar-layout-width); - height: 100%; - z-index: 1; - top: 0; - width: var(--umb-section-sidebar-layout-width); - border: none; - border-left: 1px solid var(--uui-color-border); - border-right: 1px solid var(--uui-color-border); - background-color: var(--uui-color-surface); - } - - #action-modal h3 { - padding: var(--uui-size-4) var(--uui-size-8); - margin: 0; - min-height: var(--umb-header-layout-height); - box-sizing: border-box; - display: flex; - align-items: center; - } - `, - ]; -} - -export const UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN = new UmbContextToken( - 'UmbTreeContextMenuService' -); - -declare global { - interface HTMLElementTagNameMap { - 'umb-tree-context-menu-service': UmbTreeContextMenuServiceElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts index a15013a837..16b0419b9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts @@ -1,4 +1,3 @@ -export * from './context-menu/index.js'; export * from './entity-tree-item/index.js'; export * from './tree-item/index.js'; export * from './tree-item-base/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts index 17d9669b82..94b1e6125a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts @@ -1,13 +1,11 @@ import { UmbTreeContextBase } from './tree.context.js'; -import { html, nothing , customElement, property, state , repeat } from '@umbraco-cms/backoffice/external/lit'; +import { html, nothing, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import './tree-item/tree-item.element.js'; import './tree-item-base/tree-item-base.element.js'; -import './context-menu/tree-context-menu-page.service.js'; -import './context-menu/tree-context-menu.service.js'; @customElement('umb-tree') export class UmbTreeElement extends UmbLitElement {