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>

4 files changed, 26 insertions, 21 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')
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 @@
 <template>
 	<NcButton :aria-label="sortAriaLabel(name)"
 		:class="{'files-list__column-sort-button--active': sortingMode === mode}"
+		:alignment="mode !== 'size' ? 'start-reverse' : ''"
 		class="files-list__column-sort-button"
 		type="tertiary"
 		@click.stop.prevent="toggleSortBy(mode)">
diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue
index ebd1abb4314..c8dcf3cfd66 100644
--- a/apps/files/src/components/FilesListTableHeaderButton.vue
+++ b/apps/files/src/components/FilesListTableHeaderButton.vue
@@ -22,6 +22,7 @@
 <template>
 	<NcButton :aria-label="sortAriaLabel(name)"
 		:class="{'files-list__column-sort-button--active': sortingMode === mode}"
+		:alignment="mode !== 'size' ? 'start-reverse' : ''"
 		class="files-list__column-sort-button"
 		type="tertiary"
 		@click.stop.prevent="toggleSortBy(mode)">
@@ -85,16 +86,6 @@ export default Vue.extend({
 .files-list__column-sort-button {
 	// Compensate for cells margin
 	margin: 0 calc(var(--cell-margin) * -1);
-	// Reverse padding
-	padding: 0 4px 0 16px !important;
-
-	// Icon after text
-	.button-vue__wrapper {
-		flex-direction: row-reverse;
-		// Take max inner width for text overflow ellipsis
-		// Remove when https://github.com/nextcloud/nextcloud-vue/pull/3936 is merged
-		width: 100%;
-	}
 
 	.button-vue__icon {
 		transition-timing-function: linear;
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 9a55b9cdde4..237177a382c 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -475,19 +475,13 @@ export default Vue.extend({
 
 		.files-list__row-mtime,
 		.files-list__row-size {
-			// Right align text
-			justify-content: flex-end;
-			width: calc(var(--row-height) * 1.5);
 			// opacity varies with the size
 			color: var(--color-main-text);
-
-			// Icon is before text since size is right aligned
-			.files-list__column-sort-button {
-				padding: 0 16px 0 4px !important;
-				.button-vue__wrapper {
-					flex-direction: row;
-				}
-			}
+		}
+		.files-list__row-size {
+			width: calc(var(--row-height) * 1.5);
+			// Right align content/text
+			justify-content: flex-end;
 		}
 
 		.files-list__row-mtime {