cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): trash: show action buttons in grid view

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-07-20 00:55:48 +02:00
parent 146a1a32bd
commit e3c3f6fe24
2 changed files with 57 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/styles/ported/resourceList.css
+47 -46
View File
@@ -708,13 +708,35 @@
outline-offset: 2px;
}
/* More actions button (three dots) — top-right of the thumbnail on a scrim. */
/* Grid cards surface actions through the corner kebab (.file-actions) + the
favorite star, both absolutely positioned below. The inline per-row action
buttons (share/move/rename/delete) belong to the list view only — hide them
here so they don't stack up along the bottom edge of the card. */
.files-grid-view .file-item .action-cell .btn-action {
display: none;
/* ── Grid card action cluster ─────────────────────────────────────
Every action a row can surface — favorite star, `.file-actions`
kebab, per-section `.btn-action` icons (e.g. trash's Restore /
Delete permanently) — lives in a single `.action-cell` container
pinned to the top-right of the card. The container carries the
position + hover-reveal + gap; its children just supply their
own chip visuals (30x30 scrim pill, etc.), no more one-off
absolute positioning per child.
Old rules put `.file-actions` and `.favorite-star` at hand-crafted
absolute coordinates and hid `.btn-action` entirely — that made
trash's per-item buttons invisible in grid view. The unified
container reads as one design pattern and takes whatever children
the row template hands it. */
.files-grid-view .file-item .action-cell {
position: absolute;
top: calc(var(--space-3) + 8px);
right: calc(var(--space-3) + 8px);
z-index: 10;
display: flex;
gap: var(--space-1);
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover .action-cell,
.files-grid-view .file-item:focus-within .action-cell,
.files-grid-view .file-item .action-cell:has(.favorite-star.active) {
opacity: 1;
}
/* The favorite state is already shown by the corner star button, so the inline
@@ -723,34 +745,32 @@
display: none;
}
.files-grid-view .file-item .file-actions {
position: absolute;
top: calc(var(--space-3) + 8px);
right: calc(var(--space-3) + 8px);
/* Chip visuals for anything inside the corner cluster — the kebab, the star,
any `.btn-action`. Uniform 30x30 scrim pill so they line up in the flex row. */
.files-grid-view .file-item .action-cell .file-actions,
.files-grid-view .file-item .action-cell .favorite-star,
.files-grid-view .file-item .action-cell .btn-action {
position: static;
width: 30px;
height: 30px;
border-radius: var(--radius-full);
padding: 0;
border: none;
border-radius: var(--radius-full);
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 10;
cursor: pointer;
color: var(--color-text);
font-size: var(--text-md);
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover .file-actions {
cursor: pointer;
/* Opacity/hover-reveal moves up to `.action-cell` — children stay opaque. */
opacity: 1;
}
.files-grid-view .file-item .file-actions:hover {
.files-grid-view .file-item .action-cell .file-actions:hover {
color: var(--color-accent);
}
@@ -782,34 +802,16 @@
line-height: var(--leading-none);
}
/* Favorite star — top-right of the thumbnail, left of the kebab, on a scrim. */
/* Favorite star — visual overrides only. Position, hover-reveal, chip
geometry all come from the shared corner-cluster rule on
`.files-grid-view .file-item .action-cell`. What's left here is just
the star's per-state colour: subtle at rest, active-gold when the
item is a favorite. `.active` still bumps the parent cluster's
opacity so an unhovered card can still show its star. */
.files-grid-view .file-item button.favorite-star {
position: absolute;
top: calc(var(--space-3) + 8px);
right: calc(var(--space-3) + 8px + 34px);
width: 30px;
height: 30px;
border-radius: var(--radius-full);
border: none;
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 12;
cursor: pointer;
color: var(--color-text-subtle);
font-size: 15px;
padding: 0;
line-height: var(--leading-none);
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover button.favorite-star {
opacity: 1;
}
.files-grid-view .file-item button.favorite-star:hover {
@@ -817,7 +819,6 @@
}
.files-grid-view .file-item button.favorite-star.active {
opacity: 1;
color: var(--color-star-text-hover);
}
frontend/src/routes/trash/+page.svelte
+10
View File
@@ -400,4 +400,14 @@
color: var(--color-danger-text);
font-weight: var(--weight-semibold);
}
/* Grid-corner action-cell layout + chip visuals now live in the
shared `ported/resourceList.css`; every section using ResourceList
picks them up. What stays here is only the trash-specific danger
red on the "Delete permanently" button — `--color-error-text` is
the right red-text token (the shared `.file-actions:hover` accent
colour still lands on the plain `.btn-action` restore button). */
:global(.files-grid-view .file-item .action-cell .btn-action--delete:hover) {
color: var(--color-error-text);
}
</style>