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

made style imporvements

Browse source
This commit is contained in:
Abhinav-grd 2021-01-14 18:04:55 +05:30
parent 95fc146657
commit 6815470c80
8 changed files with 127 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/plus-sign.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

156
src/pages/_app.tsx
View file

@ -17,10 +17,10 @@ import UploadButton from 'pages/gallery/components/UploadButton';
import FullScreenDropZone from 'components/FullScreenDropZone';
localForage.config({
driver: localForage.INDEXEDDB,
name: 'ente-files',
version: 1.0,
storeName: 'files',
driver: localForage.INDEXEDDB,
name: 'ente-files',
version: 1.0,
storeName: 'files',
});
const GlobalStyles = createGlobalStyle`
@ -80,6 +80,10 @@ const GlobalStyles = createGlobalStyle`
.pswp__img {
object-fit: contain;
}
.modal-90w{
width:90vw;
max-width:880px!important;
}
`;
const Image = styled.img`
@ -92,79 +96,79 @@ const FlexContainer = styled.div`
`;
export default function App({ Component, pageProps }) {
const router = useRouter();
const [user, setUser] = useState();
const [loading, setLoading] = useState(false);
const [uploadButtonView, setUploadButtonView] = useState(false);
const [uploadModalView, setUploadModalView] = useState(false);
const router = useRouter();
const [user, setUser] = useState();
const [loading, setLoading] = useState(false);
const [uploadButtonView, setUploadButtonView] = useState(false);
const [uploadModalView, setUploadModalView] = useState(false);
const closeUploadModal = () => setUploadModalView(false);
const showUploadModal = () => setUploadModalView(true);
const closeUploadModal = () => setUploadModalView(false);
const showUploadModal = () => setUploadModalView(true);
useEffect(() => {
const user = getData(LS_KEYS.USER);
setUser(user);
console.log(
`%c${constants.CONSOLE_WARNING_STOP}`,
'color: red; font-size: 52px;'
useEffect(() => {
const user = getData(LS_KEYS.USER);
setUser(user);
console.log(
`%c${constants.CONSOLE_WARNING_STOP}`,
'color: red; font-size: 52px;'
);
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
router.events.on('routeChangeStart', (url: string) => {
if (window.location.pathname !== url.split('?')[0]) {
setLoading(true);
}
});
router.events.on('routeChangeComplete', () => {
const user = getData(LS_KEYS.USER);
setUser(user);
setLoading(false);
});
}, []);
const logout = async () => {
clearKeys();
clearData();
setUploadButtonView(false);
localForage.clear();
const cache = await caches.delete('thumbs');
router.push('/');
};
return (
<>
<FullScreenDropZone
noClick
closeModal={closeUploadModal}
showModal={showUploadModal}
>
<Head>
<title>ente.io | Privacy friendly alternative to Google Photos</title>
</Head>
<GlobalStyles />
<Navbar>
<FlexContainer>
<Image alt='logo' src='/icon.png' />
{constants.COMPANY_NAME}
</FlexContainer>
{uploadButtonView && <UploadButton showModal={showUploadModal} />}
{user &&
<Button variant='link' onClick={logout}>
<PowerSettings />
</Button>
}
</Navbar>
{loading ? (
<Container>
<Spinner animation='border' role='status' variant='primary'>
<span className='sr-only'>Loading...</span>
</Spinner>
</Container>
) : (
<Component uploadModalView={uploadModalView} closeUploadModal={closeUploadModal} setUploadButtonView={setUploadButtonView} />
)}
</FullScreenDropZone>
</>
);
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
router.events.on('routeChangeStart', (url: string) => {
if (window.location.pathname !== url.split('?')[0]) {
setLoading(true);
}
});
router.events.on('routeChangeComplete', () => {
const user = getData(LS_KEYS.USER);
setUser(user);
setLoading(false);
});
}, []);
const logout = async () => {
clearKeys();
clearData();
setUploadButtonView(false);
localForage.clear();
const cache = await caches.delete('thumbs');
router.push('/');
};
return (
<>
<FullScreenDropZone
noClick
closeModal={closeUploadModal}
showModal={showUploadModal}
>
<Head>
<title>ente.io | Privacy friendly alternative to Google Photos</title>
</Head>
<GlobalStyles />
<Navbar>
<FlexContainer>
<Image alt='logo' src='/icon.png' />
{constants.COMPANY_NAME}
</FlexContainer>
{uploadButtonView &&<UploadButton showModal={showUploadModal} />}
{user &&
<Button variant='link' onClick={logout}>
<PowerSettings />
</Button>
}
</Navbar>
{loading ? (
<Container>
<Spinner animation='border' role='status' variant='primary'>
<span className='sr-only'>Loading...</span>
</Spinner>
</Container>
) : (
<Component uploadModalView={uploadModalView} closeUploadModal={closeUploadModal} setUploadButtonView={setUploadButtonView}/>
)}
</FullScreenDropZone>
</>
);
}

12
src/pages/gallery/components/AddCollection.tsx
View file

@ -1,9 +1,14 @@
import React, { useState } from "react";
import { Card } from "react-bootstrap";
import Dropzone from "react-dropzone";
import styled from "styled-components";
import { DropDiv } from "./CollectionDropZone";
import CreateCollection from "./CreateCollection";
const Image = styled.img`
max-height: 190px;
`;
export default function AddCollection(props) {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
@ -40,10 +45,9 @@ export default function AddCollection(props) {
})}
>
<input {...getInputProps()} />
<Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
<Card.Body>
<Card.Text>Create New Album</Card.Text>
</Card.Body>
<Card style={{ cursor: 'pointer' }}>
<Image alt='logo' src='/plus-sign.png' />
<Card.Text style={{ textAlign: "center" }}>Create New Album</Card.Text>
</Card>
</DropDiv>
);

