From 61f5221c585de6ccf5b01a209e29d214f9d2b034 Mon Sep 17 00:00:00 2001 From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com> Date: Mon, 25 Aug 2025 12:43:20 +0100 Subject: [PATCH] Feature/v2/landing page upload buttons (#4259) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description of Changes Screenshot 2025-08-22 at 5 28 53 PM Screenshot 2025-08-22 at 5 30 00 PM --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --- .../public/locales/en-GB/translation.json | 4 + .../public/locales/en-US/translation.json | 4 + .../src/components/shared/LandingPage.tsx | 88 +++++++++++++++---- 3 files changed, 79 insertions(+), 17 deletions(-) diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 6b720aadb..256fab60e 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -604,6 +604,10 @@ "desc": "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks." } }, + "landing": { + "addFiles": "Add Files", + "uploadFromComputer": "Upload from computer" + }, "viewPdf": { "tags": "view,read,annotate,text,image,highlight,edit", "title": "View/Edit PDF", diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json index 358ccd53a..eb0483cbe 100644 --- a/frontend/public/locales/en-US/translation.json +++ b/frontend/public/locales/en-US/translation.json @@ -607,6 +607,10 @@ "desc": "Replace color for text and background in PDF and invert full color of pdf to reduce file size" } }, + "landing": { + "addFiles": "Add Files", + "uploadFromComputer": "Upload from computer" + }, "viewPdf": { "tags": "view,read,annotate,text,image,highlight,edit", "title": "View/Edit PDF", diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx index 6c1668a43..937e9cfbd 100644 --- a/frontend/src/components/shared/LandingPage.tsx +++ b/frontend/src/components/shared/LandingPage.tsx @@ -4,18 +4,25 @@ import { Dropzone } from '@mantine/dropzone'; import AddIcon from '@mui/icons-material/Add'; import { useTranslation } from 'react-i18next'; import { useFileHandler } from '../../hooks/useFileHandler'; +import { useFilesModalContext } from '../../contexts/FilesModalContext'; const LandingPage = () => { const { addMultipleFiles } = useFileHandler(); const fileInputRef = React.useRef(null); const { colorScheme } = useMantineColorScheme(); const { t } = useTranslation(); + const { openFilesModal } = useFilesModalContext(); + const [isUploadHover, setIsUploadHover] = React.useState(false); const handleFileDrop = async (files: File[]) => { await addMultipleFiles(files); }; - const handleAddFilesClick = () => { + const handleOpenFilesModal = () => { + openFilesModal(); + }; + + const handleNativeUploadClick = () => { fileInputRef.current?.click(); }; @@ -44,7 +51,7 @@ const LandingPage = () => { borderRadius: '0.5rem 0.5rem 0 0', filter: 'var(--drop-shadow-filter)', backgroundColor: 'var(--landing-paper-bg)', - transition: 'background-color 0.2s ease', + transition: 'background-color 0.4s ease', }} activateOnClick={false} styles={{ @@ -99,26 +106,73 @@ const LandingPage = () => { /> - {/* Add Files Button */} - + + + {/* Hidden file input for native file picker */}