diff options
author | Fatih Acet <acetfatih@gmail.com> | 2017-06-21 00:45:59 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-07-21 22:35:25 +0300 |
commit | 905ad9cdd54464876a712e4fe8acbac1c54cb8c1 (patch) | |
tree | a81a532e934eb18d202b99757964c97102b340b2 /app | |
parent | b3704dafacc0ff77523d091a2c74b4b8265f451e (diff) |
IssueNotesRefactor: Implement show/hide of discussion reply form.
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/notes/components/issue_discussion.vue | 22 | ||||
-rw-r--r-- | app/assets/javascripts/notes/components/issue_note_form.vue | 11 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 4 |
3 files changed, 33 insertions, 4 deletions
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue index b362ef4b53e..27e997e223b 100644 --- a/app/assets/javascripts/notes/components/issue_discussion.vue +++ b/app/assets/javascripts/notes/components/issue_discussion.vue @@ -4,6 +4,7 @@ import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_ import IssueNoteHeader from './issue_note_header.vue'; import IssueNoteActions from './issue_note_actions.vue'; import IssueNoteEditedText from './issue_note_edited_text.vue'; +import IssueNoteForm from './issue_note_form.vue'; export default { props: { @@ -16,6 +17,7 @@ export default { return { registerLink: '#', signInLink: '#', + isReplying: false, }; }, computed: { @@ -32,6 +34,7 @@ export default { IssueNoteHeader, IssueNoteActions, IssueNoteEditedText, + IssueNoteForm, }, mounted() { // We need to grab the register and sign in links from DOM for the time being. @@ -49,6 +52,15 @@ export default { discussionId: this.note.id, }); }, + showReplyForm() { + this.isReplying = true; + }, + cancelReplyForm() { + this.isReplying = false; + }, + saveReply() { + this.isReplying = false; + }, }, }; </script> @@ -95,10 +107,16 @@ export default { <div class="flash-container"></div> <div class="discussion-reply-holder"> <button - v-if="note.can_reply" + v-if="note.can_reply && !isReplying" + @click="showReplyForm" type="button" - class="btn btn-text-field js-discussion-reply-button" + class="btn btn-text-field" title="Add a reply">Reply...</button> + <issue-note-form + v-if="isReplying" + saveButtonTitle="Comment" + :updateHandler="saveReply" + :cancelHandler="cancelReplyForm" /> <div v-if="!note.can_reply" class="disabled-comment text-center"> diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue index 86fd9c063e9..0b234b5192d 100644 --- a/app/assets/javascripts/notes/components/issue_note_form.vue +++ b/app/assets/javascripts/notes/components/issue_note_form.vue @@ -5,7 +5,8 @@ export default { props: { noteBody: { type: String, - required: true, + required: false, + default: '', }, updateHandler: { type: Function, @@ -15,6 +16,11 @@ export default { type: Function, required: true, }, + saveButtonTitle: { + type: String, + required: false, + default: 'Save comment', + } }, data() { return { @@ -40,6 +46,7 @@ export default { this.markdownDocsUrl = markdownDocs; this.markdownPreviewUrl = markdownPreviewUrl; + this.$refs.textarea.focus(); }, }; </script> @@ -68,7 +75,7 @@ export default { @click="handleUpdate" type="button" class="btn btn-nr btn-save"> - Save comment + {{saveButtonTitle}} </button> <button @click="cancelHandler" diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 8cdb3f34ae5..e25694fd0cf 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -250,6 +250,10 @@ ul.related-merge-requests > li { } } +.discussion-reply-holder .note-edit-form { + display: block; +} + @media (min-width: $screen-sm-min) { .emoji-block .row { display: flex; |