diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts index b2d949fcbe..4bf79b20ad 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts @@ -8,7 +8,7 @@ import { createExtensionElement, UmbExtensionManifest, UmbExtensionRegistry } fr import { UmbDataTypeStore } from '../../core/stores/data-type.store'; 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') class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) { @@ -138,7 +138,7 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) { } private _renderPropertyActions () { - return html`${ this._dataType ? html``: '' }`; + return html`${ this._dataType ? html``: '' }`; } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts index 02651cc63d..62fef898d0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts @@ -1,30 +1,34 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; 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') -export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement { +export default class UmbPropertyActionClearElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction { @property() value = ''; + private _propertyActionMenuContext?: UmbPropertyActionMenuContext; + constructor () { super(); - // TODO implement a property context - this.consumeContext('umbProperty', (property) => { - console.log('PROPERTY', property); + this.consumeContext('umbPropertyActionMenu', (propertyActionsContext: UmbPropertyActionMenuContext) => { + this._propertyActionMenuContext = propertyActionsContext; }); } private _handleLabelClick () { this._clearValue(); - // TODO: how do we want to close the menu? Testing an event based approach - this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); + // 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._propertyActionMenuContext?.close(); } 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.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true })); } @@ -39,6 +43,6 @@ export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitE declare global { interface HTMLElementTagNameMap { - 'umb-property-action-clear': UmbPropertyActionClear; + 'umb-property-action-clear': UmbPropertyActionClearElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts index 5da8bb299d..c971caca3a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts @@ -2,10 +2,10 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../core/context'; 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') -export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement { +export default class UmbPropertyActionCopyElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction { @property() value = ''; @@ -41,6 +41,6 @@ export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitEl declare global { interface HTMLElementTagNameMap { - 'umb-property-action-copy': UmbPropertyActionCopy; + 'umb-property-action-copy': UmbPropertyActionCopyElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts index bef6c6d198..8852be9b8b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts @@ -1,4 +1,4 @@ // TODO: Where should things like these live? -export interface UmbPropertyActionElement extends HTMLElement { +export interface UmbPropertyAction extends HTMLElement { value?: string; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.context.ts new file mode 100644 index 0000000000..de69fc8c79 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.context.ts @@ -0,0 +1,14 @@ +import { Observable, ReplaySubject } from 'rxjs'; + +export class UmbPropertyActionMenuContext { + private _isOpen: ReplaySubject = new ReplaySubject(1); + public readonly isOpen: Observable = this._isOpen.asObservable(); + + open () { + this._isOpen.next(true); + } + + close () { + this._isOpen.next(false); + } +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.element.ts similarity index 75% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.element.ts index 72233ea95a..8a0cdde56e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.element.ts @@ -2,13 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { Subscription, map } from 'rxjs'; -import { UmbContextConsumerMixin } from '../../core/context'; -import { UmbExtensionManifestPropertyAction, UmbExtensionRegistry } from '../../core/extension'; +import { UmbContextProviderMixin, UmbContextConsumerMixin } from '../../../core/context'; +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') -export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) { +@customElement('umb-property-action-menu') +export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -54,14 +55,21 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) private _extensionRegistry?: UmbExtensionRegistry; private _subscription?: Subscription; + private _propertyActionMenuContext = new UmbPropertyActionMenuContext(); constructor () { super(); + + this._propertyActionMenuContext.isOpen.subscribe((value: boolean) => { + this._open = value; + }); this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => { this._extensionRegistry = extensionRegistry; this._usePropertyActions(); }); + + this.provideContext('umbPropertyActionMenu', this._propertyActionMenuContext); } private _usePropertyActions () { @@ -76,7 +84,8 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) } private _toggleMenu () { - this._open = !this._open; + //this._open = !this._open; + this._open ? this._propertyActionMenuContext.close() : this._propertyActionMenuContext.open(); } private _handleClose (event: CustomEvent) { @@ -110,7 +119,7 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action.element.ts similarity index 85% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action.element.ts index 45dff85c28..7571139b23 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action.element.ts @@ -1,11 +1,11 @@ import { UUITextStyles } from '@umbraco-ui/uui'; import { CSSResultGroup, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../core/extension'; -import type { UmbPropertyActionElement } from '../property-actions/property-action-element.model'; +import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../../core/extension'; +import type { UmbPropertyAction } from '../property-action-element.model'; -@customElement('umb-node-property-action') -export class UmbNodePropertyAction extends LitElement { +@customElement('umb-property-action') +export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction { static styles: CSSResultGroup = [ UUITextStyles ];