fix(files): Adjust table header to look like on previous versions

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

2 files changed, 28 insertions, 26 deletions

diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
index e619acf0623..fef7c7a213e 100644
--- a/apps/files/src/components/FilesListTableHeader.vue
+++ b/apps/files/src/components/FilesListTableHeader.vue
@@ -3,7 +3,7 @@
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -34,8 +34,7 @@
 		<template v-else>
 			<!-- Link to file -->
 			<th class="files-list__column files-list__row-name files-list__column--sortable"
-				:aria-sort="ariaSortForMode('basename')"
-				@click.stop.prevent="toggleSortBy('basename')">
+				:aria-sort="ariaSortForMode('basename')">
 				<!-- Icon or preview -->
 				<span class="files-list__row-icon" />
 
diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue
index 80f64e3bd3a..65976cb91a5 100644
--- a/apps/files/src/components/FilesListTableHeaderButton.vue
+++ b/apps/files/src/components/FilesListTableHeaderButton.vue
@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -26,11 +27,12 @@
 		}]"
 		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
 		type="tertiary"
-		@click.stop.prevent="toggleSortBy(mode)">
-		<!-- Sort icon before text as size is align right -->
-		<MenuUp v-if="sortingMode !== mode || isAscSorting" slot="icon" />
-		<MenuDown v-else slot="icon" />
-		{{ name }}
+		@click="toggleSortBy(mode)">
+		<template #icon>
+			<MenuUp v-if="sortingMode !== mode || isAscSorting" class="files-list__column-sort-button-icon" />
+			<MenuDown v-else class="files-list__column-sort-button-icon" />
+		</template>
+		<span class="files-list__column-sort-button-text">{{ name }}</span>
 	</NcButton>
 </template>
 
@@ -74,32 +76,33 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .files-list__column-sort-button {
 	// Compensate for cells margin
 	margin: 0 calc(var(--cell-margin) * -1);
+	min-width: calc(100% - 3 * var(--cell-margin))!important;
 
-	.button-vue__icon {
-		transition-timing-function: linear;
-		transition-duration: .1s;
-		transition-property: opacity;
+	&-text {
+		color: var(--color-text-maxcontrast);
+		font-weight: normal;
+	}
+
+	&-icon {
+		color: var(--color-text-maxcontrast);
 		opacity: 0;
+		transition: opacity var(--animation-quick);
+		inset-inline-start: -10px;
 	}
 
-	// Remove when https://github.com/nextcloud/nextcloud-vue/pull/3936 is merged
-	.button-vue__text {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+	&--size &-icon {
+		inset-inline-start: 10px;
 	}
 
-	&--active,
-	&:hover,
-	&:focus,
-	&:active {
-		.button-vue__icon {
-			opacity: 1 !important;
-		}
+	&--active &-icon,
+	&:hover &-icon,
+	&:focus &-icon,
+	&:active &-icon {
+		opacity: 1;
 	}
 }
 </style>