--- a/src_js/iconolab-bundle/src/components/editor/Comment.vue Mon Feb 27 17:47:22 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Comment.vue Mon Feb 27 17:50:14 2017 +0100
@@ -1,9 +1,16 @@
<template>
- <div class="comment">
- <div class="comment-body" v-html="commentFormatted"></div>
+ <div class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
+ <div class="comment-body">
+ <strong class="comment-author">{{ username }}</strong>
+ <div class="comment-content" v-html="commentFormatted"></div>
+ </div>
<div class="comment-footer">
- <span class="comment-author">{{ username }}</span>
+ <a v-if="allowThread" href="#" v-on:click.prevent="showForm = !showForm">Répondre</a>
<span class="comment-date">{{ dateFormatted }}</span>
+ <comment-form v-bind:reply-to="id" v-if="allowThread" v-show="showForm">
+ <button slot="submit" type="submit" class="btn btn-xs btn-primary">Valider</button>
+ <a slot="submit" href="#" v-on:click.prevent="showForm = false" class="text-muted" style="margin-left: 5px;">Annuler</a>
+ </comment-form>
</div>
</div>
</template>
@@ -12,15 +19,26 @@
import showdown from 'showdown'
- const converter = new showdown.Converter()
+ const converter = new showdown.Converter({
+ simpleLineBreaks: true
+ })
export default {
+ components: ['comment-form'],
props: [
+ 'id',
+ 'level',
'comment',
'username',
'email',
- 'date'
+ 'date',
+ 'allowThread'
],
+ data() {
+ return {
+ showForm: false
+ }
+ },
computed: {
dateFormatted: function () {
@@ -46,11 +64,15 @@
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
+.comment-author {
+ float: left;
+ margin-right: 4px;
+}
+.comment-date {
+
+}
.comment-footer {
margin-top: 5px;
color: #ccc;
}
-.comment-date {
- float: right;
-}
</style>