chore: Fix scroll in message view (#1113)
* chore: Fix scrolling in messages view * Remove console.log * Remove inline-style
This commit is contained in:
parent
5e5f34bedc
commit
a5262a6ff3
1 changed files with 37 additions and 27 deletions
|
@ -19,7 +19,7 @@
|
||||||
</div>
|
</div>
|
||||||
<ul class="conversation-panel">
|
<ul class="conversation-panel">
|
||||||
<transition name="slide-up">
|
<transition name="slide-up">
|
||||||
<li>
|
<li class="spinner--container">
|
||||||
<span v-if="shouldShowSpinner" class="spinner message" />
|
<span v-if="shouldShowSpinner" class="spinner message" />
|
||||||
</li>
|
</li>
|
||||||
</transition>
|
</transition>
|
||||||
|
@ -52,7 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
<ReplyBox
|
<ReplyBox
|
||||||
:conversation-id="currentChat.id"
|
:conversation-id="currentChat.id"
|
||||||
@scrollToMessage="focusLastMessage"
|
@scrollToMessage="scrollToBottom"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -155,35 +155,44 @@ export default {
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
bus.$on('scrollToMessage', () => {
|
bus.$on('scrollToMessage', () => {
|
||||||
this.focusLastMessage();
|
setTimeout(() => this.scrollToBottom(), 0);
|
||||||
this.makeMessagesRead();
|
this.makeMessagesRead();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
mounted() {
|
||||||
focusLastMessage() {
|
this.addScrollListener();
|
||||||
setTimeout(() => {
|
},
|
||||||
this.attachListner();
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
|
|
||||||
|
unmounted() {
|
||||||
|
this.removeScrollListener();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addScrollListener() {
|
||||||
|
this.conversationPanel = this.$el.querySelector('.conversation-panel');
|
||||||
|
this.setScrollParams();
|
||||||
|
this.conversationPanel.addEventListener('scroll', this.handleScroll);
|
||||||
|
this.scrollToBottom();
|
||||||
|
this.isLoadingPrevious = false;
|
||||||
|
},
|
||||||
|
removeScrollListener() {
|
||||||
|
this.conversationPanel.removeEventListener('scroll', this.handleScroll);
|
||||||
|
},
|
||||||
|
scrollToBottom() {
|
||||||
|
this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight;
|
||||||
|
},
|
||||||
onToggleContactPanel() {
|
onToggleContactPanel() {
|
||||||
this.$emit('contactPanelToggle');
|
this.$emit('contactPanelToggle');
|
||||||
},
|
},
|
||||||
|
setScrollParams() {
|
||||||
attachListner() {
|
this.heightBeforeLoad = this.conversationPanel.scrollHeight;
|
||||||
this.conversationPanel = this.$el.querySelector('.conversation-panel');
|
this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
|
||||||
this.heightBeforeLoad =
|
|
||||||
this.getUnreadCount === 0
|
|
||||||
? this.conversationPanel.scrollHeight
|
|
||||||
: this.$el.querySelector('.conversation-panel .unread--toast')
|
|
||||||
.offsetTop - 56;
|
|
||||||
this.conversationPanel.scrollTop = this.heightBeforeLoad;
|
|
||||||
this.conversationPanel.addEventListener('scroll', this.handleScroll);
|
|
||||||
this.isLoadingPrevious = false;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleScroll(e) {
|
handleScroll(e) {
|
||||||
|
this.setScrollParams();
|
||||||
|
|
||||||
const dataFetchCheck =
|
const dataFetchCheck =
|
||||||
this.getMessages.dataFetched === true && this.shouldLoadMoreChats;
|
this.getMessages.dataFetched === true && this.shouldLoadMoreChats;
|
||||||
if (
|
if (
|
||||||
|
@ -198,15 +207,12 @@ export default {
|
||||||
before: this.getMessages.messages[0].id,
|
before: this.getMessages.messages[0].id,
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
const heightDifference =
|
||||||
|
this.conversationPanel.scrollHeight - this.heightBeforeLoad;
|
||||||
this.conversationPanel.scrollTop =
|
this.conversationPanel.scrollTop =
|
||||||
this.conversationPanel.scrollHeight -
|
this.scrollTopBeforeLoad + heightDifference;
|
||||||
(this.heightBeforeLoad - this.conversationPanel.scrollTop);
|
|
||||||
this.isLoadingPrevious = false;
|
this.isLoadingPrevious = false;
|
||||||
this.heightBeforeLoad =
|
this.setScrollParams();
|
||||||
this.getUnreadCount === 0
|
|
||||||
? this.conversationPanel.scrollHeight
|
|
||||||
: this.$el.querySelector('.conversation-panel .unread--toast')
|
|
||||||
.offsetTop - 56;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -237,4 +243,8 @@ export default {
|
||||||
font-size: var(--font-size-mini);
|
font-size: var(--font-size-mini);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner--container {
|
||||||
|
min-height: var(--space-jumbo);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue