diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
9 files changed, 34 insertions, 158 deletions
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue index ab8516296a8..30e02554b65 100644 --- a/app/assets/javascripts/notes/components/issue_comment_form.vue +++ b/app/assets/javascripts/notes/components/issue_comment_form.vue @@ -1,9 +1,9 @@ <script> - /* global Flash, Autosave */ import { mapActions, mapGetters } from 'vuex'; import _ from 'underscore'; - import autosize from 'vendor/autosize'; - import '../../autosave'; + import Autosize from 'autosize'; + import Flash from '../../flash'; + import Autosave from '../../autosave'; import TaskList from '../../task_list'; import * as constants from '../constants'; import eventHub from '../event_hub'; @@ -145,7 +145,7 @@ Flash( 'Something went wrong while adding your comment. Please try again.', 'alert', - $(this.$refs.commentForm), + this.$refs.commentForm, ); } } else { @@ -160,7 +160,7 @@ this.isSubmitting = false; this.discard(false); const msg = 'Your comment could not be submitted! Please check your network connection and try again.'; - Flash(msg, 'alert', $(this.$el)); + Flash(msg, 'alert', this.$el); this.note = noteData.data.note.note; // Restore textarea content. this.removePlaceholderNotes(); }); @@ -219,7 +219,7 @@ }, resizeTextarea() { this.$nextTick(() => { - autosize.update(this.$refs.textarea); + Autosize.update(this.$refs.textarea); }); }, }, @@ -357,7 +357,8 @@ @click="handleSave(true)" v-if="canUpdateIssue" :class="actionButtonClassNames" - class="btn btn-comment btn-comment-and-close"> + :disabled="isSubmitting" + class="btn btn-comment btn-comment-and-close js-action-button"> {{issueActionButtonTitle}} </button> <button diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue index b131ef4b182..0f13221b81e 100644 --- a/app/assets/javascripts/notes/components/issue_discussion.vue +++ b/app/assets/javascripts/notes/components/issue_discussion.vue @@ -1,6 +1,6 @@ <script> - /* global Flash */ import { mapActions, mapGetters } from 'vuex'; + import Flash from '../../flash'; import { SYSTEM_NOTE } from '../constants'; import issueNote from './issue_note.vue'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; @@ -9,8 +9,8 @@ import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue'; import issueNoteEditedText from './issue_note_edited_text.vue'; import issueNoteForm from './issue_note_form.vue'; - import placeholderNote from './issue_placeholder_note.vue'; - import placeholderSystemNote from './issue_placeholder_system_note.vue'; + import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; + import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import autosave from '../mixins/autosave'; export default { @@ -133,7 +133,7 @@ this.isReplying = true; this.$nextTick(() => { const msg = 'Your comment could not be submitted! Please check your network connection and try again.'; - Flash(msg, 'alert', $(this.$el)); + Flash(msg, 'alert', this.$el); this.$refs.noteForm.note = noteText; callback(err); }); diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue index e73ec2aaf71..64466b04b40 100644 --- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue +++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue @@ -1,18 +1,21 @@ <script> + import Icon from '../../vue_shared/components/icon.vue'; + export default { - computed: { - lockIcon() { - return gl.utils.spriteIcon('lock'); - }, + component: { + Icon, }, }; - </script> <template> <div class="disabled-comment text-center"> - <span class="issuable-note-warning"> - <span class="icon" v-html="lockIcon"></span> + <span class="issuable-note-warning inline"> + <icon + name="lock" + :size="16" + class="icon"> + </icon> <span>This issue is locked. Only <b>project members</b> can comment.</span> </span> </div> diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue index 1f43b8a16ad..40318f9a600 100644 --- a/app/assets/javascripts/notes/components/issue_note.vue +++ b/app/assets/javascripts/notes/components/issue_note.vue @@ -1,7 +1,6 @@ <script> - /* global Flash */ - import { mapGetters, mapActions } from 'vuex'; + import Flash from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import issueNoteHeader from './issue_note_header.vue'; import issueNoteActions from './issue_note_actions.vue'; @@ -101,7 +100,7 @@ this.isEditing = true; this.$nextTick(() => { const msg = 'Something went wrong while editing your comment. Please try again.'; - Flash(msg, 'alert', $(this.$el)); + Flash(msg, 'alert', this.$el); this.recoverNoteContent(noteText); callback(); }); @@ -123,7 +122,9 @@ // 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 + if (this.$refs.noteBody) { + this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better + } }, }, created() { diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue index d42e61e3899..c3a340139e7 100644 --- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue +++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue @@ -1,10 +1,9 @@ <script> - /* global Flash */ - import { mapActions, mapGetters } from 'vuex'; import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg'; import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmiley from 'icons/_emoji_smiley.svg'; + import Flash from '../../flash'; import { glEmojiTag } from '../../emoji'; import tooltip from '../../vue_shared/directives/tooltip'; diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue index b6fc5e5036f..5c9119644e3 100644 --- a/app/assets/javascripts/notes/components/issue_notes_app.vue +++ b/app/assets/javascripts/notes/components/issue_notes_app.vue @@ -1,14 +1,14 @@ <script> - /* global Flash */ import { mapGetters, mapActions } from 'vuex'; + import Flash from '../../flash'; import store from '../stores/'; import * as constants from '../constants'; import issueNote from './issue_note.vue'; import issueDiscussion from './issue_discussion.vue'; - import issueSystemNote from './issue_system_note.vue'; + import systemNote from '../../vue_shared/components/notes/system_note.vue'; import issueCommentForm from './issue_comment_form.vue'; - import placeholderNote from './issue_placeholder_note.vue'; - import placeholderSystemNote from './issue_placeholder_system_note.vue'; + import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; + import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; export default { @@ -37,7 +37,7 @@ components: { issueNote, issueDiscussion, - issueSystemNote, + systemNote, issueCommentForm, loadingIcon, placeholderNote, @@ -68,7 +68,7 @@ } return placeholderNote; } else if (note.individual_note) { - return note.notes[0].system ? issueSystemNote : issueNote; + return note.notes[0].system ? systemNote : issueNote; } return issueDiscussion; diff --git a/app/assets/javascripts/notes/components/issue_placeholder_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_note.vue deleted file mode 100644 index 6921d91372f..00000000000 --- a/app/assets/javascripts/notes/components/issue_placeholder_note.vue +++ /dev/null @@ -1,53 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; - - export default { - name: 'issuePlaceholderNote', - props: { - note: { - type: Object, - required: true, - }, - }, - components: { - userAvatarLink, - }, - computed: { - ...mapGetters([ - 'getUserData', - ]), - }, - }; -</script> - -<template> - <li class="note being-posted fade-in-half timeline-entry"> - <div class="timeline-entry-inner"> - <div class="timeline-icon"> - <user-avatar-link - :link-href="getUserData.path" - :img-src="getUserData.avatar_url" - :img-size="40" - /> - </div> - <div - :class="{ discussion: !note.individual_note }" - class="timeline-content"> - <div class="note-header"> - <div class="note-header-info"> - <a :href="getUserData.path"> - <span class="hidden-xs">{{getUserData.name}}</span> - <span class="note-headline-light">@{{getUserData.username}}</span> - </a> - </div> - </div> - <div class="note-body"> - <div class="note-text"> - <p>{{note.body}}</p> - </div> - </div> - </div> - </div> - </li> -</template> diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue deleted file mode 100644 index 80a8ef56a83..00000000000 --- a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue +++ /dev/null @@ -1,21 +0,0 @@ -<script> - export default { - name: 'placeholderSystemNote', - props: { - note: { - type: Object, - required: true, - }, - }, - }; -</script> - -<template> - <li class="note system-note timeline-entry being-posted fade-in-half"> - <div class="timeline-entry-inner"> - <div class="timeline-content"> - <em>{{note.body}}</em> - </div> - </div> - </li> -</template> diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/notes/components/issue_system_note.vue deleted file mode 100644 index 0cfb6522e77..00000000000 --- a/app/assets/javascripts/notes/components/issue_system_note.vue +++ /dev/null @@ -1,54 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import issueNoteHeader from './issue_note_header.vue'; - - export default { - name: 'systemNote', - props: { - note: { - type: Object, - required: true, - }, - }, - components: { - issueNoteHeader, - }, - computed: { - ...mapGetters([ - 'targetNoteHash', - ]), - noteAnchorId() { - return `note_${this.note.id}`; - }, - isTargetNote() { - return this.targetNoteHash === this.noteAnchorId; - }, - iconHtml() { - return gl.utils.spriteIcon(this.note.system_note_icon_name); - }, - }, - }; -</script> - -<template> - <li - :id="noteAnchorId" - :class="{ target: isTargetNote }" - class="note system-note timeline-entry"> - <div class="timeline-entry-inner"> - <div - class="timeline-icon" - v-html="iconHtml"> - </div> - <div class="timeline-content"> - <div class="note-header"> - <issue-note-header - :author="note.author" - :created-at="note.created_at" - :note-id="note.id" - :action-text-html="note.note_html" /> - </div> - </div> - </div> - </li> -</template> |