diff options
Diffstat (limited to 'apps/files/src/components/FilesListVirtual.vue')
| -rw-r--r-- | apps/files/src/components/FilesListVirtual.vue | 108 |
1 files changed, 104 insertions, 4 deletions
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 914cfa7ec4d..e4c9694eda7 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -31,7 +31,7 @@ :data-component="FileEntry" :data-key="'source'" :data-sources="nodes" - :item-height="56" + :grid-mode="false" :extra-props="{ isMtimeAvailable, isSizeAvailable, @@ -90,7 +90,7 @@ import Vue from 'vue' import { action as sidebarAction } from '../actions/sidebarAction.ts' import DragAndDropNotice from './DragAndDropNotice.vue' -import FileEntry from './FileEntry.vue' +import FileEntry from './FileEntryGrid.vue' import FilesListHeader from './FilesListHeader.vue' import FilesListTableFooter from './FilesListTableFooter.vue' import FilesListTableHeader from './FilesListTableHeader.vue' @@ -302,6 +302,14 @@ export default Vue.extend({ width: 100%; // Necessary for virtual scrolling absolute position: relative; + + /* Hover effect on tbody lines only */ + tr { + &:hover, + &:focus { + background-color: var(--color-background-dark); + } + } } // Before table and thead @@ -340,6 +348,7 @@ export default Vue.extend({ user-select: none; border-bottom: 1px solid var(--color-border); user-select: none; + height: var(--row-height); } td, th { @@ -485,8 +494,8 @@ export default Vue.extend({ // Folder overlay &-overlay { position: absolute; - max-height: 18px; - max-width: 18px; + max-height: calc(var(--icon-preview-size) * 0.5); + max-width: calc(var(--icon-preview-size) * 0.5); color: var(--color-main-background); // better alignment with the folder icon margin-top: 2px; @@ -533,6 +542,8 @@ export default Vue.extend({ .files-list__row-name-ext { color: var(--color-text-maxcontrast); + // always show the extension + overflow: visible; } } @@ -556,6 +567,7 @@ export default Vue.extend({ } .files-list__row-actions { + // take as much space as necessary width: auto; // Add margin to all cells after the actions @@ -596,3 +608,91 @@ export default Vue.extend({ } } </style> + +<style lang="scss"> +// Grid mode +tbody.files-list__tbody.files-list__tbody--grid { + --half-clickable-area: calc(var(--clickable-area) / 2); + --row-width: 160px; + // We use half of the clickable area as visual balance margin + --row-height: calc(var(--row-width) - var(--half-clickable-area)); + --icon-preview-size: calc(var(--row-width) - var(--clickable-area)); + --checkbox-padding: 0px; + + display: grid; + grid-template-columns: repeat(auto-fill, var(--row-width)); + grid-gap: 15px; + row-gap: 15px; + + align-content: center; + align-items: center; + justify-content: space-around; + justify-items: center; + + tr { + width: var(--row-width); + height: calc(var(--row-height) + var(--clickable-area)); + border: none; + border-radius: var(--border-radius); + } + + // Checkbox in the top left + .files-list__row-checkbox { + position: absolute; + z-index: 9; + top: 0; + left: 0; + overflow: hidden; + width: var(--clickable-area); + height: var(--clickable-area); + border-radius: var(--half-clickable-area); + } + + // Star icon in the top right + .files-list__row-icon-favorite { + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + width: var(--clickable-area); + height: var(--clickable-area); + } + + .files-list__row-name { + display: grid; + justify-content: stretch; + width: 100%; + height: 100%; + grid-auto-rows: var(--row-height) var(--clickable-area); + + span.files-list__row-icon { + width: 100%; + height: 100%; + // Visual balance, we use half of the clickable area + // as a margin around the preview + padding-top: var(--half-clickable-area); + } + + a.files-list__row-name-link { + // Minus action menu + width: calc(100% - var(--clickable-area)); + height: var(--clickable-area); + } + + .files-list__row-name-text { + margin: 0; + padding-right: 0; + } + } + + .files-list__row-actions { + position: absolute; + right: 0; + bottom: 0; + width: var(--clickable-area); + height: var(--clickable-area); + } +} +</style> |