forked from extern/egroupware
138 lines
3.2 KiB
TypeScript
138 lines
3.2 KiB
TypeScript
import {css, html, LitElement, repeat, SlotMixin} from '@lion/core';
|
|
import {DialogButton, Et2Dialog} from "./Et2Dialog";
|
|
|
|
/**
|
|
* 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)
|
|
{
|
|
private egw : IegwAppLocal;
|
|
|
|
protected buttons : DialogButton[];
|
|
|
|
protected _dialog : Et2Dialog;
|
|
|
|
|
|
static get styles()
|
|
{
|
|
return [
|
|
css`
|
|
:host {
|
|
display: inline-block;
|
|
background: white;
|
|
position: relative;
|
|
border: 1px solid silver;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
.overlay__header {
|
|
display: flex;
|
|
}
|
|
|
|
.overlay__heading {
|
|
margin: 0px;
|
|
padding: 6px 16px 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
.overlay__heading > .overlay__close-button {
|
|
flex: none;
|
|
}
|
|
|
|
.overlay__close-button {
|
|
min-width: 40px;
|
|
min-height: 32px;
|
|
border-width: 0;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
get slots()
|
|
{
|
|
return {
|
|
...super.slots,
|
|
buttons: () =>
|
|
{
|
|
return this._buttonsTemplate();
|
|
}
|
|
}
|
|
}
|
|
|
|
constructor()
|
|
{
|
|
super();
|
|
this.buttons = [];
|
|
|
|
}
|
|
|
|
firstUpdated(_changedProperties)
|
|
{
|
|
super.firstUpdated(_changedProperties);
|
|
debugger;
|
|
}
|
|
|
|
/**
|
|
* 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<any>}
|
|
*/
|
|
async performUpdate()
|
|
{
|
|
await new Promise((resolve) => setTimeout(() => resolve()));
|
|
return super.performUpdate();
|
|
}
|
|
|
|
/** @private */
|
|
__dispatchCloseEvent()
|
|
{
|
|
this.dispatchEvent(new Event('close-overlay'));
|
|
}
|
|
|
|
render()
|
|
{
|
|
// eslint-disable-line class-methods-use-this
|
|
return html`
|
|
<div class="overlay">
|
|
<div class="overlay__header">
|
|
<h1 class="overlay__heading">
|
|
<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">×</slot>
|
|
</button>
|
|
</div>
|
|
<div id="overlay-content-node-wrapper">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<div id="overlay-content-buttons">
|
|
<slot name="buttons"></slot>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
_buttonsTemplate()
|
|
{
|
|
return html`${repeat(this.buttons, (button : DialogButton) => button.id, (button, index) => html`
|
|
<et2-button id=${button.id} button_id=${button.button_id} .image=${button.image || ""} ?label=${button.text}></et2-button>
|
|
`)}`;
|
|
}
|
|
}
|