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

Fix UI feedback (tile contrast, PDF thumbnails)
All checks were successful
Automated Container Build / build-and-push (push) Successful in 30s
Details

Browse source
This commit is contained in:
Elijah 2026-06-15 16:19:19 -07:00
parent c7d39144cd
commit 3c3bf4dd8b
3 changed files with 31 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/globals.css
View file

@ -57,11 +57,11 @@
LIGHT THEME OVERRIDES
============================================ */
[data-theme="light"] {
--color-bg-primary: #fafafa;
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #f5f5f5;
--color-bg-elevated: #ffffff;
--color-bg-hover: #f0f0f5;
--color-bg-primary: #ffffff;
--color-bg-secondary: #f8f9fa;
--color-bg-tertiary: #f0f4f8;
--color-bg-elevated: #f0f4f8;
--color-bg-hover: #e8eaed;
--color-bg-active: #e8e8f0;
--color-bg-glass: rgba(255, 255, 255, 0.8);

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

@ -1161,7 +1161,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
const isVideo = ['mp4', 'mkv', 'avi', 'mov', 'webm', 'ogg'].includes(ext) || file.mime_type?.startsWith('video/');
const isOffice = ['docx', 'doc', 'pptx', 'ppt', 'xlsx', 'xls'].includes(ext) || file.mime_type?.includes('officedocument');
const isAudio = ['mp3', 'flac', 'wav', 'm4a', 'wma', 'aac'].includes(ext) || file.mime_type?.startsWith('audio/');
const isMedia = isImage || isVideo || isOffice || isAudio;
const isMedia = isImage || isVideo || isOffice || isAudio || ext === 'pdf';
if (ext === 'pdf') {
return (
@ -1240,10 +1240,25 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
})();
if (isMedia && file.checksum && viewMode === 'grid') {
const docType = file.name.endsWith('.docx') ? 'docs' : file.name.endsWith('.pptx') ? 'slides' : (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) ? 'sheets' : null;
const docType = file.name.endsWith('.docx') ? 'docs' : file.name.endsWith('.pptx') ? 'slides' : (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) ? 'sheets' : file.name.endsWith('.pdf') ? 'pdf' : null;
// Use fallbackIcon for PDF too so it shows "PDF" text while loading
const currentFallback = ext === 'pdf' ? (
<div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
PDF
</div>
) : fallbackIcon;
return (
<div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
<ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken || ''} docType={docType} />
<ThumbnailImage checksum={file.checksum} fallbackIcon={currentFallback} downloadToken={downloadToken || ''} docType={docType} />
</div>
);
}
if (ext === 'pdf') {
return (
<div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
PDF
</div>
);
}

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

@ -5,7 +5,7 @@ interface ThumbnailImageProps {
checksum: string;
fallbackIcon: React.ReactNode;
downloadToken: string;
docType?: 'docs' | 'slides' | 'sheets' | null;
docType?: 'docs' | 'slides' | 'sheets' | 'pdf' | null;
}
export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) {
@ -25,6 +25,8 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
? 'w-[85%] max-h-[85%] aspect-[16/9] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
: docType === 'sheets'
? 'w-[85%] max-h-[85%] aspect-[1.4/1] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
: docType === 'pdf'
? 'w-full h-full rounded-md overflow-hidden bg-white'
: 'w-full h-full';
const imgElement = (
@ -32,7 +34,11 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
key={key}
src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
alt=""
className={`object-contain ${docType ? 'w-full h-full object-cover mix-blend-multiply' : 'w-full h-full'}`}
className={`object-contain ${
docType === 'pdf' ? 'w-full h-full object-cover object-top' :
docType ? 'w-full h-full object-cover mix-blend-multiply' :
'w-full h-full'
}`}
style={{ display: showFallback ? 'none' : 'block' }}
onError={(e) => {
if (errorCount < 20) {