dtm: refactor header to component

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

src/components/Timeline.vue

@@ -31,11 +31,6 @@
           <!-- Gap for mobile header -->
           <div class="mobile-header-top-gap"></div>
 
-          <!-- Header -->
-          <div class="dynamic-top-matter" v-show="list.length && viewName">
-            <div class="text">{{ viewName }}</div>
-          </div>
-
           <!-- Route-specific top matter -->
           <DynamicTopMatter ref="dtm" @load="scrollerManager().adjust()" />
         </div>
@@ -114,10 +109,8 @@ import EmptyContent from './top-matter/EmptyContent.vue';
 import TopMatter from './top-matter/TopMatter.vue';
 import DynamicTopMatter from './top-matter/DynamicTopMatter.vue';
 
-import * as PublicShareHeader from './top-matter/PublicShareHeader';
 import * as dav from '../services/DavRequests';
 import * as utils from '../services/Utils';
-import * as strings from '../services/strings';
 import * as nativex from '../native';
 
 import { API, DaysFilterType } from '../services/API';
@@ -228,26 +221,6 @@ export default defineComponent({
       );
     },
 
-    /** Get view name for dynamic top matter */
-    viewName(): string {
-      // Show album name for album view
-      if (this.routeIsAlbums) {
-        return this.$route.params.name || '';
-      }
-
-      // Show share name for public shares
-      if (this.routeIsPublic) {
-        return PublicShareHeader.title;
-      }
-
-      // Only static top matter for these routes
-      if (this.routeIsTags || this.routeIsPeople || this.routeIsPlaces) {
-        return '';
-      }
-
-      return strings.viewName(this.$route.name);
-    },
-
     /** Nothing to show here */
     empty(): boolean {
       return !this.list.length && !this.dtmContent;
@@ -1327,25 +1300,5 @@ export default defineComponent({
 /** Dynamic top matter */
 .recycler-before {
   width: 100%;
-  > .dynamic-top-matter {
-    > .text {
-      font-size: 2.5em;
-      position: relative;
-      display: block;
-      line-height: 1.2em;
-
-      // more padding on right for scroller thumb
-      padding: 25px 60px 10px 10px;
-
-      @media (max-width: 768px) {
-        font-size: 1.8em;
-        padding: 15px 30px 7px 12px;
-        html.native & {
-          // header is empty, more top padding
-          padding: 25px 30px 7px 18px;
-        }
-      }
-    }
-  }
 }
 </style>

src/components/top-matter/DynamicTopMatter.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="dtm-container" v-if="currentmatter">
+  <div class="dtm-container" v-if="currentmatter || viewName">
-    <component ref="child" :is="currentmatter" @load="$emit('load')" />
+    <div v-if="viewName" class="header">{{ viewName }}</div>
+    <component ref="child" v-if="currentmatter" :is="currentmatter" @load="$emit('load')" />
   </div>
 </template>
 
@@ -12,6 +13,9 @@ import UserMixin from '../../mixins/UserConfig';
 import FolderDynamicTopMatter from './FolderDynamicTopMatter.vue';
 import OnThisDay from './OnThisDay.vue';
 
+import * as PublicShareHeader from './PublicShareHeader';
+import * as strings from '../../services/strings';
+
 export default defineComponent({
   name: 'DynamicTopMatter',
 
@@ -27,6 +31,26 @@ export default defineComponent({
 
       return null;
     },
+
+    /** Get view name for dynamic top matter */
+    viewName(): string {
+      // Show album name for album view
+      if (this.routeIsAlbums) {
+        return this.$route.params.name || '';
+      }
+
+      // Show share name for public shares
+      if (this.routeIsPublic) {
+        return PublicShareHeader.title;
+      }
+
+      // Only static top matter for these routes
+      if (this.routeIsTags || this.routeIsPeople || this.routeIsPlaces) {
+        return '';
+      }
+
+      return strings.viewName(this.$route.name);
+    },
   },
 
   methods: {
@@ -42,3 +66,26 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.dtm-container {
+  > .header {
+    font-size: 2.5em;
+    position: relative;
+    display: block;
+    line-height: 1.2em;
+
+    // more padding on right for scroller thumb
+    padding: 25px 60px 10px 10px;
+
+    @media (max-width: 768px) {
+      font-size: 1.8em;
+      padding: 15px 30px 7px 12px;
+      html.native & {
+        // header is empty, more top padding
+        padding: 25px 30px 7px 18px;
+      }
+    }
+  }
+}
+</style>