direct_conversation_title.vue (828B)
1 <template>
2 <!-- eslint-disable vue/no-v-html -->
3 <div
4 class="direct-conversation-title"
5 :title="title"
6 >
7 <span
8 v-for="(user, index) in otherUsersTruncated"
9 :key="user.id"
10 class="username"
11 v-html="user.name_html + (index + 1 < otherUsersTruncated.length ? ', ' : '')"
12 />
13 </div>
14 <!-- eslint-enable vue/no-v-html -->
15 </template>
16
17 <script src="./direct_conversation_title.js"></script>
18
19 <style lang="scss">
20 @import '../../_variables.scss';
21
22 .direct-conversation-title {
23 overflow: hidden;
24 text-overflow: ellipsis;
25
26 .username {
27 max-width: 100%;
28 text-overflow: ellipsis;
29 white-space: nowrap;
30 display: inline;
31 word-wrap: break-word;
32
33 img {
34 width: 14px;
35 height: 14px;
36 vertical-align: middle;
37 object-fit: contain
38 }
39 }
40 }
41 </style>