Add hideOnEscape and noCloseButton options into ET2Dialog

This commit is contained in:
Hadi Nategh 2022-04-29 14:28:32 +02:00
parent ddc2b082c1
commit c707af32b6
2 changed files with 37 additions and 11 deletions

View File

@ -220,7 +220,21 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
* Automatically destroy the dialog when it closes. Set to false to keep the dialog around. * Automatically destroy the dialog when it closes. Set to false to keep the dialog around.
*/ */
destroy_on_close: Boolean, destroy_on_close: Boolean,
appendTo: String
/**
* Legacy-option for appending dialog into a specific dom node
*/
appendTo: String,
/**
* When it's set to false dialog won't get closed by hitting Esc
*/
hideOnEscape: Boolean,
/**
* When set to true it removes the close button from dialog's header
*/
noCloseButton: Boolean
} }
} }
@ -303,6 +317,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
this.modal = true; this.modal = true;
this.dialog_type = Et2Dialog.PLAIN_MESSAGE; this.dialog_type = Et2Dialog.PLAIN_MESSAGE;
this.destroy_on_close = true; this.destroy_on_close = true;
this.hideOnEscape = this.hideOnEscape === false ? false : true;
this.__value = {}; this.__value = {};
this._onOpen = this._onOpen.bind(this); this._onOpen = this._onOpen.bind(this);
@ -677,7 +692,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
} }
return { return {
...super._defineOverlayConfig(), ...super._defineOverlayConfig(),
hidesOnEscape: true, hidesOnEscape: this.hideOnEscape,
...(this.modal ? {} : not_modal) ...(this.modal ? {} : not_modal)
} }

View File

@ -209,15 +209,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
<slot name="heading"></slot> <slot name="heading"></slot>
</h1> </h1>
<slot name="header"></slot> <slot name="header"></slot>
<button ${this._closeButtonTemplate()}
@click="${this.__dispatchCloseEvent}"
id="close-button"
title="${this.egw().lang("Close")}"
aria-label="${this.egw().lang("Close dialog")}"
class="overlay__close-button"
>
<slot name="close-icon">&times;</slot>
</button>
</div> </div>
<div id="overlay-content-node-wrapper"> <div id="overlay-content-node-wrapper">
<slot name="content"></slot> <slot name="content"></slot>
@ -229,6 +221,25 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
`; `;
} }
_closeButtonTemplate()
{
if (this._dialog.noCloseButton)
{
return;
}
return html`<button
@click="${this.__dispatchCloseEvent}"
id="close-button"
title="${this.egw().lang("Close")}"
aria-label="${this.egw().lang("Close dialog")}"
class="overlay__close-button"
>
<slot name="close-icon">&times;</slot>
</button>
`;
}
_buttonsTemplate() _buttonsTemplate()
{ {
if(!this.buttons) if(!this.buttons)