feat: added avatar group

frappe/public/js/frappe/utils/common.js

@@ -45,6 +45,18 @@ 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('')
+	if (extra_count > 0) {
+		return `<div class="avatar-group small">${html}
+			<span class="extra-count">${__(' and {} others', [extra_count])}</span>
+		</div>`;
+	} else {
+		return `<div class="avatar-group">${html}</div>`;
+	}
+}
+
 frappe.ui.scroll = function(element, animate, additional_offset) {
 	var header_offset = $(".navbar").height() + $(".page-head").height();
 	var top = $(element).offset().top - header_offset - cint(additional_offset);

frappe/public/scss/avatar.scss

@@ -39,6 +39,10 @@
 	height: 24px;
 	text-align: center;
 
+	.avatar-frame {
+		padding: 12px;
+	}
+
 	.standard-image {
 		font-size: $font-size-sm;
 		width: 24px;
@@ -55,6 +59,10 @@
 	width: 36px;
 	height: 36px;
 
+	.avatar-frame {
+		padding: 18px;
+	}
+
 	.standard-image {
 		font-size: 18px;
 	}
@@ -64,6 +72,11 @@
 	width: 72px;
 	height: 72px;
 
+	.avatar-frame {
+		padding: 36px;
+	}
+
+
 	.standard-image {
 		font-size: 36px;
 	}
@@ -73,14 +86,22 @@
 	width: 108px;
 	height: 108px;
 
+	.avatar-frame {
+		padding: 54px;
+	}
+
 	.standard-image {
 		font-size: 36px;
 	}
 }
 
 .avatar-xs {
-	width: 17px;
-	height: 17px;
+	width: 16px;
+	height: 16px;
+
+	.avatar-frame {
+		padding: 8px;
+	}
 
 	.standard-image {
 		font-size: 9px;
@@ -108,3 +129,30 @@
 	border: 1px solid $border-color;
 	font-weight: normal;
 }
+
+.avatar-group {
+	display: flex;
+	align-items: center;
+
+	.avatar {
+		position: relative;
+		z-index: 2;
+
+		.avatar-frame {
+			border: 2px solid $white;
+		}
+
+		&:hover {
+			z-index: 3;
+		}
+	}
+
+	.extra-count {
+		margin-left: 8px;
+		margin-top: 2px;
+	}
+
+	.avatar+.avatar {
+		margin-left: -0.5rem;
+	}
+}