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

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

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