Skip to content

Commit 115d211

Browse files
author
sharvilak
committed
templates added
1 parent 99c5b39 commit 115d211

File tree

2 files changed

+143
-97
lines changed

2 files changed

+143
-97
lines changed

‎src/components/Comment.vue‎

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,87 @@
1+
<!--
12
<template>
2-
<div>
3-
<div class="comment" :style="style" v-show="comment.expanded">
4-
<div class="d-flex align-items-center">
5-
<Avatar :text="comment.User" size="30"></Avatar>
6-
<div class="ml-2">
7-
<strong>{{ comment.User }}</strong>
8-
<p>{{ comment.Body }}</p>
9-
</div>
3+
<div class="comment">
4+
<div class="d-flex align-items-center">
5+
<Avatar :text="comment.User" size="30"></Avatar>
6+
<div class="ml-2">
7+
<strong>{{ comment.User }}</strong>
8+
<p>{{ comment.Body }}</p>
109
</div>
1110
</div>
12-
<a class="replies" :style="repliesStyle" @click="() => viewComments(comment)" v-if="comment.Comments && comment.expanded && !comment.Comments[0].expanded"> <i class="material-icons">subdirectory_arrow_right</i> {{ comment.Comments.length }} replies: </a>
11+
<a class="d-flex align-items-center text-muted ml-1" @click="$set(comment, 'expanded', true)"
12+
v-if="comment.Comments && !comment.expanded">
13+
<i class="material-icons">subdirectory_arrow_right</i> {{ comment.Comments.length }} replies:
14+
</a>
15+
<div v-if="comment.Comments && comment.expanded">
16+
<Comment v-for="(c, key) in comment.Comments" :comment="c" :key="key"></Comment>
17+
</div>
1318
</div>
1419
</template>
20+
-->
1521

1622
<script>
1723
import Avatar from './Avatar';
24+
import Comment from './Comment';
1825
export default {
1926
name: 'Comment',
2027
props: {
2128
comment: {
2229
type: Object,
2330
required: true,
24-
},
25-
counter: {
26-
type: Number,
27-
},
28-
viewComments: {
29-
type: Function,
30-
},
31-
},
32-
components: { Avatar },
33-
computed: {
34-
style() {
35-
return {
36-
display: !this.comment.expanded ? 'none' : 'block',
37-
'padding-left': (this.counter + 1) * 16 + 'px',
38-
};
39-
},
40-
repliesStyle() {
41-
return {
42-
'margin-left': (this.counter + 1) * 16 + 38 + 'px',
43-
};
44-
},
31+
}
4532
},
33+
components: { Avatar, Comment },
34+
render(h) {
35+
return h('div',{ class: 'comment' },
36+
[
37+
h('div', { class: 'd-flex align-items-center' },
38+
[
39+
h(Avatar, {
40+
props: {
41+
text: this.comment.User,
42+
size: '30'
43+
}
44+
}),
45+
h('div', { class: 'ml-2' },
46+
[
47+
h('strong', this.comment.User),
48+
h('p', this.comment.Body)
49+
]
50+
)
51+
]),
52+
this.comment.Comments && !this.comment.expanded ?
53+
h('a', {
54+
class: 'd-flex align-items-center text-muted ml-1',
55+
on: {
56+
click: () => {
57+
this.$set(this.comment, 'expanded', true);
58+
}
59+
}
60+
},
61+
[
62+
h('i', { class: 'material-icons' }, 'subdirectory_arrow_right'),
63+
this.comment.Comments.length + ' replies'
64+
]
65+
) : null,
66+
this.comment.Comments && this.comment.expanded ? this.comment.Comments.map((c, key) => {
67+
return h(Comment, {
68+
key,
69+
props: {
70+
comment: c
71+
},
72+
});
73+
}): null
74+
]
75+
);
76+
}
4677
};
4778
</script>
4879

4980
<style lang="scss" scoped>
5081
.comment {
51-
padding: 4px;
52-
}
53-
.replies {
54-
display: flex;
55-
align-items: center;
56-
color: #888;
82+
padding: 16px;
83+
margin: 16px 0 0 16px;
84+
border: 1px solid #e9e9e9;
85+
border-radius: 4px;
5786
}
5887
</style>

‎src/components/Post.vue‎

