src_js/iconolab-bundle/src/components/editor/Comment.vue
changeset 405 6b8a1ae18e91
parent 396 0a4743126d74
child 406 733be8cac793
--- a/src_js/iconolab-bundle/src/components/editor/Comment.vue	Tue Feb 28 17:19:04 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Comment.vue	Wed Mar 01 01:41:20 2017 +0100
@@ -1,16 +1,15 @@
 <template>
-    <div class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
+    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" 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">
-            <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>
+            <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>
         </div>
     </div>
 </template>
@@ -36,7 +35,8 @@
         ],
         data() {
             return {
-                showForm: false
+                showForm: false,
+                hover: false
             }
         },
         computed: {