From 25e500bbf4c6d6071f7bb262e058479c410c890b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 22 Sep 2023 13:45:32 +0200 Subject: [PATCH] feat(files): properly format buttons, align mtime to the left and apply opacity based on file last modification MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/src/components/FileEntry.vue | 19 +++++++++++++++++++ .../src/components/FilesListHeaderButton.vue | 1 + .../components/FilesListTableHeaderButton.vue | 11 +---------- .../files/src/components/FilesListVirtual.vue | 16 +++++----------- dist/files-main.js | 4 ++-- dist/files-main.js.map | 2 +- 6 files changed, 29 insertions(+), 24 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 @@ @@ -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') diff --git a/apps/files/src/components/FilesListHeaderButton.vue b/apps/files/src/components/FilesListHeaderButton.vue index 9aac83a185d..bc85e2cdd7f 100644 --- a/apps/files/src/components/FilesListHeaderButton.vue +++ b/apps/files/src/components/FilesListHeaderButton.vue @@ -22,6 +22,7 @@