mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
Maurice
350a144457
The PDF preview on the Files tab and the document preview of a Collab note were about 150 px tall: the object carried flex-1, and in a column without a fixed height that falls back to the object's own height instead of 74vh. A tooltip no longer opens when a closing dialog hands the focus back to the button that opened it. It floated over whatever came next, at the place the button had before the page moved. Keyboard focus still opens it. The table view sorts its dates with localeCompare, and two NaN fallbacks and an unused import go.
53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { useId } from 'react'
|
|
import { ExternalLink, Download, FileText } from 'lucide-react'
|
|
import { openFile as openFileUrl } from '../../utils/fileDownload'
|
|
import type { FileManagerState } from './useFileManager'
|
|
import { triggerDownload } from './FileManager.helpers'
|
|
import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT, PILL } from '../shared/DialogShell'
|
|
|
|
/** A PDF read in place, in the planner's dialog: the name on the head band, open and download beside it. */
|
|
export function PdfPreviewModal(S: FileManagerState) {
|
|
const { previewFile, setPreviewFile, previewFileUrl, toast, t } = S
|
|
const labelId = useId()
|
|
const close = () => setPreviewFile(null)
|
|
const openInTab = () => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))
|
|
return (
|
|
<DialogShell
|
|
onClose={close}
|
|
labelledBy={labelId}
|
|
width="wide"
|
|
bodyClassName="flex min-h-0 flex-1 flex-col"
|
|
header={(
|
|
<DialogHeader
|
|
tile={<DialogTile><FileText size={20} strokeWidth={1.9} className="text-danger" /></DialogTile>}
|
|
tint={NEUTRAL_TINT}
|
|
labelId={labelId}
|
|
onClose={close}
|
|
title={previewFile.original_name}
|
|
pills={(
|
|
<>
|
|
<button type="button" onClick={openInTab} className={`${PILL} hover:opacity-80`}>
|
|
<ExternalLink size={13} strokeWidth={2.2} /> {t('files.openTab')}
|
|
</button>
|
|
<button type="button" onClick={() => triggerDownload(previewFile.url, previewFile.original_name)} className={`${PILL} hover:opacity-80`}>
|
|
<Download size={13} strokeWidth={2.2} /> {t('files.download') || 'Download'}
|
|
</button>
|
|
</>
|
|
)}
|
|
/>
|
|
)}
|
|
>
|
|
<object
|
|
data={previewFileUrl ? `${previewFileUrl}#view=FitH` : undefined}
|
|
type="application/pdf"
|
|
className="h-[74vh] w-full border-0"
|
|
title={previewFile.original_name}
|
|
>
|
|
<p className="p-6 text-center text-content-muted">
|
|
<button type="button" onClick={openInTab} className="text-content underline">{t('files.downloadPdf')}</button>
|
|
</p>
|
|
</object>
|
|
</DialogShell>
|
|
)
|
|
}
|