timeline: add top text overlay (close #1116)

Signed-off-by: Varun Patil <[email protected]>

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 - **Feature**: Add option to de-duplicate identical files ([#1112](https://github.com/pulsejet/memories/issues/1112)).
+- **Feature**: Show current date at top of timeline ([#1116](https://github.com/pulsejet/memories/issues/1116))
 
 ## [v7.1.0] - 2024-04-01
 

src/components/Timeline.vue

@@ -16,6 +16,9 @@
     <!-- No content found and nothing is loading -->
     <EmptyContent v-if="showEmpty" />
 
+    <!-- Top overlay showing date -->
+    <TimelineTopOverlay ref="topOverlay" :heads="heads" :container="refs.container?.$el" />
+
     <!-- Main recycler view for rows -->
     <RecycleScroller
       ref="recycler"
@@ -82,7 +85,10 @@
       :recycler="refs.recycler"
       :recyclerBefore="refs.recyclerBefore"
       @interactend="loadScrollView"
-      @scroll="currentScroll = $event.current"
+      @scroll="
+        currentScroll = $event.current;
+        refs.topOverlay?.refresh();
+      "
     />
 
     <SelectionManager
@@ -117,6 +123,7 @@ import SwipeRefresh from './SwipeRefresh.vue';
 import EmptyContent from '@components/top-matter/EmptyContent.vue';
 import TopMatter from '@components/top-matter/TopMatter.vue';
 import DynamicTopMatter from '@components/top-matter/DynamicTopMatter.vue';
+import TimelineTopOverlay from '@components/top-matter/TimelineTopOverlay.vue';
 
 import * as dav from '@services/dav';
 import * as utils from '@services/utils';
@@ -140,6 +147,7 @@ export default defineComponent({
     EmptyContent,
     TopMatter,
     DynamicTopMatter,
+    TimelineTopOverlay,
     SelectionManager,
     ScrollerManager,
     Viewer,
@@ -248,6 +256,7 @@ export default defineComponent({
         container?: InstanceType<typeof SwipeRefresh>;
         topmatter?: InstanceType<typeof TopMatter>;
         dtm?: InstanceType<typeof DynamicTopMatter>;
+        topOverlay?: InstanceType<typeof TimelineTopOverlay>;
         recycler?: VueRecyclerType;
         recyclerBefore?: HTMLDivElement;
         selectionManager: InstanceType<typeof SelectionManager>;

src/components/top-matter/TimelineTopOverlay.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="top-overlay" :class="{ show: !!text }">{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+
+import type { IHeadRow, IPhoto } from '@typings';
+
+export default defineComponent({
+  name: 'TimelineTopOverlay',
+
+  data: () => ({
+    text: String(),
+  }),
+
+  props: {
+    heads: {
+      type: Map as PropType<Map<number, IHeadRow>>,
+      required: true,
+    },
+
+    container: {
+      type: Element,
+      required: false,
+    },
+  },
+
+  methods: {
+    refresh() {
+      this.text = this.getText() ?? String();
+    },
+
+    getText() {
+      // Get position of container
+      const crect = this.container?.getBoundingClientRect();
+      if (!crect) return; // ??
+
+      // Get photo just below the top of the container
+      const elem: any = document
+        .elementsFromPoint(crect.left + 5, crect.top + 50)
+        .find((e) => e.classList.contains('p-outer-super'));
+      const overPhoto: IPhoto | null = elem?.__vue__?.data;
+
+      // If no photo is round, no overlay to show
+      if (!overPhoto) return;
+
+      // If this is the first photo, there is an extra condition
+      // to check if the photo is actually above the container
+      if (overPhoto.dispRowNum === 0 && elem.getBoundingClientRect().top > crect.top) {
+        return;
+      }
+
+      // Get the header from the dayid of the photo
+      // Do not show overlay for single-row days
+      const head = this.heads.get(overPhoto.dayid);
+      if (!head || (head.day?.rows?.length ?? 0) <= 1) {
+        return;
+      }
+
+      return head.name;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.top-overlay {
+  position: absolute;
+  top: -2px;
+  left: 3px;
+  height: 40px;
+  width: 100%;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
+  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 80%, transparent 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  font-size: 14px;
+  font-weight: 500;
+  user-select: none;
+  pointer-events: none;
+
+  transition: opacity 0.2s ease;
+  opacity: 0;
+  &.show {
+    opacity: 1;
+  }
+
+  @media (max-width: 768px) {
+    mask-image: none;
+    left: 0;
+    padding-left: 12px;
+  }
+}
+</style>