Lines changed: 78 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
<!--
2+
<template>
3+
<div>
4+
<div class="post">
5+
<div class="d-flex align-items-center">
6+
<Avatar size="40" :text="post.Author" class="mr-3"></Avatar>
7+
<h4>{{ post.Title }}</h4>
8+
</div>
9+
<div class="post-summary">
10+
<div class="d-flex align-items-center pb-2 mb-2">
11+
<i class="material-icons mr-1">thumb_up_alt</i> {{ post.Likes }}
12+
<i class="material-icons ml-2 mr-1">comment</i> {{ post.Comments ? post.Comments.length : 0 }}
13+
</div>
14+
<a v-if="post.Comments" @click="$set(post,'expanded', true)" class="mt-2" :class="{'d-none': post.expanded}">
15+
View Comments:
16+
</a>
17+
<div v-if="post.expanded">
18+
<Comment v-for="(c, key) in post.Comments" :comment="c" :key="key"></Comment>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
-->
25+
126
<script>
227
import Avatar from './Avatar';
328
import Comment from './Comment';
@@ -10,76 +35,68 @@ export default {
1035
required: true,
1136
},
1237
},
13-
methods: {
14-
setupPost(h) {
15-
return h('div', { class: 'post' }, [
16-
h('div', { class: 'd-flex align-items-center' }, [
17-
h(Avatar, {
18-
props: {
19-
size: '40',
20-
text: this.post.Author,
21-
},
22-
class: 'mr-3',
23-
}), h('h4', this.post.Title)]
24-
),
25-
h('div', { class: 'd-flex align-items-center post-summary pb-2 mb-2'}, [
26-
h('i', { class: 'material-icons mr-1' }, 'thumb_up_alt'),
27-
this.post.Likes,
28-
h('i', { class: 'material-icons ml-2 mr-1' }, 'comment'),
29-
this.post.Comments ? this.post.Comments.length : 0]
30-
),
31-
this.post.Comments ? h('a', {
32-
on: {
33-
click: () => {
34-
this.viewComments(this.post);
35-
}
36-
},
37-
class: {
38-
'mt-2': !this.post.Comments[0].expanded,
39-
'd-none': this.post.Comments[0].expanded,
40-
},
41-
}, 'View Comments:') : null,
42-
this.setupComments(h, this.post, 0),
43-
]);
44-
},
45-
setupComments(h, parent, counter) {
46-
if (parent.Comments) {
47-
return h('div', parent.Comments.map((c, key) => {
48-
return [
49-
h(Comment, {
50-
key,
51-
props: {
52-
comment: c,
53-
counter,
54-
viewComments: this.viewComments,
55-
},
56-
}),
57-
this.setupComments(h, c, counter + 1),
58-
];
59-
})
60-
);
61-
} else {
62-
return null;
63-
}
64-
},
65-
viewComments(parent) {
66-
parent.Comments.forEach((c) => {
67-
this.$set(c, 'expanded', true);
68-
});
69-
},
70-
},
38+
components: {Comment, Avatar},
7139
render(h) {
72-
return h('div', [this.setupPost(h)]);
73-
},
40+
return h('div', [
41+
h('div', { class: 'post' },
42+
[
43+
h('div', { class: 'd-flex align-items-center' },
44+
[
45+
h(Avatar, {
46+
props: {
47+
size: '40',
48+
text: this.post.Author,
49+
},
50+
class: 'mr-3',
51+
}), h('h4', this.post.Title)
52+
]
53+
),
54+
h('div', { class: 'post-summary'},
55+
[
56+
h('div', { class: 'd-flex align-items-center pb-2 mb-2'},
57+
[
58+
h('i', { class: 'material-icons mr-1' }, 'thumb_up_alt'),
59+
this.post.Likes,
60+
h('i', { class: 'material-icons ml-2 mr-1' }, 'comment'),
61+
this.post.Comments ? this.post.Comments.length : 0]
62+
),
63+
this.post.Comments ? [
64+
h('a', {
65+
on: {
66+
click: () => {
67+
this.$set(this.post,'expanded', true);
68+
}
69+
},
70+
class: ['mt-2', {
71+
'd-none': this.post.expanded,
72+
}],
73+
}, 'View Comments:'),
74+
this.post.expanded ? (h('div', {
75+
class: 'mt-2'
76+
}, [
77+
this.post.Comments.map(comment => h(Comment, {
78+
props: {
79+
comment
80+
}
81+
})
82+
)
83+
])): null
84+
]: null
85+
]
86+
)
87+
]
88+
)
89+
]);
90+
}
7491
};
7592
</script>
7693

7794
<style lang="scss" scoped>
7895
.post {
7996
padding: 16px;
80-
border: 1px solid #e9e9e9;
8197
margin-bottom: 16px;
8298
&-summary {
99+
padding-bottom: 16px;
83100
margin-left: 56px;
84101
color: #0e5bd2;
85102
font-weight: 500;

0 commit comments

Comments
 (0)