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
feat(files): Refresh grid view layout 
Signed-off-by: Louis Chemineau <[email protected]>
  • Loading branch information
@artonge @susnux
artonge authored and susnux committed Mar 24, 2025
commit d40463641e34dbbf2fc813a52522864f79a6ea49
85 changes: 58 additions & 27 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ export default defineComponent({

--checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2);
--checkbox-size: 24px;
--clickable-area: 44px;
--clickable-area: var(--default-clickable-area);
--icon-preview-size: 32px;

overflow: auto;
Expand Down Expand Up @@ -748,39 +748,56 @@ export default defineComponent({
// 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));
--item-padding: 16px;
--icon-preview-size: 208px;
--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));
--checkbox-padding: 0px;

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

align-content: center;
align-items: center;
justify-content: space-around;
justify-items: center;
margin: 16px;
width: calc(100% - 32px);

tr {
display: flex;
flex-direction: column;
width: var(--row-width);
height: calc(var(--row-height) + var(--clickable-area));
height: var(--row-height);
border: none;
border-radius: var(--border-radius);
padding: var(--item-padding);
box-sizing: content-box
}

// Checkbox in the top left
.files-list__row-checkbox {
position: absolute;
z-index: 9;
top: 0;
left: 0;
top: calc(var(--item-padding)/2);
left: calc(var(--item-padding)/2);
overflow: hidden;
width: var(--clickable-area);
height: var(--clickable-area);
border-radius: var(--half-clickable-area);
--checkbox-container-size: 44px;
width: var(--checkbox-container-size);
height: var(--checkbox-container-size);

// Add a background to the checkbox so we do not see the image through it.
.checkbox-radio-switch__content::after {
content: '';
width: 16px;
height: 16px;
position: absolute;
left: 14px;
z-index: -1;
background: var(--color-main-background);
}
}

// Star icon in the top right
Expand All @@ -796,30 +813,44 @@ tbody.files-list__tbody.files-list__tbody--grid {
}

.files-list__row-name {
display: grid;
justify-content: stretch;
width: 100%;
height: 100%;
grid-auto-rows: var(--row-height) var(--clickable-area);
display: flex;
flex-direction: column;
width: var(--icon-preview-size);
height: calc(var(--icon-preview-size) + var(--name-height));
// Ensure that the name outline is visible.
overflow: visible;

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);
width: var(--icon-preview-size);
height: var(--icon-preview-size);
}

.files-list__row-icon-preview {
border-radius: 0;
}

a.files-list__row-name-link {
height: var(--name-height);
}

.files-list__row-name-text {
margin: 0;
padding-right: 0;
// Ensure that the outline is not too close to the text.
margin-left: -4px;
padding: 0px 4px;
}
}

.files-list__row-mtime {
width: var(--icon-preview-size);
height: var(--mtime-height);
font-size: calc(var(--default-font-size) - 4px);
}

.files-list__row-actions {
position: absolute;
right: 0;
bottom: 0;
right: calc(var(--half-clickable-area) / 2);
bottom: calc(var(--mtime-height) / 2);
width: var(--clickable-area);
height: var(--clickable-area);
}
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
// 138px + 44px (name) + 15px (grid gap)
return this.gridMode ? (138 + 44 + 15) : 55
// 208px + 32px (name) + 16px (mtime) + 16px (padding) + 22px (grid gap)
return this.gridMode ? (208 + 32 + 16 + 16 + 22) : 55
},
// Grid mode only
itemWidth() {
// 160px + 15px grid gap
return 160 + 15
// 208px + 16px padding + 22px grid gap
return 208 + 16 + 22
},

rowCount() {
Expand Down