feat(file-browser): make entire file card clickable in list view
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m45s

Improve the user experience in the file browser list view by allowing users to click anywhere on a file card to open it, rather than just the specific link.

- Add a click event listener to the file browser to handle navigation when clicking a card in list view.
- Ensure interactive elements (like buttons or inputs) inside the card do not trigger the card-wide click.
- Add `cursor: pointer` to list view file cards to indicate they are clickable.
- Update retro theme CSS to style the entire card on hover and focus.
This commit is contained in:
2026-06-02 14:45:55 +03:00
parent cf5d8bb50d
commit d3b6a86753
3 changed files with 35 additions and 0 deletions

View File

@@ -708,6 +708,18 @@
outline-offset: -2px;
}
:root[data-theme="retro"] .file-browser.is-list .file-card:hover,
:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within {
background: transparent;
outline: 2px solid #000078;
outline-offset: -2px;
}
:root[data-theme="retro"] .file-browser.is-list .file-card:hover .file-open,
:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within .file-open {
outline: 0;
}
:root[data-theme="retro"] .file-media {
border: 0;
border-radius: 0;

View File

@@ -608,6 +608,7 @@ html.reaction-picker-open body {
grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr);
align-items: center;
min-height: 4.25rem;
cursor: pointer;
}
.file-browser.is-list .file-card:hover,

View File

@@ -23,6 +23,28 @@
}
if (fileBrowser && fileContextMenu) {
document.body.appendChild(fileContextMenu);
fileBrowser.addEventListener("click", (event) => {
if (!fileBrowser.classList.contains("is-list")) {
return;
}
if (event.target.closest("a, button, input, select, textarea")) {
return;
}
const card = event.target.closest("[data-file-context]");
const link = card ? card.querySelector(".file-open") : null;
if (!link) {
return;
}
event.preventDefault();
if (link.target === "_blank") {
window.Warpbox.openInNewTab(link.href);
return;
}
window.location.href = link.href;
});
fileBrowser.addEventListener("contextmenu", (event) => {
const card = event.target.closest("[data-file-context]");
if (!card) {