extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Kdots header

Browse Source 
- Move refresh & print out of app 3-dots menu into header bar
This commit is contained in:
nathan 2024-07-04 16:56:06 -06:00
parent 63722dcd9c
commit ee2be9702a
2 changed files with 58 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
kdots/js/EgwFrameworkApp.styles.ts
View File

@ -26,7 +26,9 @@ export default css`
} }
.egw_fw_app__name h2 { .egw_fw_app__name h2 {
margin: 0;
margin-inline-start: var(--sl-spacing-medium); margin-inline-start: var(--sl-spacing-medium);
font-size: 1em;
} }
.egw_fw_app__header { .egw_fw_app__header {
@ -38,6 +40,33 @@ export default css`
background-color: var(--application-color, --primary-background-color); background-color: var(--application-color, --primary-background-color);
color: var(--application-header-text-color, white); color: var(--application-header-text-color, white);
font-size: 1.8em;
}
.egw_fw_app__header sl-icon-button::part(base), .egw_fw_app__header et2-button-icon {
font-size: inherit;
color: var(--application-header-text-color, white);
}
.egw_fw_app__header et2-button-icon {
margin: 0 var(--sl-spacing-medium);
}
.egw_fw_app__header sl-icon-button::part(base):hover, .egw_fw_app__header et2-button-icon::part(base):hover {
color: var(--application-header-text-color, white);
filter: brightness(70%);
}
.egw_fw_app__menu > div {
margin-left: var(--sl-spacing-medium);
margin-right: var(--sl-spacing-medium);
display: flex;
align-items: center;
}
.egw_fw_app__menu > div > sl-icon-button {
margin-left: var(--sl-spacing-medium);
margin-right: var(--sl-spacing-medium);
} }
.egw_fw_app__outerSplit { .egw_fw_app__outerSplit {

60
kdots/js/EgwFrameworkApp.ts
View File

@ -577,43 +577,41 @@ export class EgwFrameworkApp extends LitElement
protected _rightHeaderTemplate() protected _rightHeaderTemplate()
{ {
return html` return html`
<sl-tooltip content=${this.egw.lang("Application menu")}> <et2-button-icon nosubmit name="arrow-clockwise"
<sl-dropdown> label=${this.egw.lang("Reload %1", this.egw.lang(this.name))}
<sl-icon slot="trigger" name="three-dots-vertical"></sl-icon> statustext=${this.egw.lang("Reload %1", this.egw.lang(this.name))}
<sl-menu> @click=${(e) =>
{
this.egw.refresh("", this.name);
/* Could also be this.load(false); this.load(this.url) */
}}
></et2-button-icon>
<et2-button-icon nosubmit name="printer"
label=${this.egw.lang("Print")}
statustext=${this.egw.lang("Print")}
@click=${(e) => this.framework.print()}
></et2-button-icon>
<sl-dropdown class="egw_fw_app__menu">
<div slot="trigger">${this.egw.lang("Menu")}
<sl-icon-button name="chevron-double-down"></sl-icon-button>
</div>
<sl-menu>
${this.egw.user('apps')['admin'] !== undefined ? html`
<sl-menu-item <sl-menu-item
@click=${(e) => @click=${(e) =>
{ {
this.egw.refresh("", this.name); // @ts-ignore
/* Could also be this.load(false); this.load(this.url) */ egw_link_handler(`/egroupware/index.php?menuaction=admin.admin_ui.index&load=admin.uiconfig.index&appname=${this.name}&ajax=true`, 'admin');
}} }}
> >
<sl-icon slot="prefix" name="arrow-clockwise"></sl-icon> <sl-icon slot="prefix" name="gear-wide"></sl-icon>
${this.egw.lang("Reload %1", this.egw.lang(this.name))} ${this.egw.lang("App configuration")}
</sl-menu-item> </sl-menu-item>
<sl-menu-item <sl-divider></sl-divider>
@click=${(e) => this.framework.print()} ` : nothing}
> ${this._threeDotsMenuTemplate()}
<sl-icon slot="prefix" name="printer"></sl-icon> </sl-menu>
${this.egw.lang("Print")} </sl-dropdown>
</sl-menu-item>
${this.egw.user('apps')['admin'] !== undefined ? html`
<sl-menu-item
@click=${(e) =>
{
// @ts-ignore
egw_link_handler(`/egroupware/index.php?menuaction=admin.admin_ui.index&load=admin.uiconfig.index&appname=${this.name}&ajax=true`, 'admin');
}}
>
<sl-icon slot="prefix" name="gear-wide"></sl-icon>
${this.egw.lang("App configuration")}
</sl-menu-item>
<sl-divider></sl-divider>
` : nothing}
${this._threeDotsMenuTemplate()}
</sl-menu>
</sl-dropdown>
</sl-tooltip>
`; `;
} }