Merge pull request #52290 from nextcloud/fix/show-better-mtime

refactor(files): share `mtime` for file entry components

Author: susnux

apps/files/src/components/FileEntry.vue

@@ -64,7 +64,9 @@
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
-			<NcDateTime v-if="mtime" :timestamp="mtime" :ignore-seconds="true" />
+			<NcDateTime v-if="mtime"
+				ignore-seconds
+				:timestamp="mtime" />
 			<span v-else>{{ t('files', 'Unknown date') }}</span>
 		</td>
 
@@ -86,7 +88,6 @@
 import { formatFileSize } from '@nextcloud/files'
 import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 import { defineComponent } from 'vue'
-import moment from '@nextcloud/moment'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 
 import { useNavigation } from '../composables/useNavigation.ts'
@@ -206,26 +207,6 @@ export default defineComponent({
 				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
 		},
-
-		mtime() {
-			// If the mtime is not a valid date, return it as is
-			if (this.source.mtime && !isNaN(this.source.mtime.getDate())) {
-				return this.source.mtime
-			}
-
-			if (this.source.crtime && !isNaN(this.source.crtime.getDate())) {
-				return this.source.crtime
-			}
-
-			return null
-		},
-
-		mtimeTitle() {
-			if (this.source.mtime) {
-				return moment(this.source.mtime).format('LLL')
-			}
-			return ''
-		},
 	},
 
 	created() {

apps/files/src/components/FileEntryGrid.vue

@@ -51,7 +51,9 @@
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
-			<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
+			<NcDateTime v-if="mtime"
+				ignore-seconds
+				:timestamp="mtime" />
 		</td>
 
 		<!-- Actions -->

apps/files/src/components/FileEntryMixin.ts

@@ -191,21 +191,39 @@ export default defineComponent({
 			},
 		},
 
-		mtimeOpacity() {
-			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+		mtime() {
+			// If the mtime is not a valid date, return it as is
+			if (this.source.mtime && !isNaN(this.source.mtime.getDate())) {
+				return this.source.mtime
+			}
+
+			if (this.source.crtime && !isNaN(this.source.crtime.getDate())) {
+				return this.source.crtime
+			}
 
-			const mtime = this.source.mtime?.getTime?.()
-			if (!mtime) {
+			return null
+		},
+
+		mtimeOpacity() {
+			if (!this.mtime) {
 				return {}
 			}
 
-			// 1 = today, 0 = 31 days ago
-			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
-			if (ratio < 0) {
+			// The time when we start reducing the opacity
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+			// everything older than the maxOpacityTime will have the same value
+			const timeDiff = Date.now() - this.mtime.getTime()
+			if (timeDiff < 0) {
+				// this means we have an invalid mtime which is in the future!
 				return {}
 			}
+
+			// inversed time difference from 0 to maxOpacityTime (which would mean today)
+			const opacityTime = Math.max(0, maxOpacityTime - timeDiff)
+			// 100 = today, 0 = 31 days ago or older
+			const percentage = Math.round(opacityTime * 100 / maxOpacityTime)
 			return {
-				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+				color: `color-mix(in srgb, var(--color-main-text) ${percentage}%, var(--color-text-maxcontrast))`,
 			}
 		},