68 lines
2.6 KiB
Handlebars
68 lines
2.6 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}} />
|
|
</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}}
|