beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update export finished ui

Browse source
This commit is contained in:
Abhinav 2022-06-27 08:05:51 +05:30
parent ee0b75b09f
commit 6401b60365
2 changed files with 45 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/components/ExportFinished.tsx
View file

@ -1,19 +1,15 @@
import { Button, DialogActions, DialogContent, Stack } from '@mui/material';
import React from 'react'; import React from 'react';
import { Button } from 'react-bootstrap';
import { ExportStats } from 'types/export'; import { ExportStats } from 'types/export';
import { formatDateTime } from 'utils/file'; import { formatDateTime } from 'utils/file';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import { Label, Row, Value } from './Container'; import { FlexWrapper, Label, Value } from './Container';
import { ComfySpan } from './ExportInProgress'; import { ComfySpan } from './ExportInProgress';
interface Props { interface Props {
show: boolean;
onHide: () => void; onHide: () => void;
exportFolder: string;
exportSize: string;
lastExportTime: number; lastExportTime: number;
exportStats: ExportStats; exportStats: ExportStats;
updateExportFolder: (newFolder: string) => void;
exportFiles: () => void; exportFiles: () => void;
retryFailed: () => void; retryFailed: () => void;
} }
@ -22,70 +18,58 @@ export default function ExportFinished(props: Props) {
const totalFiles = props.exportStats.failed + props.exportStats.success; const totalFiles = props.exportStats.failed + props.exportStats.success;
return ( return (
<> <>
<div <DialogContent>
style={{ <Stack spacing={2.5}>
borderBottom: '1px solid #444', <FlexWrapper>
marginBottom: '20px', <Label width="40%">{constants.LAST_EXPORT_TIME}</Label>
padding: '0 5%', <Value width="60%">
}}> {formatDateTime(props.lastExportTime)}
<Row> </Value>
<Label width="35%">{constants.LAST_EXPORT_TIME}</Label> </FlexWrapper>
<Value width="65%"> <FlexWrapper>
{formatDateTime(props.lastExportTime)} <Label width="40%">
</Value> {constants.SUCCESSFULLY_EXPORTED_FILES}
</Row>
<Row>
<Label width="60%">
{constants.SUCCESSFULLY_EXPORTED_FILES}
</Label>
<Value width="40%">
<ComfySpan>
{props.exportStats.success} / {totalFiles}
</ComfySpan>
</Value>
</Row>
{props.exportStats.failed > 0 && (
<Row>
<Label width="60%">
{constants.FAILED_EXPORTED_FILES}
</Label> </Label>
<Value width="35%"> <Value width="60%">
<ComfySpan> <ComfySpan>
{props.exportStats.failed} / {totalFiles} {props.exportStats.success} / {totalFiles}
</ComfySpan> </ComfySpan>
</Value> </Value>
</Row> </FlexWrapper>
)} {props.exportStats.failed > 0 && (
</div> <FlexWrapper>
<div <Label width="40%">
style={{ {constants.FAILED_EXPORTED_FILES}
width: '100%', </Label>
display: 'flex', <Value width="60%">
justifyContent: 'space-around', <ComfySpan>
}}> {props.exportStats.failed} / {totalFiles}
<Button </ComfySpan>
block </Value>
variant={'outline-secondary'} </FlexWrapper>
onClick={props.onHide}> )}
{constants.CLOSE} </Stack>
</Button> </DialogContent>
<div style={{ width: '30px' }} /> <DialogActions>
{props.exportStats.failed !== 0 ? ( {props.exportStats.failed !== 0 ? (
<Button <Button
block size="large"
variant={'outline-danger'} color="accent"
onClick={props.retryFailed}> onClick={props.retryFailed}>
{constants.RETRY_EXPORT_} {constants.RETRY_EXPORT_}
</Button> </Button>
) : ( ) : (
<Button <Button
block size="large"
variant={'outline-success'} color="primary"
onClick={props.exportFiles}> onClick={props.exportFiles}>
{constants.EXPORT_AGAIN} {constants.EXPORT_AGAIN}
</Button> </Button>
)} )}
</div> <Button color="secondary" size="large" onClick={props.onHide}>
{constants.CLOSE}
</Button>
</DialogActions>
</> </>
); );
} }

15
src/components/ExportModal.tsx
View file

@ -37,7 +37,7 @@ const ExportFolderPathContainer = styled('span')`
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 200px; width: 100%;
/* Beginning of string */ /* Beginning of string */
direction: rtl; direction: rtl;
@ -315,10 +315,7 @@ export default function ExportModal(props: Props) {
case ExportStage.FINISHED: case ExportStage.FINISHED:
return ( return (
<ExportFinished <ExportFinished
{...props} onHide={props.onHide}
exportFolder={exportFolder}
exportSize={exportSize}
updateExportFolder={updateExportFolder}
lastExportTime={lastExportTime} lastExportTime={lastExportTime}
exportStats={exportStats} exportStats={exportStats}
exportFiles={startExport} exportFiles={startExport}
@ -355,8 +352,8 @@ export default function ExportModal(props: Props) {
function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) { function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) {
return ( return (
<FlexWrapper> <FlexWrapper>
<Label width="35%">{constants.DESTINATION}</Label> <Label width="30%">{constants.DESTINATION}</Label>
<Value width="65%"> <Value width="70%">
{!exportFolder ? ( {!exportFolder ? (
<Button color={'accent'} onClick={selectExportDirectory}> <Button color={'accent'} onClick={selectExportDirectory}>
{constants.SELECT_FOLDER} {constants.SELECT_FOLDER}
@ -384,8 +381,8 @@ function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) {
function ExportSize({ exportSize }) { function ExportSize({ exportSize }) {
return ( return (
<FlexWrapper> <FlexWrapper>
<Label width="40%">{constants.EXPORT_SIZE} </Label> <Label width="30%">{constants.EXPORT_SIZE} </Label>
<Value width="60%"> <Value width="70%">
{exportSize ? `${exportSize}` : <EnteSpinner />} {exportSize ? `${exportSize}` : <EnteSpinner />}
</Value> </Value>
</FlexWrapper> </FlexWrapper>