Add UI enhancements and some bug fixes

This commit is contained in:
Suraj Shetty 2018-09-27 13:58:27 +05:30
parent a4fb567127
commit 9842734e12
8 changed files with 48 additions and 33 deletions

View file

@ -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",

View file

@ -1,5 +1,5 @@
<template>
<div class="social-page-container">
<div class="social">
<component :is="current_page"></component>
</div>
</template>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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();

View file

@ -0,0 +1,5 @@
body[data-route*="social"] {
.layout-main-section {
border: none;
}
}

View file

@ -773,3 +773,4 @@ margin-bottom: 3em;
.webform-wrapper {
margin: -30px;
}