diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx index e8a5a5871..6d5d8ef0b 100644 --- a/src/components/ExportModal.tsx +++ b/src/components/ExportModal.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import exportService from 'services/exportService'; import { ExportProgress, ExportStats } from 'types/export'; import { getLocalFiles } from 'services/fileService'; -import { User } from 'types/user'; +import { User, UserDetails } from 'types/user'; import { Button, Dialog, @@ -11,6 +11,7 @@ import { Divider, Stack, styled, + Tooltip, } from '@mui/material'; import { sleep } from 'utils/common'; import { getExportRecordFileUID } from 'utils/export'; @@ -25,18 +26,11 @@ import FolderIcon from '@mui/icons-material/Folder'; import { ExportStage, ExportType } from 'constants/export'; import EnteSpinner from './EnteSpinner'; import DialogTitleWithCloseButton from './DialogBox/TitleWithCloseButton'; - -const FolderIconWrapper = styled('div')` - width: 15%; - margin-left: 10px; - cursor: pointer; - padding: 3px; - border: 1px solid #444; - border-radius: 15%; - &:hover { - background-color: #444; - } -`; +import MoreHoriz from '@mui/icons-material/MoreHoriz'; +import OverflowMenu from './OverflowMenu/menu'; +import { OverflowMenuOption } from './OverflowMenu/option'; +import { useLocalState } from 'hooks/useLocalState'; +import { convertBytesToHumanReadable } from 'utils/billing'; const ExportFolderPathContainer = styled('span')` white-space: nowrap; @@ -52,9 +46,9 @@ const ExportFolderPathContainer = styled('span')` interface Props { show: boolean; onHide: () => void; - usage: string; } export default function ExportModal(props: Props) { + const [userDetails] = useLocalState(LS_KEYS.USER_DETAILS); const [exportStage, setExportStage] = useState(ExportStage.INIT); const [exportFolder, setExportFolder] = useState(''); const [exportSize, setExportSize] = useState(''); @@ -152,8 +146,8 @@ export default function ExportModal(props: Props) { }, [props.show]); useEffect(() => { - setExportSize(props.usage); - }, [props.usage]); + setExportSize(convertBytesToHumanReadable(userDetails?.usage)); + }, [userDetails]); // ============= // STATE UPDATERS @@ -324,39 +318,12 @@ export default function ExportModal(props: Props) { - - - - {!exportFolder ? ( - - ) : ( - <> - - {exportFolder} - - {(exportStage === ExportStage.FINISHED || - exportStage === ExportStage.INIT) && ( - - - - )} - - )} - - - - - - {exportSize ? `${exportSize}` : } - - + + @@ -364,3 +331,62 @@ export default function ExportModal(props: Props) { ); } + +function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) { + return ( + + + + {!exportFolder ? ( + + ) : ( + <> + + + {exportFolder} + + + {(exportStage === ExportStage.FINISHED || + exportStage === ExportStage.INIT) && ( + + )} + + )} + + + ); +} + +function ExportSize({ exportSize }) { + return ( + + + + {exportSize ? `${exportSize}` : } + + + ); +} + +function ExportDirectoryOption({ selectExportDirectory }) { + return ( + }> + }> + {constants.CHANGE_FOLDER} + + + ); +} diff --git a/src/components/Sidebar/HelpSection.tsx b/src/components/Sidebar/HelpSection.tsx index 0c9478958..7909f0a25 100644 --- a/src/components/Sidebar/HelpSection.tsx +++ b/src/components/Sidebar/HelpSection.tsx @@ -3,20 +3,15 @@ import SidebarButton from './Button'; import constants from 'utils/strings/constants'; import ExportModal from 'components/ExportModal'; import exportService from 'services/exportService'; -import { convertBytesToHumanReadable } from 'utils/billing'; import { getEndpoint } from 'utils/common/apiUtil'; import { getToken } from 'utils/common/key'; import isElectron from 'is-electron'; import { downloadApp, initiateEmail } from 'utils/common'; import { AppContext } from 'pages/_app'; -import { useLocalState } from 'hooks/useLocalState'; -import { LS_KEYS } from 'utils/storage/localStorage'; -import { UserDetails } from 'types/user'; import EnteSpinner from 'components/EnteSpinner'; export default function HelpSection() { - const [userDetails] = useLocalState(LS_KEYS.USER_DETAILS); - const [exportModalView, setExportModalView] = useState(false); + const [exportModalView, setExportModalView] = useState(true); const { setDialogMessage } = useContext(AppContext); @@ -72,7 +67,6 @@ export default function HelpSection() { setExportModalView(false)} - usage={convertBytesToHumanReadable(userDetails?.usage ?? 0)} /> ); diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index bacc71747..90f66a575 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -200,7 +200,7 @@ export default function Gallery() { const [electronFiles, setElectronFiles] = useState(null); const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false); - const [sidebarView, setSidebarView] = useState(false); + const [sidebarView, setSidebarView] = useState(true); const closeSidebar = () => setSidebarView(false); const openSidebar = () => setSidebarView(true); diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 52aca8dea..45a99fc64 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -475,7 +475,7 @@ const englishConstants = { EXPORT_DATA: 'Export data', SELECT_FOLDER: 'Select folder', DESTINATION: 'Destination', - TOTAL_EXPORT_SIZE: 'Total export size', + EXPORT_SIZE: 'Export size', START: 'Start', EXPORT_IN_PROGRESS: 'Export in progress...', PAUSE: 'Pause', @@ -754,6 +754,7 @@ const englishConstants = {

), + CHANGE_FOLDER: 'Change Folder', }; export default englishConstants;