src_js/iconolab-bundle/src/components/editor/Comment.vue
changeset 396 0a4743126d74
parent 391 7ab1cc12827e
child 405 6b8a1ae18e91
--- 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>