From ebe6603f5e03e5b53c76674ed512466af2413baa Mon Sep 17 00:00:00 2001 From: Abhinav Date: Fri, 24 Jun 2022 15:04:52 +0530 Subject: [PATCH 1/7] fix styles --- src/components/MemberSubscriptionManage.tsx | 24 +++++++++++++-------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/MemberSubscriptionManage.tsx b/src/components/MemberSubscriptionManage.tsx index 4f3c42822..c3f71e1ca 100644 --- a/src/components/MemberSubscriptionManage.tsx +++ b/src/components/MemberSubscriptionManage.tsx @@ -1,4 +1,4 @@ -import { Button, DialogContent, Typography } from '@mui/material'; +import { Box, Button, DialogContent, Typography } from '@mui/material'; import VerticallyCentered from 'components/Container'; import DialogBoxBase from 'components/DialogBox/base'; import DialogTitleWithCloseButton from 'components/DialogBox/titleWithCloseButton'; @@ -8,7 +8,7 @@ import billingService from 'services/billingService'; import { getFamilyPlanAdmin } from 'utils/billing'; import constants from 'utils/strings/constants'; export function MemberSubscriptionManage({ open, userDetails, onClose }) { - const { setDialogMessage } = useContext(AppContext); + const { setDialogMessage, isSmallDisplay } = useContext(AppContext); async function onLeaveFamilyClick() { try { @@ -40,7 +40,11 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) { } return ( - + {constants.SUBSCRIPTION} @@ -49,12 +53,14 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) { - - {constants.FAMILY_SUBSCRIPTION_INFO} - - - {getFamilyPlanAdmin(userDetails.familyData)?.email} - + + + {constants.FAMILY_SUBSCRIPTION_INFO} + + + {getFamilyPlanAdmin(userDetails.familyData)?.email} + + Date: Fri, 24 Jun 2022 15:05:15 +0530 Subject: [PATCH 2/7] make 480px as mobile view width --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a1ab7a934..3dd3af8a1 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -87,7 +87,7 @@ export default function App({ Component, err }) { const loadingBar = useRef(null); const [dialogMessage, setDialogMessage] = useState(); const [messageDialogView, setMessageDialogView] = useState(false); - const isSmallDisplay = useMediaQuery('(max-width:620px)'); + const isSmallDisplay = useMediaQuery('(max-width:480px)'); useEffect(() => { if ( From ebe59cdbe3e7f8d2233606909eb3359f69bd7eab Mon Sep 17 00:00:00 2001 From: Abhinav Date: Fri, 24 Jun 2022 15:07:05 +0530 Subject: [PATCH 3/7] rename isSmallerDisplay to isMobile --- src/components/MemberSubscriptionManage.tsx | 4 ++-- src/components/pages/gallery/PlanSelector/index.tsx | 2 +- src/pages/_app.tsx | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/MemberSubscriptionManage.tsx b/src/components/MemberSubscriptionManage.tsx index c3f71e1ca..55389720e 100644 --- a/src/components/MemberSubscriptionManage.tsx +++ b/src/components/MemberSubscriptionManage.tsx @@ -8,7 +8,7 @@ import billingService from 'services/billingService'; import { getFamilyPlanAdmin } from 'utils/billing'; import constants from 'utils/strings/constants'; export function MemberSubscriptionManage({ open, userDetails, onClose }) { - const { setDialogMessage, isSmallDisplay } = useContext(AppContext); + const { setDialogMessage, isMobile } = useContext(AppContext); async function onLeaveFamilyClick() { try { @@ -44,7 +44,7 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) { open={open} onClose={onClose} maxWidth="xs" - fullScreen={isSmallDisplay}> + fullScreen={isMobile}> {constants.SUBSCRIPTION} diff --git a/src/components/pages/gallery/PlanSelector/index.tsx b/src/components/pages/gallery/PlanSelector/index.tsx index 9bde13151..888c060e0 100644 --- a/src/components/pages/gallery/PlanSelector/index.tsx +++ b/src/components/pages/gallery/PlanSelector/index.tsx @@ -160,7 +160,7 @@ function PlanSelector(props: Props) { return ( void; closeMessageDialog: () => void; setDialogMessage: SetDialogBoxAttributes; - isSmallDisplay: boolean; + isMobile: boolean; }; export enum FLASH_MESSAGE_TYPE { @@ -87,7 +87,7 @@ export default function App({ Component, err }) { const loadingBar = useRef(null); const [dialogMessage, setDialogMessage] = useState(); const [messageDialogView, setMessageDialogView] = useState(false); - const isSmallDisplay = useMediaQuery('(max-width:480px)'); + const isMobile = useMediaQuery('(max-width:480px)'); useEffect(() => { if ( @@ -277,7 +277,7 @@ export default function App({ Component, err }) { finishLoading, closeMessageDialog, setDialogMessage, - isSmallDisplay, + isMobile, }}> {loading ? ( From c48872af88866edcf8581f24a4209410d739d1a2 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Fri, 24 Jun 2022 15:35:18 +0530 Subject: [PATCH 4/7] make dialog screens full screen for mobile --- src/components/Collections/CollectionShare/container.tsx | 3 +++ src/components/Collections/CollectionShare/index.tsx | 9 +++++++-- src/components/PhotoSwipe/InfoDialog/index.tsx | 7 +++++-- src/components/RecoveryKey/index.tsx | 6 +++++- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/Collections/CollectionShare/container.tsx b/src/components/Collections/CollectionShare/container.tsx index 3343faeb7..25bf9a006 100644 --- a/src/components/Collections/CollectionShare/container.tsx +++ b/src/components/Collections/CollectionShare/container.tsx @@ -8,6 +8,9 @@ export const CollectionShareContainer = styled(Dialog)(({ theme }) => ({ '& .MuiPaper-root': { maxWidth: '414px', }, + '& .MuiDialog-paperFullScreen': { + maxWidth: '100%', + }, '& .MuiDialogTitle-root': { padding: theme.spacing(4, 3, 3, 4), }, diff --git a/src/components/Collections/CollectionShare/index.tsx b/src/components/Collections/CollectionShare/index.tsx index 32d0ccba0..ea390712d 100644 --- a/src/components/Collections/CollectionShare/index.tsx +++ b/src/components/Collections/CollectionShare/index.tsx @@ -1,5 +1,5 @@ import EmailShare from './emailShare'; -import React from 'react'; +import React, { useContext } from 'react'; import constants from 'utils/strings/constants'; import { Collection } from 'types/collection'; import { dialogCloseHandler } from 'components/DialogBox/base'; @@ -9,6 +9,7 @@ import { Divider } from '@mui/material'; import { CollectionShareContainer } from './container'; import PublicShare from './publicShare'; +import { AppContext } from 'pages/_app'; interface Props { show: boolean; @@ -17,6 +18,7 @@ interface Props { } function CollectionShare(props: Props) { + const { isMobile } = useContext(AppContext); const handleClose = dialogCloseHandler({ onClose: props.onHide, }); @@ -27,7 +29,10 @@ function CollectionShare(props: Props) { return ( <> - + {constants.SHARE_COLLECTION} diff --git a/src/components/PhotoSwipe/InfoDialog/index.tsx b/src/components/PhotoSwipe/InfoDialog/index.tsx index 7d3a22f06..3b1523757 100644 --- a/src/components/PhotoSwipe/InfoDialog/index.tsx +++ b/src/components/PhotoSwipe/InfoDialog/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import constants from 'utils/strings/constants'; import { formatDateTime } from 'utils/file'; import { RenderFileName } from './RenderFileName'; @@ -8,6 +8,7 @@ import { RenderInfoItem } from './RenderInfoItem'; import DialogBoxBase from 'components/DialogBox/base'; import DialogTitleWithCloseButton from 'components/DialogBox/titleWithCloseButton'; import { DialogContent, Link, Typography } from '@mui/material'; +import { AppContext } from 'pages/_app'; export function InfoModal({ shouldDisableEdits, @@ -19,6 +20,7 @@ export function InfoModal({ exif, scheduleUpdate, }) { + const appContext = useContext(AppContext); return ( + onClose={handleCloseInfo} + fullScreen={appContext.isMobile}> {constants.INFO} diff --git a/src/components/RecoveryKey/index.tsx b/src/components/RecoveryKey/index.tsx index f2f2ab71e..f234a6ee4 100644 --- a/src/components/RecoveryKey/index.tsx +++ b/src/components/RecoveryKey/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { downloadAsFile } from 'utils/file'; import { getRecoveryKey } from 'utils/crypto'; import constants from 'utils/strings/constants'; @@ -8,6 +8,7 @@ import { ButtonProps, Typography } from '@mui/material'; import * as bip39 from 'bip39'; import { DashedBorderWrapper } from './styledComponents'; import { DialogBoxAttributes } from 'types/dialogBox'; +import { AppContext } from 'pages/_app'; // mobile client library only supports english. bip39.setDefaultWordlist('english'); @@ -21,7 +22,9 @@ interface Props { } function RecoveryKey({ somethingWentWrong, ...props }: Props) { + const appContext = useContext(AppContext); const [recoveryKey, setRecoveryKey] = useState(null); + useEffect(() => { if (!props.show) { return; @@ -59,6 +62,7 @@ function RecoveryKey({ somethingWentWrong, ...props }: Props) { return ( Date: Fri, 24 Jun 2022 18:01:20 +0530 Subject: [PATCH 5/7] fix share collection screen --- src/components/Collections/CollectionShare/container.tsx | 2 +- src/pages/_app.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Collections/CollectionShare/container.tsx b/src/components/Collections/CollectionShare/container.tsx index 25bf9a006..9e704a7dd 100644 --- a/src/components/Collections/CollectionShare/container.tsx +++ b/src/components/Collections/CollectionShare/container.tsx @@ -6,7 +6,7 @@ export const CollectionShareContainer = styled(Dialog)(({ theme }) => ({ justifyContent: 'flex-end', }, '& .MuiPaper-root': { - maxWidth: '414px', + width: '414px', }, '& .MuiDialog-paperFullScreen': { maxWidth: '100%', diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4929951a2..5c9b7d71b 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -87,7 +87,7 @@ export default function App({ Component, err }) { const loadingBar = useRef(null); const [dialogMessage, setDialogMessage] = useState(); const [messageDialogView, setMessageDialogView] = useState(false); - const isMobile = useMediaQuery('(max-width:480px)'); + const isMobile = useMediaQuery('(max-width:428px)'); useEffect(() => { if ( From 8235aa3ec3616732140d5631f6bbc99385403136 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 25 Jun 2022 11:04:43 +0530 Subject: [PATCH 6/7] make dialog button fullWidth in general and stacked on mobile --- src/components/DialogBox/base.tsx | 30 +++++++++++++++++++++------- src/components/RecoveryKey/index.tsx | 1 + 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/DialogBox/base.tsx b/src/components/DialogBox/base.tsx index f65366d55..14218aa2f 100644 --- a/src/components/DialogBox/base.tsx +++ b/src/components/DialogBox/base.tsx @@ -1,6 +1,6 @@ import { Dialog, DialogProps, styled } from '@mui/material'; -const DialogBoxBase = styled(Dialog)(({ theme }) => ({ +const DialogBoxBase = styled(Dialog)(({ fullScreen, theme }) => ({ '& .MuiDialog-paper': { padding: theme.spacing(2, 0), }, @@ -10,17 +10,33 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { padding: theme.spacing(2, 3), }, - '& .MuiDialogActions-root': { - padding: theme.spacing(2, 3), - }, + '& .MuiDialogActions-root button': { + width: '100%', fontSize: '18px', lineHeight: '21.78px', padding: theme.spacing(2), }, - '& .MuiDialogActions-root button:not(:first-child)': { - marginLeft: theme.spacing(2), - }, + ...(fullScreen + ? { + '& .MuiDialogActions-root': { + padding: theme.spacing(2, 3), + flexDirection: 'column-reverse', + }, + '& .MuiDialogActions-root button:not(:first-child)': { + margin: 0, + marginBottom: theme.spacing(1), + }, + } + : { + '& .MuiDialogActions-root': { + padding: theme.spacing(2, 3), + }, + '& .MuiDialogActions-root button:not(:first-child)': { + margin: 0, + marginLeft: theme.spacing(2), + }, + }), })); DialogBoxBase.defaultProps = { diff --git a/src/components/RecoveryKey/index.tsx b/src/components/RecoveryKey/index.tsx index f234a6ee4..3180edf40 100644 --- a/src/components/RecoveryKey/index.tsx +++ b/src/components/RecoveryKey/index.tsx @@ -62,6 +62,7 @@ function RecoveryKey({ somethingWentWrong, ...props }: Props) { return ( Date: Sat, 25 Jun 2022 11:05:08 +0530 Subject: [PATCH 7/7] fix collection bar not showing up --- src/services/collectionService.ts | 35 +++++++++++++------------------ 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/src/services/collectionService.ts b/src/services/collectionService.ts index 1b738263b..8c5929014 100644 --- a/src/services/collectionService.ts +++ b/src/services/collectionService.ts @@ -777,17 +777,19 @@ export function getCollectionSummaries( const user: User = getData(LS_KEYS.USER); for (const collection of collections) { - collectionSummaries.set(collection.id, { - id: collection.id, - name: collection.name, - latestFile: collectionLatestFiles.get(collection.id), - fileCount: collectionFilesCount.get(collection.id) ?? 0, - updationTime: collection.updationTime, - type: - collection.owner.id !== user.id - ? CollectionType.shared - : collection.type, - }); + if (collectionFilesCount.get(collection.id)) { + collectionSummaries.set(collection.id, { + id: collection.id, + name: collection.name, + latestFile: collectionLatestFiles.get(collection.id), + fileCount: collectionFilesCount.get(collection.id), + updationTime: collection.updationTime, + type: + collection.owner.id !== user.id + ? CollectionType.shared + : collection.type, + }); + } } collectionSummaries.set( ALL_SECTION, @@ -813,7 +815,7 @@ export function getCollectionSummaries( ) ); - return filterOutEmptyCollectionSummary(collectionSummaries); + return collectionSummaries; } function getCollectionsFileCount(files: EnteFile[]): CollectionFilesCount { @@ -885,12 +887,3 @@ function getTrashedCollectionSummaries( updationTime: collectionsLatestFile.get(TRASH_SECTION)?.updationTime, }; } - -function filterOutEmptyCollectionSummary( - collectionSummaries: CollectionSummaries -) { - return new Map( - // eslint-disable-next-line @typescript-eslint/no-unused-vars - [...collectionSummaries.entries()].filter(([_, v]) => v.fileCount > 0) - ) as CollectionSummaries; -}