extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-27 17:19:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get separate egw object & some styling sorted out

Browse Source
This commit is contained in:
nathan 2022-03-15 14:10:53 -06:00
parent ed72d63522
commit c120f13466
3 changed files with 136 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
api/js/etemplate/Et2Dialog/Et2Dialog.ts
View File

@ -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`
<div id="overlay-content-node-wrapper">
<et2-dialog-overlay-frame class="dialog__overlay-frame"
.egw=${this.egw()}
._dialog=${this}
.buttons=${this._getButtons()}>
<span slot="heading">${this.title}</span>
${this._contentTemplate()}
@ -259,7 +270,9 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
return html`
<et2-dialog-content slot="content" ?icon=${this.icon}
.value=${this.value}>
.dialog_type=${this.dialog_type}
.value=${this.value}
>
${this.message}
</et2-dialog-content>
`;

34
api/js/etemplate/Et2Dialog/Et2DialogContent.ts
View File

@ -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<any>}
*/
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`
<div class="dialog ${this._dialog_types[this.dialog_type]}">
<img ?src=${icon}/>
<img class="dialog_icon" src=${icon}/>
<slot>Empty dialog - add some content</slot>
</div>
`;

72
api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts
View File

@ -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
(<Et2Widget><unknown>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)
<button
@click="${this.__dispatchCloseEvent}"
id="close-button"
title="${this.egw.lang("Close")}"
aria-label="${this.egw.lang("Close dialog")}"
title="${this.egw().lang("Close")}"
aria-label="${this.egw().lang("Close dialog")}"
class="overlay__close-button"
>
<slot name="close-icon">&times;</slot>
@ -130,8 +175,15 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
_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>
`)}`;
// Set button._parent here, otherwise button will have trouble finding our egw()
return html`${repeat(this.buttons, (button : DialogButton) => button.id, (button, index) =>
{
return html`
<et2-button ._parent=${this} id=${button.id} button_id=${button.button_id} .image=${button.image}
label=${button.text}
?align=${button.align}>
</et2-button>
`
})}`;
}
}