mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:29 +01:00
Framework WIP:
- Put favorites in left slot when the user has some defined
This commit is contained in:
parent
c845088ebc
commit
0ba2946ed4
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
`
|
`
|
@ -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 :
|
||||||
|
Loading…
Reference in New Issue
Block a user