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

Merge branch 'ui-redesign' into responsive-images

Browse source
This commit is contained in:
Abhinav 2022-06-25 11:19:25 +05:30
parent 0f58502bd4 fe73b0395a
commit 8bd98a4393
9 changed files with 78 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Collections/CollectionShare/container.tsx
View file

@ -6,7 +6,10 @@ export const CollectionShareContainer = styled(Dialog)(({ theme }) => ({
justifyContent: 'flex-end',
},
'& .MuiPaper-root': {
maxWidth: '414px',
width: '414px',
},
'& .MuiDialog-paperFullScreen': {
maxWidth: '100%',
},
'& .MuiDialogTitle-root': {
padding: theme.spacing(4, 3, 3, 4),

9
src/components/Collections/CollectionShare/index.tsx
View file

@ -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 (
<>
<CollectionShareContainer open={props.show} onClose={handleClose}>
<CollectionShareContainer
open={props.show}
onClose={handleClose}
fullScreen={isMobile}>
<DialogTitleWithCloseButton onClose={handleClose}>
{constants.SHARE_COLLECTION}
</DialogTitleWithCloseButton>

24
src/components/DialogBox/base.tsx
View file

@ -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),
},
...(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 = {

12
src/components/MemberSubscriptionManage.tsx
View file

@ -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, isMobile } = useContext(AppContext);
async function onLeaveFamilyClick() {
try {
@ -40,7 +40,11 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) {
}
return (
<DialogBoxBase open={open} onClose={onClose} maxWidth="xs">
<DialogBoxBase
open={open}
onClose={onClose}
maxWidth="xs"
fullScreen={isMobile}>
<DialogTitleWithCloseButton onClose={onClose}>
<Typography variant="h3">{constants.SUBSCRIPTION}</Typography>
<Typography color={'text.secondary'}>
@ -49,12 +53,14 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) {
</DialogTitleWithCloseButton>
<DialogContent>
<VerticallyCentered>
<Box mb={4}>
<Typography color="text.secondary">
{constants.FAMILY_SUBSCRIPTION_INFO}
</Typography>
<Typography>
{getFamilyPlanAdmin(userDetails.familyData)?.email}
</Typography>
</Box>
<img
width="256px"
src="/images/family-plan/1x.png"

7
src/components/PhotoSwipe/InfoDialog/index.tsx
View file

@ -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 (
<DialogBoxBase
sx={{
@ -28,7 +30,8 @@ export function InfoModal({
},
}}
open={showInfo}
onClose={handleCloseInfo}>
onClose={handleCloseInfo}
fullScreen={appContext.isMobile}>
<DialogTitleWithCloseButton onClose={handleCloseInfo}>
{constants.INFO}
</DialogTitleWithCloseButton>

7
src/components/RecoveryKey/index.tsx
View file

@ -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,8 @@ function RecoveryKey({ somethingWentWrong, ...props }: Props) {
return (
<DialogBox
titleCloseButton
fullScreen={appContext.isMobile}
open={props.show}
onClose={props.onHide}
size="sm"

2
src/components/pages/gallery/PlanSelector/index.tsx
View file

@ -160,7 +160,7 @@ function PlanSelector(props: Props) {
return (
<DialogBoxBase
fullScreen={appContext.isSmallDisplay}
fullScreen={appContext.isMobile}
open={props.modalView}
onClose={props.closeModal}
maxWidth={'xl'}

6
src/pages/_app.tsx
View file

@ -52,7 +52,7 @@ type AppContextType = {
finishLoading: () => 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<DialogBoxAttributes>();
const [messageDialogView, setMessageDialogView] = useState(false);
const isSmallDisplay = useMediaQuery('(max-width:620px)');
const isMobile = useMediaQuery('(max-width:428px)');
useEffect(() => {
if (
@ -277,7 +277,7 @@ export default function App({ Component, err }) {
finishLoading,
closeMessageDialog,
setDialogMessage,
isSmallDisplay,
isMobile,
}}>
{loading ? (
<VerticallyCentered>

15
src/services/collectionService.ts
View file

@ -777,11 +777,12 @@ export function getCollectionSummaries(
const user: User = getData(LS_KEYS.USER);
for (const collection of collections) {
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) ?? 0,
fileCount: collectionFilesCount.get(collection.id),
updationTime: collection.updationTime,
type:
collection.owner.id !== user.id
@ -789,6 +790,7 @@ export function getCollectionSummaries(
: collection.type,
});
}
}
collectionSummaries.set(
ALL_SECTION,
getAllCollectionSummaries(
@ -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;
}