update the upload sections

2022-05-26 10:02:10 +05:30 · 2022-05-26 10:02:10 +05:30 · ee7e3ca9fa
parent fcfb8654ec
commit ee7e3ca9fa
10 changed files with 52 additions and 69 deletions
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@ -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>
    );
 }
--- a/src/components/UploadProgress/InProgressSection.tsx
+++ b/src/components/UploadProgress/InProgressSection.tsx
@ -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>
--- a/src/components/UploadProgress/ResultSection.tsx
+++ b/src/components/UploadProgress/ResultSection.tsx
@ -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,
--- a/src/components/UploadProgress/inProgressSection.tsx
+++ b/src/components/UploadProgress/inProgressSection.tsx
@ -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>
--- a/src/components/UploadProgress/progressBar.tsx
+++ b/src/components/UploadProgress/progressBar.tsx
@ -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>
    );
 }
--- a/src/components/UploadProgress/resultSection.tsx
+++ b/src/components/UploadProgress/resultSection.tsx
@ -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,
--- a/src/components/UploadProgress/section.tsx
+++ b/src/components/UploadProgress/section.tsx
@ -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 }}
+    />
+);
--- a/src/components/UploadProgress/styledComponents.tsx
+++ b/src/components/UploadProgress/styledComponents.tsx
@ -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;
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@ -113,6 +113,13 @@ const darkThemeOptions = createTheme({
                margin: 'dense',
            },
        },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltipPlacementBottom: {
+                    marginTop: '0px !important',
+                },
+            },
+        },
    },

    palette: {
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@ -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 ',