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

Sidebar now works

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-08-02 13:27:51 +02:00
parent 5023b0dcc5
commit 2f5c93e182
3 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
View File

@@ -3,9 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, query } from 'lit/decorators.js';
import '@umbraco-ui/uui-modal';
import '@umbraco-ui/uui-modal-sidebar';
import '@umbraco-ui/uui-modal-container';
import '@umbraco-ui/uui-modal-dialog';
import { UUIModalSidebarElement } from '@umbraco-ui/uui-modal-sidebar';
import { UmbContextConsumerMixin } from '../../core/context';
import { UmbModalService } from '../../core/services/modal.service';
@@ -33,9 +33,6 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
`,
];
@query('uui-modal-sidebar')
sidebar?: UUIModalSidebarElement;
private _modalService?: UmbModalService;
constructor() {
@@ -46,7 +43,7 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
}
private _open() {
const modalHandler = this._modalService?.open('umb-modal-content-picker');
const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker');
modalHandler?.onClose().then((result) => {
console.log('result', result);
});

16
src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
View File

@@ -5,12 +5,20 @@ export class UmbModalService {
private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
public createModal(modalHandler: UmbModalHandler): void {
this._modals.next([...this._modals.getValue(), modalHandler]);
// public createModal(modalHandler: UmbModalHandler): void {
// this._modals.next([...this._modals.getValue(), modalHandler]);
// }
public openSidebar(elementName: string): UmbModalHandler {
return this._open(elementName, 'uui-modal-sidebar');
}
public open(elementName: string): UmbModalHandler {
const modalHandler = new UmbModalHandler(elementName);
public openDialog(elementName: string): UmbModalHandler {
return this._open(elementName, 'uui-modal-dialog');
}
private _open(elementName: string, modalElementName: string): UmbModalHandler {
const modalHandler = new UmbModalHandler(elementName, modalElementName);
modalHandler.onClose().then(() => this._close(modalHandler));
this._modals.next([...this._modals.getValue(), modalHandler]);
return modalHandler;

8
src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
View File

@@ -7,17 +7,17 @@ export default class UmbModalHandler {
public key: string;
public modal: any;
constructor(elementName: string) {
constructor(elementName: string, modalElementName: string) {
this.key = Date.now().toString(); //TODO better key
this._elementName = elementName;
this._createLayoutElement();
this._createLayoutElement(modalElementName);
this._closePromise = new Promise((res) => {
this._closeResolver = res;
});
}
private _createLayoutElement() {
this.modal = document.createElement('uui-modal-sidebar');
private _createLayoutElement(modalElementName: string) {
this.modal = document.createElement(modalElementName);
this.modal.size = 'small'; //TODO make meta object for settings
this.element = document.createElement(this._elementName);
this.modal.appendChild(this.element);