From 28bcaf9422c3fd8567c68200acc16961fc38e22a Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Thu, 20 Jan 2022 13:13:04 +0100
Subject: [PATCH] WIP styling buttons: another approach to style buttons,
 keeping the icon slotted

---
 api/js/etemplate/Et2Button/ButtonStyles.ts |  1 +
 api/js/etemplate/Et2Button/Et2Button.ts    | 25 ++++++++++++++++------
 api/templates/default/etemplate2.css       |  4 +++-
 mail/templates/default/index.xet           |  2 +-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/api/js/etemplate/Et2Button/ButtonStyles.ts b/api/js/etemplate/Et2Button/ButtonStyles.ts
index 819211de9b..2fb2d277e5 100644
--- a/api/js/etemplate/Et2Button/ButtonStyles.ts
+++ b/api/js/etemplate/Et2Button/ButtonStyles.ts
@@ -27,5 +27,6 @@ export const buttonStyles = [
 		background-position: left center;
 		background-size: contain;
 		margin: 2px;
+		height:20px;
 	}
 `];
\ No newline at end of file
diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts
index 66dd2ed3ea..2c53bca58a 100644
--- a/api/js/etemplate/Et2Button/Et2Button.ts
+++ b/api/js/etemplate/Et2Button/Et2Button.ts
@@ -62,6 +62,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
                 padding: 0;
                 /* These should probably come from somewhere else */
                	max-width: 125px;
+               	min-width: fit-content;
             }
             :host([readonly]) {
             	display: none;
@@ -69,15 +70,13 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
             /* Set size for icon */
             ::slotted([slot="icon"][src]) {
                 width: 20px;
-                padding-right: 3px;
             }
             ::slotted([slot="icon"][src='']) {
 				display: none;
 			}
 			.imageOnly {
-				width:20px;
-				height: 20px;
-				background-color: var(--bg_color_5_gray);
+				width:18px;
+				height: 18px;
 			}
             `,
 		];
@@ -91,6 +90,16 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 		}
 	}
 
+	get slots()
+	{
+		return {
+			...super.slots,
+			icon: () =>
+			{
+				return document.createElement("img");
+			}
+		}
+	}
 
 	constructor()
 	{
@@ -190,9 +199,13 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 		{
 			return '';
 		}
+
+		this._iconNode.src = this._image;
+
 		return html`
-           <div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}" style="background-image: url(${this._image})">
-                 <slot name="label">${this._label}</slot>
+            <div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}">
+           		<slot name="icon"></slot>
+                <slot name="label">${this._label}</slot>
             </div> `;
 	}
 
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index c65924c78c..c8b1f1f9d5 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2793,7 +2793,9 @@ div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-h
     padding-left: 0;
     background-color: #fafafa;
 }
-
+.nextmatch_header_row et2-button {
+    background-color: #fafafa;
+}
 .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text {
     width: auto;
     background-position: 6px center;
diff --git a/mail/templates/default/index.xet b/mail/templates/default/index.xet
index e0ec0d7ba0..6cbd20df15 100644
--- a/mail/templates/default/index.xet
+++ b/mail/templates/default/index.xet
@@ -130,7 +130,7 @@
 		</grid>
 	</template>
 	<template id="mail.index.add" template="" lang="" group="0" version="1.9.001">
-		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose"/>
+		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" image="add"/>
 	</template>
 	<template id="mail.index.header_right" template="" lang="" group="0" version="1.9.001">
 		<hbox id="mail.index.vacationnotice" class="mail-index_vacation"><vbox>