update the upload sections
This commit is contained in:
parent
fcfb8654ec
commit
ee7e3ca9fa
|
@ -1,29 +1,24 @@
|
|||
import { Box, Tooltip } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface Iprops {
|
||||
fileList: any[];
|
||||
}
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding-left: 30px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0px;
|
||||
`;
|
||||
|
||||
const ItemLiWrapper = styled.li`
|
||||
padding-left: 5px;
|
||||
color: #ccc;
|
||||
`;
|
||||
|
||||
export default function FileList(props: Iprops) {
|
||||
const Row = ({ index, style }) => (
|
||||
<ItemLiWrapper style={style}>{props.fileList[index]}</ItemLiWrapper>
|
||||
<Tooltip
|
||||
title={props.fileList[index]}
|
||||
placement="bottom-start"
|
||||
enterDelay={300}
|
||||
enterNextDelay={300}>
|
||||
<div style={style}>{props.fileList[index]}</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Box pl={2}>
|
||||
<List
|
||||
height={Math.min(35 * props.fileList.length, 160)}
|
||||
width={'100%'}
|
||||
|
@ -31,6 +26,6 @@ export default function FileList(props: Iprops) {
|
|||
itemCount={props.fileList.length}>
|
||||
{Row}
|
||||
</List>
|
||||
</Wrapper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, InProgressItemContainer } from './styledComponents';
|
||||
import { InProgressItemContainer } from './styledComponents';
|
||||
import { FileProgresses } from '.';
|
||||
import {
|
||||
SectionInfo,
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
|
@ -19,7 +20,7 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
const fileList = props.fileProgressStatuses ?? [];
|
||||
|
||||
return (
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSection defaultExpanded>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
{props.sectionTitle}
|
||||
</UploadProgressSectionTitle>
|
||||
|
|
|
@ -2,9 +2,10 @@ import React from 'react';
|
|||
import FileList from 'components/FileList';
|
||||
import { Typography } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, ResultItemContainer } from './styledComponents';
|
||||
import { ResultItemContainer } from './styledComponents';
|
||||
import { FileUploadResults } from 'constants/upload';
|
||||
import {
|
||||
SectionInfo,
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, InProgressItemContainer } from './styledComponents';
|
||||
import { InProgressItemContainer } from './styledComponents';
|
||||
import { FileProgresses } from '.';
|
||||
import {
|
||||
SectionInfo,
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
|
@ -19,7 +20,7 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
const fileList = props.fileProgressStatuses ?? [];
|
||||
|
||||
return (
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSection defaultExpanded>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
{props.sectionTitle}
|
||||
</UploadProgressSectionTitle>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { LinearProgress, Divider } from '@mui/material';
|
||||
import { LinearProgress, Divider, Box } from '@mui/material';
|
||||
import { UPLOAD_STAGES } from 'constants/upload';
|
||||
|
||||
export function UploadProgressBar({ uploadStage, now }) {
|
||||
return (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
{(uploadStage === UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
|
||||
uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA ||
|
||||
uploadStage === UPLOAD_STAGES.UPLOADING) && (
|
||||
|
@ -18,6 +18,6 @@ export function UploadProgressBar({ uploadStage, now }) {
|
|||
/>
|
||||
)}
|
||||
<Divider />
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,9 +2,10 @@ import React from 'react';
|
|||
import FileList from 'components/FileList';
|
||||
import { Typography } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, ResultItemContainer } from './styledComponents';
|
||||
import { ResultItemContainer } from './styledComponents';
|
||||
import { FileUploadResults } from 'constants/upload';
|
||||
import {
|
||||
SectionInfo,
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
|
|
|
@ -1,11 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import MuiAccordionSummary from '@mui/material/AccordionSummary';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
import { Typography, TypographyProps } from '@mui/material';
|
||||
|
||||
export const UploadProgressSection = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
|
@ -19,32 +17,21 @@ export const UploadProgressSection = styled((props: AccordionProps) => (
|
|||
},
|
||||
}));
|
||||
|
||||
export const UploadProgressSectionTitle = styled(
|
||||
(props: AccordionSummaryProps) => (
|
||||
<MuiAccordionSummary
|
||||
expandIcon={
|
||||
<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)(({ theme }) => ({
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .05)'
|
||||
: 'rgba(0, 0, 0, .03)',
|
||||
flexDirection: 'row-reverse',
|
||||
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'& .MuiAccordionSummary-content': {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
export const UploadProgressSectionTitle = styled(MuiAccordionSummary)(() => ({
|
||||
backgroundColor: 'rgba(255, 255, 255, .05)',
|
||||
}));
|
||||
|
||||
export const UploadProgressSectionContent = styled(MuiAccordionDetails)(
|
||||
({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
})
|
||||
);
|
||||
|
||||
export const SectionInfo = (props: TypographyProps) => (
|
||||
<Typography
|
||||
color={'text.secondary'}
|
||||
variant="body2"
|
||||
{...props}
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -16,10 +16,6 @@ export const Section = styled.div`
|
|||
margin: 20px 0;
|
||||
padding: 0 20px;
|
||||
`;
|
||||
export const SectionInfo = styled.div`
|
||||
margin: 4px 0;
|
||||
padding-left: 15px;
|
||||
`;
|
||||
|
||||
export const SectionContent = styled.div`
|
||||
padding-right: 35px;
|
||||
|
|
|
@ -113,6 +113,13 @@ const darkThemeOptions = createTheme({
|
|||
margin: 'dense',
|
||||
},
|
||||
},
|
||||
MuiTooltip: {
|
||||
styleOverrides: {
|
||||
tooltipPlacementBottom: {
|
||||
marginTop: '0px !important',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
palette: {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Typography } from '@mui/material';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import Link from '@mui/material/Link';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
@ -521,14 +521,12 @@ const englishConstants = {
|
|||
UPLOAD_FAILED: 'upload failed',
|
||||
ETAGS_BLOCKED: (url: string) => (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
we were unable to upload the following files because of your
|
||||
<Box mb={1}>
|
||||
We were unable to upload the following files because of your
|
||||
browser configuration.
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
please disable any addons that might be preventing ente from
|
||||
</Box>
|
||||
<Box>
|
||||
Please disable any addons that might be preventing ente from
|
||||
using <code>eTags</code> to upload large files, or use our{' '}
|
||||
<a
|
||||
href={url}
|
||||
|
@ -538,16 +536,12 @@ const englishConstants = {
|
|||
desktop app
|
||||
</a>{' '}
|
||||
for a more reliable import experience.
|
||||
</p>
|
||||
</Box>
|
||||
</>
|
||||
),
|
||||
|
||||
LIVE_PHOTOS_DETECTED: () => (
|
||||
<p>
|
||||
the photo and video files from your Live Photos have been merged
|
||||
into a single ELP file
|
||||
</p>
|
||||
),
|
||||
LIVE_PHOTOS_DETECTED:
|
||||
'the photo and video files from your Live Photos have been merged into a single ELP file',
|
||||
|
||||
RETRY_FAILED: 'retry failed uploads',
|
||||
FAILED_UPLOADS: 'failed uploads ',
|
||||
|
|
Loading…
Reference in a new issue