Kdots header

- 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

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 {

View File

@ -577,26 +577,25 @@ 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>
<sl-menu-item
@click=${(e) => @click=${(e) =>
{ {
this.egw.refresh("", this.name); this.egw.refresh("", this.name);
/* Could also be this.load(false); this.load(this.url) */ /* Could also be this.load(false); this.load(this.url) */
}} }}
> ></et2-button-icon>
<sl-icon slot="prefix" name="arrow-clockwise"></sl-icon> <et2-button-icon nosubmit name="printer"
${this.egw.lang("Reload %1", this.egw.lang(this.name))} label=${this.egw.lang("Print")}
</sl-menu-item> statustext=${this.egw.lang("Print")}
<sl-menu-item
@click=${(e) => this.framework.print()} @click=${(e) => this.framework.print()}
> ></et2-button-icon>
<sl-icon slot="prefix" name="printer"></sl-icon> <sl-dropdown class="egw_fw_app__menu">
${this.egw.lang("Print")} <div slot="trigger">${this.egw.lang("Menu")}
</sl-menu-item> <sl-icon-button name="chevron-double-down"></sl-icon-button>
</div>
<sl-menu>
${this.egw.user('apps')['admin'] !== undefined ? html` ${this.egw.user('apps')['admin'] !== undefined ? html`
<sl-menu-item <sl-menu-item
@click=${(e) => @click=${(e) =>
@ -613,7 +612,6 @@ export class EgwFrameworkApp extends LitElement
${this._threeDotsMenuTemplate()} ${this._threeDotsMenuTemplate()}
</sl-menu> </sl-menu>
</sl-dropdown> </sl-dropdown>
</sl-tooltip>
`; `;
} }