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

outline

Browse Source
This commit is contained in:
nils
2025-11-11 00:48:07 +01:00
parent 992d7038e5
commit 70b9443e66
11 changed files with 258 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/DocumentsList.jsx
+86 -82
View File
@@ -139,92 +139,96 @@ const DocumentsList = ({
<FolderIcon className="thumb-icon__image" size={32} />
</div>
</td>
<td className="doc-list__name">
<div className="doc-list__name-content">
<span className="doc-name__title">
<span className="doc-name__primary">
{isFolderEditing ? (
<span className="doc-title-edit">
<input
type="text"
ref={attachFolderInputRef}
value={folderDraftValue}
onChange={(event) => setFolderDraft(event.target.value)}
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === 'Enter') {
<td className="doc-list__name" colSpan={3}>
<div className="folder-row__columns">
<div className="folder-row__primary">
<div className="doc-list__name-content">
<span className="doc-name__title">
<span className="doc-name__primary">
{isFolderEditing ? (
<span className="doc-title-edit">
<input
type="text"
ref={attachFolderInputRef}
value={folderDraftValue}
onChange={(event) => setFolderDraft(event.target.value)}
onClick={(event) => event.stopPropagation()}
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();
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>
event.stopPropagation();
beginFolderEditing(folder);
}}
onKeyDown={(event) => {
if (!allowInlineFolderEdit) {
return;
}
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
beginFolderEditing(folder);
}
}}
>
{folder.name}
</span>
)}
</span>
) : (
<span
className="doc-name__primary-text"
role={allowInlineFolderEdit ? 'button' : undefined}
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>
</span>
</div>
</div>
<div className="folder-row__meta">—</div>
<div className="folder-row__meta">—</div>
</div>
</td>
<td>—</td>
<td>—</td>
</tr>
);
}
frontend/src/documents/panel/DocumentsPanel.jsx
-10
View File
@@ -196,7 +196,6 @@ const DocumentsPanel = ({
[handleDocumentPreviewZoom, onInspectDocument],
);
const selectedRowKeySet = useMemo(() => new Set(selectedEntries || []), [selectedEntries]);
const navigableRows = useMemo(
() => entries.map((entry) => ({ key: entry.key, type: entry.type, id: entry.id })),
[entries],
@@ -234,21 +233,12 @@ const DocumentsPanel = ({
}
onFocusedRowChange?.(resolvedKey);
if (!selectedRowKeySet.has(resolvedKey) && typeof onEntrySelection === 'function') {
onEntrySelection(resolvedKey, {
shiftKey: false,
preventDefault: () => {},
});
}
}, [
focusedRowKey,
navigableRowKeys,
navigableRows,
onEntrySelection,
onFocusedRowChange,
selectedEntries,
selectedRowKeySet,
]);
const handlePanelKeyDown = useCallback(
frontend/src/documents/useEntryPointer.js
+19 -22
View File
@@ -14,11 +14,15 @@ export const isPrimaryPointerEvent = (event) => {
return type === 'click' || type === 'pointerdown' || type === 'pointerup';
};
const EntryType = Object.freeze({
document: 'document',
folder: 'folder',
});
export const useEntryPointer = ({
resolveDocumentRowKey,
resolveFolderRowKey,
onSelectDocument,
onSelectFolder,
onSelectEntry,
onInspectDocument,
}) =>
useCallback(
@@ -28,41 +32,34 @@ export const useEntryPointer = ({
}
const { type, id } = entry;
if (type !== 'document' && type !== 'folder') {
if (type !== EntryType.document && type !== EntryType.folder) {
return;
}
const rowKey = entry.key
|| (type === 'document' ? resolveDocumentRowKey?.(id) : resolveFolderRowKey?.(id));
|| (type === EntryType.document ? resolveDocumentRowKey?.(id) : resolveFolderRowKey?.(id));
if (!rowKey) {
return;
}
const modifierClick = isPointerModifierEvent(event);
const primaryClick = isPrimaryPointerEvent(event);
const metadata = { modifierClick, primaryClick, rowKey };
const metadata = { modifierClick, primaryClick, rowKey, type, id };
if (type === 'document') {
if (typeof onSelectDocument === 'function') {
onSelectDocument(id, event, metadata);
}
if (!modifierClick && primaryClick && typeof onInspectDocument === 'function') {
onInspectDocument(id, metadata);
}
return;
if (typeof onSelectEntry === 'function') {
onSelectEntry(entry, event, metadata);
}
if (typeof onSelectFolder === 'function') {
onSelectFolder(id, event, metadata);
if (
type === EntryType.document
&& !modifierClick
&& primaryClick
&& typeof onInspectDocument === 'function'
) {
onInspectDocument(id, metadata);
}
},
[
resolveDocumentRowKey,
resolveFolderRowKey,
onSelectDocument,
onSelectFolder,
onInspectDocument,
],
[resolveDocumentRowKey, resolveFolderRowKey, onSelectEntry, onInspectDocument],
);
export default useEntryPointer;
frontend/src/hooks/documents/useDocumentDragHandlers.js
+30 -8
View File
@@ -29,6 +29,10 @@ const useDocumentDragHandlers = ({
({ documents = [], folders = [] } = {}) => {
destroyDragPreview();
if (typeof document === 'undefined') {
return null;
}
const docEntries = (documents || []).filter(Boolean);
const folderEntries = (folders || []).filter(Boolean);
const totalCount = docEntries.length + folderEntries.length;
@@ -54,6 +58,8 @@ const useDocumentDragHandlers = ({
const wrapper = document.createElement('div');
wrapper.className = 'document-drag-preview';
wrapper.style.setProperty('--drag-preview-size', `${canvasSize}px`);
wrapper.style.width = `${canvasSize}px`;
wrapper.style.height = `${canvasSize}px`;
visibleItems.forEach((item, index) => {
const layer = document.createElement('div');
@@ -101,15 +107,23 @@ const useDocumentDragHandlers = ({
layer.textContent = doc?.title || 'Document';
}
} else {
const folderId = item.payload;
const rowEl = folderId ? document.getElementById(`folder-row-${folderId}`) : null;
const iconEl = rowEl?.querySelector('.thumb-icon');
const payload = item.payload;
const folderId = typeof payload === 'string' ? payload : payload?.id;
const rowEl = folderId
? document.getElementById(`folder-row-${folderId}`)
|| document.getElementById(`folder-card-${folderId}`)
: null;
const iconEl = rowEl?.querySelector('.thumb-icon, .folder-card__icon');
layer.style.width = `${size}px`;
layer.style.height = `${size}px`;
layer.classList.add('document-drag-preview__item--folder');
let content = null;
if (iconEl instanceof HTMLElement) {
content = iconEl.cloneNode(true);
const cloneSource = iconEl.classList.contains('folder-card__icon')
? iconEl.querySelector('svg') || iconEl
: iconEl;
content = cloneSource.cloneNode(true);
content.classList.add('document-drag-preview__folder-thumb');
const svg = content.querySelector('svg');
if (svg) {
@@ -276,11 +290,19 @@ const useDocumentDragHandlers = ({
console.warn('[documents] Failed to populate folder drag payload', error);
}
const previewDocs = effectiveDocumentSelection
.map((id) => documentLookup.get(id) || null)
.filter(Boolean);
createDragPreview({ documents: previewDocs, folders: uniqueFolders });
const previewNode = createDragPreview({
documents: effectiveDocumentSelection
.map((id) => documentLookup.get(id) || null)
.filter(Boolean),
folders: uniqueFolders,
});
event.currentTarget.classList.add('dragging');
if (previewNode) {
const width = previewNode.offsetWidth || 96;
const height = previewNode.offsetHeight || 96;
event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
}
},
[
selectedFolderIds,
frontend/src/hooks/documents/useDocumentsWorkspace.js
+11 -10
View File
@@ -50,6 +50,11 @@ import useDocumentDragHandlers from './useDocumentDragHandlers';
import useDocumentMutations from './useDocumentMutations';
import useDetailWorkspace from '../../detail/useDetailWorkspace';
const EntryType = Object.freeze({
document: 'document',
folder: 'folder',
});
const noop = () => {};
const useDocumentsWorkspace = ({
@@ -1185,19 +1190,15 @@ const useDocumentsWorkspace = ({
const handleEntryPointerCore = useEntryPointerCore({
resolveDocumentRowKey,
resolveFolderRowKey,
onSelectDocument: (documentId, event, { rowKey }) => {
const key = rowKey || resolveDocumentRowKey(documentId);
onSelectEntry: (entry, event, { rowKey, modifierClick, primaryClick }) => {
const { type, id } = entry;
const key = rowKey
|| (type === EntryType.document ? resolveDocumentRowKey(id) : resolveFolderRowKey(id));
if (key) {
handleEntrySelection(key, event);
}
},
onSelectFolder: (folderId, event, { modifierClick, primaryClick, rowKey }) => {
const key = rowKey || resolveFolderRowKey(folderId);
if (key) {
handleEntrySelection(key, event);
}
if (!modifierClick && primaryClick) {
selectFolder(folderId);
if (type === EntryType.folder && !modifierClick && primaryClick) {
selectFolder(id);
}
},
});
frontend/src/hooks/documents/useFolderTree.js
+2 -3
View File
@@ -85,9 +85,8 @@ const useFolderTree = ({
})();
setFocusedDocumentId(nextFocus);
selectionAnchorRef.current = nextDocKeys.length
? nextDocKeys[nextDocKeys.length - 1]
: null;
const nextAnchor = mergedSelection.length ? mergedSelection[mergedSelection.length - 1] : null;
selectionAnchorRef.current = nextAnchor;
selectionOrderRef.current = mergedSelection;
setSelectionOrder(mergedSelection);
},
frontend/src/styles/documents/drag-preview.css
+76
View File
@@ -0,0 +1,76 @@
.document-drag-preview {
position: fixed;
pointer-events: none;
top: -9999px;
left: -9999px;
width: var(--drag-preview-size, 96px);
height: var(--drag-preview-size, 96px);
z-index: 9999;
}
.document-drag-preview__item {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
border-radius: 6px;
box-shadow: 0 6px 12px var(--shadow-pop);
overflow: hidden;
background-color: var(--overlay-dim);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
transform: translate(-50%, -50%) rotate(var(--rotation-deg, 0deg));
transform-origin: center;
}
.document-drag-preview__item--folder {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.document-drag-preview__item--image {
background-color: #000;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.document-drag-preview__item .document-thumbnail,
.document-drag-preview__item img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.document-drag-preview__item .thumb-placeholder,
.document-drag-preview__item .thumb-placeholder * {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.document-drag-preview__folder-thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.document-drag-preview__folder-thumb svg {
width: 48px;
height: 48px;
color: var(--accent-strong, var(--accent));
}
frontend/src/styles/documents/listing.css
+22 -2
View File
@@ -13,8 +13,28 @@
min-height: 0;
}
.folder-row.is-drop-target {
outline: 2px dashed var(--accent);
.documents-panel tr.folder.is-drop-target {
outline: 2px dashed var(--accent-strong, var(--accent));
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 {
outline: 2px dashed var(--accent-strong, var(--accent));
outline-offset: 2px;
}
frontend/src/styles/documents/viewer.css
+6
View File
@@ -63,6 +63,12 @@
pointer-events: none;
}
.document-drag-preview__item--folder {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.document-drag-preview__folder-thumb {
width: 100%;
height: 100%;
frontend/src/styles/index.css
+1
View File
@@ -6,6 +6,7 @@
@import './documents/controls.css';
@import './layout/structure.css';
@import './documents/viewer.css';
@import './documents/drag-preview.css';
@import './documents/tags-correspondents.css';
@import './documents/panel-sections.css';
@import './sidebar/sidebar.css';
frontend/src/styles/sidebar/sidebar.css
+5
View File
@@ -23,6 +23,11 @@
-webkit-user-select: none;
}
.sidebar .folder-row.is-drop-target {
outline: 2px dashed var(--accent-strong, var(--accent));
outline-offset: 2px;
}
.folder-row .name-wrap {
display: inline-flex;
align-items: center;