Use frappe like popover to like list

frappe/public/js/frappe/social/Home.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="social">
+	<div ref="social" class="social">
 		<component :is="current_page"></component>
 		<image-viewer :src="preview_image_src" v-if="show_preview"></image-viewer>
 	</div>
@@ -47,6 +47,7 @@ export default {
 				frappe.utils.scroll_to(0);
 			}
 		});
+		frappe.ui.setup_like_popover($(this.$refs.social), '.likes', false);
 	},
 	methods: {
 		set_current_page() {

frappe/public/js/frappe/social/components/Post.vue

@@ -3,15 +3,14 @@
 		<div class="post-body">
 			<div class="pull-right text-muted" v-html="post_time"></div>
 			<div class="user-avatar" v-html="user_avatar" @click="goto_profile(post.owner)"></div>
-			<div class="user-name" @click="goto_profile(post.owner)">{{ user_name }}</div>
+			<div class="user-name text-muted" @click="goto_profile(post.owner)">{{ user_name }}</div>
 			<div class="content" v-html="post.content"></div>
 		</div>
 		<post-action
 			:is_pinnable="is_pinnable"
 			:is_pinned="post.is_pinned"
-			:like_count="like_count"
+			:liked_by="post.liked_by"
 			:reply_count="replies.length"
-			:post_liked="post_liked"
 			@toggle_reply="toggle_reply"
 			@new_reply="create_new_reply"
 			@toggle_like="toggle_like"
@@ -54,14 +53,6 @@ const Post = {
 			is_pinnable: !this.post.reply_to && frappe.user_roles.includes('System Manager')
 		}
 	},
-	computed: {
-		like_count() {
-			return this.post.liked_by ? this.post.liked_by.split('\n').length : 0;
-		},
-		post_liked() {
-			return this.post.liked_by ? this.post.liked_by.includes(frappe.session.user) : false;
-		}
-	},
 	created() {
 		frappe.db.get_list('Post', {
 			fields: ['name', 'content', 'owner', 'creation', 'liked_by', 'is_pinned', 'reply_to'],
@@ -72,6 +63,11 @@ const Post = {
 		}).then(replies => {
 			this.replies = replies;
 		})
+
+		if (!this.post.liked_by) {
+			this.$set(this.post, 'liked_by', '')
+		}
+
 		frappe.realtime.on('new_post_reply' + this.post.name, (post) => {
 			this.replies.push(post);
 		})
@@ -79,6 +75,7 @@ const Post = {
 			this.post.is_pinned = cint(is_pinned);
 		})
 		frappe.realtime.on('update_liked_by' + this.post.name, this.update_liked_by)
+
 	},
 	methods: {
 		goto_profile(user) {
@@ -91,15 +88,8 @@ const Post = {
 		toggle_reply() {
 			this.show_replies = !this.show_replies
 		},
-		update_liked_by(user) {
-			const liked_by = this.post.liked_by ? this.post.liked_by.split('\n') : []
-			const user_index = liked_by.indexOf(user)
-			if (user_index > -1) {
-				liked_by.splice(user_index, 1);
-			} else {
-				liked_by.push(user);
-			}
-			this.post.liked_by = liked_by.join('\n')
+		update_liked_by(liked_by) {
+			this.post.liked_by = liked_by;
 		},
 		toggle_like() {
 			frappe.xcall('frappe.social.doctype.post.post.toggle_like', {

frappe/public/js/frappe/social/components/PostAction.vue

@@ -7,27 +7,30 @@
 			<i class="fa fa-reply" @click="$emit('new_reply')"></i>
 			<span @click="$emit('toggle_reply')">{{ reply_count }}</span>
 		</div>
-		<div class="like" @click="$emit('toggle_like');">
-			<i class="fa fa-heart" :class="{'liked': post_liked}"></i>
-			<span>{{ like_count }}</span>
+		<div class="like">
+			<i
+				class="fa fa-heart"
+				@click="$emit('toggle_like')"
+				:class="{'liked': post_liked}">
+			</i>
+			<span
+				class="likes"
+				:data-liked-by="JSON.stringify(split_string(liked_by))">
+				{{ like_count }}
+			</span>
 		</div>
 	</div>
 </template>
 <script>
 export default {
 	props: {
-		'like_count': {
-			'type': Number,
-			'default': 0,
+		'liked_by': {
+			'type': String,
 		},
 		'reply_count': {
 			'type': Number,
 			'default': 0,
 		},
-		'post_liked': {
-			'type': Boolean,
-			'default': true
-		},
 		'is_pinnable': {
 			'type': Boolean,
 			'default': false
@@ -37,6 +40,19 @@ export default {
 			'default': 0
 		}
 	},
+	computed: {
+		like_count() {
+			return this.split_string(this.liked_by).length;
+		},
+		post_liked() {
+			return this.split_string(this.liked_by).includes(frappe.session.user);
+		}
+	},
+	methods: {
+		split_string(str) {
+			return str && str !== '' ? str.split('\n') : []
+		}
+	}
 }
 </script>
 <style lang='less' scoped>

frappe/social/doctype/post/post.py

@@ -28,7 +28,8 @@ def toggle_like(post_name, user=None):
 	else:
 		liked_by.append(user)
 
-	frappe.publish_realtime('update_liked_by' + post_name, frappe.session.user, after_commit=True)
-	frappe.db.set_value('Post', post_name, 'liked_by', '\n'.join(liked_by))
+	liked_by_string = '\n'.join(liked_by)
+	frappe.db.set_value('Post', post_name, 'liked_by', liked_by_string)
+	frappe.publish_realtime('update_liked_by' + post_name, liked_by_string, after_commit=True)