d5024d96f1
This commit implements a requested feature: resizing the chat drawer. The user can now adjust the drawer size to their liking, and the new size will be stored in localstorage so that it persists across refreshes. In addition to this feature, a bug was fixed where the --composer-right margin was not being correctly computed. This bug could have resulted in incorrectly positioned drawer when the composer was expanded. Note that it includes support for RTL.
137 lines
4.5 KiB
Handlebars
137 lines
4.5 KiB
Handlebars
{{#if this.chatStateManager.isDrawerActive}}
|
|
<div
|
|
data-chat-channel-id={{this.chat.activeChannel.id}}
|
|
class={{concat-class
|
|
"chat-drawer"
|
|
(if this.chatStateManager.isDrawerExpanded "is-expanded")
|
|
}}
|
|
{{chat/resizable-node ".chat-drawer-resizer" this.didResize}}
|
|
style={{this.drawerStyle}}
|
|
>
|
|
<div class="chat-drawer-container">
|
|
<div class="chat-drawer-resizer"></div>
|
|
<div
|
|
role="region"
|
|
aria-label={{i18n "chat.aria_roles.header"}}
|
|
class="chat-drawer-header"
|
|
>
|
|
{{#if
|
|
(and this.draftChannelView this.chatStateManager.isDrawerExpanded)
|
|
}}
|
|
<div class="chat-drawer-header__left-actions">
|
|
<div class="chat-drawer-header__top-line">
|
|
<LinkTo
|
|
title={{i18n "chat.return_to_list"}}
|
|
class="chat-drawer-header__return-to-channels-btn"
|
|
@route="chat"
|
|
>
|
|
{{d-icon "chevron-left"}}
|
|
</LinkTo>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="chat-drawer-header__title">
|
|
<div class="chat-drawer-header__top-line">
|
|
{{i18n "chat.direct_message_creator.title"}}
|
|
</div>
|
|
</span>
|
|
{{else if this.chatView}}
|
|
{{#if this.chatStateManager.isDrawerExpanded}}
|
|
<LinkTo
|
|
title={{i18n "chat.return_to_list"}}
|
|
class="chat-drawer-header__return-to-channels-btn"
|
|
@route="chat"
|
|
>
|
|
{{d-icon "chevron-left"}}
|
|
</LinkTo>
|
|
{{/if}}
|
|
|
|
{{#if this.chat.activeChannel}}
|
|
{{#if this.chatStateManager.isDrawerExpanded}}
|
|
<LinkTo
|
|
@route={{this.infoTabRoute}}
|
|
@models={{this.chat.activeChannel.routeModels}}
|
|
class="chat-drawer-header__title"
|
|
>
|
|
<div class="chat-drawer-header__top-line">
|
|
<ChatChannelTitle @channel={{this.chat.activeChannel}} />
|
|
</div>
|
|
</LinkTo>
|
|
{{else}}
|
|
<div
|
|
role="button"
|
|
{{on "click" (action "toggleExpand")}}
|
|
class="chat-drawer-header__title"
|
|
>
|
|
<div class="chat-drawer-header__top-line">
|
|
<ChatChannelTitle @channel={{this.chat.activeChannel}}>
|
|
{{#if this.unreadCount}}
|
|
<span
|
|
class="chat-unread-count"
|
|
>{{this.unreadCount}}</span>
|
|
{{/if}}
|
|
</ChatChannelTitle>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{else}}
|
|
<span class="chat-drawer-header__title">
|
|
<div class="chat-drawer-header__top-line">
|
|
{{i18n "chat.heading"}}
|
|
</div>
|
|
</span>
|
|
{{/if}}
|
|
|
|
<div class="chat-drawer-header__right-actions">
|
|
<div class="chat-drawer-header__top-line {{this.topLineClass}}">
|
|
{{#if this.chatStateManager.isDrawerExpanded}}
|
|
<DButton
|
|
@icon="discourse-expand"
|
|
class="btn-flat btn-link chat-drawer-header__full-screen-btn"
|
|
@title={{"chat.open_full_page"}}
|
|
@action={{this.openInFullPage}}
|
|
/>
|
|
{{/if}}
|
|
|
|
<FlatButton
|
|
@icon={{this.expandIcon}}
|
|
@class="chat-drawer-header__expand-btn"
|
|
@action={{action "toggleExpand"}}
|
|
@title="chat.collapse"
|
|
/>
|
|
|
|
{{#if this.showClose}}
|
|
<FlatButton
|
|
@icon="times"
|
|
@action={{action "close"}}
|
|
@title="chat.close"
|
|
@class="chat-drawer-header__close-btn"
|
|
/>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if this.chatStateManager.isDrawerExpanded}}
|
|
<div class="chat-drawer-content">
|
|
{{#if (and this.chatView this.chat.activeChannel)}}
|
|
<ChatLivePane
|
|
@chatChannel={{this.chat.activeChannel}}
|
|
@onSwitchChannel={{action "switchChannel"}}
|
|
/>
|
|
{{else if this.draftChannelView}}
|
|
<ChatDraftChannelScreen
|
|
@onSwitchChannel={{action "switchChannel"}}
|
|
/>
|
|
{{else}}
|
|
<ChannelsList
|
|
@onOpenView={{action "openURL"}}
|
|
@onSelect={{action "switchChannel"}}
|
|
/>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/if}} |