From f4e7ff05cf85def6bb8ef8b4259d36d41b4c04db Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 6 Dec 2018 19:34:27 +0530
Subject: [PATCH] Make liked_by popover scrollable

---
 frappe/public/js/frappe/ui/like.js       | 45 +++++++++++++++---------
 frappe/public/js/frappe/ui/liked_by.html |  2 +-
 frappe/public/less/desk.less             | 10 +++---
 frappe/public/less/social.less           |  4 +--
 4 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/frappe/public/js/frappe/ui/like.js b/frappe/public/js/frappe/ui/like.js
index c99f62dee6..bf14fe82ec 100644
--- a/frappe/public/js/frappe/ui/like.js
+++ b/frappe/public/js/frappe/ui/like.js
@@ -85,26 +85,30 @@ frappe.ui.click_toggle_like = function() {
 	return false;
 }
 
-frappe.ui.setup_like_popover = function($parent, selector, check_not_liked=true) {
+frappe.ui.setup_like_popover = ($parent, selector, check_not_liked=true) => {
 	if (frappe.dom.is_touchscreen()) {
 		return;
 	}
 
-	$parent.on("mouseover", selector, function() {
-		var $wrapper = $(this);
-
-		$wrapper.popover({
+	$parent.on('mouseover', selector, function() {
+		const target_element = $(this);
+		target_element.popover({
 			animation: true,
-			placement: "right",
-			content: function() {
-				var liked_by = $wrapper.attr('data-liked-by');
+			placement: 'right',
+			trigger: 'manual',
+			template:`<div class="liked-by-popover popover">
+				<div class="arrow"></div>
+				<div class="popover-content"></div>
+			</div>`,
+			content: () => {
+				let liked_by = target_element.attr('data-liked-by');
 				liked_by = liked_by ? decodeURI(liked_by) : '[]';
 				liked_by = JSON.parse(liked_by);
 
-				var user = frappe.session.user;
+				const user = frappe.session.user;
 				// hack
 				if (check_not_liked) {
-					if ($wrapper.find(".not-liked").length) {
+					if (target_element.find(".not-liked").length) {
 						if (liked_by.indexOf(user)!==-1) {
 							liked_by.splice(liked_by.indexOf(user), 1);
 						}
@@ -118,16 +122,25 @@ frappe.ui.setup_like_popover = function($parent, selector, check_not_liked=true)
 				if (!liked_by.length) {
 					return "";
 				}
-				return frappe.render_template("liked_by", {"liked_by": liked_by});
+				return frappe.render_template('liked_by', {'liked_by': liked_by});
 			},
 			html: true,
 			container: 'body'
 		});
 
-		$wrapper.popover('show');
+		target_element.popover('show');
+
+		$(".popover").on("mouseleave", () => {
+			target_element.popover('hide');
+		});
+
+		target_element.on('mouseout', () => {
+			setTimeout(() => {
+				if (!$('.popover:hover').length) {
+					target_element.popover('hide');
+				}
+			}, 100);
+		});
 	});
 
-	$parent.on("mouseout", selector, function() {
-		$(this).popover('destroy');
-	});
-}
+};
diff --git a/frappe/public/js/frappe/ui/liked_by.html b/frappe/public/js/frappe/ui/liked_by.html
index 0b836c5561..231a3c00d1 100644
--- a/frappe/public/js/frappe/ui/liked_by.html
+++ b/frappe/public/js/frappe/ui/liked_by.html
@@ -1,4 +1,4 @@
-<ul class="list-unstyled liked-by-popover">
+<ul class="list-unstyled">
 	{% for (var i in liked_by) { var liked_by_user = liked_by[i]; %}
 		<li>
 			{%= frappe.avatar(liked_by_user) %}
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index a5a9fa0fa5..89fc722549 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -457,12 +457,14 @@ li.user-progress {
 
 // like pop-over
 .liked-by-popover {
+	.popover-content {
+		padding: 0px;
+		overflow: scroll;
+		max-height: 150px;
+	}
 	min-width: 100px;
-	margin-top: -10px;
-	margin-bottom: -10px;
-
 	li {
-		margin: 15px 0px;
+		margin: 10px;
 	}
 }
 
diff --git a/frappe/public/less/social.less b/frappe/public/less/social.less
index 44bd817582..eb531ab06d 100644
--- a/frappe/public/less/social.less
+++ b/frappe/public/less/social.less
@@ -11,9 +11,6 @@ body[data-route*="social"] {
 	}
 	.liked-by-popover {
 		font-size: @text-small;
-		li {
-			margin: 10px 0px;
-		}
 	}
 
 	.wall-container {
@@ -56,6 +53,7 @@ body[data-route*="social"] {
 		min-height: 70px;
 		border: 1px solid @border-color;
 		border-radius: 4px;
+		overflow: hidden;
 		.content {
 			font-size: 14px;
 			img, iframe {