From 64c15bec19724437d3f07fa2f9ef41676bcefcda Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Wed, 8 Jul 2020 14:33:14 +0530
Subject: [PATCH] fix: avatar group style

---
 frappe/public/css/avatar.css            |  4 +-
 frappe/public/js/frappe/utils/common.js | 13 +++--
 frappe/public/scss/avatar.scss          | 75 ++++++-------------------
 3 files changed, 27 insertions(+), 65 deletions(-)

diff --git a/frappe/public/css/avatar.css b/frappe/public/css/avatar.css
index b4dad4a52b..cb80b32fda 100644
--- a/frappe/public/css/avatar.css
+++ b/frappe/public/css/avatar.css
@@ -1,4 +1,4 @@
-.avatar {
+/* .avatar {
   display: inline-block;
   vertical-align: middle;
   width: 50px;
@@ -88,4 +88,4 @@
   border: 1px solid #d1d8dd;
   font-weight: normal;
   margin-top: -1px;
-}
+} */
diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js
index e6f4ca293c..02330e4fc3 100644
--- a/frappe/public/js/frappe/utils/common.js
+++ b/frappe/public/js/frappe/utils/common.js
@@ -39,7 +39,7 @@ frappe.avatar = function (user, css_class, title, image_url = null) {
 			abbr = abbr.substr(0, 1);
 		}
 		return `<span class="avatar ${css_class}" title="${title}">
-			<div class="standard-image" style="background-color: ${user_info.color};">
+			<div class="avatar-frame standard-image" style="background-color: ${user_info.color};">
 				${abbr}</div>
 		</span>`;
 	}
@@ -47,10 +47,15 @@ frappe.avatar = function (user, css_class, title, image_url = null) {
 
 frappe.avatar_group = function(users,  limit=4, css_class="avatar avatar-small") {
 	let extra_count = users.length - limit;
-	let html = users.splice(0, limit).map((user) => frappe.avatar(user, css_class)).join('')
+	let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join('')
 	if (extra_count > 0) {
-		return `<div class="avatar-group small">${html}
-			<span class="extra-count">${__(' and {} others', [extra_count])}</span>
+		return `<div class="avatar-group small">
+			<span class="avatar avatar avatar-small">
+				<div class="avatar-frame standard-image avatar-extra-count">
+					+${extra_count}
+				</div>
+			</span>
+			${html}
 		</div>`;
 	} else {
 		return `<div class="avatar-group">${html}</div>`;
diff --git a/frappe/public/scss/avatar.scss b/frappe/public/scss/avatar.scss
index 32f56797a9..216bb10ef9 100644
--- a/frappe/public/scss/avatar.scss
+++ b/frappe/public/scss/avatar.scss
@@ -6,9 +6,9 @@
 .avatar-frame {
 	display: inline-block;
 	width: 100%;
-	padding: 50% 0px;
+	padding: 50%;
 	// TODO: Remove
-	background-color: var(--pink-200);
+	// background-color: var(--pink-200);
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -21,32 +21,13 @@
 	border-radius: 50%;
 }
 
-// .avatar-empty {
-// 	border: 1px dashed #d1d8dd;
-// 	border-radius: 50%;
-// }
-
-// .avatar-small {
-// 	width: 36px;
-// 	height: 36px;
-// 	.standard-image {
-// 		font-size: 14px;
-// 	}
-// }
-
 .avatar-small {
 	width: 24px;
 	height: 24px;
 	text-align: center;
 
-	.avatar-frame {
-		padding: 12px;
-	}
-
 	.standard-image {
-		font-size: $font-size-sm;
-		width: 24px;
-		height: 24px;
+		font-size: $font-size-xs;
 	}
 
 	.avatar-empty::after {
@@ -59,10 +40,6 @@
 	width: 36px;
 	height: 36px;
 
-	.avatar-frame {
-		padding: 18px;
-	}
-
 	.standard-image {
 		font-size: 18px;
 	}
@@ -72,10 +49,6 @@
 	width: 72px;
 	height: 72px;
 
-	.avatar-frame {
-		padding: 36px;
-	}
-
 
 	.standard-image {
 		font-size: 36px;
@@ -86,10 +59,6 @@
 	width: 108px;
 	height: 108px;
 
-	.avatar-frame {
-		padding: 54px;
-	}
-
 	.standard-image {
 		font-size: 36px;
 	}
@@ -99,10 +68,6 @@
 	width: 16px;
 	height: 16px;
 
-	.avatar-frame {
-		padding: 8px;
-	}
-
 	.standard-image {
 		font-size: 9px;
 	}
@@ -110,49 +75,41 @@
 
 .avatar .standard-image {
 	border-radius: 50%;
-	padding: 2px;
-	width: 100%;
-	height: 100%;
+	// padding: 2px;
+	// width: 100%;
+	// height: 100%;
 }
 
 .standard-image {
 	width: 100%;
-	height: 0;
-	padding: 50% 0;
-	display: inline-block;
-	text-align: center;
-	border-radius: 50%;
-	font-size: 14px;
-	line-height: 0px;
-	//color: #fff;
-	color: $text-muted;
-	border: 1px solid $border-color;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--blue-50) !important;
+	color: var(--blue-500);
+
 	font-weight: normal;
 }
 
 .avatar-group {
 	display: flex;
 	align-items: center;
+	flex-direction: row-reverse;
 
 	.avatar {
 		position: relative;
-		z-index: 2;
 
 		.avatar-frame {
 			border: 2px solid $white;
 		}
 
 		&:hover {
-			z-index: 3;
+			z-index: 1;
 		}
 	}
 
-	.extra-count {
-		margin-left: 8px;
-		margin-top: 2px;
-	}
-
 	.avatar+.avatar {
-		margin-left: -0.5rem;
+		margin-right: -0.3rem;
 	}
 }
\ No newline at end of file