Framework WIP:

- Put favorites in left slot when the user has some defined
This commit is contained in:
nathan 2024-06-13 16:11:57 -06:00
parent c845088ebc
commit 0ba2946ed4
2 changed files with 70 additions and 7 deletions

View File

@ -148,6 +148,7 @@ export default css`
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column;
} }
.egw_fw_app__main_content { .egw_fw_app__main_content {
@ -221,4 +222,13 @@ export default css`
padding: var(--sl-spacing-small); padding: var(--sl-spacing-small);
} }
sl-details.favorites::part(content) {
padding: 0px;
}
sl-details.favorites et2-favorites-menu::part(menu) {
border: none;
}
` `

View File

@ -13,6 +13,7 @@ import {etemplate2} from "../../api/js/etemplate/etemplate2";
import {et2_IPrint} from "../../api/js/etemplate/et2_core_interfaces"; import {et2_IPrint} from "../../api/js/etemplate/et2_core_interfaces";
import {repeat} from "lit/directives/repeat.js"; import {repeat} from "lit/directives/repeat.js";
import {until} from "lit/directives/until.js"; import {until} from "lit/directives/until.js";
import {Favorite} from "../../api/js/etemplate/Et2Favorites/Favorite";
/** /**
* @summary Application component inside EgwFramework * @summary Application component inside EgwFramework
@ -139,6 +140,7 @@ export class EgwFrameworkApp extends LitElement
/** The application's content must be in an iframe instead of handled normally */ /** The application's content must be in an iframe instead of handled normally */
protected useIframe = false; protected useIframe = false;
protected _sideboxData : any; protected _sideboxData : any;
private _hasFavorites = false;
connectedCallback() connectedCallback()
{ {
@ -261,6 +263,17 @@ export class EgwFrameworkApp extends LitElement
public setSidebox(sideboxData, hash?) public setSidebox(sideboxData, hash?)
{ {
this._sideboxData = sideboxData; this._sideboxData = sideboxData;
if(this._sideboxData?.some(s => s.title == "Favorites" || s.title == this.egw.lang("favorites")))
{
// This might be a little late, but close enough for rendering
Favorite.load(this.egw, this.name).then((favorites) =>
{
this._hasFavorites = (Object.values(favorites).length > 1)
this.requestUpdate();
});
}
this.requestUpdate(); this.requestUpdate();
} }
@ -500,12 +513,13 @@ export class EgwFrameworkApp extends LitElement
<iframe src="${this.url}"></iframe>`; <iframe src="${this.url}"></iframe>`;
} }
protected _asideTemplate(parentSlot, side, label?) protected _asideTemplate(parentSlot, side : "left" | "right", label?)
{ {
const asideClassMap = classMap({ const asideClassMap = classMap({
"egw_fw_app__aside": true, "egw_fw_app__aside": true,
"egw_fw_app__left": true, "egw_fw_app__left": side == "left",
"egw_fw_app__aside-collapsed": this.leftCollapsed, "egw_fw_app__right": side == "right",
"egw_fw_app__aside-collapsed": side == "left" ? this.leftCollapsed : this.rightCollapsed,
}); });
return html` return html`
<aside slot="${parentSlot}" part="${side}" class=${asideClassMap} aria-label="${label}"> <aside slot="${parentSlot}" part="${side}" class=${asideClassMap} aria-label="${label}">
@ -513,15 +527,47 @@ export class EgwFrameworkApp extends LitElement
<slot name="${side}-header"><span class="placeholder">${side}-header</span></slot> <slot name="${side}-header"><span class="placeholder">${side}-header</span></slot>
</div> </div>
<div class="egw_fw_app__aside_content content"> <div class="egw_fw_app__aside_content content">
${side == "left" ? this._leftMenuTemplate() : nothing}
<slot name="${side}"><span class="placeholder">${side}</span></slot> <slot name="${side}"><span class="placeholder">${side}</span></slot>
</div> </div>
<div class="egw_fw_app__aside_footer footer"> <div class="egw_fw_app__aside_footer footer">
<slot name="${side}-footer"><span class="placeholder">${side}-footer</span></slot> <slot name="${side}-footer"><span class="placeholder">${side}-footer</span></slot>
</div> </div>
</aside>`; </aside>`;
} }
/**
* Left sidebox automatic content
*
* @protected
*/
protected _leftMenuTemplate()
{
// Put favorites in left sidebox if any are set
if(!this._hasFavorites)
{
return nothing;
}
return html`${until(Favorite.load(this.egw, this.name).then((favorites) =>
{
// If more than the blank favorite is found, add favorite menu to sidebox
if(Object.values(favorites).length > 1)
{
const favSidebox = this._sideboxData.find(s => s.title.toLowerCase() == "favorites" || s.title == this.egw.lang("favorites"));
return html`
<sl-details class="favorites" slot="left"
?open=${favSidebox?.opened}
summary=${this.egw.lang("Favorites")}
@sl-show=${() => {this.egw.set_preference(this.name, 'jdots_sidebox_' + favSidebox.menu_name, true);}}
@sl-hide=${() => {this.egw.set_preference(this.name, 'jdots_sidebox_' + favSidebox.menu_name, false);}}
>
<et2-favorites-menu application=${this.name}></et2-favorites-menu>
</sl-details>
`;
}
}), nothing)}`;
}
/** /**
* Top right header, contains application action buttons (reload, print, config) * Top right header, contains application action buttons (reload, print, config)
* @returns {TemplateResult<1>} * @returns {TemplateResult<1>}
@ -563,14 +609,21 @@ export class EgwFrameworkApp extends LitElement
</sl-menu-item> </sl-menu-item>
<sl-divider></sl-divider> <sl-divider></sl-divider>
` : nothing} ` : nothing}
${this._sideboxMenuTemplate()} ${this._threeDotsMenuTemplate()}
</sl-menu> </sl-menu>
</sl-dropdown> </sl-dropdown>
</sl-tooltip> </sl-tooltip>
`; `;
} }
protected _sideboxMenuTemplate() /**
* This is the "three dots menu" in the top-right corner.
* Most of what was in the sidebox now goes here.
*
* @returns {TemplateResult<1> | typeof nothing }
* @protected
*/
protected _threeDotsMenuTemplate()
{ {
if(!this._sideboxData) if(!this._sideboxData)
{ {
@ -635,7 +688,7 @@ export class EgwFrameworkApp extends LitElement
render() render()
{ {
const hasLeftSlots = this.hasSideContent("left"); const hasLeftSlots = this.hasSideContent("left") || this._hasFavorites;
const hasRightSlots = this.hasSideContent("right"); const hasRightSlots = this.hasSideContent("right");
const leftWidth = this.leftCollapsed || !hasLeftSlots ? this.leftPanelInfo.hiddenWidth : const leftWidth = this.leftCollapsed || !hasLeftSlots ? this.leftPanelInfo.hiddenWidth :