Add UI enhancements and some bug fixes
This commit is contained in:
parent
a4fb567127
commit
9842734e12
8 changed files with 48 additions and 33 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="social-page-container">
|
||||
<div class="social">
|
||||
<component :is="current_page"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
5
frappe/public/less/social.less
Normal file
5
frappe/public/less/social.less
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
body[data-route*="social"] {
|
||||
.layout-main-section {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -773,3 +773,4 @@ margin-bottom: 3em;
|
|||
.webform-wrapper {
|
||||
margin: -30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue