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

start updating progress bar

Browse source
This commit is contained in:
Abhinav 2022-05-11 01:43:37 +05:30
parent ecc15d90b3
commit eaca35ea66
5 changed files with 107 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Collections/AllCollections.tsx
View file

@ -70,7 +70,7 @@ export default function AllCollections(props: Iprops) {
</DialogTitle>
<Divider />
<DialogContent>
<FlexWrapper>
<FlexWrapper style={{ flexWrap: 'wrap' }}>
{sortCollectionSummaries(
[...collectionSummaries.values()].filter(
(x) =>

1
src/components/Container.ts
View file

@ -59,7 +59,6 @@ export const Value = styled.div<{ width?: string }>`
export const FlexWrapper = styled.div`
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
`;

137
src/components/pages/gallery/UploadProgress.tsx
View file

@ -1,7 +1,7 @@
import ExpandLess from 'components/icons/ExpandLess';
import ExpandMore from 'components/icons/ExpandMore';
import React, { useContext, useState } from 'react';
import { Accordion, Button, Modal, ProgressBar } from 'react-bootstrap';
import { Accordion, Button, Modal } from 'react-bootstrap';
import { FileRejection } from 'react-dropzone';
import styled from 'styled-components';
@ -11,6 +11,20 @@ import { ButtonVariant, getVariantColor } from './LinkButton';
import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
import FileList from 'components/FileList';
import { AppContext } from 'pages/_app';
import {
Box,
Dialog,
DialogContent,
DialogTitle,
IconButton,
LinearProgress,
Typography,
} from '@mui/material';
import { FlexWrapper, SpaceBetweenFlex } from 'components/Container';
import Close from '@mui/icons-material/Close';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import OpenInFullIcon from '@mui/icons-material/OpenInFull';
interface Props {
fileCounter;
uploadStage;
@ -200,63 +214,82 @@ export default function UploadProgress(props: Props) {
sectionInfo = constants.LIVE_PHOTOS_DETECTED();
}
function handleHideModal(): () => void {
return props.uploadStage !== UPLOAD_STAGES.FINISH
? () => {
appContext.setDialogMessage({
title: constants.STOP_UPLOADS_HEADER,
content: constants.STOP_ALL_UPLOADS_MESSAGE,
proceed: {
text: constants.YES_STOP_UPLOADS,
variant: 'danger',
action: props.cancelUploads,
},
close: {
text: constants.NO,
variant: 'secondary',
action: () => {},
},
});
}
: props.closeModal;
function handleHideModal() {
if (props.uploadStage !== UPLOAD_STAGES.FINISH) {
appContext.setDialogMessage({
title: constants.STOP_UPLOADS_HEADER,
content: constants.STOP_ALL_UPLOADS_MESSAGE,
proceed: {
text: constants.YES_STOP_UPLOADS,
variant: 'danger',
action: props.cancelUploads,
},
close: {
text: constants.NO,
variant: 'secondary',
action: () => {},
},
});
} else {
props.closeModal();
}
}
return (
<>
<Modal
show={props.show}
onHide={handleHideModal()}
aria-labelledby="contained-modal-title-vcenter"
centered
backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}>
<Modal.Header
style={{
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
borderBottom: 'none',
paddingTop: '30px',
paddingBottom: '0px',
}}
closeButton={true}>
<h4 style={{ width: '100%' }}>
{props.uploadStage === UPLOAD_STAGES.UPLOADING
? constants.UPLOAD[props.uploadStage](
props.fileCounter
)
: constants.UPLOAD[props.uploadStage]}
</h4>
</Modal.Header>
<Modal.Body>
<Dialog
maxWidth="xs"
fullWidth
open={props.show}
onClose={handleHideModal}>
<DialogTitle>
<SpaceBetweenFlex>
<Box>
<Typography variant="h5">
{constants.FILE_UPLOAD}
</Typography>
<Typography variant="subtitle1">
{props.uploadStage === UPLOAD_STAGES.UPLOADING
? constants.UPLOAD_STAGE_MESSAGE[
props.uploadStage
](props.fileCounter)
: constants.UPLOAD_STAGE_MESSAGE[
props.uploadStage
]}
</Typography>
</Box>
<Box>
<FlexWrapper>
<IconButton>
<OpenInFullIcon
sx={{
padding: '4px',
transform: 'rotate(90deg)',
}}
/>
</IconButton>
<IconButton>
<ExpandMoreIcon />
</IconButton>
<IconButton>
<Close />
</IconButton>
</FlexWrapper>
</Box>
</SpaceBetweenFlex>
</DialogTitle>
<DialogContent>
{(props.uploadStage ===
UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
props.uploadStage ===
UPLOAD_STAGES.EXTRACTING_METADATA ||
props.uploadStage === UPLOAD_STAGES.UPLOADING) && (
<ProgressBar
now={props.now}
animated
variant="upload-progress-bar"
<LinearProgress
sx={{
height: '2px',
}}
color="negative"
variant="determinate"
value={props.now}
/>
)}
{props.uploadStage === UPLOAD_STAGES.UPLOADING && (
@ -331,7 +364,7 @@ export default function UploadProgress(props: Props) {
sectionTitle={constants.TOO_LARGE_UPLOADS}
sectionInfo={constants.TOO_LARGE_INFO}
/>
</Modal.Body>
</DialogContent>
{props.uploadStage === UPLOAD_STAGES.FINISH && (
<Modal.Footer style={{ border: 'none' }}>
{props.uploadStage === UPLOAD_STAGES.FINISH &&
@ -355,7 +388,7 @@ export default function UploadProgress(props: Props) {
))}
</Modal.Footer>
)}
</Modal>
</Dialog>
</>
);
}

18
src/darkThemeOptions.tsx
View file

@ -4,16 +4,27 @@ declare module '@mui/material/styles' {
interface Palette {
accent: Palette['primary'];
danger: Palette['primary'];
negative: Palette['primary'];
}
interface PaletteOptions {
accent: PaletteOptions['primary'];
danger: PaletteOptions['primary'];
accent?: PaletteOptions['primary'];
danger?: PaletteOptions['primary'];
negative?: PaletteOptions['primary'];
}
}
declare module '@mui/material/Button' {
export interface ButtonPropsColorOverrides {
danger: true;
negative: true;
accent: true;
}
}
declare module '@mui/material/LinearProgress' {
export interface LinearProgressPropsColorOverrides {
danger: true;
negative: true;
accent: true;
}
}
@ -62,6 +73,9 @@ const darkThemeOptions = createTheme({
primary: {
main: 'hsla(0, 0%, 11%, 1)',
},
negative: {
main: '#fff',
},
secondary: {
main: 'hsla(0, 0%, 100%, 0.2)',
},

9
src/utils/strings/englishConstants.tsx
View file

@ -109,12 +109,13 @@ const englishConstants = {
NO: 'no',
NOTHING_HERE: 'nothing to see here yet 👀',
UPLOAD: 'Upload',
FILE_UPLOAD: 'File Upload',
UPLOAD_STAGE_MESSAGE: {
0: 'preparing to upload',
1: 'reading google metadata files',
2: 'reading file metadata',
0: 'Preparing to upload',
1: 'Reading google metadata files',
2: 'Reading file metadata',
3: (fileCounter) =>
`${fileCounter.finished} / ${fileCounter.total} files backed up`,
`${fileCounter.finished} of ${fileCounter.total} uploaded`,
4: 'backup complete',
5: 'cancelling remaining uploads',
},