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.
*/
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.dialog_type = Et2Dialog.PLAIN_MESSAGE;
this.destroy_on_close = true;
this.hideOnEscape = this.hideOnEscape === false ? false : true;
this.__value = {};
this._onOpen = this._onOpen.bind(this);
@ -677,7 +692,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
}
return {
...super._defineOverlayConfig(),
hidesOnEscape: true,
hidesOnEscape: this.hideOnEscape,
...(this.modal ? {} : not_modal)
}

View File

@ -209,15 +209,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
<slot name="heading"></slot>
</h1>
<slot name="header"></slot>
<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>
${this._closeButtonTemplate()}
</div>
<div id="overlay-content-node-wrapper">
<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()
{
if(!this.buttons)