From 2e05b79d71f56c8e1f72ba2f58a1d541bd4b44ec Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 8 Dec 2020 19:51:27 +0530
Subject: [PATCH] fix: Avatar group style

- Match style in the mockup
---
 frappe/public/js/frappe/utils/common.js | 31 ++++++++++++++-----------
 frappe/public/scss/desk/avatar.scss     | 16 +++++--------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js
index fa677dffa5..47345537d4 100644
--- a/frappe/public/js/frappe/utils/common.js
+++ b/frappe/public/js/frappe/utils/common.js
@@ -1,6 +1,6 @@
 // common file between desk and website
 
-frappe.avatar = function (user, css_class, title, image_url = null, remove_color=false, filterable=false) {
+frappe.avatar = function (user, css_class, title, image_url=null, remove_color=false, filterable=false) {
 	let user_info;
 	if (user) {
 		// desk
@@ -21,11 +21,11 @@ frappe.avatar = function (user, css_class, title, image_url = null, remove_color
 	}
 
 	return frappe.get_avatar(
-		user, css_class, title, image_url || user_info.image, remove_color=remove_color, filterable=filterable
+		user, css_class, title, image_url || user_info.image, remove_color, filterable
 	);
 };
 
-frappe.get_avatar = function(user, css_class, title, image_url = null, remove_color, filterable) {
+frappe.get_avatar = function(user, css_class, title, image_url=null, remove_color, filterable) {
 	let data_attr = '';
 
 	if (!css_class) {
@@ -64,40 +64,43 @@ frappe.get_avatar = function(user, css_class, title, image_url = null, remove_co
 	}
 }
 
-frappe.avatar_group = function (users, limit = 4, options = {}) {
-	let icon_html = '';
+frappe.avatar_group = function (users, limit=4, options = {}) {
+	let avatar_action_html = '';
 	const display_users = users.slice(0, limit);
 	const extra_users = users.slice(limit);
+	const css_class = options.css_class || '';
 
 	let html = display_users.map(user =>
-		frappe.avatar(user, 'avatar-small ' + options.css_class, null, null, false, options.filterable)
+		frappe.avatar(user, 'avatar-small ' + css_class, null, null, false, options.filterable)
 	).join('');
 	if (extra_users.length === 1) {
-		html += frappe.avatar(extra_users[0], 'avatar-small ' + options.css_class, null, null, false, options.filterable);
+		html += frappe.avatar(extra_users[0], 'avatar-small ' + css_class, null, null, false, options.filterable);
 	} else if (extra_users.length > 1) {
 		html = `
-			<span class="avatar avatar-small ${options.css_class}">
+			${html}
+			<span class="avatar avatar-small ${css_class}">
 				<div class="avatar-frame standard-image avatar-extra-count"
 					title="${extra_users.map(u => frappe.user_info(u).fullname).join(', ')}">
 					+${extra_users.length}
 				</div>
 			</span>
-			${html}
 		`;
 	}
 
 	if (options.action_icon) {
-		icon_html = `<span class="avatar avatar-small avatar avatar-small">
-			<div class="avatar-frame avatar-action">
+		avatar_action_html = `
+			<span class="avatar avatar-small">
+				<div class="avatar-frame avatar-action">
 					${frappe.utils.icon(options.action_icon, 'sm')}
-			</div>
-		</span>`;
+				</div>
+			</span>
+		`;
 	}
 
 	const $avatar_group =
 		$(`<div class="avatar-group ${options.align || 'right'} ${options.overlap != false ? 'overlap' : ''}">
-			${icon_html}
 			${html}
+			${avatar_action_html}
 		</div>`);
 
 	$avatar_group.find('.avatar-action').on('click', options.action);
diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss
index 1c1bd9549f..d6fa548202 100644
--- a/frappe/public/scss/desk/avatar.scss
+++ b/frappe/public/scss/desk/avatar.scss
@@ -1,7 +1,7 @@
 :root {
 	--avatar-frame-color: var(--gray-500);
 	--avatar-frame-bg: var(--gray-100);
-	--avatar-frame-border: var(--gray-100);
+	--avatar-frame-border: var(--gray-50);
 
 	--orange-avatar-bg: var(--orange-100);
 	--orange-avatar-color: var(--orange-600);
@@ -157,7 +157,6 @@
 .avatar-group {
 	display: inline-flex;
 	align-items: center;
-	flex-direction: row-reverse;
 	cursor: pointer;
 
 	&.right {
@@ -168,12 +167,13 @@
 	}
 
 	.avatar-action {
-		width: 100%;
-		height: 100%;
+		@extend .avatar-small;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		background-color: var(--control-bg);
+		border-radius: 50%;
+		cursor: pointer !important;
 
 		.icon {
 			use {
@@ -187,10 +187,6 @@
 		.avatar-frame {
 			border: 1px solid var(--avatar-frame-border);
 		}
-
-		&:not(.avatar-extra-count):hover {
-			z-index: 99;
-		}
 	}
 
 	.avatar-extra-count {
@@ -200,13 +196,13 @@
 		background-color: var(--blue-500);
 	}
 
-	.avatar {
+	.avatar:last-child {
 		margin-right: var(--margin-xs);
 	}
 
 	&.overlap {
 		.avatar + .avatar {
-			margin-right: calc(-1 * var(--margin-sm));
+			margin-left: calc(-1 * var(--margin-sm));
 		}
 	}
 }