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

Merge branch 'feature/tree-navigator' of https://github.com/umbraco/Umbraco.CMS.Backoffice into feature/tree-navigator

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-31 10:49:23 +02:00
parent f444647cb3 fd18f25dc0
commit a6f154bcfe
6 changed files with 143 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts
View File

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UmbActionService } from './actions.service';
import { UmbContextConsumerMixin } from '../../core/context';
import type { ManifestEntityAction } from '../../core/models';
import './shared/tree-action.element';
@customElement('umb-actions-modal')
export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
@@ -22,19 +23,6 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
#title > * {
margin: 0;
}
.action {
display: flex;
padding: var(--uui-size-2) var(--uui-size-4);
border-bottom: 1px solid var(--uui-color-divider);
cursor: pointer;
align-items: center;
gap: var(--uui-size-3);
}
.action:hover {
background-color: var(--uui-color-surface-emphasis);
color: var(--uui-color-interactive-emphasis);
}
`,
];
@@ -51,7 +39,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
@property()
name = '';
private _actionList: ManifestEntityAction[] = [
private _actionList: Array<ManifestEntityAction & { loader?: () => Promise<object | HTMLElement> }> = [
{
name: 'create',
alias: 'action.create',
@@ -60,16 +48,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
icon: 'add',
weight: 10,
},
type: 'entityAction',
},
{
name: 'rename',
alias: 'action.rename',
meta: {
label: 'Rename',
icon: 'edit',
weight: 20,
},
loader: () => import('./actions/tree-action-create.element'),
type: 'entityAction',
},
{
@@ -78,8 +57,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
meta: {
label: 'Delete',
icon: 'delete',
weight: 30,
weight: 20,
},
loader: () => import('./actions/tree-action-delete.element'),
type: 'entityAction',
},
{
@@ -88,8 +68,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
meta: {
label: 'Reload',
icon: 'sync',
weight: 40,
weight: 30,
},
loader: () => import('./actions/tree-action-reload.element'),
type: 'entityAction',
},
];
@@ -98,12 +79,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
return this._actionList
.sort((a, b) => a.meta.weight - b.meta.weight)
.map((action) => {
return html`
<div class="action" @keydown=${() => ''} @click=${() => this._actionService?.execute(action)}>
<uui-icon .name=${action.meta.icon}></uui-icon>
${action.meta.label}
</div>
`;
return html`<umb-tree-action .treeAction=${action}></umb-tree-action> `;
});
}

2
src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts
View File

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbContextProviderMixin } from '../../core/context';
import { ManifestEntityAction } from '../../core/models';
import type { ManifestEntityAction } from '../../core/models';
import './actions-modal.element';
@customElement('umb-action-service')

29
src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts Normal file
View File

@@ -0,0 +1,29 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import type { ManifestEntityAction } from '../../../core/models';
@customElement('umb-tree-action-create')
export default class UmbTreeActionCreateElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles, css``];
@property({ attribute: false })
public treeAction?: ManifestEntityAction;
private _handleLabelClick() {
console.log(this.treeAction, 'label clicked');
}
render() {
return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-create': UmbTreeActionCreateElement;
}
}

29
src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts Normal file
View File

@@ -0,0 +1,29 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import type { ManifestEntityAction } from '../../../core/models';
@customElement('umb-tree-action-delete')
export default class UmbTreeActionDeleteElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles, css``];
@property({ attribute: false })
public treeAction?: ManifestEntityAction;
private _handleLabelClick() {
console.log(this.treeAction, 'label clicked');
}
render() {
return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-delete': UmbTreeActionDeleteElement;
}
}

29
src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts Normal file
View File

@@ -0,0 +1,29 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import type { ManifestEntityAction } from '../../../core/models';
@customElement('umb-tree-action-reload')
export default class UmbTreeActionReloadElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles, css``];
@property({ attribute: false })
public treeAction?: ManifestEntityAction;
private _handleLabelClick() {
console.log(this.treeAction, 'label clicked');
}
render() {
return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-reload': UmbTreeActionReloadElement;
}
}

47
src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-action.element.ts Normal file
View File

@@ -0,0 +1,47 @@
import { UUITextStyles } from '@umbraco-ui/uui';
import { CSSResultGroup, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement } from '../../../core/extension';
import type { ManifestEntityAction } from '../../../core/models';
@customElement('umb-tree-action')
export class UmbTreeActionElement extends LitElement {
static styles: CSSResultGroup = [UUITextStyles];
private _treeAction?: ManifestEntityAction;
@property({ type: Object })
public get treeAction(): ManifestEntityAction | undefined {
return this._treeAction;
}
public set treeAction(value: ManifestEntityAction | undefined) {
this._treeAction = value;
this._createElement();
}
@state()
private _element?: UmbTreeActionElement;
private async _createElement() {
if (!this.treeAction) return;
try {
this._element = (await createExtensionElement(this.treeAction)) as UmbTreeActionElement | undefined;
if (!this._element) return;
this._element.treeAction = this.treeAction;
} catch (error) {
// TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
}
}
render() {
return html`${this._element}`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action': UmbTreeActionElement;
}
}