add "scroll to top" button to timelines and notifications
This commit is contained in:
parent
2c76c46aa7
commit
efc6b6b703
4 changed files with 44 additions and 3 deletions
|
|
@ -10,10 +10,11 @@ import {
|
|||
} from '../../services/notification_utils/notification_utils.js'
|
||||
import FaviconService from '../../services/favicon_service/favicon_service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch
|
||||
faCircleNotch,
|
||||
faCircleUp
|
||||
)
|
||||
|
||||
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
|
||||
|
|
@ -34,6 +35,7 @@ const Notifications = {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
showScrollTop: false,
|
||||
bottomedOut: false,
|
||||
// How many seen notifications to display in the list. The more there are,
|
||||
// the heavier the page becomes. This count is increased when loading
|
||||
|
|
@ -90,8 +92,16 @@ const Notifications = {
|
|||
notificationsToDisplay () {
|
||||
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
|
||||
},
|
||||
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
|
||||
...mapGetters(['unreadChatCount'])
|
||||
},
|
||||
mounted () {
|
||||
this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
|
||||
this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
|
||||
},
|
||||
unmounted () {
|
||||
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
|
||||
},
|
||||
watch: {
|
||||
unseenCountTitle (count) {
|
||||
if (count > 0) {
|
||||
|
|
@ -104,6 +114,14 @@ const Notifications = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
scrollToTop () {
|
||||
const scrollable = this.scrollerRef
|
||||
scrollable.scrollTo({ top: this.$refs.root.offsetTop })
|
||||
// this.$refs.root.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
},
|
||||
updateScrollPosition () {
|
||||
this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
|
||||
},
|
||||
markAsSeen () {
|
||||
this.$store.dispatch('markNotificationsAsSeen')
|
||||
this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue