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

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): Ensure actions never overflow filename 
Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed Mar 24, 2025
commit ad31976d47516948e235d8f60ced16f95e4a11f5
35 changes: 28 additions & 7 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,11 +747,12 @@ export default defineComponent({
<style lang="scss">
// Grid mode
tbody.files-list__tbody.files-list__tbody--grid {
--clickable-area: 34px;
--half-clickable-area: calc(var(--clickable-area) / 2);
--item-padding: 16px;
--icon-preview-size: 166px;
--name-height: 32px;
--mtime-height: 16px;
--name-height: 34px;
--mtime-height: calc(var(--font-size-small, 13px) + var(--default-grid-baseline));
--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;
Expand Down Expand Up @@ -825,8 +826,9 @@ tbody.files-list__tbody.files-list__tbody--grid {
height: var(--icon-preview-size);
}

a.files-list__row-name-link {
.files-list__row-name-link {
height: var(--name-height);
padding-inline: 0 !important;
}

.files-list__row-name-text {
Expand All @@ -840,15 +842,34 @@ tbody.files-list__tbody.files-list__tbody--grid {
.files-list__row-mtime {
width: var(--icon-preview-size);
height: var(--mtime-height);
font-size: calc(var(--default-font-size) - 4px);
font-size: var(--font-size-small, 13px);
}

.files-list__row-actions {
--default-clickable-area: var(--clickable-area);

position: absolute;
right: calc(var(--half-clickable-area) / 2);
bottom: calc(var(--mtime-height) / 2);
width: var(--clickable-area);
height: var(--clickable-area);
width: var(--clickable-area);
inset-inline-end: calc(var(--half-clickable-area) / 2);
inset-block-end: calc(var(--mtime-height) / 2);
}
}

@media screen and (max-width: 768px) {
// there is no mtime
tbody.files-list__tbody.files-list__tbody--grid {
--mtime-height: 0px;

// so we move the action to the name
.files-list__row-actions {
inset-block-end: var(--item-padding);
}

// and we need to keep space on the name for the actions
.files-list__row-name-text {
padding-inline-end: var(--clickable-area) !important;
}
}
}
</style>