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

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

diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
index e619acf06233c15b0dda5a8181debb3027aafab9..fef7c7a213e1c5cec84d6d4e069d5a4ccd9657c3 100644 (file)
--- 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 659aee8e456a53793936da0ccdab66b65f9c93e3..a996f974532845516357c450b2f8e4b6e7b1a5ad 100644 (file)
--- 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
@@ -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>