Compare commits
8
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 nils
|
6a04d29eed | ||
|
nils
|
10e28cc5e2 | ||
|
nils
|
970678986a | ||
|
nils
|
40e45f3a01 | ||
|
nils
|
518b79bec6 | ||
|
nils
|
01fb4e308a | ||
|
nils
|
b6300ffa30 | ||
|
nils
|
b163a07e84 |
@@ -119,10 +119,10 @@ function CorrespondentsPanel({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="correspondents-panel">
|
<section className="correspondents-panel">
|
||||||
<div className="column-header">
|
<div className="panel-section__header">
|
||||||
<div className="column-header__titles">
|
<div className="panel-section__titles">
|
||||||
<h2>Correspondents</h2>
|
<h2>Correspondents</h2>
|
||||||
<div className="column-subtitle">{correspondents.length} total</div>
|
<div className="panel-section__subtitle">{correspondents.length} total</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="header-actions correspondents-actions">
|
<div className="header-actions correspondents-actions">
|
||||||
<form className="correspondents-actions__form" onSubmit={handleCreate}>
|
<form className="correspondents-actions__form" onSubmit={handleCreate}>
|
||||||
@@ -147,7 +147,7 @@ function CorrespondentsPanel({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="column-body tags-panel__body">
|
<div className="panel-section__body tags-panel__body">
|
||||||
{correspondents.length === 0 ? (
|
{correspondents.length === 0 ? (
|
||||||
<div className="empty-state">No correspondents created yet.</div>
|
<div className="empty-state">No correspondents created yet.</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import {
|
import {
|
||||||
DownloadIcon,
|
DownloadIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
@@ -15,6 +14,7 @@ import { formatFileSize } from '../utils/format';
|
|||||||
import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
|
import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
|
||||||
import { useAssetNavigator } from '../hooks/useAssetNavigator';
|
import { useAssetNavigator } from '../hooks/useAssetNavigator';
|
||||||
import { CORRESPONDENT_ROLES } from '../constants/correspondents';
|
import { CORRESPONDENT_ROLES } from '../constants/correspondents';
|
||||||
|
import PreviewZoomOverlay from './PreviewZoomOverlay';
|
||||||
|
|
||||||
const MAX_PREVIEW_STACK_ITEMS = 15;
|
const MAX_PREVIEW_STACK_ITEMS = 15;
|
||||||
|
|
||||||
@@ -351,35 +351,6 @@ const DetailPanel = ({
|
|||||||
const [ocrLoading, setOcrLoading] = useState(false);
|
const [ocrLoading, setOcrLoading] = useState(false);
|
||||||
const [ocrError, setOcrError] = useState(null);
|
const [ocrError, setOcrError] = useState(null);
|
||||||
const [zoomedPreview, setZoomedPreview] = useState(null);
|
const [zoomedPreview, setZoomedPreview] = useState(null);
|
||||||
const [zoomNative, setZoomNative] = useState(false);
|
|
||||||
const [zoomPan, setZoomPan] = useState({ x: 0, y: 0 });
|
|
||||||
const [isZoomDragging, setIsZoomDragging] = useState(false);
|
|
||||||
const zoomStageRef = useRef(null);
|
|
||||||
const zoomImageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
|
|
||||||
const zoomDragRef = useRef(null);
|
|
||||||
const zoomSkipClickRef = useRef(false);
|
|
||||||
|
|
||||||
const clampPan = useCallback(
|
|
||||||
(x, y) => {
|
|
||||||
const stage = zoomStageRef.current;
|
|
||||||
const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
|
|
||||||
if (!stage || !naturalWidth || !naturalHeight) {
|
|
||||||
return { x: 0, y: 0 };
|
|
||||||
}
|
|
||||||
const stageRect = stage.getBoundingClientRect();
|
|
||||||
if (stageRect.width <= 0 || stageRect.height <= 0) {
|
|
||||||
return { x: 0, y: 0 };
|
|
||||||
}
|
|
||||||
const imageWidth = zoomNative ? naturalWidth : Math.min(naturalWidth, stageRect.width);
|
|
||||||
const imageHeight = zoomNative ? naturalHeight : Math.min(naturalHeight, stageRect.height);
|
|
||||||
const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
|
|
||||||
const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
|
|
||||||
const clampedX = Math.min(Math.max(x, -limitX), limitX);
|
|
||||||
const clampedY = Math.min(Math.max(y, -limitY), limitY);
|
|
||||||
return { x: clampedX, y: clampedY };
|
|
||||||
},
|
|
||||||
[zoomNative],
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!singleDoc) {
|
if (!singleDoc) {
|
||||||
@@ -413,51 +384,6 @@ const DetailPanel = ({
|
|||||||
setZoomedPreview(null);
|
setZoomedPreview(null);
|
||||||
}, [selectionKey]);
|
}, [selectionKey]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!zoomedPreview) {
|
|
||||||
setZoomNative(false);
|
|
||||||
setZoomPan({ x: 0, y: 0 });
|
|
||||||
setIsZoomDragging(false);
|
|
||||||
zoomDragRef.current = null;
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
}
|
|
||||||
}, [zoomedPreview]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
if (zoomNative) {
|
|
||||||
setZoomPan((current) => {
|
|
||||||
const clamped = clampPan(current.x, current.y);
|
|
||||||
if (clamped.x === current.x && clamped.y === current.y) {
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
return clamped;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setZoomPan({ x: 0, y: 0 });
|
|
||||||
setIsZoomDragging(false);
|
|
||||||
zoomDragRef.current = null;
|
|
||||||
}
|
|
||||||
}, [zoomNative, clampPan]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!zoomNative) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
const handleResize = () => {
|
|
||||||
setZoomPan((current) => {
|
|
||||||
const clamped = clampPan(current.x, current.y);
|
|
||||||
if (clamped.x === current.x && clamped.y === current.y) {
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
return clamped;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
window.addEventListener('resize', handleResize);
|
|
||||||
handleResize();
|
|
||||||
return () => window.removeEventListener('resize', handleResize);
|
|
||||||
}, [zoomNative, clampPan]);
|
|
||||||
|
|
||||||
const startTitleEdit = useCallback(() => {
|
const startTitleEdit = useCallback(() => {
|
||||||
if (!singleDoc) return;
|
if (!singleDoc) return;
|
||||||
setTitleEditDocId(singleDoc.id);
|
setTitleEditDocId(singleDoc.id);
|
||||||
@@ -826,22 +752,10 @@ const DetailPanel = ({
|
|||||||
mode: config.mode,
|
mode: config.mode,
|
||||||
docId: config.docId ?? null,
|
docId: config.docId ?? null,
|
||||||
});
|
});
|
||||||
setZoomNative(false);
|
|
||||||
setZoomPan({ x: 0, y: 0 });
|
|
||||||
setIsZoomDragging(false);
|
|
||||||
zoomDragRef.current = null;
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const closeZoomPreview = useCallback(() => {
|
const closeZoomPreview = useCallback(() => {
|
||||||
setZoomedPreview(null);
|
setZoomedPreview(null);
|
||||||
setZoomNative(false);
|
|
||||||
setZoomPan({ x: 0, y: 0 });
|
|
||||||
setIsZoomDragging(false);
|
|
||||||
zoomDragRef.current = null;
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSingleZoom = useCallback(
|
const handleSingleZoom = useCallback(
|
||||||
@@ -863,160 +777,6 @@ const DetailPanel = ({
|
|||||||
[openZoomPreview, stackTopDocId, topHasPreview],
|
[openZoomPreview, stackTopDocId, topHasPreview],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleZoomImageLoad = useCallback(
|
|
||||||
(event) => {
|
|
||||||
zoomImageMetricsRef.current = {
|
|
||||||
naturalWidth: event.currentTarget.naturalWidth || 0,
|
|
||||||
naturalHeight: event.currentTarget.naturalHeight || 0,
|
|
||||||
};
|
|
||||||
setZoomPan((current) => {
|
|
||||||
const clamped = clampPan(current.x, current.y);
|
|
||||||
return { x: clamped.x, y: clamped.y };
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[clampPan],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleZoomImageClick = useCallback(
|
|
||||||
(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
if (zoomSkipClickRef.current) {
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!zoomNative) {
|
|
||||||
const stage = zoomStageRef.current;
|
|
||||||
const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
|
|
||||||
if (stage && naturalWidth && naturalHeight) {
|
|
||||||
const stageRect = stage.getBoundingClientRect();
|
|
||||||
const imageRect = event.currentTarget.getBoundingClientRect();
|
|
||||||
const clickX = event.clientX - imageRect.left;
|
|
||||||
const clickY = event.clientY - imageRect.top;
|
|
||||||
const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
|
|
||||||
const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
|
|
||||||
const focusX = naturalWidth * ratioX;
|
|
||||||
const focusY = naturalHeight * ratioY;
|
|
||||||
const halfWidth = naturalWidth / 2;
|
|
||||||
const halfHeight = naturalHeight / 2;
|
|
||||||
const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
|
|
||||||
const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
|
|
||||||
let targetPanX = -(focusX - halfWidth);
|
|
||||||
let targetPanY = -(focusY - halfHeight);
|
|
||||||
targetPanX = Math.min(Math.max(targetPanX, -limitX), limitX);
|
|
||||||
targetPanY = Math.min(Math.max(targetPanY, -limitY), limitY);
|
|
||||||
setZoomPan({ x: targetPanX, y: targetPanY });
|
|
||||||
} else {
|
|
||||||
setZoomPan({ x: 0, y: 0 });
|
|
||||||
}
|
|
||||||
setZoomNative(true);
|
|
||||||
} else {
|
|
||||||
setZoomNative(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[zoomNative],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleZoomImagePointerDown = useCallback(
|
|
||||||
(event) => {
|
|
||||||
if (!zoomNative || event.button !== 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
zoomSkipClickRef.current = false;
|
|
||||||
zoomDragRef.current = {
|
|
||||||
pointerId: event.pointerId,
|
|
||||||
originX: zoomPan.x,
|
|
||||||
originY: zoomPan.y,
|
|
||||||
startX: event.clientX,
|
|
||||||
startY: event.clientY,
|
|
||||||
moved: false,
|
|
||||||
};
|
|
||||||
event.currentTarget.setPointerCapture(event.pointerId);
|
|
||||||
},
|
|
||||||
[zoomNative, zoomPan],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleZoomImagePointerMove = useCallback(
|
|
||||||
(event) => {
|
|
||||||
const drag = zoomDragRef.current;
|
|
||||||
if (!drag || drag.pointerId !== event.pointerId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const deltaX = event.clientX - drag.startX;
|
|
||||||
const deltaY = event.clientY - drag.startY;
|
|
||||||
if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
|
|
||||||
drag.moved = true;
|
|
||||||
setIsZoomDragging(true);
|
|
||||||
}
|
|
||||||
if (drag.moved) {
|
|
||||||
const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
|
|
||||||
setZoomPan((current) =>
|
|
||||||
current.x === clamped.x && current.y === clamped.y ? current : clamped,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[clampPan],
|
|
||||||
);
|
|
||||||
|
|
||||||
const endZoomDrag = useCallback(() => {
|
|
||||||
zoomDragRef.current = null;
|
|
||||||
setIsZoomDragging(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleZoomImagePointerUp = useCallback(
|
|
||||||
(event) => {
|
|
||||||
const drag = zoomDragRef.current;
|
|
||||||
if (!drag || drag.pointerId !== event.pointerId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
||||||
zoomSkipClickRef.current = Boolean(drag.moved);
|
|
||||||
endZoomDrag();
|
|
||||||
},
|
|
||||||
[endZoomDrag],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleZoomImagePointerCancel = useCallback(
|
|
||||||
(event) => {
|
|
||||||
const drag = zoomDragRef.current;
|
|
||||||
if (!drag || drag.pointerId !== event.pointerId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
||||||
zoomSkipClickRef.current = true;
|
|
||||||
endZoomDrag();
|
|
||||||
},
|
|
||||||
[endZoomDrag],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleZoomStageWheel = useCallback(
|
|
||||||
(event) => {
|
|
||||||
if (!zoomNative) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
|
|
||||||
const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
|
|
||||||
if (!deltaX && !deltaY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let updated = false;
|
|
||||||
setZoomPan((current) => {
|
|
||||||
const clamped = clampPan(current.x - deltaX, current.y - deltaY);
|
|
||||||
if (clamped.x === current.x && clamped.y === current.y) {
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
updated = true;
|
|
||||||
return clamped;
|
|
||||||
});
|
|
||||||
if (updated) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[zoomNative, clampPan],
|
|
||||||
);
|
|
||||||
|
|
||||||
const zoomDisplay = useMemo(() => {
|
const zoomDisplay = useMemo(() => {
|
||||||
if (!zoomedPreview) {
|
if (!zoomedPreview) {
|
||||||
return null;
|
return null;
|
||||||
@@ -1089,50 +849,6 @@ const DetailPanel = ({
|
|||||||
}
|
}
|
||||||
}, [zoomedPreview, zoomDisplay]);
|
}, [zoomedPreview, zoomDisplay]);
|
||||||
|
|
||||||
const zoomDisplayUrl = zoomDisplay?.url;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!zoomDisplayUrl) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setZoomPan((current) => {
|
|
||||||
const clamped = clampPan(current.x, current.y);
|
|
||||||
if (clamped.x === current.x && clamped.y === current.y) {
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
return clamped;
|
|
||||||
});
|
|
||||||
}, [zoomDisplayUrl, clampPan]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!zoomedPreview) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
const handleKeyDown = (event) => {
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
setZoomedPreview(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (event.key === 'ArrowLeft') {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
if (zoomDisplay?.canGoPrev) {
|
|
||||||
zoomDisplay.goPrev?.();
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (event.key === 'ArrowRight') {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
if (zoomDisplay?.canGoNext) {
|
|
||||||
zoomDisplay.goNext?.();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('keydown', handleKeyDown);
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
||||||
}, [zoomedPreview, zoomDisplay]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof ensureAssetUrl !== 'function') {
|
if (typeof ensureAssetUrl !== 'function') {
|
||||||
return;
|
return;
|
||||||
@@ -1196,38 +912,6 @@ const DetailPanel = ({
|
|||||||
stackPreviewNavigator.canGoNext,
|
stackPreviewNavigator.canGoNext,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const zoomImageStyle = useMemo(() => {
|
|
||||||
if (!zoomNative) {
|
|
||||||
return {
|
|
||||||
cursor: 'zoom-in',
|
|
||||||
transform: 'none',
|
|
||||||
maxWidth: '95vw',
|
|
||||||
maxHeight: '95vh',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
|
|
||||||
return {
|
|
||||||
cursor: isZoomDragging ? 'grabbing' : 'grab',
|
|
||||||
width: naturalWidth ? `${naturalWidth}px` : 'auto',
|
|
||||||
height: naturalHeight ? `${naturalHeight}px` : 'auto',
|
|
||||||
maxWidth: 'none',
|
|
||||||
maxHeight: 'none',
|
|
||||||
transform: `translate3d(${zoomPan.x}px, ${zoomPan.y}px, 0)`,
|
|
||||||
};
|
|
||||||
}, [zoomNative, zoomPan.x, zoomPan.y, isZoomDragging]);
|
|
||||||
|
|
||||||
const zoomStageClassName = useMemo(
|
|
||||||
() =>
|
|
||||||
[
|
|
||||||
'preview-zoom__stage',
|
|
||||||
zoomNative ? 'preview-zoom__stage--native' : '',
|
|
||||||
isZoomDragging ? 'preview-zoom__stage--dragging' : '',
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(' '),
|
|
||||||
[zoomNative, isZoomDragging],
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderSingle = () => {
|
const renderSingle = () => {
|
||||||
if (!singleDoc) {
|
if (!singleDoc) {
|
||||||
return <p className="meta">Select a document to view metadata, tags and actions.</p>;
|
return <p className="meta">Select a document to view metadata, tags and actions.</p>;
|
||||||
@@ -1420,7 +1104,7 @@ const DetailPanel = ({
|
|||||||
{metadata && (
|
{metadata && (
|
||||||
<div>
|
<div>
|
||||||
<dt>Metadata</dt>
|
<dt>Metadata</dt>
|
||||||
<pre>{JSON.stringify(metadata, null, 2)}</pre>
|
<pre className="detail-metadata__block">{JSON.stringify(metadata, null, 2)}</pre>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{hasOcrAsset && ocrOpen
|
{hasOcrAsset && ocrOpen
|
||||||
@@ -1662,70 +1346,11 @@ const DetailPanel = ({
|
|||||||
{selectedCount <= 1 ? renderSingle() : renderBulk()}
|
{selectedCount <= 1 ? renderSingle() : renderBulk()}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
{zoomDisplay?.url
|
<PreviewZoomOverlay
|
||||||
? createPortal(
|
open={Boolean(zoomDisplay?.url)}
|
||||||
<div
|
display={zoomDisplay}
|
||||||
className="preview-zoom-backdrop"
|
onClose={closeZoomPreview}
|
||||||
role="dialog"
|
/>
|
||||||
aria-modal="true"
|
|
||||||
aria-label="Enlarged document preview"
|
|
||||||
onClick={closeZoomPreview}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={zoomStageRef}
|
|
||||||
className={zoomStageClassName}
|
|
||||||
onWheel={handleZoomStageWheel}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={zoomDisplay.url}
|
|
||||||
alt={zoomDisplay.alt}
|
|
||||||
className="preview-zoom__image"
|
|
||||||
style={zoomImageStyle}
|
|
||||||
onLoad={handleZoomImageLoad}
|
|
||||||
onClick={handleZoomImageClick}
|
|
||||||
onPointerDown={handleZoomImagePointerDown}
|
|
||||||
onPointerMove={handleZoomImagePointerMove}
|
|
||||||
onPointerUp={handleZoomImagePointerUp}
|
|
||||||
onPointerCancel={handleZoomImagePointerCancel}
|
|
||||||
draggable={false}
|
|
||||||
/>
|
|
||||||
{zoomDisplay.canGoPrev || zoomDisplay.canGoNext ? (
|
|
||||||
<div className="preview-zoom__nav">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="preview-zoom__nav-button"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
if (zoomDisplay.canGoPrev) {
|
|
||||||
zoomDisplay.goPrev?.();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-label="Previous preview"
|
|
||||||
disabled={!zoomDisplay.canGoPrev}
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="preview-zoom__nav-button"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
if (zoomDisplay.canGoNext) {
|
|
||||||
zoomDisplay.goNext?.();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-label="Next preview"
|
|
||||||
disabled={!zoomDisplay.canGoNext}
|
|
||||||
>
|
|
||||||
<ArrowRightIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
document.body,
|
|
||||||
)
|
|
||||||
: null}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,262 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
|
||||||
|
|
||||||
|
const noop = () => {};
|
||||||
|
|
||||||
|
const clamp = (value, min, max) => {
|
||||||
|
if (value < min) return min;
|
||||||
|
if (value > max) return max;
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ensureDocumentRoot = () => {
|
||||||
|
if (typeof document === 'undefined') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return document.body;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PreviewZoomOverlay = ({
|
||||||
|
open = false,
|
||||||
|
display = null,
|
||||||
|
onClose = noop,
|
||||||
|
}) => {
|
||||||
|
const portalTarget = ensureDocumentRoot();
|
||||||
|
const [isNativeScale, setIsNativeScale] = useState(false);
|
||||||
|
const [naturalSize, setNaturalSize] = useState({ width: null, height: null });
|
||||||
|
const scrollRef = useRef(null);
|
||||||
|
const imageRef = useRef(null);
|
||||||
|
const focusRef = useRef(null);
|
||||||
|
const previouslyFocusedRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsNativeScale(false);
|
||||||
|
setNaturalSize({ width: null, height: null });
|
||||||
|
focusRef.current = null;
|
||||||
|
const scrollEl = scrollRef.current;
|
||||||
|
if (scrollEl) {
|
||||||
|
scrollEl.scrollLeft = 0;
|
||||||
|
scrollEl.scrollTop = 0;
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !isNativeScale) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollEl = scrollRef.current;
|
||||||
|
const imageEl = imageRef.current;
|
||||||
|
if (!scrollEl || !imageEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageWidth = imageEl.naturalWidth || imageEl.clientWidth;
|
||||||
|
const imageHeight = imageEl.naturalHeight || imageEl.clientHeight;
|
||||||
|
if (!(imageWidth > 0 && imageHeight > 0)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const target = focusRef.current || { xRatio: 0.5, yRatio: 0.5 };
|
||||||
|
const maxScrollLeft = Math.max(0, imageWidth - scrollEl.clientWidth);
|
||||||
|
const maxScrollTop = Math.max(0, imageHeight - scrollEl.clientHeight);
|
||||||
|
|
||||||
|
const desiredLeft = target.xRatio * imageWidth - scrollEl.clientWidth / 2;
|
||||||
|
const desiredTop = target.yRatio * imageHeight - scrollEl.clientHeight / 2;
|
||||||
|
|
||||||
|
scrollEl.scrollLeft = clamp(desiredLeft, 0, maxScrollLeft);
|
||||||
|
scrollEl.scrollTop = clamp(desiredTop, 0, maxScrollTop);
|
||||||
|
}, [open, isNativeScale, naturalSize.width, naturalSize.height]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) {
|
||||||
|
if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === 'function') {
|
||||||
|
previouslyFocusedRef.current.focus();
|
||||||
|
}
|
||||||
|
previouslyFocusedRef.current = null;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
const active = document.activeElement;
|
||||||
|
if (active && typeof active.focus === 'function') {
|
||||||
|
previouslyFocusedRef.current = active;
|
||||||
|
} else {
|
||||||
|
previouslyFocusedRef.current = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollEl = scrollRef.current;
|
||||||
|
if (!scrollEl) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const frame = requestAnimationFrame(() => {
|
||||||
|
scrollEl.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelAnimationFrame(frame);
|
||||||
|
if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === 'function') {
|
||||||
|
previouslyFocusedRef.current.focus();
|
||||||
|
previouslyFocusedRef.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const handleKeyDown = (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if (!open) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
event.preventDefault();
|
||||||
|
onClose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'ArrowLeft') {
|
||||||
|
if (display?.canGoPrev && display?.goPrev) {
|
||||||
|
event.preventDefault();
|
||||||
|
display.goPrev();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'ArrowRight') {
|
||||||
|
if (display?.canGoNext && display?.goNext) {
|
||||||
|
event.preventDefault();
|
||||||
|
display.goNext();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!open || !display?.url || !portalTarget) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const navVisible = Boolean(display?.canGoPrev || display?.canGoNext);
|
||||||
|
const stageClassName = [
|
||||||
|
'preview-zoom__stage',
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ');
|
||||||
|
|
||||||
|
const containerClassName = [
|
||||||
|
'preview-zoom__scroll',
|
||||||
|
isNativeScale ? 'preview-zoom__scroll--native' : '',
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ');
|
||||||
|
|
||||||
|
const imageStyle = isNativeScale
|
||||||
|
? {
|
||||||
|
cursor: 'zoom-out',
|
||||||
|
width: naturalSize.width ? `${naturalSize.width}px` : 'auto',
|
||||||
|
height: naturalSize.height ? `${naturalSize.height}px` : 'auto',
|
||||||
|
maxWidth: 'none',
|
||||||
|
maxHeight: 'none',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
cursor: 'zoom-in',
|
||||||
|
maxWidth: '95vw',
|
||||||
|
maxHeight: '95vh',
|
||||||
|
};
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
|
(
|
||||||
|
<div
|
||||||
|
className="preview-zoom-backdrop"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Enlarged document preview"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={stageClassName}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={containerClassName}
|
||||||
|
ref={scrollRef}
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={display.url}
|
||||||
|
alt={display.alt || 'Document preview'}
|
||||||
|
className="preview-zoom__image"
|
||||||
|
ref={imageRef}
|
||||||
|
draggable={false}
|
||||||
|
onLoad={(event) => {
|
||||||
|
setNaturalSize({
|
||||||
|
width: event.currentTarget.naturalWidth || null,
|
||||||
|
height: event.currentTarget.naturalHeight || null,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (!isNativeScale) {
|
||||||
|
const img = imageRef.current;
|
||||||
|
if (img) {
|
||||||
|
const rect = img.getBoundingClientRect();
|
||||||
|
const xRatio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
|
||||||
|
const yRatio = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5;
|
||||||
|
focusRef.current = {
|
||||||
|
xRatio: clamp(xRatio, 0, 1),
|
||||||
|
yRatio: clamp(yRatio, 0, 1),
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
focusRef.current = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
focusRef.current = null;
|
||||||
|
}
|
||||||
|
setIsNativeScale((current) => !current);
|
||||||
|
}}
|
||||||
|
style={imageStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{navVisible ? (
|
||||||
|
<div className="preview-zoom__nav">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="preview-zoom__nav-button"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (display?.canGoPrev && display?.goPrev) {
|
||||||
|
display.goPrev();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
aria-label="Previous preview"
|
||||||
|
disabled={!display?.canGoPrev}
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="preview-zoom__nav-button"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (display?.canGoNext && display?.goNext) {
|
||||||
|
display.goNext();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
aria-label="Next preview"
|
||||||
|
disabled={!display?.canGoNext}
|
||||||
|
>
|
||||||
|
<ArrowRightIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
portalTarget,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PreviewZoomOverlay;
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
|
import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
|
||||||
import { getTagColorStyle } from '../utils/colors';
|
import { getTagColorStyle } from '../utils/colors';
|
||||||
import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon, TrashIcon } from '../ui/icons';
|
import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon, TrashIcon } from '../ui/icons';
|
||||||
@@ -13,13 +13,62 @@ const getPageCount = (doc) =>
|
|||||||
? doc.current_version.metadata.page_count
|
? doc.current_version.metadata.page_count
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
|
// Detects when an element becomes visible within a scroll container.
|
||||||
|
const useLazyVisibility = (rootRef, resetKey) => {
|
||||||
|
const targetRef = useRef(null);
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsVisible(false);
|
||||||
|
}, [resetKey]);
|
||||||
|
|
||||||
|
const rootNode = rootRef?.current || null;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isVisible) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
const element = targetRef.current;
|
||||||
|
if (!element) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
|
||||||
|
setIsVisible(true);
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setIsVisible(true);
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: rootNode,
|
||||||
|
rootMargin: '200px 0px',
|
||||||
|
threshold: 0.01,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(element);
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [isVisible, rootNode, resetKey]);
|
||||||
|
|
||||||
|
return { ref: targetRef, isVisible };
|
||||||
|
};
|
||||||
|
|
||||||
const DocumentThumbnailImage = ({
|
const DocumentThumbnailImage = ({
|
||||||
document,
|
document,
|
||||||
ensureAssetUrl,
|
ensureAssetUrl,
|
||||||
getDocumentAsset,
|
getDocumentAsset,
|
||||||
alt,
|
alt,
|
||||||
maxSize = LIST_ICON_SIZE,
|
maxSize = LIST_ICON_SIZE,
|
||||||
|
scrollRootRef = null,
|
||||||
}) => {
|
}) => {
|
||||||
|
const { ref: visibilityRef, isVisible } = useLazyVisibility(scrollRootRef, document?.id);
|
||||||
const resolvedMaxSize = Math.max(1, Math.round(maxSize || 1));
|
const resolvedMaxSize = Math.max(1, Math.round(maxSize || 1));
|
||||||
const thumbnailAsset = useMemo(
|
const thumbnailAsset = useMemo(
|
||||||
() => getAssetFromVersion(document?.current_version, 'thumbnail'),
|
() => getAssetFromVersion(document?.current_version, 'thumbnail'),
|
||||||
@@ -45,14 +94,15 @@ const DocumentThumbnailImage = ({
|
|||||||
() => ({ width: `${dimensions.width}px`, height: `${dimensions.height}px` }),
|
() => ({ width: `${dimensions.width}px`, height: `${dimensions.height}px` }),
|
||||||
[dimensions.height, dimensions.width],
|
[dimensions.height, dimensions.width],
|
||||||
);
|
);
|
||||||
const url = useMemo(
|
const url = useMemo(() => {
|
||||||
() =>
|
if (!isVisible) {
|
||||||
resolveDocumentAssetUrl(document, 'thumbnail', {
|
return null;
|
||||||
ensureAssetUrl,
|
}
|
||||||
getAsset: getDocumentAsset,
|
return resolveDocumentAssetUrl(document, 'thumbnail', {
|
||||||
}),
|
ensureAssetUrl,
|
||||||
[document, ensureAssetUrl, getDocumentAsset],
|
getAsset: getDocumentAsset,
|
||||||
);
|
});
|
||||||
|
}, [document, ensureAssetUrl, getDocumentAsset, isVisible]);
|
||||||
|
|
||||||
const pageCount = getPageCount(document);
|
const pageCount = getPageCount(document);
|
||||||
const showMultiPageBadge = Number.isFinite(pageCount) && pageCount > 1;
|
const showMultiPageBadge = Number.isFinite(pageCount) && pageCount > 1;
|
||||||
@@ -62,13 +112,15 @@ const DocumentThumbnailImage = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="document-thumbnail-wrapper">
|
<div className="document-thumbnail-wrapper" ref={visibilityRef}>
|
||||||
<div className={innerClasses.join(' ')} style={innerStyle}>
|
<div className={innerClasses.join(' ')} style={innerStyle}>
|
||||||
{url ? (
|
{url ? (
|
||||||
<img
|
<img
|
||||||
src={url}
|
src={url}
|
||||||
alt={alt || ''}
|
alt={alt || ''}
|
||||||
className="document-thumbnail"
|
className="document-thumbnail"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
draggable={false}
|
draggable={false}
|
||||||
onDragStart={(event) => event.preventDefault()}
|
onDragStart={(event) => event.preventDefault()}
|
||||||
/>
|
/>
|
||||||
@@ -125,6 +177,7 @@ const DocumentsTable = ({
|
|||||||
viewMode = 'list',
|
viewMode = 'list',
|
||||||
onViewModeChange,
|
onViewModeChange,
|
||||||
onClearSelection,
|
onClearSelection,
|
||||||
|
showHeader = true,
|
||||||
}) => {
|
}) => {
|
||||||
const showingSearchResults = searchResults !== null;
|
const showingSearchResults = searchResults !== null;
|
||||||
const rows = showingSearchResults ? searchResults : documents;
|
const rows = showingSearchResults ? searchResults : documents;
|
||||||
@@ -142,6 +195,18 @@ const DocumentsTable = ({
|
|||||||
[draggingDocumentIds],
|
[draggingDocumentIds],
|
||||||
);
|
);
|
||||||
const scrollRef = useRef(null);
|
const scrollRef = useRef(null);
|
||||||
|
const [, forceVisibilityTick] = useState(0);
|
||||||
|
const lastScrollNodeRef = useRef(null);
|
||||||
|
const assignScrollRef = useCallback((node) => {
|
||||||
|
if (lastScrollNodeRef.current === node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lastScrollNodeRef.current = node;
|
||||||
|
scrollRef.current = node;
|
||||||
|
if (node) {
|
||||||
|
forceVisibilityTick((value) => value + 1);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
const isGridView = viewMode === 'grid';
|
const isGridView = viewMode === 'grid';
|
||||||
const gridIconSize = DEFAULT_GRID_ICON_SIZE;
|
const gridIconSize = DEFAULT_GRID_ICON_SIZE;
|
||||||
const handleSetViewMode = useCallback(
|
const handleSetViewMode = useCallback(
|
||||||
@@ -156,6 +221,11 @@ const DocumentsTable = ({
|
|||||||
},
|
},
|
||||||
[onViewModeChange],
|
[onViewModeChange],
|
||||||
);
|
);
|
||||||
|
useEffect(() => {
|
||||||
|
if (scrollRef.current) {
|
||||||
|
scrollRef.current.scrollTop = 0;
|
||||||
|
}
|
||||||
|
}, [viewMode]);
|
||||||
const isTagDragEvent = useCallback((event) => {
|
const isTagDragEvent = useCallback((event) => {
|
||||||
const types = Array.from(event.dataTransfer?.types || []);
|
const types = Array.from(event.dataTransfer?.types || []);
|
||||||
return TAG_MIME_TYPES.some((type) => types.includes(type));
|
return TAG_MIME_TYPES.some((type) => types.includes(type));
|
||||||
@@ -272,51 +342,53 @@ const DocumentsTable = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
className={`documents-panel column documents-panel--view-${isGridView ? 'grid' : 'list'}`}
|
className={`documents-panel documents-panel--view-${isGridView ? 'grid' : 'list'}`}
|
||||||
>
|
>
|
||||||
<div className="column-header">
|
{showHeader ? (
|
||||||
<div className="column-header__titles">
|
<div className="panel-section__header">
|
||||||
<h2>{currentFolderName}</h2>
|
<div className="panel-section__titles">
|
||||||
{showingSearchResults && (
|
<h2>{currentFolderName}</h2>
|
||||||
<div className="column-subtitle">Search results</div>
|
{showingSearchResults && (
|
||||||
)}
|
<div className="panel-section__subtitle">Search results</div>
|
||||||
</div>
|
)}
|
||||||
<div className="header-actions">
|
</div>
|
||||||
<div className="view-toggle" role="group" aria-label="Change view">
|
<div className="header-actions">
|
||||||
|
<div className="view-toggle" role="group" aria-label="Change view">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`view-toggle__button${isGridView ? '' : ' active'}`}
|
||||||
|
onClick={() => handleSetViewMode('list')}
|
||||||
|
aria-pressed={!isGridView}
|
||||||
|
title="List view"
|
||||||
|
>
|
||||||
|
<ViewListIcon className="view-toggle__icon" size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`view-toggle__button${isGridView ? ' active' : ''}`}
|
||||||
|
onClick={() => handleSetViewMode('grid')}
|
||||||
|
aria-pressed={isGridView}
|
||||||
|
title="Icons view"
|
||||||
|
>
|
||||||
|
<ViewGridIcon className="view-toggle__icon" size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`view-toggle__button${isGridView ? '' : ' active'}`}
|
onClick={onRequestCreateFolder}
|
||||||
onClick={() => handleSetViewMode('list')}
|
disabled={creatingFolder}
|
||||||
aria-pressed={!isGridView}
|
|
||||||
title="List view"
|
|
||||||
>
|
>
|
||||||
<ViewListIcon className="view-toggle__icon" size={18} />
|
{creatingFolder ? 'Creating…' : 'New folder'}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button className="secondary" onClick={onRefresh}>
|
||||||
type="button"
|
Refresh
|
||||||
className={`view-toggle__button${isGridView ? ' active' : ''}`}
|
</button>
|
||||||
onClick={() => handleSetViewMode('grid')}
|
<button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
|
||||||
aria-pressed={isGridView}
|
Desk View
|
||||||
title="Icons view"
|
|
||||||
>
|
|
||||||
<ViewGridIcon className="view-toggle__icon" size={18} />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onRequestCreateFolder}
|
|
||||||
disabled={creatingFolder}
|
|
||||||
>
|
|
||||||
{creatingFolder ? 'Creating…' : 'New folder'}
|
|
||||||
</button>
|
|
||||||
<button className="secondary" onClick={onRefresh}>
|
|
||||||
Refresh
|
|
||||||
</button>
|
|
||||||
<button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
|
|
||||||
Desk View
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : null}
|
||||||
{showDefaultEmptyState && (
|
{showDefaultEmptyState && (
|
||||||
<div className="empty-state">
|
<div className="empty-state">
|
||||||
Drop files anywhere or onto a folder to upload documents.
|
Drop files anywhere or onto a folder to upload documents.
|
||||||
@@ -327,9 +399,9 @@ const DocumentsTable = ({
|
|||||||
No documents match the current filters.
|
No documents match the current filters.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="column-body">
|
<div className="panel-section__body">
|
||||||
<div
|
<div
|
||||||
ref={scrollRef}
|
ref={assignScrollRef}
|
||||||
className="documents-scroll"
|
className="documents-scroll"
|
||||||
onFocus={(event) => {
|
onFocus={(event) => {
|
||||||
if (event.target === scrollRef.current) {
|
if (event.target === scrollRef.current) {
|
||||||
@@ -454,6 +526,7 @@ const DocumentsTable = ({
|
|||||||
getDocumentAsset={getDocumentAsset}
|
getDocumentAsset={getDocumentAsset}
|
||||||
alt={`Thumbnail for ${doc.title || doc.original_name}`}
|
alt={`Thumbnail for ${doc.title || doc.original_name}`}
|
||||||
maxSize={gridIconSize}
|
maxSize={gridIconSize}
|
||||||
|
scrollRootRef={scrollRef}
|
||||||
/>
|
/>
|
||||||
<div className="document-card__meta">
|
<div className="document-card__meta">
|
||||||
<div
|
<div
|
||||||
@@ -670,6 +743,7 @@ const DocumentsTable = ({
|
|||||||
ensureAssetUrl={ensureAssetUrl}
|
ensureAssetUrl={ensureAssetUrl}
|
||||||
getDocumentAsset={getDocumentAsset}
|
getDocumentAsset={getDocumentAsset}
|
||||||
alt={`Thumbnail for ${doc.title || doc.original_name}`}
|
alt={`Thumbnail for ${doc.title || doc.original_name}`}
|
||||||
|
scrollRootRef={scrollRef}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td className="doc-list__name">
|
<td className="doc-list__name">
|
||||||
|
|||||||
+207
-15
@@ -32,6 +32,16 @@ import CorrespondentsPanel from './correspondents/CorrespondentsPanel';
|
|||||||
import { CORRESPONDENT_ROLES } from './constants/correspondents';
|
import { CORRESPONDENT_ROLES } from './constants/correspondents';
|
||||||
import TagManager from './tag_manager';
|
import TagManager from './tag_manager';
|
||||||
import Sidebar from './sidebar/Sidebar';
|
import Sidebar from './sidebar/Sidebar';
|
||||||
|
import {
|
||||||
|
ChevronsRightIcon,
|
||||||
|
ChevronsLeftIcon,
|
||||||
|
ViewListIcon,
|
||||||
|
ViewGridIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
RefreshIcon,
|
||||||
|
ArrowUpIcon,
|
||||||
|
MinusVerticalIcon,
|
||||||
|
} from './ui/icons';
|
||||||
import DocumentsTable from './documents/DocumentsTable';
|
import DocumentsTable from './documents/DocumentsTable';
|
||||||
import { AppShellContext, useAppShell } from './appShellContext';
|
import { AppShellContext, useAppShell } from './appShellContext';
|
||||||
import DocumentViewerRoute from './routes/DocumentViewerRoute';
|
import DocumentViewerRoute from './routes/DocumentViewerRoute';
|
||||||
@@ -311,9 +321,9 @@ const LoginView = ({
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
const DocumentsLayout = ({ sidebarProps, children }) => (
|
const DocumentsLayout = ({ sidebarProps, children, sidebarCollapsed }) => (
|
||||||
<main className="documents-main">
|
<main className={`documents-main${sidebarCollapsed ? ' documents-main--sidebar-collapsed' : ''}`}>
|
||||||
<Sidebar {...sidebarProps} />
|
{!sidebarCollapsed ? <Sidebar {...sidebarProps} /> : null}
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
@@ -337,6 +347,9 @@ const AppLayout = () => {
|
|||||||
({ message, variant }) => setStatusMessage(message, variant),
|
({ message, variant }) => setStatusMessage(message, variant),
|
||||||
[setStatusMessage],
|
[setStatusMessage],
|
||||||
);
|
);
|
||||||
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||||
|
const collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
|
||||||
|
const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
|
||||||
const reportApiError = useApiError({
|
const reportApiError = useApiError({
|
||||||
onReport: handleApiReport,
|
onReport: handleApiReport,
|
||||||
});
|
});
|
||||||
@@ -4488,6 +4501,7 @@ const AppLayout = () => {
|
|||||||
isFilterActive,
|
isFilterActive,
|
||||||
onLogout: handleLogout,
|
onLogout: handleLogout,
|
||||||
status,
|
status,
|
||||||
|
onCollapse: collapseSidebar,
|
||||||
};
|
};
|
||||||
|
|
||||||
const resolveThumbnailUrlForDoc = useCallback(
|
const resolveThumbnailUrlForDoc = useCallback(
|
||||||
@@ -4700,11 +4714,16 @@ const AppLayout = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (['logged-out', 'authenticating', 'selecting-tenant'].includes(appStatus)) {
|
if (['logged-out', 'authenticating', 'selecting-tenant'].includes(appStatus)) {
|
||||||
|
const shouldRememberLastLocation = appStatus !== 'logged-out';
|
||||||
return (
|
return (
|
||||||
<Navigate
|
<Navigate
|
||||||
to="/account/login"
|
to="/account/login"
|
||||||
replace
|
replace
|
||||||
state={{ from: location.pathname + location.search }}
|
state={
|
||||||
|
shouldRememberLastLocation
|
||||||
|
? { from: location.pathname + location.search }
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -4847,36 +4866,209 @@ const DocumentsRoute = () => {
|
|||||||
skeuoWorkspaceProps,
|
skeuoWorkspaceProps,
|
||||||
openTagsModal,
|
openTagsModal,
|
||||||
openCorrespondentsModal,
|
openCorrespondentsModal,
|
||||||
|
exitSkeuoWorkspace,
|
||||||
} = useAppShell();
|
} = useAppShell();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||||
|
const collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
|
||||||
|
const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
|
||||||
|
|
||||||
const sidebarPropsWithActions = useMemo(
|
const sidebarPropsWithActions = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
...sidebarProps,
|
...sidebarProps,
|
||||||
onManageTags: openTagsModal,
|
onManageTags: openTagsModal,
|
||||||
onManageCorrespondents: openCorrespondentsModal,
|
onManageCorrespondents: openCorrespondentsModal,
|
||||||
|
onCollapse: collapseSidebar,
|
||||||
}),
|
}),
|
||||||
[sidebarProps, openTagsModal, openCorrespondentsModal],
|
[sidebarProps, openTagsModal, openCorrespondentsModal, collapseSidebar],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
currentFolderName,
|
||||||
|
viewMode,
|
||||||
|
onViewModeChange,
|
||||||
|
onRequestCreateFolder,
|
||||||
|
creatingFolder,
|
||||||
|
onRefresh,
|
||||||
|
onShowSkeuoWorkspace,
|
||||||
|
searchResults,
|
||||||
|
breadcrumbs,
|
||||||
|
} = documentsTableProps;
|
||||||
|
|
||||||
|
const isGridView = viewMode === 'grid';
|
||||||
|
const showingSearchResults = Array.isArray(searchResults);
|
||||||
|
const headerTitle = showingSearchResults ? 'Search results' : currentFolderName;
|
||||||
|
const headerSubtitle = showingSearchResults
|
||||||
|
? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
|
||||||
|
: null;
|
||||||
|
const parentBreadcrumb = breadcrumbs && breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;
|
||||||
|
const handleNavigateParent = parentBreadcrumb
|
||||||
|
? () => {
|
||||||
|
const target = parentBreadcrumb.id === 'root'
|
||||||
|
? '/documents'
|
||||||
|
: `/documents/folder/${parentBreadcrumb.id}`;
|
||||||
|
navigate(target);
|
||||||
|
}
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
|
||||||
|
const toggleSidebar = sidebarCollapsed ? expandSidebar : collapseSidebar;
|
||||||
|
const ToggleIcon = sidebarCollapsed ? ChevronsRightIcon : ChevronsLeftIcon;
|
||||||
|
const toggleLabel = sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar';
|
||||||
|
|
||||||
if (workspaceMode === 'skeuo') {
|
if (workspaceMode === 'skeuo') {
|
||||||
return (
|
return (
|
||||||
<DocumentsLayout sidebarProps={sidebarPropsWithActions}>
|
<DocumentsLayout
|
||||||
|
sidebarProps={sidebarPropsWithActions}
|
||||||
|
sidebarCollapsed={sidebarCollapsed}
|
||||||
|
>
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
<SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
|
<div className="panel-header main-content__header">
|
||||||
|
<div className="panel-actions main-content__actions">
|
||||||
|
{sidebarCollapsed ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
aria-label={toggleLabel}
|
||||||
|
title={toggleLabel}
|
||||||
|
>
|
||||||
|
<ToggleIcon />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
{parentBreadcrumb ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={handleNavigateParent}
|
||||||
|
aria-label="Go to parent folder"
|
||||||
|
title="Go to parent folder"
|
||||||
|
>
|
||||||
|
<ArrowUpIcon />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
<h2 className="main-content__title">
|
||||||
|
{headerTitle}
|
||||||
|
{headerSubtitle ? (
|
||||||
|
<span className="main-content__subtitle">{headerSubtitle}</span>
|
||||||
|
) : null}
|
||||||
|
</h2>
|
||||||
|
<div className="spacer" />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={skeuoWorkspaceProps.onRefresh}
|
||||||
|
aria-label="Refresh"
|
||||||
|
title="Refresh"
|
||||||
|
>
|
||||||
|
<RefreshIcon />
|
||||||
|
</button>
|
||||||
|
<button type="button" className="secondary" onClick={exitSkeuoWorkspace}>
|
||||||
|
Back to List
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="main-content__body">
|
||||||
|
<SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DocumentsLayout>
|
</DocumentsLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DocumentsLayout sidebarProps={sidebarPropsWithActions}>
|
<DocumentsLayout
|
||||||
<div
|
sidebarProps={sidebarPropsWithActions}
|
||||||
className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}
|
sidebarCollapsed={sidebarCollapsed}
|
||||||
>
|
>
|
||||||
<DocumentsTable {...documentsTableProps} />
|
<div className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}>
|
||||||
{detailHasContent ? <DetailPanel {...detailPanelProps} /> : null}
|
<div className="panel-header main-content__header">
|
||||||
|
<div className="panel-actions main-content__actions">
|
||||||
|
{sidebarCollapsed ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
aria-label={toggleLabel}
|
||||||
|
title={toggleLabel}
|
||||||
|
>
|
||||||
|
<ToggleIcon />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
{parentBreadcrumb ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={handleNavigateParent}
|
||||||
|
aria-label="Go to parent folder"
|
||||||
|
title="Go to parent folder"
|
||||||
|
>
|
||||||
|
<ArrowUpIcon />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
<h2 className="main-content__title">
|
||||||
|
{headerTitle}
|
||||||
|
{headerSubtitle ? (
|
||||||
|
<span className="main-content__subtitle">{headerSubtitle}</span>
|
||||||
|
) : null}
|
||||||
|
</h2>
|
||||||
|
<div className="spacer" />
|
||||||
|
<div className="view-toggle" role="group" aria-label="Change view">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`view-toggle__button${isGridView ? '' : ' active'}`}
|
||||||
|
onClick={() => onViewModeChange?.('list')}
|
||||||
|
aria-pressed={!isGridView}
|
||||||
|
title="List view"
|
||||||
|
>
|
||||||
|
<ViewListIcon className="view-toggle__icon" size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`view-toggle__button${isGridView ? ' active' : ''}`}
|
||||||
|
onClick={() => onViewModeChange?.('grid')}
|
||||||
|
aria-pressed={isGridView}
|
||||||
|
title="Icons view"
|
||||||
|
>
|
||||||
|
<ViewGridIcon className="view-toggle__icon" size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span className="main-content__actions-divider" aria-hidden="true">
|
||||||
|
<MinusVerticalIcon />
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={onRequestCreateFolder}
|
||||||
|
disabled={creatingFolder}
|
||||||
|
aria-label={creatingFolder ? 'Creating folder…' : 'Create folder'}
|
||||||
|
title={creatingFolder ? 'Creating folder…' : 'Create folder'}
|
||||||
|
>
|
||||||
|
<FolderPlusIcon />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={onRefresh}
|
||||||
|
aria-label="Refresh"
|
||||||
|
title="Refresh"
|
||||||
|
>
|
||||||
|
<RefreshIcon />
|
||||||
|
</button>
|
||||||
|
<button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
|
||||||
|
Desk View
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`main-content__body main-content__body--documents${detailHasContent ? ' main-content__body--has-detail' : ''}`}
|
||||||
|
>
|
||||||
|
<DocumentsTable {...documentsTableProps} showHeader={false} />
|
||||||
|
</div>
|
||||||
|
{detailHasContent ? (
|
||||||
|
<DetailPanel {...detailPanelProps} />
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</DocumentsLayout>
|
</DocumentsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
+125
-108
@@ -1,5 +1,5 @@
|
|||||||
import React, { useCallback, useMemo } from 'react';
|
import React, { useCallback, useMemo } from 'react';
|
||||||
import { ChevronIcon, TrashIcon, EditIcon, FolderIcon } from '../ui/icons';
|
import { ChevronIcon, TrashIcon, EditIcon, FolderIcon, ChevronsLeftIcon } from '../ui/icons';
|
||||||
|
|
||||||
import { getTagColorStyle } from '../utils/colors';
|
import { getTagColorStyle } from '../utils/colors';
|
||||||
|
|
||||||
@@ -148,6 +148,7 @@ const Sidebar = ({
|
|||||||
previewActive,
|
previewActive,
|
||||||
onLogout,
|
onLogout,
|
||||||
status,
|
status,
|
||||||
|
onCollapse,
|
||||||
}) => {
|
}) => {
|
||||||
const sortedCorrespondents = useMemo(
|
const sortedCorrespondents = useMemo(
|
||||||
() =>
|
() =>
|
||||||
@@ -234,9 +235,30 @@ const Sidebar = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="sidebar">
|
<aside className="sidebar">
|
||||||
<div className="sidebar__meta">
|
<div className="panel-header sidebar__header">
|
||||||
<h1 className="sidebar__title">Papercrate</h1>
|
<div className="panel-actions">
|
||||||
|
<h1 className="sidebar__title">Papercrate</h1>
|
||||||
|
<div className="spacer" />
|
||||||
|
{onCollapse ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button ghost"
|
||||||
|
onClick={onCollapse}
|
||||||
|
aria-label="Collapse sidebar"
|
||||||
|
title="Collapse sidebar"
|
||||||
|
>
|
||||||
|
<ChevronsLeftIcon />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="panel-body sidebar__body">
|
||||||
<span className="sidebar__hint">{hintText}</span>
|
<span className="sidebar__hint">{hintText}</span>
|
||||||
|
{status && (
|
||||||
|
<div className="sidebar__status">
|
||||||
|
<div className={`status-banner ${status.variant}`}>{status.message}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{onSearchChange && (
|
{onSearchChange && (
|
||||||
<form className="sidebar__search" onSubmit={handleSearchFormSubmit}>
|
<form className="sidebar__search" onSubmit={handleSearchFormSubmit}>
|
||||||
<input
|
<input
|
||||||
@@ -253,117 +275,112 @@ const Sidebar = ({
|
|||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
{status && (
|
<div className="sidebar-section sidebar-section--folders">
|
||||||
<div className="sidebar__status">
|
<div className="sidebar-section__header">
|
||||||
<div className={`status-banner ${status.variant}`}>{status.message}</div>
|
<h3>Folders</h3>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<ul className="folder-tree">
|
||||||
</div>
|
{rootNode && renderNodes([rootNode.id], 0)}
|
||||||
<div className="sidebar-section sidebar-section--folders">
|
</ul>
|
||||||
<div className="sidebar-section__header">
|
|
||||||
<h3>Folders</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<ul className="folder-tree">
|
<div className="sidebar-section">
|
||||||
{rootNode && renderNodes([rootNode.id], 0)}
|
<div className="sidebar-section__header">
|
||||||
</ul>
|
<button
|
||||||
</div>
|
type="button"
|
||||||
<div className="sidebar-section">
|
className="sidebar-section__title"
|
||||||
<div className="sidebar-section__header">
|
onClick={handleManageTags}
|
||||||
<button
|
>
|
||||||
type="button"
|
<h3>Tags</h3>
|
||||||
className="sidebar-section__title"
|
<span className="meta">{tags.length}</span>
|
||||||
onClick={handleManageTags}
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`sidebar-tag-cloud${
|
||||||
|
activeTagSet.size ? ' sidebar-tag-cloud--has-active' : ''
|
||||||
|
}`}
|
||||||
|
role="list"
|
||||||
>
|
>
|
||||||
<h3>Tags</h3>
|
{tags.map((tag) => {
|
||||||
<span className="meta">{tags.length}</span>
|
const isActive = activeTagSet.has(tag.id);
|
||||||
</button>
|
const style = getTagColorStyle(tag.color);
|
||||||
</div>
|
const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
|
||||||
<div
|
return (
|
||||||
className={`sidebar-tag-cloud${
|
<button
|
||||||
activeTagSet.size ? ' sidebar-tag-cloud--has-active' : ''
|
key={tag.id}
|
||||||
}`}
|
type="button"
|
||||||
role="list"
|
role="listitem"
|
||||||
>
|
|
||||||
{tags.map((tag) => {
|
|
||||||
const isActive = activeTagSet.has(tag.id);
|
|
||||||
const style = getTagColorStyle(tag.color);
|
|
||||||
const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={tag.id}
|
|
||||||
type="button"
|
|
||||||
role="listitem"
|
|
||||||
className={className}
|
|
||||||
style={style || undefined}
|
|
||||||
onClick={() => handleToggleTag(tag.id)}
|
|
||||||
aria-pressed={isActive}
|
|
||||||
draggable
|
|
||||||
onDragStart={(event) => {
|
|
||||||
try {
|
|
||||||
const payload = JSON.stringify({
|
|
||||||
id: tag.id,
|
|
||||||
label: tag.label,
|
|
||||||
color: tag.color || null,
|
|
||||||
});
|
|
||||||
event.dataTransfer.effectAllowed = 'copy';
|
|
||||||
event.dataTransfer.setData('application/x-papercrate-tag', payload);
|
|
||||||
event.dataTransfer.setData('text/papercrate-tag', payload);
|
|
||||||
} catch (
|
|
||||||
// eslint-disable-next-line no-empty
|
|
||||||
error
|
|
||||||
) {}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tag.label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="sidebar-section">
|
|
||||||
<div className="sidebar-section__header">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="sidebar-section__title"
|
|
||||||
onClick={handleManageCorrespondents}
|
|
||||||
>
|
|
||||||
<h3>Correspondents</h3>
|
|
||||||
<span className="meta">{correspondents.length}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<ul className="sidebar-correspondent-list">
|
|
||||||
{sortedCorrespondents.map((correspondent) => {
|
|
||||||
const isActive = activeCorrespondentSet.has(correspondent.id);
|
|
||||||
const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
|
|
||||||
const label = correspondent.name || 'Unnamed';
|
|
||||||
const handleSelect = () => {
|
|
||||||
const nextId = isActive ? null : correspondent.id;
|
|
||||||
onToggleCorrespondentFilter?.(nextId);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<li key={correspondent.id}>
|
|
||||||
<span
|
|
||||||
className={className}
|
className={className}
|
||||||
role="button"
|
style={style || undefined}
|
||||||
onClick={handleSelect}
|
onClick={() => handleToggleTag(tag.id)}
|
||||||
onKeyDown={(event) => {
|
aria-pressed={isActive}
|
||||||
if (event.key === 'Enter' || event.key === ' ') {
|
draggable
|
||||||
event.preventDefault();
|
onDragStart={(event) => {
|
||||||
handleSelect();
|
try {
|
||||||
}
|
const payload = JSON.stringify({
|
||||||
|
id: tag.id,
|
||||||
|
label: tag.label,
|
||||||
|
color: tag.color || null,
|
||||||
|
});
|
||||||
|
event.dataTransfer.effectAllowed = 'copy';
|
||||||
|
event.dataTransfer.setData('application/x-papercrate-tag', payload);
|
||||||
|
event.dataTransfer.setData('text/papercrate-tag', payload);
|
||||||
|
} catch (
|
||||||
|
// eslint-disable-next-line no-empty
|
||||||
|
error
|
||||||
|
) {}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{label}
|
{tag.label}
|
||||||
</span>
|
</button>
|
||||||
</li>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div className="sidebar-section">
|
||||||
<div className="sidebar__footer">
|
<div className="sidebar-section__header">
|
||||||
<button className="secondary" type="button" onClick={handleLogoutClick}>
|
<button
|
||||||
Log out
|
type="button"
|
||||||
</button>
|
className="sidebar-section__title"
|
||||||
|
onClick={handleManageCorrespondents}
|
||||||
|
>
|
||||||
|
<h3>Correspondents</h3>
|
||||||
|
<span className="meta">{correspondents.length}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul className="sidebar-correspondent-list">
|
||||||
|
{sortedCorrespondents.map((correspondent) => {
|
||||||
|
const isActive = activeCorrespondentSet.has(correspondent.id);
|
||||||
|
const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
|
||||||
|
const label = correspondent.name || 'Unnamed';
|
||||||
|
const handleSelect = () => {
|
||||||
|
const nextId = isActive ? null : correspondent.id;
|
||||||
|
onToggleCorrespondentFilter?.(nextId);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<li key={correspondent.id}>
|
||||||
|
<span
|
||||||
|
className={className}
|
||||||
|
role="button"
|
||||||
|
onClick={handleSelect}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Enter' || event.key === ' ') {
|
||||||
|
event.preventDefault();
|
||||||
|
handleSelect();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="sidebar__footer">
|
||||||
|
<button className="secondary" type="button" onClick={handleLogoutClick}>
|
||||||
|
Log out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -15,55 +15,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeuo-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 0.75rem 1rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-header__meta {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-header__meta h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-breadcrumbs {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.35rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-crumb {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-crumb.is-current {
|
|
||||||
color: var(--fg);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-crumb-separator {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-header__actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-canvas {
|
.skeuo-canvas {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -117,10 +68,6 @@
|
|||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeuo-item.is-zoomed {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeuo-item.is-tag-target .skeuo-item__card {
|
.skeuo-item.is-tag-target .skeuo-item__card {
|
||||||
outline: 1em dashed var(--accent);
|
outline: 1em dashed var(--accent);
|
||||||
outline-offset: 1.41em;
|
outline-offset: 1.41em;
|
||||||
|
|||||||
+185
-133
@@ -9,6 +9,7 @@ import React, {
|
|||||||
import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
|
import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
|
||||||
import { useAssetNavigator } from './hooks/useAssetNavigator';
|
import { useAssetNavigator } from './hooks/useAssetNavigator';
|
||||||
import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
|
import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
|
||||||
|
import PreviewZoomOverlay from './detail/PreviewZoomOverlay';
|
||||||
import { getReadableTextColor } from './utils/colors';
|
import { getReadableTextColor } from './utils/colors';
|
||||||
import './skeuomorphic_ws.css';
|
import './skeuomorphic_ws.css';
|
||||||
|
|
||||||
@@ -28,9 +29,6 @@ const resolveSizeKey = (doc) =>
|
|||||||
const CARD_MIN = 240;
|
const CARD_MIN = 240;
|
||||||
const CARD_MAX = 340;
|
const CARD_MAX = 340;
|
||||||
const EMPTY_CARD_ASPECT = 1.4;
|
const EMPTY_CARD_ASPECT = 1.4;
|
||||||
const ZOOM_FILL_RATIO = 0.99;
|
|
||||||
const ZOOM_MIN_SCALE = 1.05;
|
|
||||||
const ZOOM_MAX_SCALE = 5;
|
|
||||||
const TAG_REMOVE_DISTANCE = 160;
|
const TAG_REMOVE_DISTANCE = 160;
|
||||||
|
|
||||||
const DEBUG_DRAG = false;
|
const DEBUG_DRAG = false;
|
||||||
@@ -52,6 +50,7 @@ const SkeuoPreviewCard = ({
|
|||||||
getDocumentAsset,
|
getDocumentAsset,
|
||||||
navScale = 1,
|
navScale = 1,
|
||||||
prefetch = 3,
|
prefetch = 3,
|
||||||
|
onNavigatorSnapshot,
|
||||||
}) => {
|
}) => {
|
||||||
const navigator = useAssetNavigator({
|
const navigator = useAssetNavigator({
|
||||||
document: doc,
|
document: doc,
|
||||||
@@ -62,6 +61,32 @@ const SkeuoPreviewCard = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const { currentUrl, cardinality, canGoPrev, canGoNext } = navigator;
|
const { currentUrl, cardinality, canGoPrev, canGoNext } = navigator;
|
||||||
|
const docId = doc?.id ?? null;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!onNavigatorSnapshot || !docId) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
const snapshot = {
|
||||||
|
url: currentUrl || null,
|
||||||
|
alt: title,
|
||||||
|
canGoPrev,
|
||||||
|
canGoNext,
|
||||||
|
goPrev: navigator.goPrev,
|
||||||
|
goNext: navigator.goNext,
|
||||||
|
};
|
||||||
|
onNavigatorSnapshot(docId, snapshot);
|
||||||
|
return () => onNavigatorSnapshot(docId, null);
|
||||||
|
}, [
|
||||||
|
docId,
|
||||||
|
currentUrl,
|
||||||
|
title,
|
||||||
|
canGoPrev,
|
||||||
|
canGoNext,
|
||||||
|
navigator.goPrev,
|
||||||
|
navigator.goNext,
|
||||||
|
onNavigatorSnapshot,
|
||||||
|
]);
|
||||||
const hasPreview = Boolean(currentUrl);
|
const hasPreview = Boolean(currentUrl);
|
||||||
const cardClasses = ['skeuo-item__card'];
|
const cardClasses = ['skeuo-item__card'];
|
||||||
if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
|
if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
|
||||||
@@ -303,7 +328,7 @@ const useDocumentDrag = ({
|
|||||||
setDraggingId,
|
setDraggingId,
|
||||||
syncLayoutSnapshot,
|
syncLayoutSnapshot,
|
||||||
canvasSize,
|
canvasSize,
|
||||||
toggleZoom,
|
openOverlayForDoc,
|
||||||
}) => {
|
}) => {
|
||||||
const dragStateRef = useRef(null);
|
const dragStateRef = useRef(null);
|
||||||
|
|
||||||
@@ -330,7 +355,7 @@ const useDocumentDrag = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handlePointerDown = useCallback(
|
const handlePointerDown = useCallback(
|
||||||
(event, docId, { lockWhenZoomed = false } = {}) => {
|
(event, docId) => {
|
||||||
if (DEBUG_DRAG) {
|
if (DEBUG_DRAG) {
|
||||||
console.log(
|
console.log(
|
||||||
'[skeuo] handlePointerDown fired for doc',
|
'[skeuo] handlePointerDown fired for doc',
|
||||||
@@ -376,7 +401,7 @@ const useDocumentDrag = ({
|
|||||||
startY: event.clientY,
|
startY: event.clientY,
|
||||||
rotation: entry?.rotation ?? 0,
|
rotation: entry?.rotation ?? 0,
|
||||||
moved: false,
|
moved: false,
|
||||||
locked: Boolean(lockWhenZoomed),
|
locked: false,
|
||||||
width: docWidth,
|
width: docWidth,
|
||||||
height: docHeight,
|
height: docHeight,
|
||||||
scale: baseScale,
|
scale: baseScale,
|
||||||
@@ -475,13 +500,19 @@ const useDocumentDrag = ({
|
|||||||
const docId = state.docId;
|
const docId = state.docId;
|
||||||
finishDrag(event.pointerId);
|
finishDrag(event.pointerId);
|
||||||
if (!moved) {
|
if (!moved) {
|
||||||
toggleZoom(docId);
|
const originInfo = {
|
||||||
|
rotation: state.rotation || 0,
|
||||||
|
scale: state.scale || 1,
|
||||||
|
width: state.width,
|
||||||
|
height: state.height,
|
||||||
|
};
|
||||||
|
openOverlayForDoc(docId, originInfo);
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
finishDrag(event.pointerId);
|
finishDrag(event.pointerId);
|
||||||
},
|
},
|
||||||
[finishDrag, toggleZoom],
|
[finishDrag, openOverlayForDoc],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handlePointerCancel = useCallback(
|
const handlePointerCancel = useCallback(
|
||||||
@@ -547,10 +578,6 @@ const getContrastingTextColor = (hex) => getReadableTextColor(hex, { light: '#1f
|
|||||||
const SkeuomorphicWorkspace = ({
|
const SkeuomorphicWorkspace = ({
|
||||||
documents = [],
|
documents = [],
|
||||||
searchResults = null,
|
searchResults = null,
|
||||||
breadcrumbs = [],
|
|
||||||
currentFolderName = 'Folder',
|
|
||||||
onExit,
|
|
||||||
onRefresh,
|
|
||||||
onDocumentOpen,
|
onDocumentOpen,
|
||||||
resolveThumbnailUrl,
|
resolveThumbnailUrl,
|
||||||
onAssignTagToDocument = null,
|
onAssignTagToDocument = null,
|
||||||
@@ -560,7 +587,6 @@ const SkeuomorphicWorkspace = ({
|
|||||||
activeTagIds = [],
|
activeTagIds = [],
|
||||||
}) => {
|
}) => {
|
||||||
const items = useMemo(() => (searchResults ? searchResults : documents), [documents, searchResults]);
|
const items = useMemo(() => (searchResults ? searchResults : documents), [documents, searchResults]);
|
||||||
const showingSearchResults = searchResults !== null;
|
|
||||||
|
|
||||||
|
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
@@ -572,7 +598,10 @@ const SkeuomorphicWorkspace = ({
|
|||||||
|
|
||||||
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
|
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
|
||||||
const [draggingId, setDraggingId] = useState(null);
|
const [draggingId, setDraggingId] = useState(null);
|
||||||
const [zoomedId, setZoomedId] = useState(null);
|
const [overlayDocId, setOverlayDocId] = useState(null);
|
||||||
|
const [overlayOriginRect, setOverlayOriginRect] = useState(null);
|
||||||
|
const [overlayOriginTransform, setOverlayOriginTransform] = useState(null);
|
||||||
|
const [previewSnapshots, setPreviewSnapshots] = useState(() => new Map());
|
||||||
const [tagDropTargetId, setTagDropTargetId] = useState(null);
|
const [tagDropTargetId, setTagDropTargetId] = useState(null);
|
||||||
const [pendingTagDocId, setPendingTagDocId] = useState(null);
|
const [pendingTagDocId, setPendingTagDocId] = useState(null);
|
||||||
const [pendingRemovalTag, setPendingRemovalTag] = useState(null);
|
const [pendingRemovalTag, setPendingRemovalTag] = useState(null);
|
||||||
@@ -580,6 +609,36 @@ const SkeuomorphicWorkspace = ({
|
|||||||
const pendingDocTagDragRef = useRef(null);
|
const pendingDocTagDragRef = useRef(null);
|
||||||
const docSizeMapRef = useRef(new Map());
|
const docSizeMapRef = useRef(new Map());
|
||||||
const removalCursorActiveRef = useRef(false);
|
const removalCursorActiveRef = useRef(false);
|
||||||
|
const handleNavigatorSnapshot = useCallback((docId, snapshot) => {
|
||||||
|
if (!docId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setPreviewSnapshots((previous) => {
|
||||||
|
const prevSnapshot = previous.get(docId);
|
||||||
|
if (!snapshot) {
|
||||||
|
if (!previous.has(docId)) {
|
||||||
|
return previous;
|
||||||
|
}
|
||||||
|
const next = new Map(previous);
|
||||||
|
next.delete(docId);
|
||||||
|
return next;
|
||||||
|
}
|
||||||
|
const next = new Map(previous);
|
||||||
|
const sameSnapshot =
|
||||||
|
prevSnapshot &&
|
||||||
|
prevSnapshot.url === snapshot.url &&
|
||||||
|
prevSnapshot.alt === snapshot.alt &&
|
||||||
|
prevSnapshot.canGoPrev === snapshot.canGoPrev &&
|
||||||
|
prevSnapshot.canGoNext === snapshot.canGoNext &&
|
||||||
|
prevSnapshot.goPrev === snapshot.goPrev &&
|
||||||
|
prevSnapshot.goNext === snapshot.goNext;
|
||||||
|
if (sameSnapshot) {
|
||||||
|
return previous;
|
||||||
|
}
|
||||||
|
next.set(docId, snapshot);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
const activeTagSet = useMemo(() => {
|
const activeTagSet = useMemo(() => {
|
||||||
if (!Array.isArray(activeTagIds) || activeTagIds.length === 0) {
|
if (!Array.isArray(activeTagIds) || activeTagIds.length === 0) {
|
||||||
return new Set();
|
return new Set();
|
||||||
@@ -779,70 +838,39 @@ const SkeuomorphicWorkspace = ({
|
|||||||
docSizeMapRef.current = new Map();
|
docSizeMapRef.current = new Map();
|
||||||
}, [items]);
|
}, [items]);
|
||||||
|
|
||||||
const resolveZoomMetrics = useCallback(
|
const overlayDisplay = useMemo(() => {
|
||||||
(doc, cardWidth, cardHeight) => {
|
if (!overlayDocId) {
|
||||||
const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
|
return null;
|
||||||
const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
|
}
|
||||||
const safeCardWidth = cardWidth || CARD_MIN;
|
const snapshot = previewSnapshots.get(overlayDocId);
|
||||||
const safeCardHeight = cardHeight || CARD_MIN;
|
if (!snapshot || !snapshot.url) {
|
||||||
const usableWidth = Math.max(canvasWidth - CANVAS_PADDING * 2, safeCardWidth);
|
return null;
|
||||||
const usableHeight = Math.max(canvasHeight - CANVAS_PADDING * 2, safeCardHeight);
|
}
|
||||||
const viewportTargetWidth = usableWidth * ZOOM_FILL_RATIO;
|
const doc = documentLookup.get(overlayDocId);
|
||||||
const viewportTargetHeight = usableHeight * ZOOM_FILL_RATIO;
|
const alt = snapshot.alt || doc?.title || doc?.original_name || 'Document preview';
|
||||||
|
return {
|
||||||
|
url: snapshot.url,
|
||||||
|
alt,
|
||||||
|
canGoPrev: snapshot.canGoPrev,
|
||||||
|
canGoNext: snapshot.canGoNext,
|
||||||
|
goPrev: snapshot.goPrev,
|
||||||
|
goNext: snapshot.goNext,
|
||||||
|
};
|
||||||
|
}, [overlayDocId, previewSnapshots, documentLookup]);
|
||||||
|
|
||||||
let zoomWidth = safeCardWidth;
|
const closeOverlay = useCallback(() => {
|
||||||
let zoomHeight = safeCardHeight;
|
setOverlayDocId(null);
|
||||||
|
setOverlayOriginRect(null);
|
||||||
|
setOverlayOriginTransform(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const previewDims = doc ? resolvePreviewDimensions(doc) : null;
|
useEffect(() => {
|
||||||
if (previewDims?.width && previewDims?.height) {
|
if (overlayDocId && !documentLookup.has(overlayDocId)) {
|
||||||
const previewWidth = previewDims.width;
|
setOverlayDocId(null);
|
||||||
const previewHeight = previewDims.height;
|
setOverlayOriginRect(null);
|
||||||
const widthScaleLimit = previewWidth > 0 ? viewportTargetWidth / previewWidth : 1;
|
setOverlayOriginTransform(null);
|
||||||
const heightScaleLimit = previewHeight > 0 ? viewportTargetHeight / previewHeight : 1;
|
}
|
||||||
const scaleToFit = Math.min(1, widthScaleLimit || 1, heightScaleLimit || 1);
|
}, [overlayDocId, documentLookup]);
|
||||||
zoomWidth = previewWidth * scaleToFit;
|
|
||||||
zoomHeight = previewHeight * scaleToFit;
|
|
||||||
} else {
|
|
||||||
const rawScale = Math.min(
|
|
||||||
viewportTargetWidth / safeCardWidth,
|
|
||||||
viewportTargetHeight / safeCardHeight,
|
|
||||||
);
|
|
||||||
const boundedScale =
|
|
||||||
rawScale >= 1
|
|
||||||
? clamp(Math.max(rawScale, ZOOM_MIN_SCALE), ZOOM_MIN_SCALE, ZOOM_MAX_SCALE)
|
|
||||||
: rawScale;
|
|
||||||
zoomWidth = safeCardWidth * boundedScale;
|
|
||||||
zoomHeight = safeCardHeight * boundedScale;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Number.isFinite(zoomWidth) || zoomWidth <= 0) {
|
|
||||||
zoomWidth = safeCardWidth;
|
|
||||||
}
|
|
||||||
if (!Number.isFinite(zoomHeight) || zoomHeight <= 0) {
|
|
||||||
zoomHeight = safeCardHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
zoomWidth = Math.max(zoomWidth, safeCardWidth);
|
|
||||||
zoomHeight = Math.max(zoomHeight, safeCardHeight);
|
|
||||||
|
|
||||||
const zoomTargetX = (canvasWidth - zoomWidth) / 2;
|
|
||||||
const zoomTargetY = (canvasHeight - zoomHeight) / 2;
|
|
||||||
const maxX = Math.max(CANVAS_PADDING, canvasWidth - zoomWidth - CANVAS_PADDING);
|
|
||||||
const maxY = Math.max(CANVAS_PADDING, canvasHeight - zoomHeight - CANVAS_PADDING);
|
|
||||||
const clampedX = clamp(zoomTargetX, CANVAS_PADDING, maxX);
|
|
||||||
const clampedY = clamp(zoomTargetY, CANVAS_PADDING, maxY);
|
|
||||||
const zoomCenterX = clampedX + zoomWidth / 2;
|
|
||||||
const zoomCenterY = clampedY + zoomHeight / 2;
|
|
||||||
|
|
||||||
return {
|
|
||||||
zoomWidth,
|
|
||||||
zoomHeight,
|
|
||||||
zoomCenterX,
|
|
||||||
zoomCenterY,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
[canvasSize.width, canvasSize.height, resolvePreviewDimensions],
|
|
||||||
);
|
|
||||||
|
|
||||||
const resolveBaseMetrics = useCallback(
|
const resolveBaseMetrics = useCallback(
|
||||||
(doc, cardWidth, cardHeight) => {
|
(doc, cardWidth, cardHeight) => {
|
||||||
@@ -1014,17 +1042,62 @@ const SkeuomorphicWorkspace = ({
|
|||||||
[syncLayoutSnapshot],
|
[syncLayoutSnapshot],
|
||||||
);
|
);
|
||||||
|
|
||||||
const toggleZoom = useCallback(
|
const openOverlayForDoc = useCallback(
|
||||||
(docId) => {
|
(docId, originInfo = null) => {
|
||||||
setZoomedId((current) => {
|
if (!docId) {
|
||||||
if (current === docId) {
|
return;
|
||||||
return null;
|
}
|
||||||
}
|
const snapshot = previewSnapshots.get(docId);
|
||||||
bringToFront(docId);
|
if (!snapshot || !snapshot.url) {
|
||||||
return docId;
|
return;
|
||||||
});
|
}
|
||||||
|
const container = itemRefs.current.get(docId);
|
||||||
|
const imageNode = container?.querySelector?.('.skeuo-item__card img');
|
||||||
|
if (!container || !imageNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const rect = imageNode.getBoundingClientRect();
|
||||||
|
let originTransform = null;
|
||||||
|
if (originInfo) {
|
||||||
|
const { rotation = 0, scale = 1, width: originWidth, height: originHeight } = originInfo;
|
||||||
|
originTransform = {
|
||||||
|
rotation,
|
||||||
|
scaleX: scale,
|
||||||
|
scaleY: scale,
|
||||||
|
baseWidth: originWidth,
|
||||||
|
baseHeight: originHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (!originTransform) {
|
||||||
|
const entry = layoutRef.current.get(docId) || null;
|
||||||
|
const doc = documentLookup.get(docId) || null;
|
||||||
|
const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
|
||||||
|
const { baseWidth, baseHeight, baseScale } = resolveBaseMetrics(doc, cardWidth, cardHeight);
|
||||||
|
const effectiveWidth = baseWidth * baseScale;
|
||||||
|
const effectiveHeight = baseHeight * baseScale;
|
||||||
|
originTransform = {
|
||||||
|
rotation: entry?.rotation ?? 0,
|
||||||
|
scaleX: baseScale,
|
||||||
|
scaleY: baseScale,
|
||||||
|
baseWidth: Number.isFinite(effectiveWidth) && effectiveWidth > 0 ? effectiveWidth : cardWidth,
|
||||||
|
baseHeight: Number.isFinite(effectiveHeight) && effectiveHeight > 0 ? effectiveHeight : cardHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
bringToFront(docId);
|
||||||
|
setOverlayOriginRect(rect);
|
||||||
|
setOverlayOriginTransform(originTransform);
|
||||||
|
setOverlayDocId(docId);
|
||||||
},
|
},
|
||||||
[bringToFront],
|
[
|
||||||
|
bringToFront,
|
||||||
|
previewSnapshots,
|
||||||
|
itemRefs,
|
||||||
|
setOverlayOriginTransform,
|
||||||
|
ensureDocumentSize,
|
||||||
|
resolveBaseMetrics,
|
||||||
|
documentLookup,
|
||||||
|
layoutRef,
|
||||||
|
],
|
||||||
);
|
);
|
||||||
const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
|
const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
|
||||||
layoutRef,
|
layoutRef,
|
||||||
@@ -1036,7 +1109,7 @@ const SkeuomorphicWorkspace = ({
|
|||||||
setDraggingId,
|
setDraggingId,
|
||||||
syncLayoutSnapshot,
|
syncLayoutSnapshot,
|
||||||
canvasSize,
|
canvasSize,
|
||||||
toggleZoom,
|
openOverlayForDoc,
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleTagDragEnterDoc = useCallback(
|
const handleTagDragEnterDoc = useCallback(
|
||||||
@@ -1490,28 +1563,15 @@ const SkeuomorphicWorkspace = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="skeuo-shell">
|
<>
|
||||||
<header className="skeuo-header">
|
<div className="skeuo-shell">
|
||||||
<div className="skeuo-header__meta">
|
<div
|
||||||
<h2>{currentFolderName}</h2>
|
className="skeuo-canvas"
|
||||||
{showingSearchResults && <span className="meta">Showing search results</span>}
|
ref={containerRef}
|
||||||
</div>
|
onDragOver={handleCanvasDragOver}
|
||||||
<div className="skeuo-header__actions">
|
onDragLeave={handleCanvasDragLeave}
|
||||||
<button type="button" className="secondary" onClick={onRefresh}>
|
onDrop={handleCanvasDrop}
|
||||||
Refresh
|
>
|
||||||
</button>
|
|
||||||
<button type="button" onClick={onExit}>
|
|
||||||
Back to List
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div
|
|
||||||
className="skeuo-canvas"
|
|
||||||
ref={containerRef}
|
|
||||||
onDragOver={handleCanvasDragOver}
|
|
||||||
onDragLeave={handleCanvasDragLeave}
|
|
||||||
onDrop={handleCanvasDrop}
|
|
||||||
>
|
|
||||||
{items.length === 0 ? (
|
{items.length === 0 ? (
|
||||||
<div className="skeuo-empty">
|
<div className="skeuo-empty">
|
||||||
<p>No documents to show here yet. Drop files to make this space come alive.</p>
|
<p>No documents to show here yet. Drop files to make this space come alive.</p>
|
||||||
@@ -1532,31 +1592,17 @@ const SkeuomorphicWorkspace = ({
|
|||||||
typeof layout.centerX === 'number' ? layout.centerX : fallbackLayout.centerX;
|
typeof layout.centerX === 'number' ? layout.centerX : fallbackLayout.centerX;
|
||||||
const layoutCenterY =
|
const layoutCenterY =
|
||||||
typeof layout.centerY === 'number' ? layout.centerY : fallbackLayout.centerY;
|
typeof layout.centerY === 'number' ? layout.centerY : fallbackLayout.centerY;
|
||||||
const isZoomed = zoomedId === doc.id;
|
const rotation = layout.rotation || 0;
|
||||||
const { zoomWidth, zoomHeight, zoomCenterX, zoomCenterY } = resolveZoomMetrics(
|
const zoomScale = baseScale;
|
||||||
doc,
|
|
||||||
cardWidth,
|
|
||||||
cardHeight,
|
|
||||||
);
|
|
||||||
const targetCenterX = isZoomed ? zoomCenterX : layoutCenterX;
|
|
||||||
const targetCenterY = isZoomed ? zoomCenterY : layoutCenterY;
|
|
||||||
const rotation = isZoomed ? 0 : layout.rotation || 0;
|
|
||||||
const zoomScale = isZoomed
|
|
||||||
? Math.min(
|
|
||||||
1,
|
|
||||||
Number.isFinite(zoomWidth / baseWidth) ? zoomWidth / baseWidth : 1,
|
|
||||||
Number.isFinite(zoomHeight / baseHeight) ? zoomHeight / baseHeight : 1,
|
|
||||||
)
|
|
||||||
: baseScale;
|
|
||||||
const transform = formatTransform(
|
const transform = formatTransform(
|
||||||
Math.round(targetCenterX),
|
Math.round(layoutCenterX),
|
||||||
Math.round(targetCenterY),
|
Math.round(layoutCenterY),
|
||||||
rotation,
|
rotation,
|
||||||
zoomScale,
|
zoomScale,
|
||||||
);
|
);
|
||||||
const style = {
|
const style = {
|
||||||
transform,
|
transform,
|
||||||
zIndex: isZoomed ? 9999 : layout.z ?? 1,
|
zIndex: layout.z ?? 1,
|
||||||
};
|
};
|
||||||
const bodyStyle = {
|
const bodyStyle = {
|
||||||
width: Math.round(baseWidth),
|
width: Math.round(baseWidth),
|
||||||
@@ -1577,7 +1623,6 @@ const SkeuomorphicWorkspace = ({
|
|||||||
const dropPending = pendingTagDocId === doc.id;
|
const dropPending = pendingTagDocId === doc.id;
|
||||||
const itemClasses = ['skeuo-item'];
|
const itemClasses = ['skeuo-item'];
|
||||||
if (dragging) itemClasses.push('is-dragging');
|
if (dragging) itemClasses.push('is-dragging');
|
||||||
if (isZoomed) itemClasses.push('is-zoomed');
|
|
||||||
if (dropActive) itemClasses.push('is-tag-target');
|
if (dropActive) itemClasses.push('is-tag-target');
|
||||||
if (dropPending) itemClasses.push('is-tag-pending');
|
if (dropPending) itemClasses.push('is-tag-pending');
|
||||||
if (!matchesFilter) itemClasses.push('is-filtered-out');
|
if (!matchesFilter) itemClasses.push('is-filtered-out');
|
||||||
@@ -1598,9 +1643,7 @@ const SkeuomorphicWorkspace = ({
|
|||||||
itemRefs.current.delete(doc.id);
|
itemRefs.current.delete(doc.id);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onPointerDown={(event) =>
|
onPointerDown={(event) => handlePointerDown(event, doc.id)}
|
||||||
handlePointerDown(event, doc.id, { lockWhenZoomed: isZoomed })
|
|
||||||
}
|
|
||||||
onPointerMove={handlePointerMove}
|
onPointerMove={handlePointerMove}
|
||||||
onPointerUp={handlePointerUp}
|
onPointerUp={handlePointerUp}
|
||||||
onPointerCancel={handlePointerCancel}
|
onPointerCancel={handlePointerCancel}
|
||||||
@@ -1622,6 +1665,7 @@ const SkeuomorphicWorkspace = ({
|
|||||||
ensureAssetUrl={ensureAssetUrl}
|
ensureAssetUrl={ensureAssetUrl}
|
||||||
getDocumentAsset={getDocumentAsset}
|
getDocumentAsset={getDocumentAsset}
|
||||||
navScale={inverseTagScale}
|
navScale={inverseTagScale}
|
||||||
|
onNavigatorSnapshot={handleNavigatorSnapshot}
|
||||||
/>
|
/>
|
||||||
{tags.length > 0 && (
|
{tags.length > 0 && (
|
||||||
<div className="skeuo-item__tags" aria-hidden="true" style={tagsStyle}>
|
<div className="skeuo-item__tags" aria-hidden="true" style={tagsStyle}>
|
||||||
@@ -1667,8 +1711,16 @@ const SkeuomorphicWorkspace = ({
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<PreviewZoomOverlay
|
||||||
|
open={Boolean(overlayDisplay?.url)}
|
||||||
|
display={overlayDisplay}
|
||||||
|
onClose={closeOverlay}
|
||||||
|
originRect={overlayOriginRect}
|
||||||
|
originTransform={overlayOriginTransform}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+147
-75
@@ -229,31 +229,37 @@ button.danger:hover:not([disabled]) {
|
|||||||
|
|
||||||
.preview-zoom__stage {
|
.preview-zoom__stage {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
max-height: 95vh;
|
max-height: 95vh;
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-zoom__stage--native {
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-zoom__stage--dragging {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-zoom__image {
|
.preview-zoom__image {
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
max-height: 95vh;
|
max-height: 95vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 0;
|
}
|
||||||
|
|
||||||
|
.preview-zoom__scroll {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 95vw;
|
||||||
|
max-height: 95vh;
|
||||||
box-shadow: 0 32px 120px rgba(15, 23, 42, 0.55);
|
box-shadow: 0 32px 120px rgba(15, 23, 42, 0.55);
|
||||||
cursor: inherit;
|
}
|
||||||
|
|
||||||
|
.preview-zoom__scroll:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-zoom__scroll--native {
|
||||||
|
overflow: auto;
|
||||||
|
cursor: zoom-out;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-zoom__nav {
|
.preview-zoom__nav {
|
||||||
@@ -352,39 +358,34 @@ button.danger:hover:not([disabled]) {
|
|||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.view-toggle {
|
.view-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 999px;
|
gap: 0.25rem;
|
||||||
background: var(--surface-subtle);
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle__button {
|
.view-toggle__button {
|
||||||
width: 2.5rem;
|
border: 1px solid var(--border);
|
||||||
height: 2.2rem;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s ease, color 0.15s ease;
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle__button:hover,
|
.view-toggle__button:hover,
|
||||||
.view-toggle__button:focus-visible {
|
.view-toggle__button:focus-visible {
|
||||||
background: transparent;
|
background: var(--surface-subtle);
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle__button.active {
|
.view-toggle__button.active {
|
||||||
background: var(--accent-soft, rgba(63, 106, 216, 0.16));
|
background: var(--accent);
|
||||||
color: var(--accent);
|
color: var(--on-accent);
|
||||||
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle__icon {
|
.view-toggle__icon {
|
||||||
@@ -403,35 +404,98 @@ button.danger:hover:not([disabled]) {
|
|||||||
|
|
||||||
.documents-main {
|
.documents-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 20rem minmax(0, 1fr);
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.documents-main--sidebar-collapsed {
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
position: relative;
|
flex-grow: 1;
|
||||||
|
box-shadow: -12px 0 24px -12px var(--shadow-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-main .main-content--documents > * {
|
.main-content__header {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content__body {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content__body > * {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-main .main-content--documents > *:not(.detail-panel) {
|
.main-content__body > *:not(.detail-panel) {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-main .main-content--documents.main-content--has-detail {
|
.main-content--has-detail {
|
||||||
padding-right: var(--detail-panel-width);
|
padding-right: var(--detail-panel-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-content__title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--fg);
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content__subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.documents-main--sidebar-collapsed {
|
||||||
|
position: relative;
|
||||||
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .panel-actions .icon,
|
||||||
|
.main-content__header .panel-actions .icon,
|
||||||
|
.detail-panel .panel-actions .icon {
|
||||||
|
width: 1.35rem;
|
||||||
|
height: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content__actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content__actions-divider {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
.panels-main {
|
.panels-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -791,7 +855,7 @@ button.danger:hover:not([disabled]) {
|
|||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header {
|
.panel-section__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -799,33 +863,33 @@ button.danger:hover:not([disabled]) {
|
|||||||
padding: 0 0 0.5rem;
|
padding: 0 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header__titles {
|
.panel-section__titles {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header h2 {
|
.panel-section__header h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-subtitle {
|
.panel-section__subtitle {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-section__body {
|
||||||
.column-body {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-body.scrollable {
|
.panel-section__body--scrollable,
|
||||||
|
.panel-section__body.scrollable {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -936,25 +1000,27 @@ button.danger:hover:not([disabled]) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
gap: 0.28rem;
|
gap: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 1.25rem;
|
|
||||||
color: var(--sidebar-fg);
|
color: var(--sidebar-fg);
|
||||||
box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 20em;
|
||||||
|
max-width: 20em;
|
||||||
|
flex: 0 0 20em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__meta {
|
.sidebar__body {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.2rem;
|
padding: 0.5rem 1rem;
|
||||||
margin-bottom: 1rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__title {
|
.sidebar__title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
}
|
}
|
||||||
@@ -968,7 +1034,7 @@ button.danger:hover:not([disabled]) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
margin-top: 0.6rem;
|
margin: 0 0 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__search input[type='search'] {
|
.sidebar__search input[type='search'] {
|
||||||
@@ -994,10 +1060,6 @@ button.danger:hover:not([disabled]) {
|
|||||||
background: var(--sidebar-hover-bg);
|
background: var(--sidebar-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__status {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar__footer {
|
.sidebar__footer {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
@@ -1181,7 +1243,7 @@ button.danger:hover:not([disabled]) {
|
|||||||
|
|
||||||
|
|
||||||
.documents-panel {
|
.documents-panel {
|
||||||
padding: 1.25rem 1.25rem 0 1.25rem;
|
padding: 0 0.75rem 0.75rem 0.75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@@ -1200,29 +1262,23 @@ button.danger:hover:not([disabled]) {
|
|||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-panel .column-header {
|
.documents-panel .panel-section__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-panel .column-header .header-actions {
|
.documents-panel .panel-section__header .header-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.documents-panel .panel-section__body {
|
||||||
.documents-panel .column-body {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.documents-panel .column-toolbar {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.documents-panel .documents-scroll {
|
.documents-panel .documents-scroll {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -1653,9 +1709,12 @@ button.danger:hover:not([disabled]) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding: 0.25rem;
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
padding: 0.25rem;
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-actions {
|
.panel-actions {
|
||||||
@@ -1664,6 +1723,11 @@ button.danger:hover:not([disabled]) {
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-actions > h1:first-child,
|
||||||
|
.panel-actions > h2:first-child {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-actions .spacer {
|
.panel-actions .spacer {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
@@ -1971,6 +2035,19 @@ button.danger:hover:not([disabled]) {
|
|||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-metadata__block {
|
||||||
|
margin: 0.35rem 0 0;
|
||||||
|
padding: 0.5rem 0.6rem;
|
||||||
|
background: var(--surface-soft);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--border-muted, var(--border));
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
.tag-pill {
|
.tag-pill {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -2033,7 +2110,6 @@ form.inline {
|
|||||||
padding: 0.45rem 0.8rem;
|
padding: 0.45rem 0.8rem;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-banner.info {
|
.status-banner.info {
|
||||||
@@ -2278,9 +2354,6 @@ form.inline {
|
|||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.column-toolbar .filter-bar {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.doc-list__name {
|
.doc-list__name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -2294,9 +2367,8 @@ form.inline {
|
|||||||
|
|
||||||
.doc-list__name-content span {
|
.doc-list__name-content span {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow-wrap: anywhere;
|
||||||
text-overflow: ellipsis;
|
word-break: break-word;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-pane__nav-button svg {
|
.preview-pane__nav-button svg {
|
||||||
|
|||||||
@@ -148,10 +148,10 @@ function TagsPanel({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="tags-panel">
|
<section className="tags-panel">
|
||||||
<div className="column-header">
|
<div className="panel-section__header">
|
||||||
<div className="column-header__titles">
|
<div className="panel-section__titles">
|
||||||
<h2>Tags</h2>
|
<h2>Tags</h2>
|
||||||
<div className="column-subtitle">{tags.length} total</div>
|
<div className="panel-section__subtitle">{tags.length} total</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="header-actions tags-actions">
|
<div className="header-actions tags-actions">
|
||||||
<form className="tags-actions__form" onSubmit={handleCreate}>
|
<form className="tags-actions__form" onSubmit={handleCreate}>
|
||||||
@@ -194,7 +194,7 @@ function TagsPanel({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="column-body tags-panel__body">
|
<div className="panel-section__body tags-panel__body">
|
||||||
{tags.length === 0 ? (
|
{tags.length === 0 ? (
|
||||||
<div className="empty-state">No tags created yet.</div>
|
<div className="empty-state">No tags created yet.</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -9,10 +9,15 @@ import {
|
|||||||
IconLayoutGrid,
|
IconLayoutGrid,
|
||||||
IconArrowLeft,
|
IconArrowLeft,
|
||||||
IconArrowRight,
|
IconArrowRight,
|
||||||
|
IconArrowUp,
|
||||||
IconChevronsRight,
|
IconChevronsRight,
|
||||||
|
IconChevronsLeft,
|
||||||
IconAnalyze,
|
IconAnalyze,
|
||||||
IconWindowMaximize,
|
IconWindowMaximize,
|
||||||
IconTextScan2,
|
IconTextScan2,
|
||||||
|
IconFolderPlus,
|
||||||
|
IconRefresh,
|
||||||
|
IconMinusVertical,
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import FolderSvg from '../assets/folder.svg';
|
import FolderSvg from '../assets/folder.svg';
|
||||||
|
|
||||||
@@ -124,6 +129,15 @@ export const ArrowRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const ChevronsLeftIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconChevronsLeft
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
<IconChevronsRight
|
<IconChevronsRight
|
||||||
className={composeClassName('icon', className)}
|
className={composeClassName('icon', className)}
|
||||||
@@ -133,6 +147,42 @@ export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...re
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const FolderPlusIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconFolderPlus
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const RefreshIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconRefresh
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ArrowUpIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconArrowUp
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MinusVerticalIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconMinusVertical
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export const AnalyzeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
export const AnalyzeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
<IconAnalyze
|
<IconAnalyze
|
||||||
className={composeClassName('icon', className)}
|
className={composeClassName('icon', className)}
|
||||||
@@ -161,9 +211,14 @@ export default {
|
|||||||
DownloadIcon,
|
DownloadIcon,
|
||||||
ViewListIcon,
|
ViewListIcon,
|
||||||
ViewGridIcon,
|
ViewGridIcon,
|
||||||
|
ChevronsLeftIcon,
|
||||||
ChevronsRightIcon,
|
ChevronsRightIcon,
|
||||||
AnalyzeIcon,
|
AnalyzeIcon,
|
||||||
WindowMaximizeIcon,
|
WindowMaximizeIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
RefreshIcon,
|
||||||
|
ArrowUpIcon,
|
||||||
|
MinusVerticalIcon,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TextScanIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
export const TextScanIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user