debian-mirror-gitlab/app/assets/javascripts/notes/components/note_header.vue

208 lines
5.8 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2020-11-24 15:15:51 +05:30
/* eslint-disable vue/no-v-html */
2018-05-09 12:01:36 +05:30
import { mapActions } from 'vuex';
2020-11-24 15:15:51 +05:30
import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
2020-04-22 19:07:51 +05:30
import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
components: {
timeAgoTooltip,
2020-05-24 23:13:21 +05:30
GitlabTeamMemberBadge: () =>
import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
GlIcon,
2020-11-24 15:15:51 +05:30
GlLoadingIcon,
2020-05-24 23:13:21 +05:30
},
directives: {
GlTooltip: GlTooltipDirective,
2018-05-09 12:01:36 +05:30
},
props: {
author: {
type: Object,
2018-11-20 20:47:30 +05:30
required: false,
default: () => ({}),
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
createdAt: {
type: String,
2018-12-05 23:21:45 +05:30
required: false,
default: null,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
actionText: {
type: String,
required: false,
default: '',
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
noteId: {
2018-12-05 23:21:45 +05:30
type: [String, Number],
required: false,
default: null,
2018-05-09 12:01:36 +05:30
},
includeToggle: {
type: Boolean,
required: false,
default: false,
},
expanded: {
type: Boolean,
required: false,
default: true,
},
2020-04-22 19:07:51 +05:30
showSpinner: {
type: Boolean,
required: false,
default: true,
},
2020-05-24 23:13:21 +05:30
isConfidential: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
isUsernameLinkHovered: false,
emojiTitle: '',
authorStatusHasTooltip: false,
};
2018-05-09 12:01:36 +05:30
},
computed: {
toggleChevronClass() {
return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down';
},
noteTimestampLink() {
2020-04-22 19:07:51 +05:30
return this.noteId ? `#note_${this.noteId}` : undefined;
2018-05-09 12:01:36 +05:30
},
2018-12-13 13:39:08 +05:30
hasAuthor() {
return this.author && Object.keys(this.author).length;
},
2020-05-24 23:13:21 +05:30
authorLinkClasses() {
return {
hover: this.isUsernameLinkHovered,
'text-underline': this.isUsernameLinkHovered,
'author-name-link': true,
'js-user-link': true,
};
},
authorStatus() {
return this.author.status_tooltip_html;
},
emojiElement() {
return this.$refs?.authorStatus?.querySelector('gl-emoji');
2020-04-22 19:07:51 +05:30
},
2018-05-09 12:01:36 +05:30
},
2020-05-24 23:13:21 +05:30
mounted() {
this.emojiTitle = this.emojiElement ? this.emojiElement.getAttribute('title') : '';
const authorStatusTitle = this.$refs?.authorStatus
?.querySelector('.user-status-emoji')
?.getAttribute('title');
this.authorStatusHasTooltip = authorStatusTitle && authorStatusTitle !== '';
},
2018-05-09 12:01:36 +05:30
methods: {
...mapActions(['setTargetNoteHash']),
handleToggle() {
this.$emit('toggleHandler');
},
updateTargetNoteHash() {
2020-04-22 19:07:51 +05:30
if (this.$store) {
this.setTargetNoteHash(this.noteTimestampLink);
}
2018-05-09 12:01:36 +05:30
},
2020-05-24 23:13:21 +05:30
removeEmojiTitle() {
this.emojiElement.removeAttribute('title');
},
addEmojiTitle() {
this.emojiElement.setAttribute('title', this.emojiTitle);
},
handleUsernameMouseEnter() {
this.$refs.authorNameLink.dispatchEvent(new Event('mouseenter'));
this.isUsernameLinkHovered = true;
},
handleUsernameMouseLeave() {
this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave'));
this.isUsernameLinkHovered = false;
},
2018-05-09 12:01:36 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<div class="note-header-info">
2020-03-13 15:44:24 +05:30
<div v-if="includeToggle" ref="discussionActions" class="discussion-actions">
2018-11-08 19:23:39 +05:30
<button
class="note-action-button discussion-toggle-button js-vue-toggle-button"
type="button"
2019-02-15 15:39:39 +05:30
@click="handleToggle"
>
2020-03-13 15:44:24 +05:30
<i ref="chevronIcon" :class="toggleChevronClass" class="fa" aria-hidden="true"></i>
2019-09-30 21:07:59 +05:30
{{ __('Toggle thread') }}
2018-11-08 19:23:39 +05:30
</button>
</div>
2020-04-22 19:07:51 +05:30
<template v-if="hasAuthor">
<a
2020-05-24 23:13:21 +05:30
ref="authorNameLink"
2020-04-22 19:07:51 +05:30
:href="author.path"
2020-05-24 23:13:21 +05:30
:class="authorLinkClasses"
2020-04-22 19:07:51 +05:30
:data-user-id="author.id"
:data-username="author.username"
>
<slot name="note-header-info"></slot>
<span class="note-header-author-name bold">{{ author.name }}</span>
</a>
2020-05-24 23:13:21 +05:30
<span
v-if="authorStatus"
ref="authorStatus"
v-on="
authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
"
v-html="authorStatus"
></span>
<span class="text-nowrap author-username">
<a
ref="authorUsernameLink"
class="author-username-link"
:href="author.path"
@mouseenter="handleUsernameMouseEnter"
@mouseleave="handleUsernameMouseLeave"
><span class="note-headline-light">@{{ author.username }}</span>
</a>
<gitlab-team-member-badge v-if="author && author.is_gitlab_employee" />
</span>
2020-04-22 19:07:51 +05:30
</template>
2019-07-07 11:18:12 +05:30
<span v-else>{{ __('A deleted user') }}</span>
<span class="note-headline-light note-headline-meta">
<span class="system-note-message"> <slot></slot> </span>
<template v-if="createdAt">
2020-03-13 15:44:24 +05:30
<span ref="actionText" class="system-note-separator">
2019-07-07 11:18:12 +05:30
<template v-if="actionText">{{ actionText }}</template>
</span>
<a
2020-04-22 19:07:51 +05:30
v-if="noteTimestampLink"
ref="noteTimestampLink"
2019-07-07 11:18:12 +05:30
:href="noteTimestampLink"
class="note-timestamp system-note-separator"
@click="updateTargetNoteHash"
2018-03-17 18:26:18 +05:30
>
2019-07-07 11:18:12 +05:30
<time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
</a>
2020-04-22 19:07:51 +05:30
<time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
2019-07-07 11:18:12 +05:30
</template>
2020-05-24 23:13:21 +05:30
<gl-icon
v-if="isConfidential"
v-gl-tooltip:tooltipcontainer.bottom
data-testid="confidentialIndicator"
name="eye-slash"
:size="14"
:title="s__('Notes|Private comments are accessible by internal staff only')"
2020-10-24 23:57:45 +05:30
class="gl-ml-1 gl-text-gray-700 align-middle"
2020-05-24 23:13:21 +05:30
/>
2019-12-26 22:10:19 +05:30
<slot name="extra-controls"></slot>
2020-11-24 15:15:51 +05:30
<gl-loading-icon
2020-04-22 19:07:51 +05:30
v-if="showSpinner"
ref="spinner"
2020-11-24 15:15:51 +05:30
class="editing-spinner"
:label="__('Comment is being updated')"
/>
2018-03-17 18:26:18 +05:30
</span>
</div>
</template>