diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
5 files changed, 99 insertions, 63 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index e7ac27c5e3e..bd5945a951b 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -172,9 +172,6 @@ export default { trackingLabel() { return slugifyWithUnderscore(`${this.commentButtonTitle} button`); }, - internalNotesEnabled() { - return Boolean(this.glFeatures.confidentialNotes); - }, disableSubmitButton() { return this.note.length === 0 || this.isSubmitting; }, @@ -414,7 +411,7 @@ export default { </template> <template v-else> <gl-form-checkbox - v-if="internalNotesEnabled && canSetInternalNote" + v-if="canSetInternalNote" v-model="noteIsInternal" class="gl-mb-2" data-testid="internal-note-checkbox" diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue index 83326279423..61af0b06535 100644 --- a/app/assets/javascripts/notes/components/discussion_filter_note.vue +++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue @@ -39,8 +39,8 @@ export default { </template> </gl-sprintf> </div> - <div class="discussion-filter-actions mt-2"> - <gl-button variant="default" @click="selectFilter(0)"> + <div class="discussion-filter-actions gl-mt-3 gl-display-flex"> + <gl-button variant="default" class="gl-mr-3" @click="selectFilter(0)"> {{ __('Show all activity') }} </gl-button> <gl-button variant="default" @click="selectFilter(1)"> diff --git a/app/assets/javascripts/notes/components/discussion_navigator.vue b/app/assets/javascripts/notes/components/discussion_navigator.vue index 7e8bb75902b..c1e39f31bbb 100644 --- a/app/assets/javascripts/notes/components/discussion_navigator.vue +++ b/app/assets/javascripts/notes/components/discussion_navigator.vue @@ -25,7 +25,7 @@ export default { eventHub.$off('jumpToFirstUnresolvedDiscussion', this.jumpToFirstUnresolvedDiscussion); }, render() { - return this.$slots.default; + return this.$scopedSlots.default?.(); }, }; </script> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index af0c1e9619e..095ab5ddb0f 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -1,5 +1,5 @@ <script> -import { GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import { GlSprintf, GlSafeHtmlDirective as SafeHtml, GlAvatarLink, GlAvatar } from '@gitlab/ui'; import $ from 'jquery'; import { escape, isEmpty } from 'lodash'; import { mapGetters, mapActions } from 'vuex'; @@ -11,7 +11,6 @@ import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending'; import { truncateSha } from '~/lib/utils/text_utility'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import { __, s__, sprintf } from '~/locale'; -import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import eventHub from '../event_hub'; import noteable from '../mixins/noteable'; import resolvable from '../mixins/resolvable'; @@ -31,11 +30,12 @@ export default { name: 'NoteableNote', components: { GlSprintf, - userAvatarLink, noteHeader, noteActions, NoteBody, TimelineEntryItem, + GlAvatarLink, + GlAvatar, }, directives: { SafeHtml, @@ -196,13 +196,11 @@ export default { return fileResolvedFromAvailableSource || null; }, - avatarSize() { - // Use a different size if shown on a Merge Request Diff - if (this.line && !this.isOverviewTab) { - return 24; - } - - return 40; + isMRDiffView() { + return this.line && !this.isOverviewTab; + }, + authorAvatarAdaptiveSize() { + return { default: 24, md: 32 }; }, }, created() { @@ -261,7 +259,7 @@ export default { }); const confirmed = await confirmAction(msg, { primaryBtnVariant: 'danger', - primaryBtnText: this.note.confidential ? __('Delete Internal Note') : __('Delete Comment'), + primaryBtnText: this.note.confidential ? __('Delete internal note') : __('Delete comment'), }); if (confirmed) { @@ -428,19 +426,33 @@ export default { </template> </gl-sprintf> </div> - <div class="timeline-icon"> - <user-avatar-link - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="avatarSize" - lazy - > - <template #avatar-badge> - <slot name="avatar-badge"></slot> - </template> - </user-avatar-link> + + <div v-if="isMRDiffView" class="gl-float-left gl-mt-n1 gl-mr-3"> + <gl-avatar-link :href="author.path"> + <gl-avatar + :src="author.avatar_url" + :entity-name="author.username" + :alt="author.name" + :size="24" + /> + + <slot name="avatar-badge"></slot> + </gl-avatar-link> + </div> + + <div v-else class="gl-float-left gl-pl-3 gl-mr-3 gl-md-pl-2 gl-md-pr-2"> + <gl-avatar-link :href="author.path"> + <gl-avatar + :src="author.avatar_url" + :entity-name="author.username" + :alt="author.name" + :size="authorAvatarAdaptiveSize" + /> + + <slot name="avatar-badge"></slot> + </gl-avatar-link> </div> + <div class="timeline-content"> <div class="note-header"> <note-header diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index 8cd4477a3bb..2bd3488ae1b 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -1,13 +1,20 @@ <script> -import { GlButton, GlIcon } from '@gitlab/ui'; +import { GlButton, GlLink, GlSprintf } from '@gitlab/ui'; import { uniqBy } from 'lodash'; +import { s__ } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; export default { + i18n: { + collapseReplies: s__('Notes|Collapse replies'), + expandReplies: s__('Notes|Expand replies'), + lastReplyBy: s__('Notes|Last reply by %{name}'), + }, components: { GlButton, - GlIcon, + GlLink, + GlSprintf, UserAvatarLink, TimeAgoTooltip, }, @@ -28,63 +35,83 @@ export default { uniqueAuthors() { const authors = this.replies.map((reply) => reply.author || {}); - return uniqBy(authors, (author) => author.username); + return uniqBy(authors, 'username'); + }, + liClasses() { + return this.collapsed + ? 'gl-text-gray-500 gl-rounded-bottom-left-base gl-rounded-bottom-right-base' + : 'gl-border-b'; }, - className() { - return this.collapsed ? 'collapsed' : 'expanded'; + buttonIcon() { + return this.collapsed ? 'chevron-right' : 'chevron-down'; + }, + buttonLabel() { + return this.collapsed ? this.$options.i18n.expandReplies : this.$options.i18n.collapseReplies; }, }, methods: { toggle() { + this.$refs.toggle.$el.focus(); this.$emit('toggle'); }, }, - ICON_CLASS: 'gl-mr-3 gl-cursor-pointer', }; </script> <template> <li - :class="className" - class="replies-toggle js-toggle-replies gl-display-flex! gl-align-items-center gl-flex-wrap" + :class="liClasses" + class="gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border-t" > + <gl-button + ref="toggle" + class="gl-my-2 gl-mr-3 gl-p-0!" + category="tertiary" + :icon="buttonIcon" + :aria-label="buttonLabel" + @click="toggle" + /> <template v-if="collapsed"> - <gl-icon :class="$options.ICON_CLASS" name="chevron-right" @click.native="toggle" /> - <div> - <user-avatar-link - v-for="author in uniqueAuthors" - :key="author.username" - :link-href="author.path" - :img-alt="author.name" - :img-src="author.avatar_url" - :img-size="24" - :tooltip-text="author.name" - tooltip-placement="bottom" - /> - </div> + <user-avatar-link + v-for="author in uniqueAuthors" + :key="author.username" + class="gl-mr-3" + :link-href="author.path" + :img-alt="author.name" + img-css-classes="gl-mr-0!" + :img-src="author.avatar_url" + :img-size="24" + :tooltip-text="author.name" + tooltip-placement="bottom" + /> <gl-button - class="js-replies-text gl-mr-2" - category="tertiary" + class="gl-mr-2" variant="link" data-qa-selector="expand_replies_button" @click="toggle" > - {{ replies.length }} {{ n__('reply', 'replies', replies.length) }} + {{ n__('%d reply', '%d replies', replies.length) }} </gl-button> - {{ __('Last reply by') }} - <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button"> - {{ lastReply.author.name }} - </a> + <gl-sprintf :message="$options.i18n.lastReplyBy"> + <template #name> + <gl-link + :href="lastReply.author.path" + class="gl-text-body! gl-text-decoration-none! gl-mx-2" + > + {{ lastReply.author.name }} + </gl-link> + </template> + </gl-sprintf> <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" /> </template> - <div + <gl-button v-else - class="collapse-replies-btn js-collapse-replies gl-display-flex align-items-center" + class="gl-text-body! gl-text-decoration-none!" + variant="link" data-qa-selector="collapse_replies_button" @click="toggle" > - <gl-icon :class="$options.ICON_CLASS" name="chevron-down" /> - <span class="gl-cursor-pointer">{{ s__('Notes|Collapse replies') }}</span> - </div> + {{ $options.i18n.collapseReplies }} + </gl-button> </li> </template> |