Merge pull request #41710 from nextcloud/fix/files-table-header

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

Author: susnux

apps/files/src/components/FilesListTableHeader.vue

@@ -3,7 +3,7 @@
   -
   - @author John Molakvoæ <[email protected]>
   -
-  - @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" />
 

apps/files/src/components/FilesListTableHeaderButton.vue

@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2023 John Molakvoæ <[email protected]>
   -
   - @author John Molakvoæ <[email protected]>
+  - @author Ferdinand Thiessen <[email protected]>
   -
-  - @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
@@ -20,29 +21,33 @@
   -
   -->
 <template>
-	<NcButton :aria-label="sortAriaLabel(name)"
-		:class="{'files-list__column-sort-button--active': sortingMode === mode}"
-		:alignment="mode !== 'size' ? 'start-reverse' : undefined"
-		class="files-list__column-sort-button"
+	<NcButton :class="['files-list__column-sort-button', {
+			'files-list__column-sort-button--active': sortingMode === mode,
+			'files-list__column-sort-button--size': sortingMode === 'size',
+		}]"
+		:aria-label="sortAriaLabel"
+		: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>
 
 <script lang="ts">
 import { translate } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
 import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 import MenuUp from 'vue-material-design-icons/MenuUp.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Vue from 'vue'
 
 import filesSortingMixin from '../mixins/filesSorting.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListTableHeaderButton',
 
 	components: {
@@ -66,44 +71,46 @@ export default Vue.extend({
 		},
 	},
 
-	methods: {
-		sortAriaLabel(column) {
+	computed: {
+		sortAriaLabel() {
 			return this.t('files', 'Sort list by {column}', {
-				column,
+				column: this.name,
 			})
 		},
-
+	},
+	methods: {
 		t: translate,
 	},
 })
 </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;
+
+	&-text {
+		color: var(--color-text-maxcontrast);
+		font-weight: normal;
+	}
 
-	.button-vue__icon {
-		transition-timing-function: linear;
-		transition-duration: .1s;
-		transition-property: opacity;
+	&-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>