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 { GalleryContext } from 'pages/gallery';
|
||||||
import PreviewCard from './pages/gallery/PreviewCard';
|
import PreviewCard from './pages/gallery/PreviewCard';
|
||||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||||
import { Button } from 'react-bootstrap';
|
|
||||||
import { EnteFile } from 'types/file';
|
import { EnteFile } from 'types/file';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import DownloadManager from 'services/downloadManager';
|
import DownloadManager from 'services/downloadManager';
|
||||||
|
@ -23,6 +22,7 @@ import { FILE_TYPE } from 'constants/file';
|
||||||
import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
|
import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
|
||||||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
|
import EmptyScreen from './EmptyScreen';
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
display: block;
|
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';
|
const PHOTOSWIPE_HASH_SUFFIX = '&opened';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
@ -547,37 +534,7 @@ const PhotoFrame = ({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!isFirstLoad && files.length === 0 && !isInSearchMode ? (
|
{!isFirstLoad && files.length === 0 && !isInSearchMode ? (
|
||||||
<EmptyScreen>
|
<EmptyScreen openFileUploader={openFileUploader} />
|
||||||
{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>
|
|
||||||
) : (
|
) : (
|
||||||
<Container>
|
<Container>
|
||||||
<AutoSizer>
|
<AutoSizer>
|
||||||
|
|
|
@ -261,7 +261,7 @@ export default function Gallery() {
|
||||||
startLoading();
|
startLoading();
|
||||||
let duplicates = await getDuplicateFiles();
|
let duplicates = await getDuplicateFiles();
|
||||||
if (clubSameTimeFilesOnly) {
|
if (clubSameTimeFilesOnly) {
|
||||||
duplicates = await clubDuplicatesByTime(duplicates);
|
duplicates = clubDuplicatesByTime(duplicates);
|
||||||
}
|
}
|
||||||
|
|
||||||
const currFileSizeMap = new Map<number, number>();
|
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[] = [];
|
const result: DuplicateFiles[] = [];
|
||||||
for (const dupe of dupes) {
|
for (const dupe of dupes) {
|
||||||
let files: EnteFile[] = [];
|
let files: EnteFile[] = [];
|
||||||
|
|
Loading…
Reference in a new issue