Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: thumbnail image border styles and xlsx generation
All checks were successful
Automated Container Build / build-and-push (push) Successful in 38s
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 15:19:21 -07:00
parent d4e66c9afa
commit 14af17f487
3 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/FileExplorer.tsx
View file

@ -1216,9 +1216,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
})(); })();
if (isMedia && file.checksum && viewMode === 'grid') { if (isMedia && file.checksum && viewMode === 'grid') {
const isDoc = file.name.endsWith('.docx') || file.name.endsWith('.pptx') || file.name.endsWith('.xlsx');
return ( return (
<div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md"> <div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
<ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken} /> <ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken} isDocument={isDoc} />
</div> </div>
); );
} }

2
frontend/src/components/OfficeHome.tsx
View file

@ -244,7 +244,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
> >
{file.checksum ? ( {file.checksum ? (
<div className="absolute inset-0 w-full h-full flex items-center justify-center z-0"> <div className="absolute inset-0 w-full h-full flex items-center justify-center z-0">
<ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} /> <ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} isDocument={true} />
</div> </div>
) : ( ) : (
<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" /> <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />

7
frontend/src/components/ThumbnailImage.tsx
View file

@ -5,9 +5,10 @@ interface ThumbnailImageProps {
checksum: string; checksum: string;
fallbackIcon: React.ReactNode; fallbackIcon: React.ReactNode;
downloadToken: string; downloadToken: string;
isDocument?: boolean;
} }
export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken }: ThumbnailImageProps) { export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, isDocument }: ThumbnailImageProps) {
const [errorCount, setErrorCount] = useState(0); const [errorCount, setErrorCount] = useState(0);
const [key, setKey] = useState(0); const [key, setKey] = useState(0);
const [showFallback, setShowFallback] = useState(false); const [showFallback, setShowFallback] = useState(false);
@ -18,8 +19,8 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken }
key={key} key={key}
src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''} src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
alt="" alt=""
className="w-full h-full object-contain bg-white border border-black/10 dark:border-white/10 shadow-sm rounded-sm" className={`object-contain ${isDocument ? 'max-w-[85%] max-h-[85%] bg-white border border-gray-300 dark:border-gray-600 shadow-md' : 'w-full h-full'}`}
style={{ display: showFallback ? 'none' : 'block', padding: '2px' }} style={{ display: showFallback ? 'none' : 'block' }}
onError={(e) => { onError={(e) => {
if (errorCount < 20) { if (errorCount < 20) {
e.currentTarget.style.display = 'none'; e.currentTarget.style.display = 'none';