bjoernpoettker/paperlessmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add document thumbnail previews with tooltips to download and email dialogs
Build and Push Multi-Platform Images / build-and-push (push) Successful in 17s
Details

Browse Source
This commit is contained in:
Björn Pöttker
2026-05-10 20:49:20 +02:00
parent 4485d1673d
commit a8e27d228e
1 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paperless-frontend/src/pages/InboxDetailPage.tsx
+30 -10
View File
@@ -533,10 +533,11 @@ interface DownloadSegmentsDialogProps {
fileId: string; fileId: string;
fileName: string; fileName: string;
documents: DocumentSegment[]; documents: DocumentSegment[];
thumbUrls: Map<number, string>;
onClose: () => void; onClose: () => void;
} }
function DownloadSegmentsDialog({ open, fileId, fileName, documents, onClose }: DownloadSegmentsDialogProps) { function DownloadSegmentsDialog({ open, fileId, fileName, documents, thumbUrls, onClose }: DownloadSegmentsDialogProps) {
const [filenames, setFilenames] = useState<string[]>([]); const [filenames, setFilenames] = useState<string[]>([]);
const [downloading, setDownloading] = useState<number | 'all' | null>(null); const [downloading, setDownloading] = useState<number | 'all' | null>(null);
@@ -605,12 +606,20 @@ function DownloadSegmentsDialog({ open, fileId, fileName, documents, onClose }:
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
{documents.map((doc, i) => { {documents.map((doc, i) => {
const first = doc.pages[0]; const thumbUrl = thumbUrls.get(doc.pages[0]);
const last = doc.pages[doc.pages.length - 1];
const range = first === last ? `Seite ${first}` : `Seiten ${first}–${last}`;
return ( return (
<div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}> <div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<span style={{ minWidth: 90, color: '#888', fontSize: 12 }}>{range}</span> <Tooltip
title={thumbUrl ? <img src={thumbUrl} style={{ maxWidth: 260, maxHeight: 340, display: 'block' }} alt="" /> : null}
placement="right"
mouseEnterDelay={0.2}
>
<div style={{ width: 36, height: 48, flexShrink: 0, border: '1px solid #e0e0e0', borderRadius: 3, overflow: 'hidden', background: '#fafafa', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'default' }}>
{thumbUrl
? <img src={thumbUrl} style={{ width: '100%', height: '100%', objectFit: 'contain' }} alt="" />
: <Spin size="small" />}
</div>
</Tooltip>
<Input <Input
value={filenames[i] ?? ''} value={filenames[i] ?? ''}
onChange={(e) => onChange={(e) =>
@@ -640,10 +649,11 @@ interface SendEmailDialogProps {
fileId: string; fileId: string;
fileName: string; fileName: string;
documents: DocumentSegment[]; documents: DocumentSegment[];
thumbUrls: Map<number, string>;
onClose: () => void; onClose: () => void;
} }
function SendEmailDialog({ open, fileId, fileName, documents, onClose }: SendEmailDialogProps) { function SendEmailDialog({ open, fileId, fileName, documents, thumbUrls, onClose }: SendEmailDialogProps) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [filenames, setFilenames] = useState<string[]>([]); const [filenames, setFilenames] = useState<string[]>([]);
@@ -728,12 +738,20 @@ function SendEmailDialog({ open, fileId, fileName, documents, onClose }: SendEma
<Form.Item label="Anhänge"> <Form.Item label="Anhänge">
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{documents.map((doc, i) => { {documents.map((doc, i) => {
const first = doc.pages[0]; const thumbUrl = thumbUrls.get(doc.pages[0]);
const last = doc.pages[doc.pages.length - 1];
const range = first === last ? `Seite ${first}` : `Seiten ${first}–${last}`;
return ( return (
<div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}> <div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<span style={{ minWidth: 90, color: '#888', fontSize: 12 }}>{range}</span> <Tooltip
title={thumbUrl ? <img src={thumbUrl} style={{ maxWidth: 260, maxHeight: 340, display: 'block' }} alt="" /> : null}
placement="right"
mouseEnterDelay={0.2}
>
<div style={{ width: 36, height: 48, flexShrink: 0, border: '1px solid #e0e0e0', borderRadius: 3, overflow: 'hidden', background: '#fafafa', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'default' }}>
{thumbUrl
? <img src={thumbUrl} style={{ width: '100%', height: '100%', objectFit: 'contain' }} alt="" />
: <Spin size="small" />}
</div>
</Tooltip>
<Input <Input
value={filenames[i] ?? ''} value={filenames[i] ?? ''}
onChange={(e) => onChange={(e) =>
@@ -1566,6 +1584,7 @@ export default function InboxDetailPage() {
fileId={file.id} fileId={file.id}
fileName={file.name} fileName={file.name}
documents={documents} documents={documents}
thumbUrls={thumbUrls}
onClose={() => setDownloadDialogOpen(false)} onClose={() => setDownloadDialogOpen(false)}
/> />
<SendEmailDialog <SendEmailDialog
@@ -1573,6 +1592,7 @@ export default function InboxDetailPage() {
fileId={file.id} fileId={file.id}
fileName={file.name} fileName={file.name}
documents={documents} documents={documents}
thumbUrls={thumbUrls}
onClose={() => setEmailDialogOpen(false)} onClose={() => setEmailDialogOpen(false)}
/> />
</div> </div>