extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-25 14:41:50 +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

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

@ -25,6 +25,7 @@ export interface DialogButton
text : string, text : string,
image? : string, image? : string,
default? : boolean default? : boolean
align? : string
} }
/** /**
@ -49,23 +50,23 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
* Types * Types
* @constant * @constant
*/ */
public static PLAIN_MESSAGE : number = 0; public static readonly PLAIN_MESSAGE : number = 0;
public static INFORMATION_MESSAGE : number = 1; public static readonly INFORMATION_MESSAGE : number = 1;
public static QUESTION_MESSAGE : number = 2; public static readonly QUESTION_MESSAGE : number = 2;
public static WARNING_MESSAGE : number = 3; public static readonly WARNING_MESSAGE : number = 3;
public static ERROR_MESSAGE : number = 4; public static readonly ERROR_MESSAGE : number = 4;
/* Pre-defined Button combos */ /* Pre-defined Button combos */
public static BUTTONS_OK : number = 0; public static readonly BUTTONS_OK : number = 0;
public static BUTTONS_OK_CANCEL : number = 1; public static readonly BUTTONS_OK_CANCEL : number = 1;
public static BUTTONS_YES_NO : number = 2; public static readonly BUTTONS_YES_NO : number = 2;
public static BUTTONS_YES_NO_CANCEL : number = 3; public static readonly BUTTONS_YES_NO_CANCEL : number = 3;
/* Button constants */ /* Button constants */
public static CANCEL_BUTTON : number = 0; public static readonly CANCEL_BUTTON : number = 0;
public static OK_BUTTON : number = 1; public static readonly OK_BUTTON : number = 1;
public static YES_BUTTON : number = 2; public static readonly YES_BUTTON : number = 2;
public static NO_BUTTON : number = 3; public static readonly NO_BUTTON : number = 3;
get properties() get properties()
{ {
@ -73,10 +74,10 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
...super.properties(), ...super.properties(),
callback: Function, callback: Function,
modal: Boolean, modal: Boolean,
title: String,
buttons: Number, buttons: Number,
// We just pass these on to Et2DialogContent // We just pass these on to Et2DialogContent
title: String,
message: String, message: String,
dialog_type: Number, dialog_type: Number,
icon: String, icon: String,
@ -112,7 +113,13 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
//BUTTONS_OK_CANCEL: 1, //BUTTONS_OK_CANCEL: 1,
[ [
{"button_id": Et2Dialog.OK_BUTTON, "text": 'ok', id: 'dialog[ok]', image: 'check', "default": true}, {"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, //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.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.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,14 +154,14 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
connectedCallback() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
}
// Need to wait for Overlay // Need to wait for Overlay
this.updateComplete async getUpdateComplete()
.then(async() =>
{
if(this._overlayContentNode)
{ {
await super.getUpdateComplete();
await this._overlayContentNode.getUpdateComplete(); await this._overlayContentNode.getUpdateComplete();
// This calls _onClose() when the dialog is closed // This calls _onClose() when the dialog is closed
this._overlayContentNode.addEventListener( this._overlayContentNode.addEventListener(
'close-overlay', 'close-overlay',
@ -159,8 +172,6 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
this._onClick this._onClick
) )
} }
});
}
_onClose(ev : PointerEvent) _onClose(ev : PointerEvent)
{ {
@ -229,7 +240,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
return html` return html`
<div id="overlay-content-node-wrapper"> <div id="overlay-content-node-wrapper">
<et2-dialog-overlay-frame class="dialog__overlay-frame" <et2-dialog-overlay-frame class="dialog__overlay-frame"
.egw=${this.egw()} ._dialog=${this}
.buttons=${this._getButtons()}> .buttons=${this._getButtons()}>
<span slot="heading">${this.title}</span> <span slot="heading">${this.title}</span>
${this._contentTemplate()} ${this._contentTemplate()}
@ -259,7 +270,9 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
return html` return html`
<et2-dialog-content slot="content" ?icon=${this.icon} <et2-dialog-content slot="content" ?icon=${this.icon}
.value=${this.value}> .dialog_type=${this.dialog_type}
.value=${this.value}
>
${this.message} ${this.message}
</et2-dialog-content> </et2-dialog-content>
`; `;

32
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) export class Et2DialogContent extends Et2Widget(LitElement)
{ {
get styles() static get styles()
{ {
return [ return [
...super.styles, ...super.styles,
css` css`
:host { :host {
display: block; display: block;
min-width: 200px; min-width: 200px;
min-height: 60px;
} }
.dialog-title { .dialog {
font-size: 120%; padding: 5px;
}` }
] .dialog_icon {
margin-right: 2ex;
vertical-align: middle;
}
`
];
} }
get properties() get properties()
@ -59,13 +64,24 @@ font-size: 120%;
this.dialog_type = 0; 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() 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` return html`
<div class="dialog ${this._dialog_types[this.dialog_type]}"> <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> <slot>Empty dialog - add some content</slot>
</div> </div>
`; `;

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

@ -1,15 +1,13 @@
import {css, html, LitElement, repeat, SlotMixin} from '@lion/core'; import {css, html, LitElement, repeat, SlotMixin} from '@lion/core';
import {DialogButton, Et2Dialog} from "./Et2Dialog"; import {DialogButton, Et2Dialog} from "./Et2Dialog";
import {Et2Widget} from "../Et2Widget/Et2Widget";
/** /**
* This handles the visible portion of the dialog, including the title & close button. * 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[]; protected buttons : DialogButton[];
@ -25,6 +23,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
background: white; background: white;
position: relative; position: relative;
border: 1px solid silver; border: 1px solid silver;
min-width: 200px
} }
:host([hidden]) { :host([hidden]) {
@ -52,6 +51,20 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
padding: 0; padding: 0;
font-size: 24px; 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) firstUpdated(_changedProperties)
{ {
super.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(); return super.performUpdate();
} }
get _contentNode()
{
return this.querySelector("[slot='content']");
}
/** @private */ /** @private */
__dispatchCloseEvent() __dispatchCloseEvent()
{ {
@ -111,8 +156,8 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
<button <button
@click="${this.__dispatchCloseEvent}" @click="${this.__dispatchCloseEvent}"
id="close-button" id="close-button"
title="${this.egw.lang("Close")}" title="${this.egw().lang("Close")}"
aria-label="${this.egw.lang("Close dialog")}" aria-label="${this.egw().lang("Close dialog")}"
class="overlay__close-button" class="overlay__close-button"
> >
<slot name="close-icon">&times;</slot> <slot name="close-icon">&times;</slot>
@ -130,8 +175,15 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
_buttonsTemplate() _buttonsTemplate()
{ {
return html`${repeat(this.buttons, (button : DialogButton) => button.id, (button, index) => html` // Set button._parent here, otherwise button will have trouble finding our egw()
<et2-button id=${button.id} button_id=${button.button_id} .image=${button.image || ""} ?label=${button.text}></et2-button> 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>
`
})}`;
} }
} }