Merge branch 'ui-redesign' into responsive-images
This commit is contained in:
commit
8bd98a4393
|
@ -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),
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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>
|
||||
<Typography color="text.secondary">
|
||||
{constants.FAMILY_SUBSCRIPTION_INFO}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{getFamilyPlanAdmin(userDetails.familyData)?.email}
|
||||
</Typography>
|
||||
<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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -160,7 +160,7 @@ function PlanSelector(props: Props) {
|
|||
|
||||
return (
|
||||
<DialogBoxBase
|
||||
fullScreen={appContext.isSmallDisplay}
|
||||
fullScreen={appContext.isMobile}
|
||||
open={props.modalView}
|
||||
onClose={props.closeModal}
|
||||
maxWidth={'xl'}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue