From 9842734e1290c2c3a8c62abfa5dc7d3278df691c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 27 Sep 2018 13:58:27 +0530
Subject: [PATCH] Add UI enhancements and some bug fixes

---
 frappe/public/build.json                      |  3 +-
 frappe/public/js/frappe/social/Home.vue       |  2 +-
 .../js/frappe/social/components/Post.vue      | 29 +++++++++++--------
 .../frappe/social/components/PostAction.vue   | 22 ++++++++------
 frappe/public/js/frappe/social/pages/Wall.vue | 14 ++++-----
 frappe/public/js/frappe/social/social_home.js |  5 ++--
 frappe/public/less/social.less                |  5 ++++
 frappe/public/less/website.less               |  1 +
 8 files changed, 48 insertions(+), 33 deletions(-)
 create mode 100644 frappe/public/less/social.less

diff --git a/frappe/public/build.json b/frappe/public/build.json
index 46e38354be..d23ab68fda 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -115,7 +115,8 @@
 		"public/less/kanban.less",
 		"public/less/controls.less",
 		"public/less/chat.less",
-		"public/less/filters.less"
+		"public/less/filters.less",
+		"public/less/social.less"
 	],
 	"css/frappe-rtl.css": [
 		"public/css/bootstrap-rtl.css",
diff --git a/frappe/public/js/frappe/social/Home.vue b/frappe/public/js/frappe/social/Home.vue
index cfc2f6f48f..afb250cfd3 100644
--- a/frappe/public/js/frappe/social/Home.vue
+++ b/frappe/public/js/frappe/social/Home.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="social-page-container">
+	<div class="social">
 		<component :is="current_page"></component>
 	</div>
 </template>
diff --git a/frappe/public/js/frappe/social/components/Post.vue b/frappe/public/js/frappe/social/components/Post.vue
index abcb4a1de3..ec31781795 100644
--- a/frappe/public/js/frappe/social/components/Post.vue
+++ b/frappe/public/js/frappe/social/components/Post.vue
@@ -6,7 +6,11 @@
 			<div class="user-name">{{ user_name }}</div>
 			<div class="content" v-html="post.content"></div>
 		</div>
-		<post-action :reply_count="reply_count" @reply="toggle_reply" @new_reply="create_new_reply"></post-action>
+		<post-action
+			:reply_count="replies.length"
+			@toggle_reply="toggle_reply"
+			@new_reply="create_new_reply">
+		</post-action>
 		<post-reply class="post-reply" v-if="show_replies" :replies="replies"></post-reply>
 	</div>
 </template>
@@ -28,10 +32,7 @@ const Post = {
 			post_time: comment_when(this.post.creation),
 			user_name: frappe.user_info(this.post.owner).fullname,
 			reply_count: 0,
-			replies: [{
-				content: 'hello',
-				name: 'asdfasdf'
-			}],
+			replies: [],
 			show_replies: false
 		}
 	},
