90 lines
2.9 KiB
Handlebars
90 lines
2.9 KiB
Handlebars
{{#if this.chatProgressBarContainer}}
|
|
{{#in-element this.chatProgressBarContainer}}
|
|
<DProgressBar @key="dm-recipients-loader" @isLoading={{this.isFiltering}} />
|
|
{{/in-element}}
|
|
{{/if}}
|
|
|
|
{{#if (and this.channel.isDraft (not this.isLoading))}}
|
|
<div class="direct-message-creator">
|
|
<div
|
|
class="filter-area {{if this.isFilterFocused 'is-focused'}}"
|
|
role="button"
|
|
{{on "click" this.focusFilter}}
|
|
>
|
|
|
|
<span class="prefix">
|
|
{{i18n "chat.direct_message_creator.prefix"}}
|
|
</span>
|
|
|
|
<div class="recipients">
|
|
{{#each this.selectedUsers as |selectedUser|}}
|
|
<DButton
|
|
@class={{concat
|
|
"selected-user"
|
|
(if
|
|
(eq this.highlightedSelectedUser selectedUser) " is-highlighted"
|
|
)
|
|
}}
|
|
@action={{action "deselectUser" selectedUser}}
|
|
@translatedTitle={{i18n
|
|
"chat.direct_message_creator.selected_user_title"
|
|
username=selectedUser.username
|
|
}}
|
|
>
|
|
<ChatUserAvatar @user={{selectedUser}} />
|
|
<span class="username">{{selectedUser.username}}</span>
|
|
{{d-icon "times"}}
|
|
</DButton>
|
|
{{/each}}
|
|
|
|
<Input
|
|
class="filter-usernames"
|
|
@value={{this.term}}
|
|
autofocus="autofocus"
|
|
{{on "input" (action "onFilterInput" value="target.value")}}
|
|
{{on "focusin" (action (mut this.isFilterFocused) true)}}
|
|
{{on "focusout" (action "onFilterInputFocusOut")}}
|
|
{{on "keyup" (action "handleFilterKeyUp")}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if this.shouldRenderResults}}
|
|
{{#if this.users}}
|
|
<div class="results-container">
|
|
<ul class="results">
|
|
{{#each this.users as |user|}}
|
|
<li
|
|
class="user {{if (eq this.focusedUser user) 'is-focused'}}"
|
|
data-username={{user.username}}
|
|
role="button"
|
|
tabindex="-1"
|
|
{{on "click" (action "selectUser" user)}}
|
|
{{on "mouseenter" (action (mut this.focusedUser) user)}}
|
|
{{on "focus" (action (mut this.focusedUser) user)}}
|
|
{{on "keyup" (action "handleUserKeyUp" user)}}
|
|
>
|
|
<ChatUserAvatar @user={{user}} @avatarSize="medium" />
|
|
<UserInfo
|
|
@user={{user}}
|
|
@includeLink={{false}}
|
|
@includeAvatar={{false}}
|
|
@showStatus={{true}}
|
|
@showStatusDescription={{true}}
|
|
/>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
{{else}}
|
|
{{#if this.term.length}}
|
|
<div class="no-results-container">
|
|
<p class="no-results">
|
|
{{i18n "chat.direct_message_creator.no_results"}}
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
{{/if}} |