pleroma-fe

commit: 04e62df377fdd2ea563f58dcd23ea8048fc1c140
parent b70d50407cef26926635b1b47131c01e597fcfc6
Author: Sean King <seanking2919@protonmail.com>
Date:   Tue,  2 Aug 2022 23:19:25 -0600

Allow for template inside Timeago component that shows unless the time string is 'just now'

Diffstat:
M
src/components/status/status.vue
16
++++++----------
M
src/components/timeago/timeago.vue
26
++++++++++++++++++--------

2 files changed, 24 insertions(+), 18 deletions(-)
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -336,16 +336,12 @@
                 tag="span"
               >
                 <template #time>
-                  <i18n-t
-                    keypath="time.in_past"
-                    tag="span"
-                  >
-                    <Timeago
-                      :time="status.edited_at"
-                      :auto-update="60"
-                      :long-format="true"
-                    />
-                  </i18n-t>
+                  <Timeago
+                    template-key="time.in_past"
+                    :time="status.edited_at"
+                    :auto-update="60"
+                    :long-format="true"
+                  />
                 </template>
               </i18n-t>
             </div>
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
@@ -3,7 +3,7 @@
     :datetime="time"
     :title="localeDateString"
   >
-    {{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }}
+    {{ relativeTimeString }}
   </time>
 </template>
 
@@ -13,7 +13,7 @@ import localeService from 'src/services/locale/locale.service.js'
 
 export default {
   name: 'Timeago',
-  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold'],
+  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
   data () {
     return {
       relativeTime: { key: 'time.now', num: 0 },
@@ -26,21 +26,31 @@ export default {
       return typeof this.time === 'string'
         ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
         : this.time.toLocaleString(browserLocale)
+    },
+    relativeTimeString () {
+      const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
+
+      if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') {
+        return this.$i18n.t(this.templateKey, [timeString])
+      }
+
+      return timeString
     }
   },
-  created () {
-    this.refreshRelativeTimeObject()
-  },
-  unmounted () {
-    clearTimeout(this.interval)
-  },
   watch: {
     time (newVal, oldVal) {
       if (oldVal !== newVal) {
+        clearTimeout(this.interval)
         this.refreshRelativeTimeObject()
       }
     }
   },
+  created () {
+    this.refreshRelativeTimeObject()
+  },
+  unmounted () {
+    clearTimeout(this.interval)
+  },
   methods: {
     refreshRelativeTimeObject () {
       const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1