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 { Button } from 'react-bootstrap';
import { ExportStats } from 'types/export';
import { formatDateTime } from 'utils/file';
import constants from 'utils/strings/constants';
import { Label, Row, Value } from './Container';
import { FlexWrapper, Label, Value } from './Container';
import { ComfySpan } from './ExportInProgress';
interface Props {
show: boolean;
onHide: () => void;
exportFolder: string;
exportSize: string;
lastExportTime: number;
exportStats: ExportStats;
updateExportFolder: (newFolder: string) => void;
exportFiles: () => void;
retryFailed: () => void;
}
@ -22,70 +18,58 @@ export default function ExportFinished(props: Props) {
const totalFiles = props.exportStats.failed + props.exportStats.success;
return (
<>
<div
style={{
borderBottom: '1px solid #444',
marginBottom: '20px',
padding: '0 5%',
}}>
<Row>
<Label width="35%">{constants.LAST_EXPORT_TIME}</Label>
<Value width="65%">
{formatDateTime(props.lastExportTime)}
</Value>
</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}
<DialogContent>
<Stack spacing={2.5}>
<FlexWrapper>
<Label width="40%">{constants.LAST_EXPORT_TIME}</Label>
<Value width="60%">
{formatDateTime(props.lastExportTime)}
</Value>
</FlexWrapper>
<FlexWrapper>
<Label width="40%">
{constants.SUCCESSFULLY_EXPORTED_FILES}
</Label>
<Value width="35%">
<Value width="60%">
<ComfySpan>
{props.exportStats.failed} / {totalFiles}
{props.exportStats.success} / {totalFiles}
</ComfySpan>
</Value>
</Row>
)}
</div>
<div
style={{
width: '100%',
display: 'flex',
justifyContent: 'space-around',
}}>
<Button
block
variant={'outline-secondary'}
onClick={props.onHide}>
{constants.CLOSE}
</Button>
<div style={{ width: '30px' }} />
</FlexWrapper>
{props.exportStats.failed > 0 && (
<FlexWrapper>
<Label width="40%">
{constants.FAILED_EXPORTED_FILES}
</Label>
<Value width="60%">
<ComfySpan>
{props.exportStats.failed} / {totalFiles}
</ComfySpan>
</Value>
</FlexWrapper>
)}
</Stack>
</DialogContent>
<DialogActions>
{props.exportStats.failed !== 0 ? (
<Button
block
variant={'outline-danger'}
size="large"
color="accent"
onClick={props.retryFailed}>
{constants.RETRY_EXPORT_}
</Button>
) : (
<Button
block
variant={'outline-success'}
size="large"
color="primary"
onClick={props.exportFiles}>
{constants.EXPORT_AGAIN}
</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;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
width: 100%;
/* Beginning of string */
direction: rtl;
@ -315,10 +315,7 @@ export default function ExportModal(props: Props) {
case ExportStage.FINISHED:
return (
<ExportFinished
{...props}
exportFolder={exportFolder}
exportSize={exportSize}
updateExportFolder={updateExportFolder}
onHide={props.onHide}
lastExportTime={lastExportTime}
exportStats={exportStats}
exportFiles={startExport}
@ -355,8 +352,8 @@ export default function ExportModal(props: Props) {
function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) {
return (
<FlexWrapper>
<Label width="35%">{constants.DESTINATION}</Label>
<Value width="65%">
<Label width="30%">{constants.DESTINATION}</Label>
<Value width="70%">
{!exportFolder ? (
<Button color={'accent'} onClick={selectExportDirectory}>
{constants.SELECT_FOLDER}
@ -384,8 +381,8 @@ function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) {
function ExportSize({ exportSize }) {
return (
<FlexWrapper>
<Label width="40%">{constants.EXPORT_SIZE} </Label>
<Value width="60%">
<Label width="30%">{constants.EXPORT_SIZE} </Label>
<Value width="70%">
{exportSize ? `${exportSize}` : <EnteSpinner />}
</Value>
</FlexWrapper>