nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
nils
2025-11-11 01:57:00 +01:00
parent 26798ac430
commit 3fe325c4ce
2 changed files with 82 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/DocumentsList.jsx
+82 -86
View File
@@ -139,96 +139,92 @@ const DocumentsList = ({
<FolderIcon className="thumb-icon__image" size={32} /> <FolderIcon className="thumb-icon__image" size={32} />
</div> </div>
</td> </td>
<td className="doc-list__name" colSpan={3}> <td className="doc-list__name">
<div className="folder-row__columns"> <div className="doc-list__name-content">
<div className="folder-row__primary"> <span className="doc-name__title">
<div className="doc-list__name-content"> <span className="doc-name__primary">
<span className="doc-name__title"> {isFolderEditing ? (
<span className="doc-name__primary"> <span className="doc-title-edit">
{isFolderEditing ? ( <input
<span className="doc-title-edit"> type="text"
<input ref={attachFolderInputRef}
type="text" value={folderDraftValue}
ref={attachFolderInputRef} onChange={(event) => setFolderDraft(event.target.value)}
value={folderDraftValue} onClick={(event) => event.stopPropagation()}
onChange={(event) => setFolderDraft(event.target.value)} onKeyDown={(event) => {
onClick={(event) => event.stopPropagation()} if (event.key === 'Enter') {
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
submitFolderEditing(folder);
} else if (event.key === 'Escape') {
event.preventDefault();
cancelFolderEditing(event);
}
}}
onBlur={(event) => {
const nextFocus = event.relatedTarget;
if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
cancelFolderEditing();
}
}}
/>
<button
type="button"
className="icon-button"
aria-label="Save name"
title="Save name"
disabled={!canSubmitFolder || isFolderSaving}
onClick={(event) => {
event.stopPropagation();
submitFolderEditing(folder);
}}
>
<CheckIcon />
</button>
<button
type="button"
className="icon-button"
aria-label="Cancel"
title="Cancel"
onClick={(event) => {
cancelFolderEditing(event);
}}
>
<CloseIcon />
</button>
</span>
) : (
<span
className="doc-name__primary-text"
role={allowInlineFolderEdit ? 'button' : undefined}
tabIndex={allowInlineFolderEdit ? 0 : undefined}
onClick={(event) => {
if (!allowInlineFolderEdit) {
return;
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); submitFolderEditing(folder);
beginFolderEditing(folder); } else if (event.key === 'Escape') {
}} event.preventDefault();
onKeyDown={(event) => { cancelFolderEditing(event);
if (!allowInlineFolderEdit) { }
return; }}
} onBlur={(event) => {
if (event.key === 'Enter') { const nextFocus = event.relatedTarget;
event.preventDefault(); if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
event.stopPropagation(); cancelFolderEditing();
beginFolderEditing(folder); }
} }}
}} />
> <button
{folder.name} type="button"
</span> className="icon-button"
)} aria-label="Save name"
title="Save name"
disabled={!canSubmitFolder || isFolderSaving}
onClick={(event) => {
event.stopPropagation();
submitFolderEditing(folder);
}}
>
<CheckIcon />
</button>
<button
type="button"
className="icon-button"
aria-label="Cancel"
title="Cancel"
onClick={(event) => {
cancelFolderEditing(event);
}}
>
<CloseIcon />
</button>
</span> </span>
</span> ) : (
</div> <span
</div> className="doc-name__primary-text"
<div className="folder-row__meta">—</div> role={allowInlineFolderEdit ? 'button' : undefined}
<div className="folder-row__meta">—</div> tabIndex={allowInlineFolderEdit ? 0 : undefined}
onClick={(event) => {
if (!allowInlineFolderEdit) {
return;
}
event.preventDefault();
event.stopPropagation();
beginFolderEditing(folder);
}}
onKeyDown={(event) => {
if (!allowInlineFolderEdit) {
return;
}
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
beginFolderEditing(folder);
}
}}
>
{folder.name}
</span>
)}
</span>
</span>
</div> </div>
</td> </td>
<td>—</td>
<td>—</td>
</tr> </tr>
); );
} }
frontend/src/styles/documents/listing.css
-13
View File
@@ -20,19 +20,6 @@
outline-offset: -2px; outline-offset: -2px;
} }
.folder-row__columns {
display: grid;
grid-template-columns: minmax(0, 1fr) 7rem 7rem;
gap: 0.5rem;
align-items: center;
}
.folder-row__meta {
font-variant-numeric: tabular-nums;
color: var(--muted);
text-align: left;
}
.documents-grid .folder-card.is-drop-target { .documents-grid .folder-card.is-drop-target {
outline: 2px dashed var(--accent-strong, var(--accent)); outline: 2px dashed var(--accent-strong, var(--accent));
outline-offset: 2px; outline-offset: 2px;