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

add property action menu context

Browse Source
This commit is contained in:
Mads Rasmussen
2022-07-04 11:45:16 +02:00
parent 3db7c77658
commit e208ddfe53
7 changed files with 52 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts
View File

@@ -8,7 +8,7 @@ import { createExtensionElement, UmbExtensionManifest, UmbExtensionRegistry } fr
import { UmbDataTypeStore } from '../../core/stores/data-type.store'; import { UmbDataTypeStore } from '../../core/stores/data-type.store';
import { DataTypeEntity } from '../../mocks/data/content.data'; import { DataTypeEntity } from '../../mocks/data/content.data';
import './node-property-actions.element'; import '../property-actions/property-action-menu/property-action-menu.element';
@customElement('umb-node-property') @customElement('umb-node-property')
class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) { class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
@@ -138,7 +138,7 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
} }
private _renderPropertyActions () { private _renderPropertyActions () {
return html`${ this._dataType ? html`<umb-node-property-actions .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}" .value="${this.value}"></umb-node-property-actions>`: '' }`; return html`${ this._dataType ? html`<umb-property-action-menu .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}" .value="${this.value}"></umb-property-action-menu>`: '' }`;
} }
render() { render() {

20
src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts
View File

@@ -1,30 +1,34 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../core/context'; import { UmbContextConsumerMixin } from '../../core/context';
import { UmbPropertyActionElement } from './property-action-element.model'; import { UmbPropertyActionMenuContext } from './property-action-menu/property-action-menu.context';
import { UmbPropertyAction } from './property-action-element.model';
@customElement('umb-property-action-clear') @customElement('umb-property-action-clear')
export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement { export default class UmbPropertyActionClearElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction {
@property() @property()
value = ''; value = '';
private _propertyActionMenuContext?: UmbPropertyActionMenuContext;
constructor () { constructor () {
super(); super();
// TODO implement a property context this.consumeContext('umbPropertyActionMenu', (propertyActionsContext: UmbPropertyActionMenuContext) => {
this.consumeContext('umbProperty', (property) => { this._propertyActionMenuContext = propertyActionsContext;
console.log('PROPERTY', property);
}); });
} }
private _handleLabelClick () { private _handleLabelClick () {
this._clearValue(); this._clearValue();
// TODO: how do we want to close the menu? Testing an event based approach // TODO: how do we want to close the menu? Testing an event based approach and context api approach
this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); // this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
this._propertyActionMenuContext?.close();
} }
private _clearValue () { private _clearValue () {
// TODO: how do we want to update the value? Testing an event based approach. We need to test an api based approach too.
this.value = ''; this.value = '';
this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true }));
} }
@@ -39,6 +43,6 @@ export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitE
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'umb-property-action-clear': UmbPropertyActionClear; 'umb-property-action-clear': UmbPropertyActionClearElement;
} }
} }

6
src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts
View File

@@ -2,10 +2,10 @@ import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../core/context'; import { UmbContextConsumerMixin } from '../../core/context';
import { UmbNotificationService } from '../../core/services/notification.service'; import { UmbNotificationService } from '../../core/services/notification.service';
import type { UmbPropertyActionElement } from './property-action-element.model'; import type { UmbPropertyAction } from './property-action-element.model';
@customElement('umb-property-action-copy') @customElement('umb-property-action-copy')
export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement { export default class UmbPropertyActionCopyElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction {
@property() @property()
value = ''; value = '';
@@ -41,6 +41,6 @@ export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitEl
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'umb-property-action-copy': UmbPropertyActionCopy; 'umb-property-action-copy': UmbPropertyActionCopyElement;
} }
} }

2
src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts
View File

@@ -1,4 +1,4 @@
// TODO: Where should things like these live? // TODO: Where should things like these live?
export interface UmbPropertyActionElement extends HTMLElement { export interface UmbPropertyAction extends HTMLElement {
value?: string; value?: string;
} }

14
src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.context.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Observable, ReplaySubject } from 'rxjs';
export class UmbPropertyActionMenuContext {
private _isOpen: ReplaySubject<boolean> = new ReplaySubject(1);
public readonly isOpen: Observable<boolean> = this._isOpen.asObservable();
open () {
this._isOpen.next(true);
}
close () {
this._isOpen.next(false);
}
}

23
src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.element.ts
View File

@@ -2,13 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui';
import { css, CSSResultGroup, html, LitElement } from 'lit'; import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { Subscription, map } from 'rxjs'; import { Subscription, map } from 'rxjs';
import { UmbContextConsumerMixin } from '../../core/context'; import { UmbContextProviderMixin, UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionManifestPropertyAction, UmbExtensionRegistry } from '../../core/extension'; import { UmbExtensionManifestPropertyAction, UmbExtensionRegistry } from '../../../core/extension';
import { UmbPropertyActionMenuContext } from './property-action-menu.context';
import './node-property-action.element'; import './property-action.element';
@customElement('umb-node-property-actions') @customElement('umb-property-action-menu')
export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) { export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) {
static styles: CSSResultGroup = [ static styles: CSSResultGroup = [
UUITextStyles, UUITextStyles,
css` css`
@@ -54,14 +55,21 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
private _extensionRegistry?: UmbExtensionRegistry; private _extensionRegistry?: UmbExtensionRegistry;
private _subscription?: Subscription; private _subscription?: Subscription;
private _propertyActionMenuContext = new UmbPropertyActionMenuContext();
constructor () { constructor () {
super(); super();
this._propertyActionMenuContext.isOpen.subscribe((value: boolean) => {
this._open = value;
});
this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => { this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => {
this._extensionRegistry = extensionRegistry; this._extensionRegistry = extensionRegistry;
this._usePropertyActions(); this._usePropertyActions();
}); });
this.provideContext('umbPropertyActionMenu', this._propertyActionMenuContext);
} }
private _usePropertyActions () { private _usePropertyActions () {
@@ -76,7 +84,8 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
} }
private _toggleMenu () { private _toggleMenu () {
this._open = !this._open; //this._open = !this._open;
this._open ? this._propertyActionMenuContext.close() : this._propertyActionMenuContext.open();
} }
private _handleClose (event: CustomEvent) { private _handleClose (event: CustomEvent) {
@@ -110,7 +119,7 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
<div slot="popover" id="dropdown"> <div slot="popover" id="dropdown">
${this._actions.map( ${this._actions.map(
action => html` action => html`
<umb-node-property-action .propertyAction=${action} .value="${this.value}"></umb-node-property-action> <umb-property-action .propertyAction=${action} .value="${this.value}"></umb-property-action>
` `
)} )}
</div> </div>

8
src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action.element.ts
View File

@@ -1,11 +1,11 @@
import { UUITextStyles } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui';
import { CSSResultGroup, html, LitElement } from 'lit'; import { CSSResultGroup, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../core/extension'; import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../../core/extension';
import type { UmbPropertyActionElement } from '../property-actions/property-action-element.model'; import type { UmbPropertyAction } from '../property-action-element.model';
@customElement('umb-node-property-action') @customElement('umb-property-action')
export class UmbNodePropertyAction extends LitElement { export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction {
static styles: CSSResultGroup = [ static styles: CSSResultGroup = [
UUITextStyles UUITextStyles
]; ];