timeline: fix top overlay on albums

Signed-off-by: Varun Patil <radialapps@gmail.com>
pulsejet · Apr 4, 2024 · ac55fad · ac55fad
1 parent 6b45773
commit ac55fad
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
@@ -17,7 +17,12 @@
     <EmptyContent v-if="showEmpty" />
 
     <!-- Top overlay showing date -->
-    <TimelineTopOverlay ref="topOverlay" :heads="heads" :container="refs.container?.$el" />
+    <TimelineTopOverlay
+      ref="topOverlay"
+      :heads="heads"
+      :container="refs.container?.$el"
+      :recycler="refs.recycler?.$el"
+    />
 
     <!-- Main recycler view for rows -->
     <RecycleScroller

diff --git a/src/components/top-matter/TimelineTopOverlay.vue b/src/components/top-matter/TimelineTopOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="top-overlay" :class="{ show: !!text }">{{ text }}</div>
+  <div class="top-overlay" :style="{ top }" :class="{ show: !!text }">{{ text }}</div>
 </template>
 
 <script lang="ts">
@@ -12,6 +12,7 @@ export default defineComponent({
 
   data: () => ({
     text: String(),
+    top: String(),
   }),
 
   props: {
@@ -24,6 +25,11 @@ export default defineComponent({
       type: Element,
       required: false,
     },
+
+    recycler: {
+      type: Element,
+      required: false,
+    },
   },
 
   methods: {
@@ -32,13 +38,18 @@ export default defineComponent({
     },
 
     getText() {
+      // Get position of recycler
+      const rrect = this.recycler?.getBoundingClientRect();
+      if (!rrect) return; // ??
+
       // Get position of container
       const crect = this.container?.getBoundingClientRect();
       if (!crect) return; // ??
+      this.top = `${rrect.top - crect.top}px`;
 
       // Get photo just below the top of the container
       const elem: any = document
-        .elementsFromPoint(crect.left + 5, crect.top + 50)
+        .elementsFromPoint(rrect.left + 5, rrect.top + 50)
         .find((e) => e.classList.contains('p-outer-super'));
       const overPhoto: IPhoto | null = elem?.__vue__?.data;