@@ -47,16 +48,17 @@ const Post = {
 		})
 		frappe.realtime.on('new_post_reply', (post) => {
 			if (post.reply_to === this.post.name) {
-				this.reply_count += 1;
+				this.replies.push(post);
 			}
 		})
 	},
 	methods: {
-		create_new_reply: () => {
+		create_new_reply() {
+			frappe.social.post_reply_dialog.set_value('reply_to', this.post.name);
 			frappe.social.post_reply_dialog.show()
 		},
-		toggle_reply: () => {
-			this.show_repies = !this.show_replies
+		toggle_reply() {
+			this.show_replies = !this.show_replies
 		}
 	}
 }
@@ -67,15 +69,17 @@ export default Post;
 </script>
 <style lang="less">
 .post-card {
-	margin-bottom: 20px;
+	margin: 10px 0;
 	max-width: 500px;
 	max-height: 500px;
 	min-height: 70px;
 	overflow: hidden;
+	cursor: pointer;
+	border: 1px solid #c2c3c4;
+	border-radius: 15px;
 	.post-body {
 		padding: 10px 12px;
 	}
-	cursor: pointer;
 	.user-name{
 		font-weight: 900;
 	}
@@ -99,7 +103,8 @@ export default Post;
 		}
 	}
 	.post-reply {
-		margin-left: 10px;
+		margin-left: 20px;
+		background-color: rgba(0, 0, 0, 0.05);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/frappe/public/js/frappe/social/components/PostAction.vue b/frappe/public/js/frappe/social/components/PostAction.vue
index 0022212dea..ed93ad6afe 100644
--- a/frappe/public/js/frappe/social/components/PostAction.vue
+++ b/frappe/public/js/frappe/social/components/PostAction.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="flex text-muted justify-center">
-		<div class="reply" @click="$emit('reply')">
-			<i class="fa fa-reply"></i>
-			<span>{{reply_count}}</span>
+	<div class="post-action-container text-muted">
+		<div class="reply">
+			<i class="fa fa-reply" @click="$emit('new_reply')"></i>
+			<span @click="$emit('toggle_reply')">{{ reply_count }}</span>
 		</div>
 		<div class="like" @click="$emit('like')">
 			<i class="fa fa-heart"></i>
-			<span>{{like_count}}</span>
+			<span>{{ like_count }}</span>
 		</div>
 	</div>
 </template>
@@ -25,10 +25,14 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.reply, .like{
-	padding: 10px;
-	span {
-		margin-left: 5px;
+.post-action-container {
+	display: flex;
+	justify-content: flex-end;
+	.reply, .like {
+		padding: 10px;
+		span {
+			margin-left: 5px;
+		}
 	}
 }
 </style>
\ No newline at end of file
diff --git a/frappe/public/js/frappe/social/pages/Wall.vue b/frappe/public/js/frappe/social/pages/Wall.vue
index a1a51087cc..f698788562 100644
--- a/frappe/public/js/frappe/social/pages/Wall.vue
+++ b/frappe/public/js/frappe/social/pages/Wall.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="container flex">
+	<div class="wall-container">
 		<div class="new_posts_count" @click="load_new_posts()" v-if='new_posts_count'>
 			{{ new_posts_count + ' new post'}}
 		</div>
@@ -28,7 +28,9 @@ export default {
 	},
 	methods: {
 		get_posts(load_only_new_posts = true) {
-			const filters = {};
+			const filters = {
+				'reply_to': ''
+			};
 			if (load_only_new_posts && this.posts[0]) {
 				filters.creation = ['>', this.posts[0].creation]
 			}
@@ -53,20 +55,16 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.container {
+.wall-container {
 	display: flex;
 	flex-direction: column;
-	background: rgb(230, 236, 240);
-	padding: 0px;
+	padding-top: 10px;
 	width: 500px;
 	font-size: 14px;
 	margin: 0;
 	.new_posts_count {
-		height: 40px;
 		cursor: pointer;
-		background: rgb(205, 227, 241);
 		text-align: center;
-		padding: 10px;
 	}
 }
 </style>
\ No newline at end of file
diff --git a/frappe/public/js/frappe/social/social_home.js b/frappe/public/js/frappe/social/social_home.js
index 0ba875f9a8..d39a354c73 100644
--- a/frappe/public/js/frappe/social/social_home.js
+++ b/frappe/public/js/frappe/social/social_home.js
@@ -18,10 +18,10 @@ frappe.social.Home = class SocialHome {
 	}
 	make_body() {
 		this.$body = this.$parent.find('.layout-main-section');
-		this.$page_container = $('<div class="wall-container">').appendTo(this.$body);
+		this.$page_container = $('<div class="social-container">').appendTo(this.$body);
 
 		new Vue({
-			el: '.wall-container',
+			el: '.social-container',
 			render: h => h(Home)
 		});
 	}
@@ -67,6 +67,7 @@ frappe.social.post_reply_dialog.set_primary_action(__('Reply'), () => {
 	const post = frappe.model.get_new_doc('Post');
 	post.content = values.content;
 	post.reply_to = values.reply_to;
+	console.log(post);
 	frappe.db.insert(post).then(() => {
 		frappe.social.post_reply_dialog.clear();
 		frappe.social.post_reply_dialog.hide();
diff --git a/frappe/public/less/social.less b/frappe/public/less/social.less
new file mode 100644
index 0000000000..c31d1ba6c8
--- /dev/null
+++ b/frappe/public/less/social.less
@@ -0,0 +1,5 @@
+body[data-route*="social"] {
+	.layout-main-section {
+		border: none;
+	}
+}
\ No newline at end of file
diff --git a/frappe/public/less/website.less b/frappe/public/less/website.less
index 555f7ab33c..dcc1bb5b1e 100644
--- a/frappe/public/less/website.less
+++ b/frappe/public/less/website.less
@@ -773,3 +773,4 @@ margin-bottom: 3em;
 .webform-wrapper {
 	margin: -30px;
 }
+