Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(files): make files list valid table layout #41577

Merged
merged 2 commits into from
Nov 17, 2023
Merged

fix(files): make files list valid table layout #41577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c18c6c4
fix(files): make caption a direct child of the files table
ShGKme Nov 17, 2023
346c617
fix(files): make table view a valid html table
ShGKme Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/files/src/components/FileEntry/FileEntryActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export default Vue.extend({
* sure there is one at the time we call it.
*/
getBoundariesElement() {
return document.querySelector('.app-content > table.files-list')
return document.querySelector('.app-content > .files-list')
},
},

Expand Down
22 changes: 13 additions & 9 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,9 @@
filesListWidth,
}"
:scroll-to-index="scrollToIndex"
:caption="caption"
@scroll="onScroll">
<!-- Accessibility description and headers -->
<template #before>
<!-- Accessibility description -->
<caption class="hidden-visually">
{{ currentView.caption || t('files', 'List of files and folders.') }}
{{ t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.') }}
</caption>

<!-- Headers -->
<FilesListHeader v-for="header in sortedHeaders"
:key="header.id"
Expand Down Expand Up @@ -200,6 +194,13 @@ export default Vue.extend({
canUpload() {
return this.currentFolder && (this.currentFolder.permissions & Permission.CREATE) !== 0
},

caption() {
const defaultCaption = t('files', 'List of files and folders.')
const viewCaption = this.currentView.caption || defaultCaption
const virtualListNote = t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.')
return viewCaption + '\n' + virtualListNote
},
},

watch: {
Expand Down Expand Up @@ -304,12 +305,11 @@ export default Vue.extend({
--clickable-area: 44px;
--icon-preview-size: 32px;

display: block;
overflow: auto;
height: 100%;
will-change: scroll-position;

&::v-deep {
& :deep() {
// Table head, body and footer
tbody {
will-change: padding;
Expand All @@ -336,6 +336,10 @@ export default Vue.extend({
flex-direction: column;
}

.files-list__table {
display: block;
}

.files-list__thead,
.files-list__tfoot {
display: flex;
Expand Down
70 changes: 42 additions & 28 deletions apps/files/src/components/VirtualList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
<template>
<table class="files-list" data-cy-files-list>
<div class="files-list" data-cy-files-list>
<!-- Header -->
<div ref="before" class="files-list__before">
<slot name="before" />
</div>

<!-- Header -->
<thead ref="thead" class="files-list__thead" data-cy-files-list-thead>
<slot name="header" />
</thead>

<!-- Body -->
<tbody :style="tbodyStyle"
class="files-list__tbody"
:class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
data-cy-files-list-tbody>
<component :is="dataComponent"
v-for="({key, item}, i) in renderedItems"
:key="key"
:source="item"
:index="i"
v-bind="extraProps" />
</tbody>

<!-- Footer -->
<tfoot v-show="isReady"
class="files-list__tfoot"
data-cy-files-list-tfoot>
<slot name="footer" />
</tfoot>
</table>
<table class="files-list__table">
<!-- Accessibility table caption for screen readers -->
<caption v-if="caption" class="hidden-visually">
{{ caption }}
</caption>

<!-- Header -->
<thead ref="thead" class="files-list__thead" data-cy-files-list-thead>
<slot name="header" />
</thead>

<!-- Body -->
<tbody :style="tbodyStyle"
class="files-list__tbody"
:class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
data-cy-files-list-tbody>
<component :is="dataComponent"
v-for="({key, item}, i) in renderedItems"
:key="key"
:source="item"
:index="i"
v-bind="extraProps" />
</tbody>

<!-- Footer -->
<tfoot v-show="isReady"
class="files-list__tfoot"
data-cy-files-list-tfoot>
<slot name="footer" />
</tfoot>
</table>
</div>
</template>

<script lang="ts">
Expand Down Expand Up @@ -75,6 +82,13 @@ export default Vue.extend({
type: Boolean,
default: false,
},
/**
* Visually hidden caption for the table accesibility
*/
caption: {
type: String,
default: '',
},
},

data() {
Expand Down Expand Up @@ -232,13 +246,13 @@ export default Vue.extend({

onScroll() {
this._onScrollHandle ??= requestAnimationFrame(() => {
this._onScrollHandle = null;
this._onScrollHandle = null
const topScroll = this.$el.scrollTop - this.beforeHeight
const index = Math.floor(topScroll / this.itemHeight) * this.columnCount
// Max 0 to prevent negative index
this.index = Math.max(0, index)
this.$emit('scroll')
});
})
},
},
})
Expand Down
4 changes: 2 additions & 2 deletions dist/files-main.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/files-main.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading