direct_conversations_timeline.vue (1586B)
1 <template>
2 <div v-if="isNew">
3 <DirectConversationNew @cancel="cancelNewDirectConversation" />
4 </div>
5 <div
6 v-else
7 class="panel panel-default"
8 >
9 <div class="panel-heading truncated-text-wrapper">
10 <span class="title truncated-text">
11 {{ $t("direct_conversations.direct_conversations") }}
12 </span>
13 <button
14 v-if="currentUser.unread_direct_conversation"
15 @click="readAll"
16 >
17 {{ $t("direct_conversations.read_all") }}
18 </button>
19 <span style="width: 0.75rem;">{{ ' ' }}</span>
20 <button @click="newDirectConversation">
21 {{ $t("direct_conversations.new") }}
22 </button>
23 </div>
24 <div class="panel-body">
25 <div class="timeline">
26 <DirectConversationList>
27 <template
28 slot="item"
29 slot-scope="{item}"
30 >
31 <DirectConversationTimelineItem
32 :key="item.id"
33 :compact="false"
34 :conversation_recipients="item.recipients"
35 :conversation_id="item.id"
36 :statusoid="item.last_status"
37 :unread="item.unread"
38 />
39 </template>
40 </DirectConversationList>
41 </div>
42 </div>
43 </div>
44 </template>
45
46 <script src="./direct_conversations_timeline.js"></script>
47
48 <style lang="scss">
49 @import '../../_variables.scss';
50
51 .truncated-text-wrapper {
52 overflow-x: hidden;
53 display: flex;
54
55 .truncated-text {
56 flex: 1;
57 overflow-x: hidden;
58 word-wrap: break-word;
59 white-space: nowrap;
60 text-overflow: ellipsis;
61 }
62 }
63
64 </style>