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
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:
@@ -708,6 +708,18 @@
|
|||||||
outline-offset: -2px;
|
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 {
|
:root[data-theme="retro"] .file-media {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|||||||
@@ -608,6 +608,7 @@ html.reaction-picker-open body {
|
|||||||
grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr);
|
grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 4.25rem;
|
min-height: 4.25rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-browser.is-list .file-card:hover,
|
.file-browser.is-list .file-card:hover,
|
||||||
|
|||||||
@@ -23,6 +23,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (fileBrowser && fileContextMenu) {
|
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) => {
|
fileBrowser.addEventListener("contextmenu", (event) => {
|
||||||
const card = event.target.closest("[data-file-context]");
|
const card = event.target.closest("[data-file-context]");
|
||||||
if (!card) {
|
if (!card) {
|
||||||
|
|||||||
Reference in New Issue
Block a user