2017-06-13 17:01:59 +00:00
|
|
|
<script>
|
2018-03-16 20:16:21 +00:00
|
|
|
import { mapActions } from 'vuex';
|
|
|
|
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
|
2017-06-13 17:01:59 +00:00
|
|
|
|
2018-03-16 20:16:21 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
timeAgoTooltip,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
author: {
|
|
|
|
type: Object,
|
2018-09-07 13:39:20 +00:00
|
|
|
required: false,
|
|
|
|
default: () => ({}),
|
2018-01-05 00:18:35 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
createdAt: {
|
|
|
|
type: String,
|
2018-10-06 17:16:40 +00:00
|
|
|
required: false,
|
|
|
|
default: null,
|
2017-06-13 17:01:59 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
actionText: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
2017-06-13 17:01:59 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
noteId: {
|
2018-10-06 17:16:40 +00:00
|
|
|
type: [String, Number],
|
|
|
|
required: false,
|
|
|
|
default: null,
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
includeToggle: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
expanded: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
toggleChevronClass() {
|
|
|
|
return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down';
|
|
|
|
},
|
|
|
|
noteTimestampLink() {
|
|
|
|
return `#note_${this.noteId}`;
|
|
|
|
},
|
2018-11-08 07:58:45 +00:00
|
|
|
hasAuthor() {
|
|
|
|
return this.author && Object.keys(this.author).length;
|
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['setTargetNoteHash']),
|
|
|
|
handleToggle() {
|
|
|
|
this.$emit('toggleHandler');
|
|
|
|
},
|
|
|
|
updateTargetNoteHash() {
|
|
|
|
this.setTargetNoteHash(this.noteTimestampLink);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2017-06-13 17:01:59 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="note-header-info">
|
2018-11-16 20:07:38 +00:00
|
|
|
<div v-if="includeToggle" class="discussion-actions">
|
2018-04-19 10:57:12 +00:00
|
|
|
<button
|
|
|
|
class="note-action-button discussion-toggle-button js-vue-toggle-button"
|
2018-06-11 09:49:47 +00:00
|
|
|
type="button"
|
2018-11-16 20:07:38 +00:00
|
|
|
@click="handleToggle"
|
|
|
|
>
|
2019-03-01 09:34:16 +00:00
|
|
|
<i :class="toggleChevronClass" class="fa" aria-hidden="true"></i>
|
2019-06-13 12:25:11 +00:00
|
|
|
{{ __('Toggle thread') }}
|
2018-04-19 10:57:12 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2018-12-08 03:12:23 +00:00
|
|
|
<a
|
|
|
|
v-if="hasAuthor"
|
|
|
|
v-once
|
|
|
|
:href="author.path"
|
|
|
|
class="js-user-link"
|
|
|
|
:data-user-id="author.id"
|
|
|
|
:data-username="author.username"
|
|
|
|
>
|
2019-03-01 09:34:16 +00:00
|
|
|
<slot name="note-header-info"></slot>
|
2019-06-06 15:51:04 +00:00
|
|
|
<span class="note-header-author-name bold">{{ author.name }}</span>
|
2018-11-16 20:07:38 +00:00
|
|
|
<span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
|
2019-03-01 09:34:16 +00:00
|
|
|
<span class="note-headline-light">@{{ author.username }}</span>
|
2017-06-13 17:01:59 +00:00
|
|
|
</a>
|
2019-03-01 09:34:16 +00:00
|
|
|
<span v-else>{{ __('A deleted user') }}</span>
|
2019-03-11 13:19:52 +00:00
|
|
|
<span class="note-headline-light note-headline-meta">
|
|
|
|
<span class="system-note-message"> <slot></slot> </span>
|
|
|
|
<template v-if="createdAt">
|
|
|
|
<span class="system-note-separator">
|
|
|
|
<template v-if="actionText">{{ actionText }}</template>
|
|
|
|
</span>
|
|
|
|
<a
|
|
|
|
:href="noteTimestampLink"
|
|
|
|
class="note-timestamp system-note-separator"
|
|
|
|
@click="updateTargetNoteHash"
|
|
|
|
>
|
|
|
|
<time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
|
|
|
|
</a>
|
|
|
|
</template>
|
2019-11-15 12:06:12 +00:00
|
|
|
<slot name="extra-controls"></slot>
|
2019-03-11 13:19:52 +00:00
|
|
|
<i
|
|
|
|
class="fa fa-spinner fa-spin editing-spinner"
|
2019-07-04 10:20:38 +00:00
|
|
|
:aria-label="__('Comment is being updated')"
|
2019-03-11 13:19:52 +00:00
|
|
|
aria-hidden="true"
|
|
|
|
></i>
|
2017-06-13 17:01:59 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</template>
|