4
src/pages/gallery/components/CollectionDropZone.tsx
View file

@ -19,7 +19,9 @@ export const getColor = (props) => {
export const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
export const DropDiv = styled.div`
width:33%;
width:200px;
margin:5px;
height:230px;
border-width: 2px;
border-radius: 2px;
border-color: ${(props) => getColor(props)};

55
src/pages/gallery/components/CollectionSelector.tsx
View file

@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Button, Card, Modal } from 'react-bootstrap';
import { getActualKey } from 'utils/common/key';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import CollectionDropZone from './CollectionDropZone';
import AddCollection from './AddCollection';
@ -29,41 +28,37 @@ function CollectionSelector(props) {
collectionLatestFile={item}
token={token}
>
<Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
<Card.Body>
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />
<Card.Text>{item.collection.name}</Card.Text>
</Card.Body>
<Card>
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} enabled={false} />
<Card.Text style={{ textAlign: 'center' }}>{item.collection.name}</Card.Text>
</Card>
</CollectionDropZone>
));
return (
<>
<Modal
show={uploadModalView}
centered
onHide={closeUploadModal}
>
<Modal.Header closeButton>
<Modal.Title >
Select/Click on Collection to upload
<Modal
show={uploadModalView}
onHide={closeUploadModal}
dialogClassName="modal-90w"
>
<Modal.Header closeButton>
<Modal.Title >
Select/Click on Collection to upload
</Modal.Title>
</Modal.Header>
<Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
<AddCollection
{...rest}
closeUploadModal={closeUploadModal}
token={token}
/>
{CollectionIcons}
</Modal.Body>
<Modal.Footer>
<Button onClick={closeUploadModal}>Close</Button>
</Modal.Footer>
</Modal>
</>
</Modal.Header>
<Modal.Body style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<AddCollection
{...rest}
closeUploadModal={closeUploadModal}
token={token}
/>
{CollectionIcons}
</Modal.Body>
<Modal.Footer>
<Button onClick={closeUploadModal}>Close</Button>
</Modal.Footer>
</Modal>
);
}

20
src/pages/gallery/components/CreateCollection.tsx
View file

@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { Button, Form, Modal } from 'react-bootstrap';
import { createAlbum } from 'services/collectionService';
import UploadService from 'services/uploadService';
import { collectionLatestFile } from 'services/fileService'
import { collectionLatestFile } from 'services/collectionService'
import { getActualKey } from 'utils/common/key';
export default function CreateCollection(props) {
@ -58,13 +58,15 @@ export default function CreateCollection(props) {
</Modal.Title>
</Modal.Header>
<Modal.Body>
<form onSubmit={handleSubmit}>
<label>
Album Name:
<input type="text" value={albumName} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Album Name:</Form.Label>
<Form.Control type="text" placeholder="Enter Album Name" value={albumName} onChange={handleChange} />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
);

1
src/services/collectionService.ts
View file

@ -103,7 +103,6 @@ export const getCollectionLatestFile = async (
collections.map(async collection => {
const sinceTime: string = (Number(await localForage.getItem<string>(`${collection.id}-time`)) - 1).toString();
const file: file[] = await getFiles([collection], sinceTime, "100", token);
console.log(file);
return {
file: file[0],
collection,

1
src/services/fileService.ts
View file

@ -72,7 +72,6 @@ export const fetchFiles = async (
let files: Array<file> = (await localForage.getItem<file[]>('files')) || [];
const fetchedFiles = await getFiles(collections, null, "100", token);
console.log(fetchedFiles);
files.push(...fetchedFiles);
files = files.sort(
(a, b) => b.metadata.creationTime - a.metadata.creationTime