refactor empty screen
This commit is contained in:
parent
b541f09535
commit
494c36ecfc
54
src/components/EmptyScreen.tsx
Normal file
54
src/components/EmptyScreen.tsx
Normal file
|
@ -0,0 +1,54 @@
|
|||
import React, { useContext } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import styled from 'styled-components';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
color: #51cd7c;
|
||||
|
||||
& > svg {
|
||||
filter: drop-shadow(3px 3px 5px rgba(45, 194, 98, 0.5));
|
||||
}
|
||||
`;
|
||||
|
||||
export default function EmptyScreen({ openFileUploader }) {
|
||||
const galleryContext = useContext(GalleryContext);
|
||||
return (
|
||||
<Wrapper>
|
||||
{galleryContext.isDeduplicating ? (
|
||||
<b
|
||||
style={{
|
||||
fontSize: '2em',
|
||||
}}>
|
||||
{constants.NO_DUPLICATES_FOUND}
|
||||
</b>
|
||||
) : (
|
||||
<>
|
||||
<img height={150} src="/images/gallery.png" />
|
||||
<div style={{ color: '#a6a6a6', marginTop: '16px' }}>
|
||||
{constants.UPLOAD_FIRST_PHOTO_DESCRIPTION}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={openFileUploader}
|
||||
style={{
|
||||
marginTop: '32px',
|
||||
paddingLeft: '32px',
|
||||
paddingRight: '32px',
|
||||
paddingTop: '12px',
|
||||
paddingBottom: '12px',
|
||||
fontWeight: 900,
|
||||
}}>
|
||||
{constants.UPLOAD_FIRST_PHOTO}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
|
@ -1,7 +1,6 @@
|
|||
import { GalleryContext } from 'pages/gallery';
|
||||
import PreviewCard from './pages/gallery/PreviewCard';
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { EnteFile } from 'types/file';
|
||||
import styled from 'styled-components';
|
||||
import DownloadManager from 'services/downloadManager';
|
||||
|
@ -23,6 +22,7 @@ import { FILE_TYPE } from 'constants/file';
|
|||
import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
|
||||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
||||
import { useRouter } from 'next/router';
|
||||
import EmptyScreen from './EmptyScreen';
|
||||
|
||||
const Container = styled.div`
|
||||
display: block;
|
||||
|
@ -37,19 +37,6 @@ const Container = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const EmptyScreen = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
color: #51cd7c;
|
||||
|
||||
& > svg {
|
||||
filter: drop-shadow(3px 3px 5px rgba(45, 194, 98, 0.5));
|
||||
}
|
||||
`;
|
||||
|
||||
const PHOTOSWIPE_HASH_SUFFIX = '&opened';
|
||||
|
||||
interface Props {
|
||||
|
@ -547,37 +534,7 @@ const PhotoFrame = ({
|
|||
return (
|
||||
<>
|
||||
{!isFirstLoad && files.length === 0 && !isInSearchMode ? (
|
||||
<EmptyScreen>
|
||||
{galleryContext.isDeduplicating ? (
|
||||
<b
|
||||
style={{
|
||||
fontSize: '2em',
|
||||
}}>
|
||||
{constants.NO_DUPLICATES_FOUND}
|
||||
</b>
|
||||
) : (
|
||||
<>
|
||||
<img height={150} src="/images/gallery.png" />
|
||||
<div
|
||||
style={{ color: '#a6a6a6', marginTop: '16px' }}>
|
||||
{constants.UPLOAD_FIRST_PHOTO_DESCRIPTION}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={openFileUploader}
|
||||
style={{
|
||||
marginTop: '32px',
|
||||
paddingLeft: '32px',
|
||||
paddingRight: '32px',
|
||||
paddingTop: '12px',
|
||||
paddingBottom: '12px',
|
||||
fontWeight: 900,
|
||||
}}>
|
||||
{constants.UPLOAD_FIRST_PHOTO}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</EmptyScreen>
|
||||
<EmptyScreen openFileUploader={openFileUploader} />
|
||||
) : (
|
||||
<Container>
|
||||
<AutoSizer>
|
||||
|
|
|
@ -261,7 +261,7 @@ export default function Gallery() {
|
|||
startLoading();
|
||||
let duplicates = await getDuplicateFiles();
|
||||
if (clubSameTimeFilesOnly) {
|
||||
duplicates = await clubDuplicatesByTime(duplicates);
|
||||
duplicates = clubDuplicatesByTime(duplicates);
|
||||
}
|
||||
|
||||
const currFileSizeMap = new Map<number, number>();
|
||||
|
|
|
@ -53,7 +53,7 @@ export async function getDuplicateFiles() {
|
|||
}
|
||||
}
|
||||
|
||||
export async function clubDuplicatesByTime(dupes: DuplicateFiles[]) {
|
||||
export function clubDuplicatesByTime(dupes: DuplicateFiles[]) {
|
||||
const result: DuplicateFiles[] = [];
|
||||
for (const dupe of dupes) {
|
||||
let files: EnteFile[] = [];
|
||||
|
|
Loading…
Reference in a new issue