--- a/src/iconolab/templates/iconolab/detail_image.html	Tue Feb 28 17:19:04 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Wed Mar 01 01:41:20 2017 +0100
@@ -66,9 +66,7 @@
             fetch="{% url 'get_annotation_comments_json' ':annotation_guid' %}"></comment-list>
         </div>
         <div class="annotation-comment-box" id="form-comment">
-          <comment-form v-if="annotation">
-            <button slot="submit" type="submit" class="btn btn-block btn-sm btn-primary">Commenter</button>
-          </comment-form>
+          <comment-form v-if="annotation"></comment-form>
         </div>
       </div>
     </div>
@@ -88,7 +86,8 @@
     template: '<div></div>',
     data: function() {
       return {
-        replyTo: 0
+        replyTo: 0,
+        btnGroupClass: {}
       }
     }
   });
@@ -123,6 +122,31 @@
           resolve({
             props: ['reply-to'],
             template: form,
+            data: function() {
+              return {
+                active: null
+              }
+            },
+            watch: {
+              active: function(active) {
+                if (active) {
+                  setTimeout(() => $(this.$el).find('[name="comment"]').focus(), 200);
+                }
+              }
+            },
+            computed: {
+              btnGroupClass: function() {
+                var classes = [
+                  { active: this.active || false }
+                ];
+
+                if (this.active) {
+                  classes.push('btn-group-' + this.active)
+                }
+
+                return classes;
+              }
+            }
           });
         });
 

--- a/src/iconolab/templates/partials/comment_form.html	Tue Feb 28 17:19:04 2017 +0100
+++ b/src/iconolab/templates/partials/comment_form.html	Wed Mar 01 01:41:20 2017 +0100
@@ -1,4 +1,4 @@
-<form action="{% url 'post_comment' %}" method="POST">
+<form class="comment-form" action="{% url 'post_comment' %}" method="POST">
 
   {% csrf_token %}
 
@@ -10,13 +10,64 @@
   <input type="hidden" name="next" value="{{ next }}">
   <input type="hidden" name="reply_to" v-bind:value="replyTo || 0"></input>
 
-  <fieldset class="form-group form-group-sm">
+  <div class="btn-group-wrapper">
+    <div data-toggle="buttons"
+      class="btn-group btn-group-metacategory"
+      v-bind:class="btnGroupClass">
+
+      {% if 'request_for_contribution' in metacategories %}
+      <label title="{{ metacategories.request_for_contribution.label }}"
+        v-bind:class="{ active: active === 'request-for-contribution' }"
+        v-on:click.prevent="active = 'request-for-contribution'" class="btn btn-default btn-request-for-contribution">
+        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.request_for_contribution.id }}">
+        <i class="fa fa-users"></i>
+      </label>
+      {% endif %}
+      {% if 'reference' in metacategories %}
+      <label title="{{ metacategories.reference.label }}"
+        v-bind:class="{ active: active === 'reference' }"
+        v-on:click.prevent="active = 'reference'" class="btn btn-default btn-reference">
+        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.reference.id }}">
+        <i class="fa fa-book"></i>
+      </label>
+      {% endif %}
+
+      <label title="Commentaire"
+        v-bind:class="{ active: active === 'comment' }"
+        v-on:click.prevent="active = 'comment'" class="btn btn-default btn-comment">
+        <i class="fa fa-comment"></i>
+      </label>
+
+      {% if 'agree' in metacategories %}
+      <label title="{{ metacategories.agree.label }}"
+        v-bind:class="{ active: active === 'agree' }"
+        v-on:click.prevent="active = 'agree'" class="btn btn-default btn-agree">
+        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.agree.id }}">
+        <i class="fa fa-thumbs-up"></i>
+      </label>
+      {% endif %}
+      {% if 'disagree' in metacategories %}
+      <label title="{{ metacategories.disagree.label }}"
+        v-bind:class="{ active: active === 'disagree' }"
+        v-on:click.prevent="active = 'disagree'" class="btn btn-default btn-disagree">
+        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.disagree.id }}">
+        <i class="fa fa-thumbs-down"></i>
+      </label>
+      {% endif %}
+
+    </div>
+  </div>
+
+  <fieldset v-show="active" class="form-group form-group-sm">
     <textarea class="form-control input-sm"
       name="{{ comment_form.comment.name }}"
       id="id_{{ comment_form.comment.name }}"
       placeholder="Ajouter mon commentaire..."></textarea>
   </fieldset>
 
