eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Responsive upload modal footer (#831)

Browse Source
This commit is contained in:
Montassar Ghanmy
2025-02-27 10:49:35 +01:00
committed by GitHub
parent 7d742f1f1b
commit 3181ebdabf
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
+10 -5
View File
@@ -60,18 +60,20 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
isPaused, isPaused,
uploadingCount, uploadingCount,
}) => ( }) => (
<div className="w-full flex bg-[#F0F2F3] text-black p-4 items-center justify-between"> <div className="w-full flex flex-wrap bg-[#F0F2F3] text-black p-4 items-center justify-between">
<div className="flex space-x-4 ml-auto"> <div className="w-full flex flex-wrap gap-2 justify-center sm:justify-end">
{uploadingCount > 0 && ( {uploadingCount > 0 && (
<button <button
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-pause-resume" className="text-blue-500 px-4 py-2 rounded bg-transparent transition-all duration-300 ease-in-out
hover:bg-blue-600 hover:text-white w-full sm:w-auto testid:upload-root-modal-pause-resume"
onClick={pauseOrResumeUpload} onClick={pauseOrResumeUpload}
> >
{isPaused() ? Languages.t('general.resume') : Languages.t('general.pause')} {isPaused() ? Languages.t('general.resume') : Languages.t('general.pause')}
</button> </button>
)} )}
<button <button
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-cancel-close" className="text-blue-500 min-w-[100px] px-4 py-2 rounded bg-transparent transition-all duration-300 ease-in-out
hover:bg-blue-600 hover:text-white w-full sm:w-auto testid:upload-root-modal-cancel-close"
onClick={cancelUpload} onClick={cancelUpload}
> >
{uploadingCount ? Languages.t('general.cancel') : Languages.t('general.close')} {uploadingCount ? Languages.t('general.cancel') : Languages.t('general.close')}
@@ -112,7 +114,10 @@ const PendingRootList = ({
return ( return (
<> <>
{totalRoots > 0 && ( {totalRoots > 0 && (
<div className="fixed bottom-4 right-4 w-1/3 shadow-lg rounded-sm overflow-hidden testid:upload-root-modal"> <div
className="fixed bottom-4 right-4 w-full sm:w-1/2 md:w-1/3 max-w-lg shadow-lg rounded-sm overflow-hidden testid:upload-root-modal
sm:right-4 sm:left-auto sm:translate-x-0 left-1/2 -translate-x-1/2"
>
<ModalHeader <ModalHeader
uploadingCount={uploadingCount + pausedCount} uploadingCount={uploadingCount + pausedCount}
completedCount={completedCount} completedCount={completedCount}