direct_conversation_new.vue (1820B)
1 <template>
2 <div
3 id="nav"
4 class="panel-default panel direct-conversation-new"
5 >
6 <div
7 ref="header"
8 class="panel-heading"
9 >
10 <a
11 class="go-back-button"
12 style="cursor: pointer; margin-right: 0.7em"
13 @click="goBack"
14 >
15 <i class="button-icon icon-left-open" />
16 </a>
17 {{ $t('direct_conversations.new') }}
18 <button
19 class="btn search-button"
20 style="float: right"
21 :disabled="!nextAllowed"
22 @click="newDirectConversation"
23 >
24 {{ $t('direct_conversations.next') }}
25 <i
26 class="button-icon icon-right-open"
27 style="font-size: 0.8em;"
28 />
29 </button>
30 </div>
31 <div class="selected-user-list">
32 <div
33 v-for="user in selectedUsers"
34 :key="user.id"
35 class="selected-user notice-dismissible"
36 @click="removeUser(user.id)"
37 >
38 <a class="button-icon dismiss">
39 <i class="icon-cancel" />
40 </a>
41
42 {{ user.screen_name }}
43 </div>
44 </div>
45 <div class="input-wrap">
46 <div class="input-search">
47 <i class="button-icon icon-search" />
48 </div>
49 <input
50 ref="search"
51 v-model="query"
52 placeholder="Search people"
53 @input="onInput"
54 >
55 </div>
56 <div class="member-list">
57 <div
58 v-for="user in availableUsers"
59 :key="user.id"
60 class="member"
61 >
62 <div
63 class="user-card-wrap"
64 @click.capture.prevent="addUser(user)"
65 >
66 <BasicUserCard :user="user" />
67 </div>
68 </div>
69 </div>
70 </div>
71 </template>
72
73 <script src="./direct_conversation_new.js"></script>
74 <style lang="scss">
75 @import '../../_variables.scss';
76 @import './direct_conversation_new.scss';
77 </style>