88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<script>
|
|
/**
|
|
* Common component to render a placeholder note and user information.
|
|
*
|
|
* This component needs to be used with a vuex store.
|
|
* That vuex store needs to have a `getUserData` getter that contains
|
|
* {
|
|
* path: String,
|
|
* avatar_url: String,
|
|
* name: String,
|
|
* username: String,
|
|
* }
|
|
*
|
|
* @example
|
|
* <placeholder-note
|
|
* :note="{body: 'This is a note'}"
|
|
* />
|
|
*/
|
|
import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
|
|
import { mapGetters } from 'vuex';
|
|
import { renderMarkdown } from '~/notes/utils';
|
|
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
|
|
import userAvatarLink from '../user_avatar/user_avatar_link.vue';
|
|
|
|
export default {
|
|
name: 'PlaceholderNote',
|
|
directives: { SafeHtml },
|
|
components: {
|
|
userAvatarLink,
|
|
TimelineEntryItem,
|
|
},
|
|
props: {
|
|
note: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
line: {
|
|
type: Object,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
isOverviewTab: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(['getUserData']),
|
|
renderedNote() {
|
|
return renderMarkdown(this.note.body);
|
|
},
|
|
avatarSize() {
|
|
if (this.line && !this.isOverviewTab) {
|
|
return 24;
|
|
}
|
|
|
|
return 40;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<timeline-entry-item class="note note-wrapper being-posted fade-in-half">
|
|
<div class="timeline-icon">
|
|
<user-avatar-link
|
|
:link-href="getUserData.path"
|
|
:img-src="getUserData.avatar_url"
|
|
:img-size="avatarSize"
|
|
/>
|
|
</div>
|
|
<div ref="note" :class="{ discussion: !note.individual_note }" class="timeline-content">
|
|
<div class="note-header">
|
|
<div class="note-header-info">
|
|
<a :href="getUserData.path">
|
|
<span class="d-none d-sm-inline-block bold">{{ getUserData.name }}</span>
|
|
<span class="note-headline-light">@{{ getUserData.username }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="note-body">
|
|
<div v-safe-html="renderedNote" class="note-text md"></div>
|
|
</div>
|
|
</div>
|
|
</timeline-entry-item>
|
|
</template>
|