60ce3d24fa
This fix uses direct `scrollTop` manipulation instead of `scrollIntoView` when we are certain we actually want the bottom of the screen. This avoids a range of issues especially in safari but also chrome where the scroll position was not correct at the end of `scrollIntoView`, especially due to images.
117 lines
3.8 KiB
Handlebars
117 lines
3.8 KiB
Handlebars
<div
|
|
class={{concat-class
|
|
"chat-live-pane"
|
|
(if this.loading "loading")
|
|
(if this.sendingLoading "sending-loading")
|
|
(unless this.loadedOnce "not-loaded-once")
|
|
}}
|
|
{{did-insert this.setupListeners}}
|
|
{{will-destroy this.teardownListeners}}
|
|
{{did-insert this.updateChannel}}
|
|
{{did-update this.loadMessages @targetMessageId}}
|
|
{{did-update this.updateChannel @channel.id}}
|
|
{{did-insert this.addAutoFocusEventListener}}
|
|
{{will-destroy this.removeAutoFocusEventListener}}
|
|
>
|
|
<ChatFullPageHeader
|
|
@channel={{@channel}}
|
|
@onCloseFullScreen={{this.onCloseFullScreen}}
|
|
@displayed={{this.includeHeader}}
|
|
/>
|
|
|
|
<ChatRetentionReminder @channel={{@channel}} />
|
|
|
|
<ChatMentionWarnings />
|
|
|
|
<div class="chat-message-actions-mobile-anchor"></div>
|
|
|
|
<div
|
|
class={{concat-class
|
|
"chat-message-emoji-picker-anchor"
|
|
(if
|
|
(and
|
|
this.chatEmojiPickerManager.opened
|
|
(eq this.chatEmojiPickerManager.context "chat-message")
|
|
)
|
|
"-opened"
|
|
)
|
|
}}
|
|
></div>
|
|
|
|
<div
|
|
class="chat-messages-scroll chat-messages-container"
|
|
{{on "scroll" this.computeScrollState passive=true}}
|
|
{{chat/on-throttled-scroll this.resetIdle (hash delay=500)}}
|
|
{{chat/on-throttled-scroll this.computeArrow (hash delay=150)}}
|
|
>
|
|
<div class="chat-message-actions-desktop-anchor"></div>
|
|
<div
|
|
class="chat-messages-container"
|
|
{{chat/did-mutate-childlist this.computeDatesSeparators}}
|
|
>
|
|
{{#if this.loadedOnce}}
|
|
{{#each @channel.messages key="id" as |message|}}
|
|
<ChatMessage
|
|
@message={{message}}
|
|
@canInteractWithChat={{this.canInteractWithChat}}
|
|
@channel={{@channel}}
|
|
@setReplyTo={{this.setReplyTo}}
|
|
@replyMessageClicked={{this.replyMessageClicked}}
|
|
@editButtonClicked={{this.editButtonClicked}}
|
|
@selectingMessages={{this.selectingMessages}}
|
|
@onStartSelectingMessages={{this.onStartSelectingMessages}}
|
|
@onSelectMessage={{this.onSelectMessage}}
|
|
@bulkSelectMessages={{this.bulkSelectMessages}}
|
|
@isHovered={{eq message.id this.hoveredMessageId}}
|
|
@onHoverMessage={{this.onHoverMessage}}
|
|
@resendStagedMessage={{this.resendStagedMessage}}
|
|
@messageDidEnterViewport={{this.messageDidEnterViewport}}
|
|
@messageDidLeaveViewport={{this.messageDidLeaveViewport}}
|
|
@forceRendering={{this.forceRendering}}
|
|
/>
|
|
{{/each}}
|
|
{{else}}
|
|
<ChatSkeleton />
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if (and this.loadedOnce (not @channel.canLoadMorePast))}}
|
|
<div class="all-loaded-message">
|
|
{{i18n "chat.all_loaded"}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<ChatScrollToBottomArrow
|
|
@scrollToBottom={{this.scrollToLatestMessage}}
|
|
@hasNewMessages={{this.hasNewMessages}}
|
|
@show={{or this.needsArrow @channel.canLoadMoreFuture}}
|
|
@channel={{@channel}}
|
|
/>
|
|
|
|
{{#if this.selectingMessages}}
|
|
<ChatSelectionManager
|
|
@selectedMessageIds={{this.selectedMessageIds}}
|
|
@chatChannel={{@channel}}
|
|
@cancelSelecting={{this.cancelSelecting}}
|
|
/>
|
|
{{else}}
|
|
{{#if (or @channel.isDraft @channel.isFollowing)}}
|
|
<ChatComposer
|
|
@canInteractWithChat={{this.canInteractWithChat}}
|
|
@sendMessage={{this.sendMessage}}
|
|
@editMessage={{this.editMessage}}
|
|
@setReplyTo={{this.setReplyTo}}
|
|
@loading={{this.sendingLoading}}
|
|
@editingMessage={{readonly this.editingMessage}}
|
|
@onCancelEditing={{this.cancelEditing}}
|
|
@setInReplyToMsg={{this.setInReplyToMsg}}
|
|
@onEditLastMessageRequested={{this.editLastMessageRequested}}
|
|
@onValueChange={{this.composerValueChanged}}
|
|
@chatChannel={{@channel}}
|
|
/>
|
|
{{else}}
|
|
<ChatChannelPreviewCard @channel={{@channel}} />
|
|
{{/if}}
|
|
{{/if}}
|
|
</div> |