From e8e3d2fc38e3c305c707fdd1cb348cbde505f765 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 12 Jul 2022 10:50:11 -0600
Subject: [PATCH] Et2Select layout improvements - Better sizing when row is set
 - Always show contact / + for EmailTag instead of just on hover

---
 api/js/etemplate/Et2Select/Et2Select.ts       |  2 +-
 api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts | 37 ++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 585bf0617f..a428ccb20c 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -102,7 +102,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 				gap: 0.1rem 0.5rem;
 			}
 			:host([rows]) .select__tags {
-				max-height: calc(var(--rows, 5) * 1.3rem);
+				max-height: calc(var(--rows, 5) * 1.35rem);
 			}
 			/* Keep overflow tag right-aligned.  It's the only sl-tag. */
 			 .select__tags sl-tag {
diff --git a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
index 0787d0f5c3..50a0c61e2d 100644
--- a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
+++ b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
@@ -32,32 +32,34 @@ export class Et2EmailTag extends Et2Tag
 			.tag {
 				position: relative;
 			}
-			.tag__prefix {
-				display: none;
+			.tag__prefix {				
+				width: 20px;
+				height: 20px;
 				
-				height: 80%;
-				
-				background-color: white;
+				background-color: initial;
 				background-repeat: no-repeat;
 				background-size: contain;
+				
+				opacity: 30%;
+				cursor: pointer;
 			}
 			
 			.contact_plus .tag__prefix {
-				display: block;
-				order: 2;
+				opacity: 100%;
 			}
 			.tag__prefix.loading {
-				width: 16px;
+				opacity: 100%;
 				background-image: ${cssImage("loading")};
 			}
 		
-			.tag__prefix.contact_plus_add, .tag__prefix.contact_plus_contact {
-				width: 16px;
+			.tag__prefix.contact_plus_add {
+				height: 80%;
 				background-image: ${cssImage("add")};
-				cursor: pointer;
 			}
+			/* Address is for a contact - always show */
 			.tag__prefix.contact_plus_contact {
-				background-image: ${cssImage("contact")}
+				opacity: 100%;
+				background-image: ${cssImage("contact")};
 			}
 			.tag__remove {
 				order: 3;
@@ -98,6 +100,15 @@ export class Et2EmailTag extends Et2Tag
 		{
 			this.addEventListener("mouseenter", this.handleMouseEnter);
 			this.addEventListener("mouseleave", this.handleMouseLeave);
+
+			// If the data is already cached, add it in (after nodes are there)
+			if(typeof Et2EmailTag.email_cache[this.value] !== "undefined")
+			{
+				this.updateComplete.then(() =>
+				{
+					return this.handleContactResponse(Et2EmailTag.email_cache[this.value]);
+				});
+			}
 		}
 	}
 
@@ -130,7 +141,6 @@ export class Et2EmailTag extends Et2Tag
 
 		this.checkContact(this.value).then((result) =>
 		{
-			this._contactPlusNode.classList.remove("loading");
 			this.handleContactResponse(result);
 		})
 	}
@@ -146,6 +156,7 @@ export class Et2EmailTag extends Et2Tag
 	 */
 	handleContactResponse(data : false | ContactInfo)
 	{
+		this._contactPlusNode.classList.remove("loading");
 		if(data)
 		{
 			this._contactPlusNode.classList.add("contact_plus_contact");