diff --git a/public/plus-sign.png b/public/plus-sign.png new file mode 100644 index 000000000..38e90b29c Binary files /dev/null and b/public/plus-sign.png differ diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9af331f3b..6185f4459 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -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 ( + <> + + + ente.io | Privacy friendly alternative to Google Photos + + + + + logo + {constants.COMPANY_NAME} + + {uploadButtonView && } + {user && + + } + + {loading ? ( + + + Loading... + + + ) : ( + + )} + + ); - 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 ( - <> - - - ente.io | Privacy friendly alternative to Google Photos - - - - - logo - {constants.COMPANY_NAME} - - {uploadButtonView &&} - {user && - - } - - {loading ? ( - - - Loading... - - - ) : ( - - )} - - - ); } diff --git a/src/pages/gallery/components/AddCollection.tsx b/src/pages/gallery/components/AddCollection.tsx index 37b85fdbe..27c28d154 100644 --- a/src/pages/gallery/components/AddCollection.tsx +++ b/src/pages/gallery/components/AddCollection.tsx @@ -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(); @@ -40,10 +45,9 @@ export default function AddCollection(props) { })} > - - - Create New Album - + + logo + Create New Album ); diff --git a/src/pages/gallery/components/CollectionDropZone.tsx b/src/pages/gallery/components/CollectionDropZone.tsx index e3d28ae23..151c259aa 100644 --- a/src/pages/gallery/components/CollectionDropZone.tsx +++ b/src/pages/gallery/components/CollectionDropZone.tsx @@ -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)}; diff --git a/src/pages/gallery/components/CollectionSelector.tsx b/src/pages/gallery/components/CollectionSelector.tsx index d224e0d37..5f481aaea 100644 --- a/src/pages/gallery/components/CollectionSelector.tsx +++ b/src/pages/gallery/components/CollectionSelector.tsx @@ -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} > - - - { }} onClick={() => { }} /> - - {item.collection.name} - + + { }} onClick={() => { }} enabled={false} /> + {item.collection.name} + )); return ( - <> - - - - Select/Click on Collection to upload + + + + Select/Click on Collection to upload - - - - {CollectionIcons} - - - - - - + + + + {CollectionIcons} + + + + + ); } diff --git a/src/pages/gallery/components/CreateCollection.tsx b/src/pages/gallery/components/CreateCollection.tsx index 82cc5ad03..682ff65e6 100644 --- a/src/pages/gallery/components/CreateCollection.tsx +++ b/src/pages/gallery/components/CreateCollection.tsx @@ -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) { -
- - -
+
+ + Album Name: + + + +
); diff --git a/src/services/collectionService.ts b/src/services/collectionService.ts index 5db0f6897..4b0280e0f 100644 --- a/src/services/collectionService.ts +++ b/src/services/collectionService.ts @@ -103,7 +103,6 @@ export const getCollectionLatestFile = async ( collections.map(async collection => { const sinceTime: string = (Number(await localForage.getItem(`${collection.id}-time`)) - 1).toString(); const file: file[] = await getFiles([collection], sinceTime, "100", token); - console.log(file); return { file: file[0], collection, diff --git a/src/services/fileService.ts b/src/services/fileService.ts index 65b7cdb04..9922c00f6 100644 --- a/src/services/fileService.ts +++ b/src/services/fileService.ts @@ -72,7 +72,6 @@ export const fetchFiles = async ( let files: Array = (await localForage.getItem('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