Files
discourse/plugins/chat/assets/javascripts/discourse/templates/components/chat-browse-view.hbs

79 lines
2.4 KiB
Handlebars

{{#if this.chatProgressBarContainer}}
{{#in-element this.chatProgressBarContainer}}
<DProgressBar @key="browse-list" @isLoading={{this.isLoading}} />
{{/in-element}}
{{/if}}
<div class="chat-browse-view">
<div class="chat-browse-view__header">
{{#if this.site.mobileView}}
<DButton
@action={{action "returnToChannelsList"}}
@icon="chevron-left"
@class="chat-browse-view__back"
@title="chat.browse.back"
/>
{{/if}}
<h1 class="chat-browse-view__title">{{i18n "chat.browse.title"}}</h1>
{{#if this.currentUser.staff}}
<DButton
@action={{action "createChannel"}}
@icon="plus"
@class="new-channel-btn"
@label={{if this.site.desktopView "chat.create_channel.title"}}
/>
{{/if}}
</div>
<div class="chat-browse-view__actions">
<nav>
<ul class="nav-pills chat-browse-view__filters">
{{#each this.tabs as |tab|}}
<li class={{concat "chat-browse-view__filter -" tab}}>
<LinkTo
@route={{concat "chat.browse." tab}}
class={{concat "chat-browse-view__filter-link -" tab}}
>
{{i18n (concat "chat.browse.filter_" tab)}}
</LinkTo>
</li>
{{/each}}
</ul>
</nav>
<DcFilterInput
@class="filter-input"
@filterAction={{action "debouncedFiltering"}}
@icons={{hash right="search"}}
placeholder={{i18n "chat.browse.filter_input_placeholder"}}
/>
</div>
{{#if (and (not this.channels.length) (not this.isLoading))}}
<div class="empty-state">
<span class="empty-state-title">{{i18n "chat.empty_state.title"}}</span>
<div class="empty-state-body">
<p>{{i18n "chat.empty_state.direct_message"}}</p>
<LinkTo @route={{concat "chat.draft-channel"}}>
{{i18n "chat.empty_state.direct_message_cta"}}
</LinkTo>
</div>
</div>
{{else if this.channels.length}}
<div class="chat-browse-view__content_wrapper">
<div class="chat-browse-view__content">
<div class="chat-browse-view__cards">
{{#each this.channels as |channel|}}
<ChatChannelCard @channel={{channel}} />
{{/each}}
</div>
{{#unless this.isLoading}}
<OnVisibilityAction @action={{action "onScroll"}} />
{{/unless}}
</div>
</div>
{{/if}}
</div>