chore: Fix scroll in message view (#1113)

* chore: Fix scrolling in messages view

* Remove console.log

* Remove inline-style
This commit is contained in:
Pranav Raj S 2020-08-01 23:36:59 +05:30 committed by GitHub
parent 5e5f34bedc
commit a5262a6ff3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>