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

Merge pull request #634 from ente-io/upload-choice-screen

Browse source 
Upload type choice screen
This commit is contained in:
Manav 2022-07-05 20:03:14 +05:30 committed by GitHub
parent 4634bc0253 c74499cd45
commit d89dd46228
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 74 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Collections/AllCollections/header.tsx
View file

@ -1,6 +1,10 @@
import React from 'react';
import { Box, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
import { FlexWrapper, FluidContainer } from 'components/Container';
import { Box, DialogTitle, Stack, Typography } from '@mui/material';
import {
FlexWrapper,
FluidContainer,
IconButtonWithBG,
} from 'components/Container';
import CollectionSort from 'components/Collections/AllCollections/CollectionSort';
import constants from 'utils/strings/constants';
import Close from '@mui/icons-material/Close';
@ -29,13 +33,9 @@ export default function AllCollectionsHeader({
activeSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
/>
<IconButton
onClick={onClose}
sx={{
background: (theme) => theme.palette.fill.dark,
}}>
<IconButtonWithBG onClick={onClose}>
<Close />
</IconButton>
</IconButtonWithBG>
</Stack>
</FlexWrapper>
</DialogTitle>

10
src/components/Collections/CollectionListBar/index.tsx
View file

@ -11,7 +11,7 @@ import {
import CollectionListBarCard from 'components/Collections/CollectionListBar/CollectionCard';
import useComponentScroll, { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
import useWindowSize from 'hooks/useWindowSize';
import { SpaceBetweenFlex } from 'components/Container';
import { IconButtonWithBG, SpaceBetweenFlex } from 'components/Container';
import ExpandMore from '@mui/icons-material/ExpandMore';
import { AppContext } from 'pages/_app';
import { CollectionSummary } from 'types/collection';
@ -114,13 +114,9 @@ export default function CollectionListBar(props: IProps) {
setCollectionSortBy={props.setCollectionSortBy}
activeSortBy={props.collectionSortBy}
/>
<IconButton
onClick={showAllCollections}
sx={{
background: (theme) => theme.palette.fill.dark,
}}>
<IconButtonWithBG onClick={showAllCollections}>
<ExpandMore />
</IconButton>
</IconButtonWithBG>
</Box>
)}
</Box>

6
src/components/Container.ts
View file

@ -1,4 +1,4 @@
import { Box } from '@mui/material';
import { Box, IconButton } from '@mui/material';
import { styled } from '@mui/material';
const VerticallyCentered = styled(Box)`
@ -69,3 +69,7 @@ export const Overlay = styled(Box)`
top: 0;
left: 0;
`;
export const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
backgroundColor: theme.palette.fill.dark,
}));

3
src/components/DialogBox/TitleWithCloseButton.tsx
View file

@ -21,7 +21,8 @@ const DialogTitleWithCloseButton = (props) => {
<IconButton
aria-label="close"
onClick={onClose}
sx={{ float: 'right' }}>
sx={{ float: 'right' }}
color="secondary">
<CloseIcon />
</IconButton>
)}

15
src/components/Upload/UploadProgress/title.tsx
View file

@ -1,24 +1,13 @@
import React, { useContext } from 'react';
import Close from '@mui/icons-material/Close';
import {
DialogTitle,
Box,
Typography,
IconButton,
styled,
Stack,
} from '@mui/material';
import { SpaceBetweenFlex } from 'components/Container';
import { DialogTitle, Box, Typography, Stack } from '@mui/material';
import { IconButtonWithBG, SpaceBetweenFlex } from 'components/Container';
import { UPLOAD_STAGES } from 'constants/upload';
import constants from 'utils/strings/constants';
import UploadProgressContext from 'contexts/uploadProgress';
import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
backgroundColor: theme.palette.secondary.main,
}));
const UploadProgressTitleText = ({ expanded }) => (
<Typography variant={expanded ? 'title' : 'subtitle'}>
{constants.FILE_UPLOAD}

43
src/components/Upload/UploadTypeSelector/index.tsx
View file

@ -5,7 +5,7 @@ import { default as FolderUploadIcon } from '@mui/icons-material/PermMediaOutlin
import GoogleIcon from '@mui/icons-material/Google';
import { UploadTypeOption } from './option';
import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
import { Dialog, DialogContent, Stack } from '@mui/material';
import { Box, Dialog, Stack, Typography } from '@mui/material';
export default function UploadTypeSelector({
onHide,
@ -17,30 +17,39 @@ export default function UploadTypeSelector({
return (
<Dialog
open={show}
PaperProps={{ sx: { maxWidth: '375px' } }}
PaperProps={{
sx: (theme) => ({
maxWidth: '375px',
p: 1,
[theme.breakpoints.down(360)]: { p: 0 },
}),
}}
onClose={onHide}>
<DialogTitleWithCloseButton onClose={onHide}>
{constants.UPLOAD}
</DialogTitleWithCloseButton>
<DialogContent sx={{ '&&&&': { pt: 0 } }}>
<Stack spacing={1}>
<Box p={1.5} pt={0.5}>
<Stack spacing={0.5}>
<UploadTypeOption
uploadFunc={uploadFiles}
Icon={FileUploadIcon}
uploadName={constants.UPLOAD_FILES}
/>
onClick={uploadFiles}
startIcon={<FileUploadIcon />}>
{constants.UPLOAD_FILES}
</UploadTypeOption>
<UploadTypeOption
uploadFunc={uploadFolders}
Icon={FolderUploadIcon}
uploadName={constants.UPLOAD_DIRS}
/>
onClick={uploadFolders}
startIcon={<FolderUploadIcon />}>
{constants.UPLOAD_DIRS}
</UploadTypeOption>
<UploadTypeOption
uploadFunc={uploadGoogleTakeoutZips}
Icon={GoogleIcon}
uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
/>
onClick={uploadGoogleTakeoutZips}
startIcon={<GoogleIcon />}>
{constants.UPLOAD_GOOGLE_TAKEOUT}
</UploadTypeOption>
</Stack>
</DialogContent>
<Typography p={1.5} pt={4} color="text.secondary">
{constants.DRAG_AND_DROP_HINT}
</Typography>
</Box>
</Dialog>
);
}

15
src/components/Upload/UploadTypeSelector/option.tsx
View file

@ -1,15 +1,18 @@
import React from 'react';
import { Button } from '@mui/material';
import { Button, ButtonProps } from '@mui/material';
import ChevronRight from '@mui/icons-material/ChevronRight';
import { FluidContainer } from 'components/Container';
export function UploadTypeOption({ uploadFunc, Icon, uploadName }) {
type Iprops = ButtonProps<'button'>;
export function UploadTypeOption({ children, ...props }: Iprops) {
return (
<Button
size="large"
sx={{ justifyContent: 'flex-start' }}
onClick={uploadFunc}
color="secondary"
startIcon={<Icon />}>
{uploadName}
endIcon={<ChevronRight />}
{...props}>
<FluidContainer>{children}</FluidContainer>
</Button>
);
}

4
src/components/pages/gallery/PlanSelector/card/paid.tsx
View file

@ -22,7 +22,7 @@ export default function PaidSubscriptionPlanSelectorCard({
}) {
return (
<>
<Box px={1.5} py={0.5}>
<Box pl={1.5} py={0.5}>
<SpaceBetweenFlex>
<Box>
<Typography variant="h3" fontWeight={'bold'}>
@ -33,7 +33,7 @@ export default function PaidSubscriptionPlanSelectorCard({
{constants.GB}
</Typography>
</Box>
<IconButton onClick={closeModal}>
<IconButton onClick={closeModal} color="secondary">
<Close />
</IconButton>
</SpaceBetweenFlex>

8
src/components/pages/gallery/PlanSelector/manageSubscription/button.tsx
View file

@ -4,13 +4,7 @@ import { FluidContainer } from 'components/Container';
import React from 'react';
const ManageSubscriptionButton = ({ children, ...props }: ButtonProps) => (
<Button
{...props}
endIcon={<ChevronRight />}
sx={{
...props.sx,
justifyContent: 'flex-start',
}}>
<Button size="large" endIcon={<ChevronRight />} {...props}>
<FluidContainer>{children}</FluidContainer>
</Button>
);

43
src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx
View file

@ -7,7 +7,6 @@ import {
cancelSubscription,
updatePaymentMethod,
manageFamilyMethod,
hasPaidSubscription,
hasStripeSubscription,
isSubscriptionCancelled,
} from 'utils/billing';
@ -24,15 +23,24 @@ export function ManageSubscription({
closeModal,
setLoading,
}: Iprops) {
const appContext = useContext(AppContext);
const openFamilyPortal = () =>
manageFamilyMethod(appContext.setDialogMessage, setLoading);
return (
<Stack spacing={1}>
{hasPaidSubscription(subscription) && (
<PaidSubscriptionOptions
{hasStripeSubscription(subscription) && (
<StripeSubscriptionOptions
subscription={subscription}
setLoading={setLoading}
closeModal={closeModal}
setLoading={setLoading}
/>
)}
<ManageSubscriptionButton
color="secondary"
onClick={openFamilyPortal}>
{constants.MANAGE_FAMILY_PORTAL}
</ManageSubscriptionButton>
</Stack>
);
}
@ -110,30 +118,3 @@ function StripeSubscriptionOptions({
</>
);
}
function PaidSubscriptionOptions({
subscription,
setLoading,
closeModal,
}: Iprops) {
const appContext = useContext(AppContext);
const openFamilyPortal = () =>
manageFamilyMethod(appContext.setDialogMessage, setLoading);
return (
<>
{hasStripeSubscription(subscription) && (
<StripeSubscriptionOptions
subscription={subscription}
closeModal={closeModal}
setLoading={setLoading}
/>
)}
<ManageSubscriptionButton
color="secondary"
onClick={openFamilyPortal}>
{constants.MANAGE_FAMILY_PORTAL}
</ManageSubscriptionButton>
</>
);
}

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

@ -700,9 +700,9 @@ const englishConstants = {
LOCK: 'Lock',
DOWNLOAD_UPLOAD_LOGS: 'Debug logs',
CHOOSE_UPLOAD_TYPE: 'Upload',
UPLOAD_FILES: 'File Upload',
UPLOAD_DIRS: 'Folder Upload',
UPLOAD_GOOGLE_TAKEOUT: 'Google Takeout',
UPLOAD_FILES: 'File',
UPLOAD_DIRS: 'Folder',
UPLOAD_GOOGLE_TAKEOUT: 'Google takeout',
CANCEL_UPLOADS: 'Cancel uploads',
DEDUPLICATE_FILES: 'Deduplicate files',
NO_DUPLICATES_FOUND: "You've no duplicate files that can be cleared",
@ -778,6 +778,7 @@ const englishConstants = {
),
WEAK_DEVICE:
"The web browser you're using is not powerful enough to encrypt your photos. Please try to log in to ente on your computer, or download the ente mobile/desktop app.",
DRAG_AND_DROP_HINT: 'Or drag and drop into the ente window',
};
export default englishConstants;