src_js/iconolab-bundle/src/components/editor/Comment.vue
changeset 410 a6db5e626850
parent 409 3e61d1c8acd3
child 411 74b01659ee40
--- a/src_js/iconolab-bundle/src/components/editor/Comment.vue	Wed Mar 01 15:46:18 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Comment.vue	Wed Mar 01 17:18:53 2017 +0100
@@ -1,16 +1,18 @@
 <template>
-    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
+    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:class="commentClass">
         <div class="comment-body">
             <strong class="comment-author">{{ username }}</strong>
             <div class="comment-content" v-html="commentFormatted"></div>
         </div>
         <div class="comment-footer">
-            <span v-show="!hover || !allowThread" class="comment-date">{{ dateFormatted }}</span>
-            <comment-form v-show="hover"
-                v-if="allowThread"
-                v-bind:annotation="annotation"
-                v-bind:reply-to="id"></comment-form>
+            <span class="comment-date">{{ dateFormatted }}</span>
         </div>
+
+        <comment-form v-show="hover"
+            v-if="allowThread"
+            v-bind:annotation="annotation"
+            v-bind:reply-to="id">
+        </comment-form>
     </div>
 </template>
 
@@ -40,6 +42,15 @@
             }
         },
         computed: {
+            commentClass: function(){
+              var c = [];
+
+              if (this.level > 0) {
+                c = [ "comment-thread" ]
+              }
+
+              return c;
+            },
             dateFormatted: function () {
 
               var date = moment(this.date); //.format("HH:mm DD/MM/YYYY");
@@ -57,9 +68,17 @@
 <style scoped>
 .comment {
     font-size: 12px;
-    padding: 5px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #ccc;
 }
+
+.comment-thread {
+  border-bottom-width: 0px;
+  border-left: 3px solid #ccc;
+  padding-left: 10px;
+  margin-left: 10px;
+}
+
 .comment-author {
     float: left;
     margin-right: 4px;
@@ -68,7 +87,7 @@
 
 }
 .comment-footer {
-    margin-top: 5px;
+    margin-top: 0px;
     color: #ccc;
 }
 </style>