top-matter: hide shadow when dynamic visible

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/ScrollerManager.vue

@@ -96,6 +96,8 @@ export default defineComponent({
     lastAdjustHeight: 0,
     /** Height of the entire photo view */
     recyclerHeight: 100,
+    /** Height of the dynamic top matter */
+    dynTopMatterHeight: 0,
     /** Space to leave at the top (for the hover cursor) */
     topPadding: 0,
     /** Rect of scroller */
@@ -209,6 +211,7 @@ export default defineComponent({
       emit('memories.recycler.scroll', {
         current: scroll,
         previous: this.lastKnownRecyclerScroll,
+        dynTopMatterVisible: scroll < this.dynTopMatterHeight,
       });
       this.lastKnownRecyclerScroll = scroll;
 
@@ -311,7 +314,7 @@ export default defineComponent({
     adjustNow() {
       // Refresh height of recycler
       this.recyclerHeight = this.recycler?.$refs.wrapper.clientHeight ?? 0;
-      const extraY = this.recyclerBefore?.clientHeight ?? 0;
+      this.dynTopMatterHeight = this.recyclerBefore?.clientHeight ?? 0;
 
       // Exclude hover cursor height
       const hoverCursor = <HTMLSpanElement>this.$refs.hoverCursor;
@@ -326,7 +329,7 @@ export default defineComponent({
       // y position. When you hit a row with the tick, update y and
       // top values and move to the next tick.
       let tickId = 0;
-      let y = extraY;
+      let y = this.dynTopMatterHeight;
       let count = 0;
 
       // We only need to recompute top and visible ticks if count

src/components/top-matter/PublicShareHeader.ts

@@ -10,9 +10,8 @@ if (title) {
   let isHidden = false; // cache state to avoid unnecessary DOM updates
 
   // Hide header when recycler is scrolled down
-  subscribe('memories.recycler.scroll', ({ current }: { current: number }) => {
-    const hidden = current < 80;
-    if (hidden === isHidden) return;
-    header.classList.toggle('hidden', (isHidden = hidden));
+  subscribe('memories.recycler.scroll', ({ dynTopMatterVisible }: { dynTopMatterVisible: boolean }) => {
+    if (dynTopMatterVisible === isHidden) return;
+    header.classList.toggle('hidden', (isHidden = dynTopMatterVisible));
   });
 }

src/components/top-matter/TopMatter.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="top-matter-container timeline-scroller-gap" v-if="currentmatter">
+  <div
+    class="top-matter-container timeline-scroller-gap"
+    :class="{
+      'dynamic-visible': dynamicVisible,
+    }"
+    v-if="currentmatter"
+  >
     <component :is="currentmatter" />
   </div>
 </template>
@@ -7,6 +13,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { subscribe, unsubscribe } from '@nextcloud/event-bus';
+
 import FolderTopMatter from './FolderTopMatter.vue';
 import ClusterTopMatter from './ClusterTopMatter.vue';
 import FaceTopMatter from './FaceTopMatter.vue';
@@ -24,20 +32,35 @@ export default defineComponent({
   },
 
   data: () => ({
-    type: TopMatterType.NONE,
+    dynamicVisible: false,
   }),
 
-  watch: {
-    $route: function (from: any, to: any) {
-      this.setTopMatter();
-    },
+  mounted() {
+    subscribe('memories.recycler.scroll', this.onRecyclerScroll);
   },
 
-  mounted() {
-    this.setTopMatter();
+  beforeUnmount() {
+    unsubscribe('memories.recycler.scroll', this.onRecyclerScroll);
   },
 
   computed: {
+    type() {
+      switch (this.$route.name) {
+        case 'folders':
+          return TopMatterType.FOLDER;
+        case 'albums':
+          return TopMatterType.ALBUM;
+        case 'tags':
+        case 'places':
+          return TopMatterType.CLUSTER;
+        case 'recognize':
+        case 'facerecognition':
+          return this.$route.params.name ? TopMatterType.FACE : TopMatterType.CLUSTER;
+        default:
+          return TopMatterType.NONE;
+      }
+    },
+
     currentmatter() {
       switch (this.type) {
         case TopMatterType.FOLDER:
@@ -55,24 +78,8 @@ export default defineComponent({
   },
 
   methods: {
-    /** Create top matter */
-    setTopMatter() {
-      this.type = (() => {
-        switch (this.$route.name) {
-          case 'folders':
-            return TopMatterType.FOLDER;
-          case 'albums':
-            return TopMatterType.ALBUM;
-          case 'tags':
-          case 'places':
-            return TopMatterType.CLUSTER;
-          case 'recognize':
-          case 'facerecognition':
-            return this.$route.params.name ? TopMatterType.FACE : TopMatterType.CLUSTER;
-          default:
-            return TopMatterType.NONE;
-        }
-      })();
+    onRecyclerScroll({ dynTopMatterVisible }: { dynTopMatterVisible: boolean }) {
+      this.dynamicVisible = dynTopMatterVisible;
     },
   },
 });
@@ -84,7 +91,11 @@ export default defineComponent({
   z-index: 200; // above scroller, below top-bar
   padding: 2px 0;
   background-color: var(--color-main-background);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease-in-out;
+
+  &:not(.dynamic-visible) {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  }
 
   @media (max-width: 768px) {
     padding-left: 10px; // extra space visual