--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Mon May 15 14:44:14 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue May 16 11:29:33 2017 +0200
@@ -2,7 +2,8 @@
     <div>
         <button
             data-intro="Proposez une nouvelle version" data-position="left"
-            v-if="annotation && isAuthenticated" @click="readonly = !readonly"
+            v-if="annotation && isAuthenticated"
+            @click="onCancelClick"
             class="btn btn-xs pull-right"
             v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }">
             <i class="fa fa-edit" v-if="readonly"></i>
@@ -20,7 +21,7 @@
             <input type="hidden" name="fragment" v-model="fragment">
             <div v-if="annotation" class="form-group form-group-sm">
                 <label v-if="!readonly || title" class="small text-muted">Titre</label>
-                <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly">
+                <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly" ref="title">
                 <p v-if="readonly && title" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p>
             </div>
             <div v-if="annotation" class="form-group form-group-sm">
@@ -36,13 +37,13 @@
                     @change="onTagsChange($event.tags)"></tag-list>
                 <input type="hidden" name="tags" v-model="serializedTags">
             </div>
-            <p class="small text-center text-muted" v-if="annotation">
+            <p class="small text-center text-muted" v-if="annotation && annotation.annotation_guid">
                 <a v-bind:href="revisionsUrlComputed">Dernière version</a>
                 <span>{{ dateComputed }} par</span>
                 <a v-bind:href="authorUrlComputed">{{ annotation.author }}</a>
             </p>
             <button type="submit" v-if="annotation &amp;&amp; !readonly" v-bind:class="{ disabled: !hasChanged }"
-                class="btn btn-block btn-sm btn-primary">Enregistrer une nouvelle version</button>
+                class="btn btn-block btn-sm btn-primary">{{ submitButtonText }}</button>
         </form>
     </div>
 </template>
@@ -66,7 +67,6 @@
 
     export default {
         props: {
-            action: String,
             annotation: {
                 type: Object,
                 default: function () {
@@ -78,7 +78,9 @@
                 default: false
             },
             revisionsUrl: String,
-            authorUrl: String
+            authorUrl: String,
+            newAnnotationUrl: String,
+            editAnnotationUrl: String
         },
         components: {
             'tag-list': TagList
@@ -127,9 +129,19 @@
             },
             formAction: function() {
                 if (this.annotation) {
-                    return this.action.replace(':annotation_guid', this.annotation.annotation_guid);
+                    if (this.annotation.annotation_guid) {
+                        return this.editAnnotationUrl.replace(':annotation_guid', this.annotation.annotation_guid);
+                    }
+
+                    return this.newAnnotationUrl
                 }
             },
+            submitButtonText: function() {
+                return this.isNewAnnotation ? 'Enregistrer' : 'Enregister une nouvelle version'
+            },
+            isNewAnnotation: function() {
+                return this.annotation && !this.annotation.annotation_guid
+            },
             serializedTags: function() {
                 var tags = this.tags.map(function(tag) {
                     return {
@@ -151,6 +163,13 @@
             }
         },
         methods: {
+            onCancelClick: function() {
+                if (this.isNewAnnotation) {
+                    this.$emit('close')
+                } else {
+                    this.readonly = !this.readonly
+                }
+            },
             onTagsChange: function(tags) {
                 this.tags = tags;
             },
@@ -164,8 +183,14 @@
                     description: annotation.description,
                     fragment: annotation.fragment,
                     tags: annotation.tags.slice(),
-                    readonly: true,
+                    readonly: !this.isNewAnnotation,
                 });
+
+                if (!annotation.annotation_guid) {
+                    setTimeout(() => {
+                        $(this.$refs.title).focus()
+                    }, 500);
+                }
             }
         }
     }