pleroma-fe

commit: d3b5ba48646d7ff1c6a840a51d530ed617207ceb
parent 1c459028cc8670e1644c314279097fe20d0d9341
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 28 Sep 2022 21:30:09 +0300

added scrolltotop for mobile notifications

Diffstat:
M
src/components/mobile_nav/mobile_nav.js
15
++++++++++++---
M
src/components/mobile_nav/mobile_nav.vue
19
+++++++++++++++++++

2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
@@ -8,13 +8,17 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
   faBell,
-  faBars
+  faBars,
+  faArrowUp,
+  faMinus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
   faBell,
-  faBars
+  faBars,
+  faArrowUp,
+  faMinus
 )
 
 const MobileNav = {
@@ -25,7 +29,8 @@ const MobileNav = {
   },
   data: () => ({
     notificationsCloseGesture: undefined,
-    notificationsOpen: false
+    notificationsOpen: false,
+    notificationsAtTop: true
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -80,6 +85,9 @@ const MobileNav = {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    scrollMobileNotificationsToTop () {
+      this.$refs.mobileNotifications.scrollTo(0, 0)
+    },
     logout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
@@ -89,6 +97,7 @@ const MobileNav = {
       this.$store.dispatch('markNotificationsAsSeen')
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      this.notificationsAtTop = scrollTop > 0
       if (scrollTop + clientHeight >= scrollHeight) {
         this.$refs.notifications.fetchOlderNotifications()
       }
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
@@ -48,6 +48,20 @@
     >
       <div class="mobile-notifications-header">
         <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
           class="button-unstyled mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications(true)"
@@ -61,6 +75,7 @@
       <div
         id="mobile-notifications"
         class="mobile-notifications"
+        ref="mobileNotifications"
         @scroll="onScroll"
       />
     </div>
@@ -165,6 +180,10 @@
     box-shadow: 0px 0px 4px rgba(0,0,0,.6);
     box-shadow: var(--topBarShadow);
 
+    .spacer {
+      flex: 1;
+    }
+
     .title {
       font-size: 1.3em;
       margin-left: 0.6em;