Merge branch 'scrolltotop' into shigusegubu-vue3

* scrolltotop:
  port changes to notifications
  cleanup
  added scrolltotop for mobile notifications
  fix scrollerref not setting properly
  apply same for scrolltop button
  refactor css for timeline buttons, make it a bit easier to tap them

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()
       }

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;

src/components/notifications/notification_filters.vue

@@ -109,22 +109,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-.NotificationFilters {
-  align-self: stretch;
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
-</style>

src/components/notifications/notifications.js

@@ -119,13 +119,15 @@ const Notifications = {
     },
     teleportTarget () {
       // handle scroller change
-      this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
+      this.$nextTick(() => {
-      this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+        this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
-      if (!this.scrollerRef) {
+        this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
-        this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
+        if (!this.scrollerRef) {
-      }
+          this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
-      this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+        }
-      this.updateScrollPosition()
+        this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+        this.updateScrollPosition()
+      })
     }
   },
   methods: {

src/components/notifications/notifications.scss

@@ -29,6 +29,26 @@
       }
     }
   }
+
+  .timeline-header-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding));
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
 }
 
 .notification {

src/components/notifications/notifications.vue

@@ -20,20 +20,24 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
-          <button
+          <div
+            class="timeline-header-button"
             v-if="showScrollTop"
-            class="button-unstyled scroll-to-top-button"
-            type="button"
-            @click="scrollToTop"
           >
-            <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <button
-              <FAIcon icon="arrow-up" />
+              class="button-unstyled scroll-to-top-button"
-              <FAIcon
+              type="button"
-                icon="minus"
+              @click="scrollToTop"
-                transform="up-7"
+            >
-              />
+              <FALayers class="fa-scale-110 fa-old-padding-layer">
-            </FALayers>
+                <FAIcon icon="arrow-up" />
-          </button>
+                <FAIcon
+                  icon="minus"
+                  transform="up-7"
+                />
+              </FALayers>
+            </button>
+          </div>
           <button
             v-if="unseenCount"
             class="button-default read-button"
@@ -42,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters />
+          <NotificationFilters class="timeline-header-button" />
         </div>
         <div class="panel-body">
           <div

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -87,21 +87,3 @@
 </template>
 
 <script src="./quick_filter_settings.js"></script>
-
-<style lang="scss">
-
-.QuickFilterSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
-</style>

src/components/quick_view_settings/quick_view_settings.vue

@@ -74,21 +74,3 @@
 </template>
 
 <script src="./quick_view_settings.js"></script>
-
-<style lang="scss">
-
-.QuickViewSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
-</style>

src/components/timeline/timeline.scss

@@ -13,6 +13,36 @@
     background-color: var(--cGreen);
   }
 
+  .timeline-header-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding));
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .timeline-header-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+
   .loadmore-button {
     position: relative
   }

src/components/timeline/timeline.vue

@@ -5,35 +5,41 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <button
+      <div class="timeline-header-button">
-        v-if="showScrollTop"
-        class="button-unstyled scroll-to-top-button"
-        type="button"
-        @click="scrollToTop"
-      >
-        <FALayers class="fa-scale-110 fa-old-padding-layer">
-          <FAIcon icon="arrow-up" />
-          <FAIcon
-            icon="minus"
-            transform="up-7"
-          />
-        </FALayers>
-      </button>
-      <template v-if="mobileLayout">
         <button
-          v-if="showLoadButton"
+          v-if="showScrollTop"
-          class="button-unstyled loadmore-button"
+          class="button-unstyled scroll-to-top-button"
-          @click.prevent="showNewStatuses"
+          type="button"
+          @click="scrollToTop"
         >
-          <FAIcon
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
-            fixed-width
+            <FAIcon icon="arrow-up" />
-            icon="circle-plus"
+            <FAIcon
-          />
+              icon="minus"
-          <div class="alert-dot" />
+              transform="up-7"
+            />
+          </FALayers>
         </button>
+      </div>
+      <template v-if="mobileLayout && !embedded">
+        <div
+          class="timeline-header-button"
+          v-if="showLoadButton"
+        >
+          <button
+            class="button-unstyled loadmore-button"
+            @click.prevent="showNewStatuses"
+          >
+            <FAIcon
+              fixed-width
+              icon="circle-plus"
+            />
+            <div class="alert-dot" />
+          </button>
+        </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint"
+          class="loadmore-text faint veryfaint timeline-header-icon"
           @click.prevent
         >
           <FAIcon
@@ -58,8 +64,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" />
+      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
-      <QuickViewSettings v-if="!embedded" />
+      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
     </div>
     <div :class="classes.body">
       <div