direct_conversation_timeline_item.vue (2548B)
1 <template>
2 <div
3 v-if="!deleted"
4 class="direct-conversation-timeline-item"
5 @click.capture.prevent="openConversation"
6 >
7 <div class="direct-conversation-timeline-item-left">
8 <DirectConversationAvatar
9 :users="otherParticipants"
10 :fallback-user="status.user"
11 height="48px"
12 width="48px"
13 />
14 </div>
15 <div class="direct-conversation-timeline-item-center">
16 <div class="heading">
17 <span
18 v-if="conversation_recipients"
19 class="name-and-account-name"
20 >
21 <DirectConversationTitle
22 :users="conversation_recipients"
23 :fallback-user="currentUser"
24 :with-links="false"
25 />
26 </span>
27 <span class="heading-right">
28 <span
29 v-if="otherParticipants.length > 1"
30 class="member-count"
31 >{{ $tc('direct_conversations.member', otherParticipants.length, { count: otherParticipants.length }) }}</span>
32 <Timeago
33 :time="status.created_at"
34 :auto-update="60"
35 />
36 </span>
37 </div>
38 <!-- eslint-disable vue/no-v-html -->
39 <div class="direct-conversation-preview">
40 <template v-if="status.user.id === currentUser.id">
41 <span style="margin-right: 0.2em">
42 {{ $t('direct_conversations.you') + ':' }}
43 </span>
44 </template>
45 <template v-else-if="author">
46 <h4
47 v-if="status.user.name_html"
48 class="user-name"
49 v-html="status.user.name_html"
50 />
51 <h4
52 v-else
53 class="user-name"
54 >
55 {{ status.user.name }}
56 </h4>
57 <span
58 class="account-name"
59 >
60 {{ status.user.screen_name + ':' }}
61 </span>
62 </template>
63 <span
64 v-if="attachmentInfo"
65 class="content faint-link"
66 >{{ attachmentInfo }}</span>
67 <span
68 v-else
69 class="content"
70 v-html="contentHtml"
71 />
72 <div
73 class="unread-indicator-wrapper"
74 >
75 <div
76 class="unread-indicator"
77 :style="{ 'opacity': unread ? '0.7' : '0' }"
78 />
79 </div>
80 </div>
81 <!-- eslint-enable vue/no-v-html -->
82 </div>
83 </div>
84 </template>
85
86 <script src="./direct_conversation_timeline_item.js"></script>
87
88 <style lang="scss">
89 @import '../../_variables.scss';
90 @import './direct_conversation_timeline_item.scss';
91 </style>