Skip to content

[stable29] feat(files): Refresh grid view layout #51470

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
susnux merged 8 commits into from
Mar 24, 2025
Merged

[stable29] feat(files): Refresh grid view layout #51470

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
01cd1e0
feat(files): Display mtime in grid view
artonge Jul 4, 2024
d404636
feat(files): Refresh grid view layout
artonge Jul 4, 2024
39ea9a9
fix(files): Correctly center the checkbox's background in grid view
artonge Jul 8, 2024
7f134dc
fix(files): Add rounded corners back in grid view
artonge Jul 9, 2024
35a00d4
fix(files): Reduce preview size in grid view mode
artonge Jul 22, 2024
e19e6b7
fix(files): Grid view virtual scrolling computations
artonge Jul 22, 2024
ad31976
fix(files): Ensure actions never overflow filename
susnux Mar 13, 2025
0362aba
chore: compile assets
susnux Mar 13, 2025
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
Next Next commit
fix(files): Grid view virtual scrolling computations 
Signed-off-by: Louis Chemineau <[email protected]>
  • Loading branch information
@artonge @susnux
artonge authored and susnux committed Mar 24, 2025
commit e19e6b720ee46d8cafc29403a8ef2f9454edadab
6 changes: 2 additions & 4 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -752,13 +752,12 @@ tbody.files-list__tbody.files-list__tbody--grid {
--icon-preview-size: 166px;
--name-height: 32px;
--mtime-height: 16px;
--row-width: calc(var(--icon-preview-size));
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height));
--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
--checkbox-padding: 0px;

display: grid;
grid-template-columns: repeat(auto-fill, var(--row-width));
gap: 22px;

align-content: center;
align-items: center;
Expand All @@ -775,7 +774,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
border: none;
border-radius: var(--border-radius-large);
padding: var(--item-padding);
box-sizing: content-box;
}

// Checkbox in the top left
Expand Down
8 changes: 4 additions & 4 deletions apps/files/src/components/VirtualList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,13 @@ export default Vue.extend({

itemHeight() {
// Align with css in FilesListVirtual
// 166px + 32px (name) + 16px (mtime) + 16px (padding) + 22px (grid gap)
return this.gridMode ? (166 + 32 + 16 + 16 + 22) : 55
// 166px + 32px (name) + 16px (mtime) + 16px (padding)
return this.gridMode ? (166 + 32 + 16 + 16) : 55
},
// Grid mode only
itemWidth() {
// 166px + 16px padding + 22px grid gap
return 166 + 16 + 22
// 166px + 16px padding
return 166 + 16
},

rowCount() {
Expand Down