added scrolltotop for mobile notifications

This commit is contained in:
Henry Jameson 2022-09-28 21:30:09 +03:00
parent 1c459028cc
commit d3b5ba4864
2 changed files with 31 additions and 3 deletions

View File

@ -8,13 +8,17 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes, faTimes,
faBell, faBell,
faBars faBars,
faArrowUp,
faMinus
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes, faTimes,
faBell, faBell,
faBars faBars,
faArrowUp,
faMinus
) )
const MobileNav = { const MobileNav = {
@ -25,7 +29,8 @@ const MobileNav = {
}, },
data: () => ({ data: () => ({
notificationsCloseGesture: undefined, notificationsCloseGesture: undefined,
notificationsOpen: false notificationsOpen: false,
notificationsAtTop: true
}), }),
created () { created () {
this.notificationsCloseGesture = GestureService.swipeGesture( this.notificationsCloseGesture = GestureService.swipeGesture(
@ -80,6 +85,9 @@ const MobileNav = {
scrollToTop () { scrollToTop () {
window.scrollTo(0, 0) window.scrollTo(0, 0)
}, },
scrollMobileNotificationsToTop () {
this.$refs.mobileNotifications.scrollTo(0, 0)
},
logout () { logout () {
this.$router.replace('/main/public') this.$router.replace('/main/public')
this.$store.dispatch('logout') this.$store.dispatch('logout')
@ -89,6 +97,7 @@ const MobileNav = {
this.$store.dispatch('markNotificationsAsSeen') this.$store.dispatch('markNotificationsAsSeen')
}, },
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
this.notificationsAtTop = scrollTop > 0
if (scrollTop + clientHeight >= scrollHeight) { if (scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications() this.$refs.notifications.fetchOlderNotifications()
} }

View File

@ -48,6 +48,20 @@
> >
<div class="mobile-notifications-header"> <div class="mobile-notifications-header">
<span class="title">{{ $t('notifications.notifications') }}</span> <span class="title">{{ $t('notifications.notifications') }}</span>
<span class="spacer"/>
<button
v-if="notificationsAtTop"
class="button-unstyled mobile-nav-button"
@click.stop.prevent="scrollMobileNotificationsToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<button <button
class="button-unstyled mobile-nav-button" class="button-unstyled mobile-nav-button"
@click.stop.prevent="closeMobileNotifications(true)" @click.stop.prevent="closeMobileNotifications(true)"
@ -61,6 +75,7 @@
<div <div
id="mobile-notifications" id="mobile-notifications"
class="mobile-notifications" class="mobile-notifications"
ref="mobileNotifications"
@scroll="onScroll" @scroll="onScroll"
/> />
</div> </div>
@ -165,6 +180,10 @@
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow); box-shadow: var(--topBarShadow);
.spacer {
flex: 1;
}
.title { .title {
font-size: 1.3em; font-size: 1.3em;
margin-left: 0.6em; margin-left: 0.6em;