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

Empty Screen: Added upload buttons

Browse source
This commit is contained in:
Ananddubey01 2023-02-10 15:55:54 +05:30
parent 5146b91ded
commit 22f3565c99
2 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/EmptyScreen.tsx
View file

@ -2,8 +2,11 @@ import React, { useContext } from 'react';
import { Button, styled, Typography } from '@mui/material';
import constants from 'utils/strings/constants';
import { DeduplicateContext } from 'pages/deduplicate';
import VerticallyCentered from './Container';
import VerticallyCentered, { FlexWrapper } from './Container';
import uploadManager from 'services/upload/uploadManager';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import FolderIcon from '@mui/icons-material/Folder';
const Wrapper = styled(VerticallyCentered)`
& > svg {
filter: drop-shadow(3px 3px 5px rgba(45, 194, 98, 0.5));
@ -27,7 +30,8 @@ export default function EmptyScreen({ openUploader }) {
<VerticallyCentered
sx={{
flex: 'none',
p: 1.5,
pt: 1.5,
pb: 1.5,
}}>
<VerticallyCentered sx={{ flex: 'none' }}>
{constants.WELCOME_TO_ENTE()}
@ -45,22 +49,45 @@ export default function EmptyScreen({ openUploader }) {
srcSet="/images/empty-state/ente_duck_happy@2x.png,
/images/empty-state/ente_duck_happy@3x.png"
/>
<Typography color="text.secondary" mt={2}>
{constants.UPLOAD_FIRST_PHOTO_DESCRIPTION()}
</Typography>
<span
style={{
cursor:
!uploadManager.shouldAllowNewUpload() &&
'not-allowed',
}}>
<Button
color="accent"
onClick={openUploader}
disabled={!uploadManager.shouldAllowNewUpload()}
sx={{ mt: 4 }}>
{constants.UPLOAD_FIRST_PHOTO}
</Button>
<VerticallyCentered paddingLeft={1} paddingRight={1}>
<Button
color="accent"
onClick={openUploader}
disabled={!uploadManager.shouldAllowNewUpload()}
sx={{
mt: 1.5,
p: 1,
width: 320,
borderRadius: 0.5,
}}>
<FlexWrapper
sx={{ gap: 1 }}
justifyContent="center">
<AddPhotoAlternateIcon />
{constants.UPLOAD_FIRST_PHOTO}
</FlexWrapper>
</Button>
<Button
sx={{
mt: 1.5,
p: 1,
width: 320,
borderRadius: 0.5,
}}>
<FlexWrapper
sx={{ gap: 1 }}
justifyContent="center">
<FolderIcon />
{constants.IMPORT_YOUR_FOLDERS}
</FlexWrapper>
</Button>
</VerticallyCentered>
</span>
</>
)}

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

@ -159,12 +159,8 @@ const englishConstants = {
NO_INTERNET_CONNECTION:
'Please check your internet connection and try again',
TITLE: 'ente Photos',
UPLOAD_FIRST_PHOTO_DESCRIPTION: () => (
<>
Preserve your first memory with <strong> ente </strong>
</>
),
UPLOAD_FIRST_PHOTO: 'Preserve',
UPLOAD_FIRST_PHOTO: 'Upload your first photo',
IMPORT_YOUR_FOLDERS: 'Import your folders',
UPLOAD_DROPZONE_MESSAGE: 'Drop to backup your files',
WATCH_FOLDER_DROPZONE_MESSAGE: 'Drop to add watched folder',
TRASH_FILES_TITLE: 'Delete files?',