IssueNotesRefactor: Implement show/hide of discussion reply form.
This commit is contained in:
parent
b3704dafac
commit
905ad9cdd5
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue