diff options
| -rw-r--r-- | src/components/LeftSidebar/ConversationsList/ConversationsList.vue | 37 | ||||
| -rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 14 |
2 files changed, 31 insertions, 20 deletions
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue index 682b9b0d1..a16742ecf 100644 --- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue +++ b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue @@ -76,34 +76,35 @@ export default { mounted() { EventBus.$on('routeChange', this.onRouteChange) EventBus.$on('newMessagePosted', this.onMessagePosted) - EventBus.$on('joinedConversation', this.onJoinedConversation) + + EventBus.$once('joinedConversation', ({ token }) => { + this.scrollToConversation(token) + }) }, beforeDestroy() { EventBus.$off('routeChange', this.onRouteChange) EventBus.$off('newMessagePosted', this.onMessagePosted) - EventBus.$off('joinedConversation', this.onJoinedConversation) }, methods: { scrollToConversation(token) { - const conversation = document.getElementById(`conversation_${token}`) - if (!conversation) { - return - } - this.$nextTick(() => { - conversation.scrollIntoView({ - behavior: 'smooth', - block: 'start', - inline: 'nearest', + // FIXME: not sure why we can't scroll earlier even when the element exists already + // when too early, Firefox only scrolls a few pixels towards the element but + // not enough to make it visible + setTimeout(() => { + const conversation = document.getElementById(`conversation_${token}`) + if (!conversation) { + return + } + this.$nextTick(() => { + conversation.scrollIntoView({ + behavior: 'smooth', + block: 'start', + inline: 'nearest', + }) }) - }) - }, - onJoinedConversation({ token }) { - this.scrollToConversation(token) - }, - onMessagePosted({ token }) { - this.scrollToConversation(token) + }, 500) }, onRouteChange({ from, to }) { if (from.name === 'conversation' diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index e0be5c851..7abea0ef3 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -37,6 +37,7 @@ :title="t('spreed', 'Conversations')" /> <li role="presentation"> <ConversationsList + ref="conversationsList" :conversations-list="conversationsList" :initialised-conversations="initialisedConversations" :search-text="searchText" @@ -354,16 +355,22 @@ export default { response = await createGroupConversation(item.id, item.source) } const conversation = response.data.ocs.data + this.abortSearch() + EventBus.$once('joinedConversation', ({ token }) => { + this.$refs.conversationsList.scrollToConversation(token) + }) this.$store.dispatch('addConversation', conversation) this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`)) - EventBus.$emit('resetSearchFilter') }, async joinListedConversation(conversation) { + this.abortSearch() + EventBus.$once('joinedConversation', ({ token }) => { + this.$refs.conversationsList.scrollToConversation(token) + }) // add as temporary item that will refresh after the joining process is complete this.$store.dispatch('addConversation', conversation) this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`)) - EventBus.$emit('resetSearchFilter') }, hasOneToOneConversationWith(userId) { @@ -386,6 +393,9 @@ export default { }, handleClickSearchResult(selectedConversationToken) { + EventBus.$once('joinedConversation', ({ token }) => { + this.$refs.conversationsList.scrollToConversation(token) + }) // End the search operation this.abortSearch() }, |