diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
14 files changed, 145 insertions, 130 deletions
diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue index aaf64702ffd..47d14783d5d 100644 --- a/app/assets/javascripts/notes/components/comment_field_layout.vue +++ b/app/assets/javascripts/notes/components/comment_field_layout.vue @@ -1,6 +1,6 @@ <script> -import EmailParticipantsWarning from './email_participants_warning.vue'; import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue'; +import EmailParticipantsWarning from './email_participants_warning.vue'; const DEFAULT_NOTEABLE_TYPE = 'Issue'; diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 111af977ec5..bc2b2d6d5d0 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -15,14 +15,13 @@ import { slugifyWithUnderscore, } from '~/lib/utils/text_utility'; import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; -import * as constants from '../constants'; -import eventHub from '../event_hub'; import markdownField from '~/vue_shared/components/markdown/field.vue'; -import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import * as constants from '../constants'; +import eventHub from '../event_hub'; +import issuableStateMixin from '../mixins/issuable_state'; import noteSignedOutWidget from './note_signed_out_widget.vue'; import discussionLockedWidget from './discussion_locked_widget.vue'; -import issuableStateMixin from '../mixins/issuable_state'; import CommentFieldLayout from './comment_field_layout.vue'; export default { @@ -31,7 +30,6 @@ export default { noteSignedOutWidget, discussionLockedWidget, markdownField, - userAvatarLink, GlButton, TimelineEntryItem, GlIcon, @@ -145,6 +143,9 @@ export default { trackingLabel() { return slugifyWithUnderscore(`${this.commentButtonTitle} button`); }, + hasCloseAndCommentButton() { + return !this.glFeatures.removeCommentCloseReopen; + }, }, watch: { note(newNote) { @@ -301,15 +302,6 @@ export default { <ul v-else-if="canCreateNote" class="notes notes-form timeline"> <timeline-entry-item class="note-form"> <div class="flash-container error-alert timeline-content"></div> - <div class="timeline-icon d-none d-md-block"> - <user-avatar-link - v-if="author" - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="40" - /> - </div> <div class="timeline-content timeline-content-form"> <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form"> <comment-field-layout @@ -384,7 +376,7 @@ export default { class="btn btn-transparent" @click.prevent="setNoteType('comment')" > - <gl-icon name="check" class="icon" /> + <gl-icon name="check" class="icon gl-flex-shrink-0" /> <div class="description"> <strong>{{ __('Comment') }}</strong> <p> @@ -400,10 +392,12 @@ export default { <li class="divider droplab-item-ignore"></li> <li :class="{ 'droplab-item-selected': noteType === 'discussion' }"> <button + type="button" + class="btn btn-transparent" data-qa-selector="discussion_menu_item" @click.prevent="setNoteType('discussion')" > - <gl-icon name="check" class="icon" /> + <gl-icon name="check" class="icon gl-flex-shrink-0" /> <div class="description"> <strong>{{ __('Start thread') }}</strong> <p>{{ startDiscussionDescription }}</p> @@ -414,7 +408,7 @@ export default { </div> <gl-button - v-if="canToggleIssueState" + v-if="hasCloseAndCommentButton && canToggleIssueState" :loading="isToggleStateButtonLoading" category="secondary" :variant="buttonVariant" diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue index da4134ab2c4..27408bc3354 100644 --- a/app/assets/javascripts/notes/components/discussion_actions.vue +++ b/app/assets/javascripts/notes/components/discussion_actions.vue @@ -1,8 +1,8 @@ <script> +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ReplyPlaceholder from './discussion_reply_placeholder.vue'; import ResolveDiscussionButton from './discussion_resolve_button.vue'; import ResolveWithIssueButton from './discussion_resolve_with_issue_button.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { name: 'DiscussionActions', diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue index 8ac915c3c03..fc82f8e6b89 100644 --- a/app/assets/javascripts/notes/components/discussion_notes.vue +++ b/app/assets/javascripts/notes/components/discussion_notes.vue @@ -1,15 +1,15 @@ <script> import { mapGetters, mapActions } from 'vuex'; -import { SYSTEM_NOTE } from '../constants'; import { __ } from '~/locale'; import PlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue'; import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue'; import SystemNote from '~/vue_shared/components/notes/system_note.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { SYSTEM_NOTE } from '../constants'; import NoteableNote from './noteable_note.vue'; import ToggleRepliesWidget from './toggle_replies_widget.vue'; import NoteEditedText from './note_edited_text.vue'; import DiscussionNotesRepliesWrapper from './discussion_notes_replies_wrapper.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { name: 'DiscussionNotes', diff --git a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue index 2ddca56ddd5..dfeda4aae7c 100644 --- a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue +++ b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue @@ -16,9 +16,14 @@ export default { }, render(h, { props, children }) { if (props.isDiffDiscussion) { - return h('li', { class: 'discussion-collapsible bordered-box clearfix' }, [ - h('ul', { class: 'notes' }, children), - ]); + return h( + 'li', + { + class: + 'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-overflow-hidden clearfix', + }, + [h('ul', { class: 'notes' }, children)], + ); } return children; diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index b85cfa83e09..bc8e1d3fec6 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -3,11 +3,12 @@ import { mapGetters } from 'vuex'; import { GlTooltipDirective, GlIcon, GlButton, GlDropdownItem } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status'; -import ReplyButton from './note_actions/reply_button.vue'; import eventHub from '~/sidebar/event_hub'; import Api from '~/api'; import { deprecatedCreateFlash as flash } from '~/flash'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { splitCamelCase } from '../../lib/utils/text_utility'; +import ReplyButton from './note_actions/reply_button.vue'; export default { name: 'NoteActions', @@ -193,7 +194,7 @@ export default { }, closeTooltip() { this.$nextTick(() => { - this.$root.$emit('bv::hide::tooltip'); + this.$root.$emit(BV_HIDE_TOOLTIP); }); }, handleAssigneeUpdate(assignees) { diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue index cf3e991986c..ff0bf5bd142 100644 --- a/app/assets/javascripts/notes/components/note_awards_list.vue +++ b/app/assets/javascripts/notes/components/note_awards_list.vue @@ -1,8 +1,8 @@ <script> import { mapActions, mapGetters } from 'vuex'; import AwardsList from '~/vue_shared/components/awards_list.vue'; -import { deprecatedCreateFlash as Flash } from '../../flash'; import { __ } from '~/locale'; +import { deprecatedCreateFlash as Flash } from '../../flash'; export default { components: { diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 8855ceac3d5..03a8a8f9376 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -3,12 +3,12 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; +import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; +import autosave from '../mixins/autosave'; import noteEditedText from './note_edited_text.vue'; import noteAwardsList from './note_awards_list.vue'; import noteAttachment from './note_attachment.vue'; import noteForm from './note_form.vue'; -import autosave from '../mixins/autosave'; -import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; export default { components: { @@ -156,6 +156,7 @@ export default { @handleFormUpdate="handleFormUpdate" @cancelForm="formCancelHandler" /> + <!-- eslint-disable vue/no-mutating-props --> <textarea v-if="canEdit" v-model="note.note" @@ -163,6 +164,7 @@ export default { class="hidden js-task-list-field" dir="auto" ></textarea> + <!-- eslint-enable vue/no-mutating-props --> <note-edited-text v-if="note.last_edited_at" :edited-at="note.last_edited_at" diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index 9acb837c27f..03ee5547fc8 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -1,14 +1,15 @@ <script> /* eslint-disable vue/no-v-html */ import { mapGetters, mapActions, mapState } from 'vuex'; +import { GlButton } from '@gitlab/ui'; import { mergeUrlParams } from '~/lib/utils/url_utility'; -import eventHub from '../event_hub'; import markdownField from '~/vue_shared/components/markdown/field.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import issuableStateMixin from '../mixins/issuable_state'; -import resolvable from '../mixins/resolvable'; import { __, sprintf } from '~/locale'; import { getDraft, updateDraft } from '~/lib/utils/autosave'; +import issuableStateMixin from '../mixins/issuable_state'; +import resolvable from '../mixins/resolvable'; +import eventHub from '../event_hub'; import CommentFieldLayout from './comment_field_layout.vue'; export default { @@ -16,6 +17,7 @@ export default { components: { markdownField, CommentFieldLayout, + GlButton, }, mixins: [glFeatureFlagsMixin(), issuableStateMixin, resolvable], props: { @@ -378,61 +380,70 @@ export default { </template> </label> </p> - <div> - <button + <div class="gl-display-sm-flex gl-flex-wrap"> + <gl-button :disabled="isDisabled" - type="button" - class="btn btn-success" + category="primary" + variant="success" + class="gl-mr-3" data-qa-selector="start_review_button" @click="handleAddToReview" > <template v-if="hasDrafts">{{ __('Add to review') }}</template> <template v-else>{{ __('Start a review') }}</template> - </button> - <button + </gl-button> + <gl-button :disabled="isDisabled" - type="button" - class="btn js-comment-button" + category="secondary" + variant="default" data-qa-selector="comment_now_button" + class="gl-mr-3 js-comment-button" @click="handleUpdate()" > {{ __('Add comment now') }} - </button> - <button - class="btn note-edit-cancel js-close-discussion-note-form" - type="button" + </gl-button> + <gl-button + class="note-edit-cancel js-close-discussion-note-form" + category="secondary" + variant="default" data-testid="cancelBatchCommentsEnabled" @click="cancelHandler(true)" > {{ __('Cancel') }} - </button> + </gl-button> </div> </template> <template v-else> - <button - :disabled="isDisabled" - type="button" - class="js-vue-issue-save btn btn-success js-comment-button" - data-qa-selector="reply_comment_button" - @click="handleUpdate()" - > - {{ saveButtonTitle }} - </button> - <button - v-if="discussion.resolvable" - class="btn btn-default gl-mr-3 js-comment-resolve-button" - @click.prevent="handleUpdate(true)" - > - {{ resolveButtonTitle }} - </button> - <button - class="btn btn-cancel note-edit-cancel js-close-discussion-note-form" - type="button" - data-testid="cancel" - @click="cancelHandler(true)" - > - {{ __('Cancel') }} - </button> + <div class="gl-display-sm-flex gl-flex-wrap"> + <gl-button + :disabled="isDisabled" + category="primary" + variant="success" + data-qa-selector="reply_comment_button" + class="gl-mr-3 js-vue-issue-save js-comment-button" + @click="handleUpdate()" + > + {{ saveButtonTitle }} + </gl-button> + <gl-button + v-if="discussion.resolvable" + category="secondary" + variant="default" + class="gl-mr-3 js-comment-resolve-button" + @click.prevent="handleUpdate(true)" + > + {{ resolveButtonTitle }} + </gl-button> + <gl-button + class="note-edit-cancel js-close-discussion-note-form" + category="secondary" + variant="default" + data-testid="cancel" + @click="cancelHandler(true)" + > + {{ __('Cancel') }} + </gl-button> + </div> </template> </div> </form> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 0a9a3da6069..c9722ebb8b6 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -8,13 +8,13 @@ import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item import DraftNote from '~/batch_comments/components/draft_note.vue'; import { deprecatedCreateFlash as Flash } from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; +import noteable from '../mixins/noteable'; +import resolvable from '../mixins/resolvable'; +import eventHub from '../event_hub'; import diffDiscussionHeader from './diff_discussion_header.vue'; import noteSignedOutWidget from './note_signed_out_widget.vue'; import noteForm from './note_form.vue'; import diffWithNote from './diff_with_note.vue'; -import noteable from '../mixins/noteable'; -import resolvable from '../mixins/resolvable'; -import eventHub from '../event_hub'; import DiscussionNotes from './discussion_notes.vue'; import DiscussionActions from './discussion_actions.vue'; @@ -265,16 +265,8 @@ export default { <div v-else-if="showReplies" :class="{ 'is-replying': isReplying }" - class="discussion-reply-holder clearfix" + class="discussion-reply-holder gl-border-t-0! clearfix" > - <user-avatar-link - v-if="!isReplying && userCanReply" - :link-href="currentUser.path" - :img-src="currentUser.avatar_url" - :img-alt="currentUser.name" - :img-size="40" - class="d-none d-sm-block" - /> <discussion-actions v-if="!isReplying && userCanReply" :discussion="discussion" @@ -285,27 +277,18 @@ export default { @showReplyForm="showReplyForm" @resolve="resolveHandler" /> - <div v-if="isReplying" class="avatar-note-form-holder"> - <user-avatar-link - v-if="currentUser" - :link-href="currentUser.path" - :img-src="currentUser.avatar_url" - :img-alt="currentUser.name" - :img-size="40" - class="d-none d-sm-block" - /> - <note-form - ref="noteForm" - :discussion="discussion" - :is-editing="false" - :line="diffLine" - save-button-title="Comment" - :autosave-key="autosaveKey" - @handleFormUpdateAddToReview="addReplyToReview" - @handleFormUpdate="saveReply" - @cancelForm="cancelReplyForm" - /> - </div> + <note-form + v-if="isReplying" + ref="noteForm" + :discussion="discussion" + :is-editing="false" + :line="diffLine" + save-button-title="Comment" + :autosave-key="autosaveKey" + @handleFormUpdateAddToReview="addReplyToReview" + @handleFormUpdate="saveReply" + @cancelForm="cancelReplyForm" + /> <note-signed-out-widget v-if="!isLoggedIn" /> </div> </template> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index eaa64cf7c01..a1738b993d7 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -6,16 +6,17 @@ import { GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { truncateSha } from '~/lib/utils/text_utility'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; +import httpStatusCodes from '~/lib/utils/http_status'; +import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants'; import { __, s__, sprintf } from '../../locale'; import { deprecatedCreateFlash as Flash } from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; -import noteHeader from './note_header.vue'; -import noteActions from './note_actions.vue'; -import NoteBody from './note_body.vue'; import eventHub from '../event_hub'; import noteable from '../mixins/noteable'; import resolvable from '../mixins/resolvable'; -import httpStatusCodes from '~/lib/utils/http_status'; +import noteHeader from './note_header.vue'; +import noteActions from './note_actions.vue'; +import NoteBody from './note_body.vue'; import { getStartLineNumber, getEndLineNumber, @@ -23,7 +24,6 @@ import { commentLineOptions, formatLineRange, } from './multiline_comment_utils'; -import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants'; export default { name: 'NoteableNote', @@ -289,6 +289,7 @@ export default { }; this.isRequesting = true; this.oldContent = this.note.note_html; + // eslint-disable-next-line vue/no-mutating-props this.note.note_html = escape(noteText); this.updateNote(data) @@ -321,6 +322,7 @@ export default { } this.$refs.noteBody.resetAutoSave(); if (this.oldContent) { + // eslint-disable-next-line vue/no-mutating-props this.note.note_html = this.oldContent; this.oldContent = null; } @@ -330,6 +332,7 @@ export default { 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 + // eslint-disable-next-line vue/no-mutating-props this.note.note = noteText; const { noteBody } = this.$refs; if (noteBody) { diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index e9e687a8743..c0468e5df0f 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -1,21 +1,22 @@ <script> import { mapGetters, mapActions } from 'vuex'; +import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; +import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; +import { __ } from '~/locale'; +import initUserPopovers from '~/user_popovers'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility'; import { deprecatedCreateFlash as Flash } from '../../flash'; import * as constants from '../constants'; import eventHub from '../event_hub'; -import noteableNote from './noteable_note.vue'; -import noteableDiscussion from './noteable_discussion.vue'; -import discussionFilterNote from './discussion_filter_note.vue'; import systemNote from '../../vue_shared/components/notes/system_note.vue'; -import commentForm from './comment_form.vue'; import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; -import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; -import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; -import { __ } from '~/locale'; -import initUserPopovers from '~/user_popovers'; +import noteableNote from './noteable_note.vue'; +import noteableDiscussion from './noteable_discussion.vue'; +import discussionFilterNote from './discussion_filter_note.vue'; +import commentForm from './comment_form.vue'; export default { name: 'NotesApp', @@ -30,6 +31,7 @@ export default { discussionFilterNote, OrderedLayout, }, + mixins: [glFeatureFlagsMixin()], props: { noteableData: { type: Object, @@ -57,7 +59,6 @@ export default { }, data() { return { - isFetching: false, currentFilter: null, }; }, @@ -68,6 +69,7 @@ export default { 'convertedDisscussionIds', 'getNotesDataByProp', 'isLoading', + 'isFetching', 'commentsDisabled', 'getNoteableData', 'userCanReply', @@ -103,6 +105,13 @@ export default { }, }, watch: { + async isFetching() { + if (!this.isFetching) { + await this.$nextTick(); + await this.startTaskList(); + await this.checkLocationHash(); + } + }, shouldShow() { if (!this.isNotesFetched) { this.fetchNotes(); @@ -153,6 +162,7 @@ export default { }, methods: { ...mapActions([ + 'setFetchingState', 'setLoadingState', 'fetchDiscussions', 'poll', @@ -183,7 +193,11 @@ export default { fetchNotes() { if (this.isFetching) return null; - this.isFetching = true; + this.setFetchingState(true); + + if (this.glFeatures.paginatedNotes) { + return this.initPolling(); + } return this.fetchDiscussions(this.getFetchDiscussionsConfig()) .then(this.initPolling) @@ -191,11 +205,8 @@ export default { this.setLoadingState(false); this.setNotesFetchedState(true); eventHub.$emit('fetchedNotesData'); - this.isFetching = false; + this.setFetchingState(false); }) - .then(this.$nextTick) - .then(this.startTaskList) - .then(this.checkLocationHash) .catch(() => { this.setLoadingState(false); this.setNotesFetchedState(true); diff --git a/app/assets/javascripts/notes/components/timeline_toggle.vue b/app/assets/javascripts/notes/components/timeline_toggle.vue index 8162878f80d..87d22e5b986 100644 --- a/app/assets/javascripts/notes/components/timeline_toggle.vue +++ b/app/assets/javascripts/notes/components/timeline_toggle.vue @@ -2,9 +2,9 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { mapActions, mapGetters } from 'vuex'; import { s__ } from '~/locale'; +import TrackEventDirective from '~/vue_shared/directives/track_event'; import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants'; import notesEventHub from '../event_hub'; -import TrackEventDirective from '~/vue_shared/directives/track_event'; import { trackToggleTimelineView } from '../utils'; export const timelineEnabledTooltip = s__('Timeline|Turn timeline view off'); diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index ab7fa793bdc..06de3104a47 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -39,13 +39,17 @@ export default { this.$emit('toggle'); }, }, + ICON_CLASS: 'gl-mr-3 gl-cursor-pointer', }; </script> <template> - <li :class="className" class="replies-toggle js-toggle-replies"> + <li + :class="className" + class="replies-toggle js-toggle-replies gl-display-flex! gl-align-items-center gl-flex-wrap" + > <template v-if="collapsed"> - <gl-icon name="chevron-right" @click.native="toggle" /> + <gl-icon :class="$options.ICON_CLASS" name="chevron-right" @click.native="toggle" /> <div> <user-avatar-link v-for="author in uniqueAuthors" @@ -59,7 +63,7 @@ export default { /> </div> <gl-button - class="js-replies-text" + class="js-replies-text gl-mr-2" category="tertiary" variant="link" data-qa-selector="expand_replies_button" @@ -68,18 +72,19 @@ export default { {{ replies.length }} {{ n__('reply', 'replies', replies.length) }} </gl-button> {{ __('Last reply by') }} - <a :href="lastReply.author.path" class="btn btn-link author-link"> + <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2"> {{ lastReply.author.name }} </a> <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" /> </template> - <span + <div v-else - class="collapse-replies-btn js-collapse-replies" + class="collapse-replies-btn js-collapse-replies gl-display-flex align-items-center" data-qa-selector="collapse_replies_button" @click="toggle" > - <gl-icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }} - </span> + <gl-icon :class="$options.ICON_CLASS" name="chevron-down" /> + <span class="gl-cursor-pointer">{{ s__('Notes|Collapse replies') }}</span> + </div> </li> </template> |