diff --git a/api/js/etemplate/Et2Dialog/Et2Dialog.ts b/api/js/etemplate/Et2Dialog/Et2Dialog.ts index b4b080e4d0..d603e0567e 100644 --- a/api/js/etemplate/Et2Dialog/Et2Dialog.ts +++ b/api/js/etemplate/Et2Dialog/Et2Dialog.ts @@ -25,6 +25,7 @@ export interface DialogButton text : string, image? : string, default? : boolean + align? : string } /** @@ -49,23 +50,23 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo * Types * @constant */ - public static PLAIN_MESSAGE : number = 0; - public static INFORMATION_MESSAGE : number = 1; - public static QUESTION_MESSAGE : number = 2; - public static WARNING_MESSAGE : number = 3; - public static ERROR_MESSAGE : number = 4; + public static readonly PLAIN_MESSAGE : number = 0; + public static readonly INFORMATION_MESSAGE : number = 1; + public static readonly QUESTION_MESSAGE : number = 2; + public static readonly WARNING_MESSAGE : number = 3; + public static readonly ERROR_MESSAGE : number = 4; /* Pre-defined Button combos */ - public static BUTTONS_OK : number = 0; - public static BUTTONS_OK_CANCEL : number = 1; - public static BUTTONS_YES_NO : number = 2; - public static BUTTONS_YES_NO_CANCEL : number = 3; + public static readonly BUTTONS_OK : number = 0; + public static readonly BUTTONS_OK_CANCEL : number = 1; + public static readonly BUTTONS_YES_NO : number = 2; + public static readonly BUTTONS_YES_NO_CANCEL : number = 3; /* Button constants */ - public static CANCEL_BUTTON : number = 0; - public static OK_BUTTON : number = 1; - public static YES_BUTTON : number = 2; - public static NO_BUTTON : number = 3; + public static readonly CANCEL_BUTTON : number = 0; + public static readonly OK_BUTTON : number = 1; + public static readonly YES_BUTTON : number = 2; + public static readonly NO_BUTTON : number = 3; get properties() { @@ -73,10 +74,10 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo ...super.properties(), callback: Function, modal: Boolean, + title: String, buttons: Number, // We just pass these on to Et2DialogContent - title: String, message: String, dialog_type: Number, icon: String, @@ -112,7 +113,13 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo //BUTTONS_OK_CANCEL: 1, [ {"button_id": Et2Dialog.OK_BUTTON, "text": 'ok', id: 'dialog[ok]', image: 'check', "default": true}, - {"button_id": Et2Dialog.CANCEL_BUTTON, "text": 'cancel', id: 'dialog[cancel]', image: 'cancel'} + { + "button_id": Et2Dialog.CANCEL_BUTTON, + "text": 'cancel', + id: 'dialog[cancel]', + image: 'cancel', + align: "right" + } ], //BUTTONS_YES_NO: 2, [ @@ -123,7 +130,13 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo [ {"button_id": Et2Dialog.YES_BUTTON, "text": 'yes', id: 'dialog[yes]', image: 'check', "default": true}, {"button_id": Et2Dialog.NO_BUTTON, "text": 'no', id: 'dialog[no]', image: 'cancelled'}, - {"button_id": Et2Dialog.CANCEL_BUTTON, "text": 'cancel', id: 'dialog[cancel]', image: 'cancel'} + { + "button_id": Et2Dialog.CANCEL_BUTTON, + "text": 'cancel', + id: 'dialog[cancel]', + image: 'cancel', + align: "rignt" + } ] ]; @@ -141,25 +154,23 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo connectedCallback() { super.connectedCallback(); + } - // Need to wait for Overlay - this.updateComplete - .then(async() => - { - if(this._overlayContentNode) - { - await this._overlayContentNode.getUpdateComplete(); - // This calls _onClose() when the dialog is closed - this._overlayContentNode.addEventListener( - 'close-overlay', - this._onClose, - ); - this._overlayContentNode.addEventListener( - 'click', - this._onClick - ) - } - }); + // Need to wait for Overlay + async getUpdateComplete() + { + await super.getUpdateComplete(); + await this._overlayContentNode.getUpdateComplete(); + + // This calls _onClose() when the dialog is closed + this._overlayContentNode.addEventListener( + 'close-overlay', + this._onClose, + ); + this._overlayContentNode.addEventListener( + 'click', + this._onClick + ) } _onClose(ev : PointerEvent) @@ -229,7 +240,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo return html`
${this.title} ${this._contentTemplate()} @@ -259,7 +270,9 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo return html` + .dialog_type=${this.dialog_type} + .value=${this.value} + > ${this.message} `; diff --git a/api/js/etemplate/Et2Dialog/Et2DialogContent.ts b/api/js/etemplate/Et2Dialog/Et2DialogContent.ts index e437bfa1dc..59406eb41e 100644 --- a/api/js/etemplate/Et2Dialog/Et2DialogContent.ts +++ b/api/js/etemplate/Et2Dialog/Et2DialogContent.ts @@ -7,20 +7,25 @@ import {css, html, LitElement} from "@lion/core"; */ export class Et2DialogContent extends Et2Widget(LitElement) { - get styles() + static get styles() { return [ ...super.styles, css` :host { display: block; - - min-width: 200px; + min-width: 200px; + min-height: 60px; } -.dialog-title { -font-size: 120%; -}` - ] + .dialog { + padding: 5px; + } + .dialog_icon { + margin-right: 2ex; + vertical-align: middle; + } + ` + ]; } get properties() @@ -59,13 +64,24 @@ font-size: 120%; this.dialog_type = 0; } + /** + * Block until after the paint - This is needed to deal with children not fully "done" before the OverlayController + * tries to do things with them + * + * @returns {Promise} + */ + async performUpdate() + { + await new Promise((resolve) => setTimeout(() => resolve())); + return super.performUpdate(); + } render() { - let icon = this.icon || this.egw().image(this._dialog_types[this.dialog_type]) || ""; + let icon = this.icon || this.parentNode.egw().image(this._dialog_types[this.dialog_type]) || ""; return html`
- + Empty dialog - add some content
`; diff --git a/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts b/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts index 1ae2246b9e..737c82ef7a 100644 --- a/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts +++ b/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts @@ -1,15 +1,13 @@ import {css, html, LitElement, repeat, SlotMixin} from '@lion/core'; import {DialogButton, Et2Dialog} from "./Et2Dialog"; +import {Et2Widget} from "../Et2Widget/Et2Widget"; /** * This handles the visible portion of the dialog, including the title & close button. * - * Note we can't extend Et2Widget. If I try, something in the render / creation breaks and calling open() gives an - * error */ -export class Et2DialogOverlay extends SlotMixin(LitElement) +export class Et2DialogOverlay extends Et2Widget(SlotMixin(LitElement)) { - private egw : IegwAppLocal; protected buttons : DialogButton[]; @@ -25,6 +23,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) background: white; position: relative; border: 1px solid silver; + min-width: 200px } :host([hidden]) { @@ -52,6 +51,20 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) padding: 0; font-size: 24px; } + #overlay-content-buttons { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + gap: 5px; + } + ::slotted([slot="buttons"]) { + flex: 1 0 auto; + } + ::slotted([align="right"]) { + margin-left: auto; + order: 1; + } `, ]; } @@ -77,7 +90,34 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); - debugger; + // Tell content about its parent, but don't move it + //@ts-ignore + (this.querySelector("[slot='content']"))._parent = this._dialog; + } + + + // Need to wait for Overlay + async getUpdateComplete() + { + await super.getUpdateComplete(); + await this._contentNode.getUpdateComplete(); + } + + /** + * Dialog might not be part of an etemplate, use dialog's egw + * + * @returns {IegwAppLocal} + */ + egw() : IegwAppLocal + { + if(this._dialog) + { + return this._dialog.egw(); + } + else + { + return egw(); + } } /** @@ -92,6 +132,11 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) return super.performUpdate(); } + get _contentNode() + { + return this.querySelector("[slot='content']"); + } + /** @private */ __dispatchCloseEvent() { @@ -111,8 +156,8 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)