From ee2be9702ae76340f4d79e4a08e37ebe64d95684 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 4 Jul 2024 16:56:06 -0600
Subject: [PATCH] Kdots header - Move refresh & print out of app 3-dots menu
 into header bar

---
 kdots/js/EgwFrameworkApp.styles.ts | 29 +++++++++++++++
 kdots/js/EgwFrameworkApp.ts        | 60 +++++++++++++++---------------
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/kdots/js/EgwFrameworkApp.styles.ts b/kdots/js/EgwFrameworkApp.styles.ts
index 6ffe704df0..d127896d5b 100644
--- a/kdots/js/EgwFrameworkApp.styles.ts
+++ b/kdots/js/EgwFrameworkApp.styles.ts
@@ -26,7 +26,9 @@ export default css`
 	}
 
 	.egw_fw_app__name h2 {
+		margin: 0;
 		margin-inline-start: var(--sl-spacing-medium);
+		font-size: 1em;
 	}
 
 	.egw_fw_app__header {
@@ -38,6 +40,33 @@ export default css`
 
 		background-color: var(--application-color, --primary-background-color);
 		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 {
diff --git a/kdots/js/EgwFrameworkApp.ts b/kdots/js/EgwFrameworkApp.ts
index 49b9753a85..98d5ec05be 100644
--- a/kdots/js/EgwFrameworkApp.ts
+++ b/kdots/js/EgwFrameworkApp.ts
@@ -577,43 +577,41 @@ export class EgwFrameworkApp extends LitElement
 	protected _rightHeaderTemplate()
 	{
 		return html`
-            <sl-tooltip content=${this.egw.lang("Application menu")}>
-                <sl-dropdown>
-                    <sl-icon slot="trigger" name="three-dots-vertical"></sl-icon>
-                    <sl-menu>
+            <et2-button-icon nosubmit name="arrow-clockwise"
+                             label=${this.egw.lang("Reload %1", this.egw.lang(this.name))}
+                             statustext=${this.egw.lang("Reload %1", this.egw.lang(this.name))}
+                             @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
                                 @click=${(e) =>
                                 {
-                                    this.egw.refresh("", this.name);
-                                    /* Could also be this.load(false); this.load(this.url) */
+                                    // @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="arrow-clockwise"></sl-icon>
-                            ${this.egw.lang("Reload %1", this.egw.lang(this.name))}
+                            <sl-icon slot="prefix" name="gear-wide"></sl-icon>
+                            ${this.egw.lang("App configuration")}
                         </sl-menu-item>
-                        <sl-menu-item
-                                @click=${(e) => this.framework.print()}
-                        >
-                            <sl-icon slot="prefix" name="printer"></sl-icon>
-                            ${this.egw.lang("Print")}
-                        </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>
+                        <sl-divider></sl-divider>
+                    ` : nothing}
+                    ${this._threeDotsMenuTemplate()}
+                </sl-menu>
+            </sl-dropdown>
 		`;
 	}