-  <slot name="submit"></slot>
+  <button v-show="active" type="submit" class="btn btn-xs btn-primary">Commenter</button>
+  <a v-show="active" href="#" v-on:click.prevent="active = null" class="text-muted" style="margin-left: 5px;">
+    <small>Annuler</small>
+  </a>
 
 </form>

--- a/src/iconolab/views/comments.py	Tue Feb 28 17:19:04 2017 +0100
+++ b/src/iconolab/views/comments.py	Wed Mar 01 01:41:20 2017 +0100
@@ -119,8 +119,23 @@
     annotation = Annotation.objects.get(annotation_guid=annotation_guid)
     next_url = request.GET.get('next')
     form = django_comments.get_form()(annotation)
+
+    metacategory_keys = {
+        'Appel à contribution': 'request_for_contribution',
+        'Référence': 'reference',
+        'Accord': 'agree',
+        'Désaccord': 'disagree'
+    }
+    metacategories = {}
+
+    for metacategory in annotation.image.item.collection.metacategories.all():
+        if metacategory.label not in metacategory_keys.keys():
+            continue
+        metacategories[metacategory_keys[metacategory.label]] = metacategory
+
     return render(request, 'partials/comment_form.html', {
         'comment_form': form,
+        'metacategories': metacategories,
         'next': next_url
     })
 

--- 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: {

--- a/src_js/iconolab-bundle/src/iconolab.scss	Tue Feb 28 17:19:04 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss	Wed Mar 01 01:41:20 2017 +0100
@@ -103,6 +103,111 @@
 	border: 1px solid #bbb
 }
 
+.comment-form {
+
+    $color-request-for-contribution: #f5e41c;
+    $color-reference: #478ee0;
+    $color-agree: #b8e986;
+    $color-disagree: #ff7284;
+
+    .btn-group-wrapper {
+        text-align: center;
+    }
+
+    .form-group {
+        margin-bottom: 10px;
+    }
+
+    .btn-group-metacategory {
+
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+        border-bottom: 2px solid #969696;
+
+        &.btn-group-request-for-contribution {
+            border-color: $color-request-for-contribution;
+        }
+        &.btn-group-reference {
+            border-color: $color-reference;
+        }
+        &.btn-group-agree {
+            border-color: $color-agree;
+        }
+        &.btn-group-disagree {
+            border-color: $color-disagree;
+        }
+
+        &.active {
+            padding-bottom: 0px;
+        }
+
+        .btn {
+            border: none;
+            padding: 4px 8px;
+            margin: 0 2px;
+            border-radius: 0;
+            border-radius: 4px !important;
+        }
+        .btn:first-child {
+            margin-left: 0;
+        }
+        .btn:last-child {
+            margin-right: 0;
+        }
+        .btn:focus,
+        .btn.focus,
+        .btn:active:focus,
+        .btn:active.focus,
+        .btn.active:focus,
+        .btn.active.focus {
+            outline: none;
+        }
+        .btn.active {
+            padding: 4px 8px 8px;
+            border-bottom-left-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
+        .btn-comment {
+            background-color: #969696;
+            color: #fff;
+            padding-left: 20px;
+            padding-right: 20px;
+            &:hover {
+                background-color: darken(#969696, 10%);
+            }
+            &.active {
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+        }
+        .btn-request-for-contribution {
+            background-color: $color-request-for-contribution;
+            &:hover {
+                background-color: darken($color-request-for-contribution, 10%);
+            }
+        }
+        .btn-reference {
+            background-color: $color-reference;
+            color: #fff;
+            &:hover {
+                background-color: darken($color-reference, 10%);
+            }
+        }
+        .btn-agree {
+            background-color: $color-agree;
+            &:hover {
+                background-color: darken($color-agree, 10%);
+            }
+        }
+        .btn-disagree {
+            background-color: $color-disagree;
+            &:hover {
+                background-color: darken($color-disagree, 10%);
+            }
+        }
+    }
+}
+
 .comment-reply-link{
 	cursor: pointer;
 }