diff options
| -rw-r--r-- | app/assets/javascripts/notes/components/issue_note.vue | 31 | ||||
| -rw-r--r-- | app/assets/javascripts/notes/components/issue_note_header.vue | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 14 |
3 files changed, 46 insertions, 7 deletions
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue index 659043d9fa1..3483f6c7538 100644 --- a/app/assets/javascripts/notes/components/issue_note.vue +++ b/app/assets/javascripts/notes/components/issue_note.vue @@ -19,6 +19,7 @@ return { isEditing: false, isDeleting: false, + isRequesting: false, }; }, components: { @@ -37,7 +38,8 @@ }, classNameBindings() { return { - 'is-editing': this.isEditing, + 'is-editing': this.isEditing && !this.isRequesting, + 'is-requesting being-posted': this.isRequesting, 'disabled-content': this.isDeleting, target: this.targetNoteHash === this.noteAnchorId, }; @@ -82,20 +84,27 @@ note: { note: noteText }, }, }; + this.isRequesting = true; + this.oldContent = this.note.note_html; + this.note.note_html = noteText; this.updateNote(data) .then(() => { this.isEditing = false; + this.isRequesting = false; $(this.$refs.noteBody.$el).renderGFM(); this.$refs.noteBody.resetAutoSave(); callback(); }) .catch(() => { - Flash( - 'Something went wrong while editing your comment. Please try again.', - 'alert', - $(parentElement)); - callback(); + this.isRequesting = false; + this.isEditing = true; + this.$nextTick(() => { + const msg = 'Something went wrong while editing your comment. Please try again.'; + Flash(msg, 'alert', $(this.$el)); + this.recoverNoteContent(noteText); + callback(); + }); }); }, formCancelHandler(shouldConfirm, isDirty) { @@ -104,8 +113,18 @@ if (!confirm('Are you sure you want to cancel editing this comment?')) return; } this.$refs.noteBody.resetAutoSave(); + if (this.oldContent) { + this.note.note_html = this.oldContent; + this.oldContent = null; + } this.isEditing = false; }, + recoverNoteContent(noteText) { + // we need to do this to prevent noteForm inconsistent content warning + // this is something we intentionally do so we need to recover the content + this.note.note = noteText; + this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better + }, }, created() { eventHub.$on('enterEditMode', ({ noteId }) => { diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue index 3b658f00f1f..63aa3d777d0 100644 --- a/app/assets/javascripts/notes/components/issue_note_header.vue +++ b/app/assets/javascripts/notes/components/issue_note_header.vue @@ -85,12 +85,18 @@ </span> <a :href="noteTimestampLink" - @click="updateTargetNoteHash"> + @click="updateTargetNoteHash" + class="note-timestamp"> <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" /> </a> + <i + class="fa fa-spinner fa-spin editing-spinner" + aria-label="Comment is being updated" + aria-hidden="true"> + </i> </span> </span> <div diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 90cfa409139..838ca92d905 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -100,6 +100,20 @@ ul.notes { } } + .editing-spinner { + display: none; + } + + &.is-requesting { + .note-timestamp { + display: none; + } + + .editing-spinner { + display: inline-block; + } + } + &.is-editing { .note-header, .note-text, |