saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 06:09:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

File manager tweaks

Browse Source
This commit is contained in:
Connor Yoh 2025-08-22 16:33:02 +01:00
parent 57286ab7ff
commit 560abfb348
3 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/fileManager/FileInfoCard.tsx
View File

@ -17,7 +17,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
return ( return (
<Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}> <Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
<Box bg="blue.6" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}> <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
<Text size="sm" fw={500} ta="center" c="white"> <Text size="sm" fw={500} ta="center" c="white">
{t('fileManager.details', 'File Details')} {t('fileManager.details', 'File Details')}
</Text> </Text>
@ -31,7 +31,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
</Text> </Text>
</Group> </Group>
<Divider /> <Divider />
<Group justify="space-between" py="xs"> <Group justify="space-between" py="xs">
<Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text> <Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
{currentFile ? ( {currentFile ? (
@ -43,7 +43,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
)} )}
</Group> </Group>
<Divider /> <Divider />
<Group justify="space-between" py="xs"> <Group justify="space-between" py="xs">
<Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text> <Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
<Text size="sm" fw={500}> <Text size="sm" fw={500}>
@ -51,7 +51,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
</Text> </Text>
</Group> </Group>
<Divider /> <Divider />
<Group justify="space-between" py="xs"> <Group justify="space-between" py="xs">
<Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text> <Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
<Text size="sm" fw={500}> <Text size="sm" fw={500}>
@ -64,4 +64,4 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
); );
}; };
export default FileInfoCard; export default FileInfoCard;

6
frontend/src/components/fileManager/FileSourceButtons.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Stack, Text, Button, Group } from '@mantine/core'; import { Stack, Text, Button, Group } from '@mantine/core';
import HistoryIcon from '@mui/icons-material/History'; import HistoryIcon from '@mui/icons-material/History';
import FolderIcon from '@mui/icons-material/Folder'; import UploadIcon from '@mui/icons-material/Upload';
import CloudIcon from '@mui/icons-material/Cloud'; import CloudIcon from '@mui/icons-material/Cloud';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useFileManagerContext } from '../../contexts/FileManagerContext'; import { useFileManagerContext } from '../../contexts/FileManagerContext';
@ -48,7 +48,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
<Button <Button
variant="subtle" variant="subtle"
color='var(--mantine-color-gray-6)' color='var(--mantine-color-gray-6)'
leftSection={<FolderIcon />} leftSection={<UploadIcon />}
justify={horizontal ? "center" : "flex-start"} justify={horizontal ? "center" : "flex-start"}
onClick={onLocalFileClick} onClick={onLocalFileClick}
fullWidth={!horizontal} fullWidth={!horizontal}
@ -63,7 +63,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
} }
}} }}
> >
{horizontal ? t('fileManager.localFiles', 'Local') : t('fileManager.localFiles', 'Local Files')} {horizontal ? t('fileManager.uploadFiles', 'Upload') : t('fileManager.uploadFiles', 'Upload Files')}
</Button> </Button>
<Button <Button

19
frontend/src/components/shared/FilePreview.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Box } from '@mantine/core'; import { Box, Center } from '@mantine/core';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { FileMetadata } from '../../types/file'; import { FileMetadata } from '../../types/file';
import DocumentThumbnail from './filePreview/DocumentThumbnail'; import DocumentThumbnail from './filePreview/DocumentThumbnail';
import DocumentStack from './filePreview/DocumentStack'; import DocumentStack from './filePreview/DocumentStack';
@ -38,7 +39,21 @@ const FilePreview: React.FC<FilePreviewProps> = ({
onPrevious, onPrevious,
onNext onNext
}) => { }) => {
if (!file) return null; if (!file) {
return (
<Box style={{ width: '100%', height: '100%' }}>
<Center style={{ width: '100%', height: '100%' }}>
<InsertDriveFileIcon
style={{
fontSize: '4rem',
color: 'var(--mantine-color-gray-4)',
opacity: 0.6
}}
/>
</Center>
</Box>
);
}
const hasMultipleFiles = totalFiles > 1; const hasMultipleFiles = totalFiles > 1;