From 6815470c80c661a6a428f8c6c98f243d9bdcaa61 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Thu, 14 Jan 2021 18:04:55 +0530 Subject: [PATCH] made style imporvements --- public/plus-sign.png | Bin 0 -> 3024 bytes src/pages/_app.tsx | 156 +++++++++--------- .../gallery/components/AddCollection.tsx | 12 +- .../gallery/components/CollectionDropZone.tsx | 4 +- .../gallery/components/CollectionSelector.tsx | 55 +++--- .../gallery/components/CreateCollection.tsx | 20 ++- src/services/collectionService.ts | 1 - src/services/fileService.ts | 1 - 8 files changed, 127 insertions(+), 122 deletions(-) create mode 100644 public/plus-sign.png diff --git a/public/plus-sign.png b/public/plus-sign.png new file mode 100644 index 0000000000000000000000000000000000000000..38e90b29c16db8710a6e30ab70b8356923489632 GIT binary patch literal 3024 zcmeHJ=Tpfl(l3C1pv?;#|ti&JRXlf|Nrqn-vNSL zc{ZQK&2T4sX8NgtGf9)ZapRZ>2#c2ZqKQ~MO$$k@cx+``hz z+Ron5$<^J%9~pcVA4Z72ej_IC_MLkvsSh4LdYt|&@A-?DuU_ZBDK053tE{Q5t8b(> zeW1}>THD$?I=i}i`WPdlW8)K(Q=ezPE-o#vtg_cQ8{fG*yC@;uB>vq}v#~IBi5giP z!+1&!gXmN4=6T46=T)mLZ$I8N+2a-ORF!tXjvW61A%=Jj??9u{0Gjq%)O$Ghst6HkP%PgX3FuksgcDb&MbhJweSwgrRa`r|s zr|>z7DMcNcVswUQ=mjNus=LfUt!B}4XNo&h;Uk54>1_^uXRD$sE)^?WoAs}!!*WT8 zDT4_8F{_R1ClLi6$I)|?qVDW+kE`=BPnQ~4@2;txH`nY3S6zLNk1q%(=fDcKYK;Yj zdwM~pgYAqDyXSys_1}2e9@(+*xSz{0Gsc;Z_T;GfENO$=EGn*c11w(?oQ2Eq9Ip2hQpwW9>Nz7JLt=R;B&2H=cP=ND`uE6__sPSv%Q1~L z>}3yKg!VQ|a~;16cD0oz^VX?6E--lJm3{_Bk^P8vsmVf_~h}4n9A+% zHD!!9n`bf1MQ*Bw`|*U`Z!f(|cP1+BWL>ZA4IMmH5l(o+mcw)OpU&UH<;HHLa(T1D* zB7wG{q>9xAHtrAPJ(=sPTU{$j>eE+dq=^J)8iQMWmskq2@L1$!fD_dv(akn#imfF_ zkr+Ljv{!_FiHd4QwqompBhwfan>1A&8q*~WUXpcmeCTkRy&BCcs4wXDp9^8fRF>LW z3nYPM--=kpB@!XnKnG6y2EIw{bD5hRK% zG_sijgGH24U`v7uNX)ncjW)KBn-sj3Q>)^+v&1olq(}xpsJ!Pb^r56O`UKDM6243J z8+kEhdSg-2bEAf;KE91qC>|&6#Dm6Vpzb=jM(r6|SQc%7{VR?FFNkbD@vW+NdmY`Z zu_+^A#}PU6?sVv=Rt22GE)KwXD&NOuT#JdkLdvkR>UAOw)9Irg*DKMOyX&gacQLJJ zLhz;qlbvv-Wo!o+`AezZlg1j5G1U1}5x5mLze;p8^;|r^?$XXt50EZc;{&5UiHV=6$S+TT2&-ySfo<1eChz zJuqq$G|31wpCiCnJX-1d@MGe@@K@-CAU3d4!MB{|GLkV5BKJu*JD((|6*x$QcEFnW zUNvt$n;Ne!R}o^(2@=bj$oJ>SGug3zy-o9Pg9y7EpSuYNC0hU{C{}h~6eo;}_@vWV z8YDPbuL~{-)GcQFVk%Hc5w4`)ctzVyae9vJ(_A$8i72_^Byf+RJ&M{NyQ_l`tgzUSS{!u*2w;+am>77})|7Up? z58r~fEZhKmrJ_bKHPhipR4z|!K-u#xq9A%{nZ;essdSq%*oZ2l^H%PWlilW~bFdP| zs@p5R1N?u+MA)rzJ>$O1Zxn_N3>)g0bGWYk+g~82o#xI9xZK^X0Y?%BS@@h(W@vCR p)3Xrq`|OEdU;a($N;sXdDYu-qU$$9OY5Jd|wXw9fC^hrD`7h|$6_fw~ literal 0 HcmV?d00001 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