Skip to content

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

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

Merged
ShGKme 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 1 commit
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
Prev Previous commit
fix(files): make table view a valid html table 
<div> is not allowed as a <table> child

Signed-off-by: Grigorii K. Shartsev <[email protected]>
  • Loading branch information
@ShGKme
ShGKme committed Nov 17, 2023
commit 346c6173f26536a5136a2a6eb13c9cc83e203183
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
7 changes: 5 additions & 2 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,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 @@ -337,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
62 changes: 32 additions & 30 deletions apps/files/src/components/VirtualList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +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>

<!-- Accessibility table caption for screen readers -->
<caption v-if="caption" class="hidden-visually">
{{ caption }}
</caption>
<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>
<!-- 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>
<!-- 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>
<!-- 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 @@ -244,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.