update export finished ui
This commit is contained in:
parent
ee0b75b09f
commit
6401b60365
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue