diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue index 18d10af4775..66323d5d6eb 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.vue +++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue @@ -21,6 +21,7 @@ + @@ -113,6 +119,7 @@ import ConversationsList from './ConversationsList/ConversationsList' import Conversation from './ConversationsList/Conversation' import ConversationsOptionsList from '../ConversationsOptionsList' import Hint from '../Hint' +import Button from '@nextcloud/vue/dist/Components/Button' import SearchBox from './SearchBox/SearchBox' import debounce from 'debounce' import { EventBus } from '../../services/EventBus' @@ -135,6 +142,7 @@ export default { AppNavigation, AppNavigationCaption, ConversationsList, + Button, ConversationsOptionsList, Hint, SearchBox, @@ -164,6 +172,9 @@ export default { // Keeps track of whether the conversation list is scrolled to the top or not isScrolledToTop: true, refreshTimer: null, + unreadNum: 0, + firstUnreadPos: 0, + preventFindingUnread: false, } }, @@ -247,12 +258,14 @@ export default { }, 30000) EventBus.$on('should-refresh-conversations', this.debounceFetchConversations) + EventBus.$once('conversations-received', this.handleUnreadMention) this.mountArrowNavigation() }, beforeDestroy() { EventBus.$off('should-refresh-conversations', this.debounceFetchConversations) + EventBus.$off('conversations-received', this.handleUnreadMention) this.cancelSearchPossibleConversations() this.cancelSearchPossibleConversations = null @@ -276,7 +289,17 @@ export default { isFocused() { return this.isSearching }, - + scrollBottomUnread() { + this.preventFindingUnread = true + this.$refs.scroller.scrollTo({ + top: this.firstUnreadPos - 150, + behavior: 'smooth', + }) + setTimeout(() => { + this.handleUnreadMention() + this.preventFindingUnread = false + }, 500) + }, debounceFetchSearchResults: debounce(function() { if (this.isSearching) { this.fetchSearchResults() @@ -448,8 +471,24 @@ export default { handleScroll() { this.isScrolledToTop = this.$refs.scroller.scrollTop === 0 }, + elementIsBelowViewpoint(container, element) { + return element.offsetTop > container.scrollTop + container.clientHeight + }, + handleUnreadMention() { + this.unreadNum = 0 + const unreadMentions = document.getElementsByClassName('unread-mention-conversation') + unreadMentions.forEach(x => { + if (this.elementIsBelowViewpoint(this.$refs.scroller, x)) { + if (this.unreadNum === 0) { + this.firstUnreadPos = x.offsetTop + } + this.unreadNum += 1 + } + }) + }, debounceHandleScroll: debounce(function() { this.handleScroll() + this.handleUnreadMention() }, 50), }, } @@ -476,4 +515,11 @@ export default { padding: 0 4px; } +.unread-mention-button { + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 100; + bottom: 10px; +}