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

remove legacy context menu code

Browse Source
This commit is contained in:
Niels Lyngsø
2023-05-31 17:00:13 +02:00
parent d775fb0edb
commit 21c91cd4ae
5 changed files with 1 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/index.ts
View File

@@ -1,2 +0,0 @@
export * from './tree-context-menu-page.service.js';
export * from './tree-context-menu.service.js';

73
src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu-page.service.ts
View File

@@ -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<HTMLElement> = [];
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<any> | Map<PropertyKey, unknown>): 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<UmbTreeContextMenuPageServiceElement>('UmbTreeContextMenuService');
declare global {
interface HTMLElementTagNameMap {
'umb-tree-context-menu-page-service': UmbTreeContextMenuPageServiceElement;
}
}

111
src/Umbraco.Web.UI.Client/src/packages/core/tree/context-menu/tree-context-menu.service.ts
View File

@@ -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`<div id="backdrop" @click=${this.close}></div>` : nothing;
}
private _renderModal() {
return this._modalOpen
? html`<umb-tree-context-menu-page-service
id="action-modal"
.actionEntity=${this.entity}></umb-tree-context-menu-page-service>`
: nothing;
}
render() {
return html`
${this._renderBackdrop()}
<div id="relative-wrapper">
<slot></slot>
${this._renderModal()}
</div>
`;
}
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<UmbTreeContextMenuServiceElement>(
'UmbTreeContextMenuService'
);
declare global {
interface HTMLElementTagNameMap {
'umb-tree-context-menu-service': UmbTreeContextMenuServiceElement;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts
View File

@@ -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';

4
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
View File

@@ -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 {