feat(files): properly format buttons, align mtime to the left and apply opacity based on file last modification

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 19 insertions, 0 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 2ca02edc5b8..4fd64b89482 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -164,6 +164,7 @@
 
 		<!-- Mtime -->
 		<td v-if="isMtimeAvailable"
+			:style="{ opacity: mtimeOpacity }"
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
@@ -389,6 +390,24 @@ export default Vue.extend({
 			}
 			return this.t('files_trashbin', 'A long time ago')
 		},
+		mtimeOpacity() {
+			// Whatever theme is active, the contrast will pass WCAG AA
+			// with color main text over main background and an opacity of 0.7
+			const minOpacity = 0.7
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+
+			const mtime = this.source.mtime?.getTime?.()
+			if (!mtime) {
+				return minOpacity
+			}
+
+			// 1 = today, 0 = 31 days ago
+			const factor = (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime
+			if (factor < 0) {
+				return minOpacity
+			}
+			return minOpacity + (1 - minOpacity) * factor
+		},
 		mtimeTitle() {
 			if (this.source.mtime) {
 				return moment(this.source.mtime).format('LLL')