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

Files placeholder

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

1
frontend/public/locales/en-GB/translation.json
View File

@ -1970,6 +1970,7 @@
"dropFilesHere": "Drop files here or click to upload", "dropFilesHere": "Drop files here or click to upload",
"pdfFilesOnly": "PDF files only", "pdfFilesOnly": "PDF files only",
"supportedFileTypes": "Supported file types", "supportedFileTypes": "Supported file types",
"upload": "Upload",
"uploadFile": "Upload File", "uploadFile": "Upload File",
"uploadFiles": "Upload Files", "uploadFiles": "Upload Files",
"noFilesInStorage": "No files available in storage. Upload some files first.", "noFilesInStorage": "No files available in storage. Upload some files first.",

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

@ -10,7 +10,7 @@ interface FileSourceButtonsProps {
horizontal?: boolean; horizontal?: boolean;
} }
const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
horizontal = false horizontal = false
}) => { }) => {
const { activeSource, onSourceChange, onLocalFileClick } = useFileManagerContext(); const { activeSource, onSourceChange, onLocalFileClick } = useFileManagerContext();
@ -44,7 +44,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
> >
{horizontal ? t('fileManager.recent', 'Recent') : t('fileManager.recent', 'Recent')} {horizontal ? t('fileManager.recent', 'Recent') : t('fileManager.recent', 'Recent')}
</Button> </Button>
<Button <Button
variant="subtle" variant="subtle"
color='var(--mantine-color-gray-6)' color='var(--mantine-color-gray-6)'
@ -63,9 +63,9 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
} }
}} }}
> >
{horizontal ? t('fileManager.uploadFiles', 'Upload') : t('fileManager.uploadFiles', 'Upload Files')} {horizontal ? t('fileUpload.uploadFiles', 'Upload') : t('fileUpload.uploadFiles', 'Upload Files')}
</Button> </Button>
<Button <Button
variant={buttonProps.variant('drive')} variant={buttonProps.variant('drive')}
leftSection={<CloudIcon />} leftSection={<CloudIcon />}
@ -100,4 +100,4 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
); );
}; };
export default FileSourceButtons; export default FileSourceButtons;

39
frontend/src/components/tools/shared/FileStatusIndicator.tsx
View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import { Text } from "@mantine/core"; import { Text, Anchor } from "@mantine/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import FolderIcon from '@mui/icons-material/Folder';
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
import { useAllFiles } from "../../../contexts/FileContext";
export interface FileStatusIndicatorProps { export interface FileStatusIndicatorProps {
selectedFiles?: File[]; selectedFiles?: File[];
@ -12,13 +15,39 @@ const FileStatusIndicator = ({
placeholder, placeholder,
}: FileStatusIndicatorProps) => { }: FileStatusIndicatorProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started"); const { openFilesModal } = useFilesModalContext();
const { files: workbenchFiles } = useAllFiles();
// Only show content when no files are selected
// Check if there are no files in the workbench
if (workbenchFiles.length === 0) {
return (
<Text size="sm" c="dimmed">
{t("files.noFiles", "No files uploaded. ")}{" "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
>
<FolderIcon style={{ fontSize: '14px' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text>
);
}
// Show selection status when there are files in workbench
if (selectedFiles.length === 0) { if (selectedFiles.length === 0) {
return ( return (
<Text size="sm" c="dimmed"> <Text size="sm" c="dimmed">
{defaultPlaceholder} {t("files.selectFromWorkbench", "Select files from the workbench or ")}{" "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
>
<FolderIcon style={{ fontSize: '14px' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text> </Text>
); );
} }