direct_conversation_status.vue (2691B)
1 <template>
2 <div
3 v-if="isStatus"
4 class="direct-conversation-status-wrapper"
5 :class="{ 'sequence-hovered': sequenceHovered }"
6 @mouseover="onHover(true)"
7 @mouseleave="onHover(false)"
8 >
9 <div
10 v-if="!noHeading && directConversationViewItem.isHead"
11 slot="header"
12 class="media-heading"
13 >
14 <div class="heading-name-row">
15 <div
16 class="name-and-account-name"
17 >
18 <router-link
19 v-if="!isCurrentUser"
20 class="account-name"
21 :to="userProfileLink"
22 >
23 {{ status.user.screen_name }}
24 </router-link>
25 </div>
26 </div>
27 </div>
28 <div
29 class="direct-conversation"
30 :class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]"
31 >
32 <div
33 v-if="!isCurrentUser"
34 class="avatar-wrapper"
35 >
36 <router-link
37 v-if="directConversationViewItem.isTail"
38 :to="userProfileLink"
39 >
40 <UserAvatar
41 :compact="true"
42 :better-shadow="betterShadow"
43 :user="status.user"
44 />
45 </router-link>
46 </div>
47 <Popover
48 trigger="click"
49 class="direct-conversation-inner"
50 placement="bottom"
51 >
52 <div slot="content">
53 <div class="dropdown-menu">
54 <span>
55 <button
56 class="dropdown-item delete-link"
57 @click="deleteStatus"
58 >
59 {{ $t("direct_conversations.delete") }}
60 </button>
61 <button
62 class="dropdown-item delete-link"
63 @click="viewInTimeline"
64 >
65 {{ $t("direct_conversations.standard_ui") }}
66 </button>
67 </span>
68 </div>
69 </div>
70 <div
71 slot="trigger"
72 class="media status"
73 :data-tags="tags"
74 @click="onStatusBodyClick"
75 >
76 <StatusContent
77 :status="status"
78 :full-content="true"
79 >
80 <span
81 slot="footer"
82 class="created-at"
83 >
84 <i
85 :class="visibilityIcon"
86 :title="statusVisibility"
87 />
88 {{ createdAt }}
89 </span>
90 </StatusContent>
91 </div>
92 </Popover>
93 </div>
94 </div>
95 <div
96 v-else
97 class="date-separator"
98 >
99 <DirectConversationDate :date="directConversationViewItem.date" />
100 </div>
101 </template>
102
103 <script src="./direct_conversation_status.js" ></script>
104 <style lang="scss">
105 @import './direct_conversation_status.scss';
106
107 </style>