direct_conversation_view.vue (3377B)
1 <template>
2 <div class="direct-conversation-view">
3 <div class="direct-conversation-view-inner">
4 <div
5 id="nav"
6 ref="inner"
7 class="panel-default panel direct-conversation-view-body"
8 >
9 <div
10 ref="header"
11 class="panel-heading direct-conversation-view-heading mobile-hidden"
12 >
13 <a
14 class="go-back-button"
15 @click="goBack"
16 >
17 <i class="button-icon icon-left-open" />
18 </a>
19 <div class="title text-center">
20 <DirectConversationTitle
21 :users="chatParticipants"
22 :fallback-user="currentUser"
23 with-links="true"
24 />
25 </div>
26 <router-link :to="{ name: 'direct-conversation-info', params: { username: currentUser.screen_name, id: conversationId } }">
27 <DirectConversationAvatar
28 v-if="chatParticipants.length > 0"
29 :users="chatParticipants"
30 width="35px"
31 height="35px"
32 />
33 </router-link>
34 </div>
35 <DirectConversationInfoPage
36 v-if="isInfo"
37 :chat-participants="chatParticipants"
38 />
39 <template v-else>
40 <div
41 ref="scrollable"
42 class="scrollable"
43 @scroll="handleScroll"
44 >
45 <DirectConversationStatus
46 v-for="statusItem in formattedStatuses"
47 :key="statusItem.id"
48 :direct-conversation-view-item="statusItem"
49 :no-heading="chatParticipants.length <= 1"
50 :edited="editedStatusId === statusItem.id"
51 :sequence-hovered="statusItem.sequenceId === hoveredSequenceId"
52 @toggleActions="onToggleActions"
53 @hover="onStatusHover"
54 />
55 </div>
56 <div
57 ref="footer"
58 class="panel-body footer"
59 >
60 <div
61 class="jump-to-bottom-button"
62 :class="{ 'visible': !loadingStatuses && jumpToBottomButtonVisible }"
63 @click="scrollDown({ behavior: 'smooth' })"
64 >
65 <i class="icon-down-open">
66 <div
67 v-if="newMessagesCount"
68 class="new-messages-alert-dot"
69 >
70 {{ newMessagesCount }}
71 </div>
72 </i>
73 </div>
74 <PostStatusForm
75 :disabled="loadingConversation"
76 :disable-subject="true"
77 :disable-scope-selector="true"
78 :custom-notice="formScopeNotice"
79 :disable-notice="!formScopeNotice"
80 :copy-message-scope="'direct'"
81 :direct-conversation-recipients="chatParticipants"
82 :reply-to-direct-conversation-id="conversationId"
83 :placeholder="formPlaceholder"
84 max-height="160"
85 @resize="handleResize"
86 @posted="onPosted"
87 @scopeNoticeDismissed="onScopeNoticeDismissed"
88 @filesDropped="onFilesDropped"
89 />
90 </div>
91 </template>
92 </div>
93 </div>
94 </div>
95 </template>
96
97 <script src="./direct_conversation_view.js"></script>
98 <style lang="scss">
99 @import '../../_variables.scss';
100 @import './direct_conversation_view.scss';
101 </style>