TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Dialog related refactoring (#2503)

Browse Source
This commit is contained in:
Manav Rathi
2024-07-20 21:25:07 +05:30
committed by GitHub
parent 1cf2b24049 92fae72760
commit ab3bb113ea
33 changed files with 143 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/apps/accounts/src/pages/_app.tsx
View File

@@ -1,5 +1,6 @@
import { staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import { disableDiskLogs } from "@/base/log";
import { logUnhandledErrorsAndRejections } from "@/base/log-web";
@@ -7,11 +8,10 @@ import { Overlay } from "@ente/shared/components/Container";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { AppNavbar } from "@ente/shared/components/Navbar/app";
import { clearData } from "@ente/shared/storage/localStorage";
import { getTheme } from "@ente/shared/themes";
import { THEME_COLOR } from "@ente/shared/themes/constants";
import { CssBaseline, useMediaQuery } from "@mui/material";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { t } from "i18next";
import type { AppProps } from "next/app";
@@ -28,8 +28,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
>();
const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
const isMobile = useMediaQuery("(max-width: 428px)");
useEffect(() => {
disableDiskLogs();
// The accounts app has no local state, but some older builds might've
@@ -51,7 +49,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
const appContext = {
showNavBar: setShowNavbar,
isMobile,
setDialogBoxAttributesV2,
};
@@ -86,7 +83,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
<EnteSpinner />
</Overlay>
)}
{showNavbar && <AppNavbar isMobile={isMobile} />}
{showNavbar && <AppNavbar />}
{isI18nReady && <Component {...pageProps} />}
</AppContext.Provider>
</ThemeProvider>

43
web/apps/accounts/src/pages/passkeys/index.tsx
View File

@@ -4,7 +4,6 @@ import { Titlebar } from "@/base/components/Titlebar";
import log from "@/base/log";
import { ensure } from "@/utils/ensure";
import { CenteredFlex } from "@ente/shared/components/Container";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import InfoItem from "@ente/shared/components/Info/InfoItem";
import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
@@ -15,7 +14,15 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import KeyIcon from "@mui/icons-material/Key";
import { Box, Stack, Typography, styled, useMediaQuery } from "@mui/material";
import {
Box,
Dialog,
Stack,
Typography,
styled,
useMediaQuery,
useTheme,
} from "@mui/material";
import { t } from "i18next";
import React, { useCallback, useEffect, useState } from "react";
import {
@@ -361,7 +368,7 @@ const RenamePasskeyDialog: React.FC<RenamePasskeyDialogProps> = ({
passkey,
onRenamePasskey,
}) => {
const fullScreen = useMediaQuery("(max-width: 428px)");
const fullScreen = useMediaQuery(useTheme().breakpoints.down("sm"));
const handleSubmit = async (inputValue: string) => {
try {
@@ -373,20 +380,24 @@ const RenamePasskeyDialog: React.FC<RenamePasskeyDialogProps> = ({
};
return (
<DialogBoxV2
fullWidth
<Dialog
{...{ open, onClose, fullScreen }}
attributes={{ title: t("rename_passkey") }}
PaperProps={{ sx: { width: { sm: "360px" } } }}
>
<SingleInputForm
initialValue={passkey.friendlyName}
callback={handleSubmit}
placeholder={t("enter_passkey_name")}
buttonText={t("RENAME")}
fieldType="text"
secondaryButtonAction={onClose}
submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
/>
</DialogBoxV2>
<Stack gap={3} p={3}>
<Typography variant="large" fontWeight={"bold"}>
{t("rename_passkey")}
</Typography>
<SingleInputForm
initialValue={passkey.friendlyName}
callback={handleSubmit}
placeholder={t("enter_passkey_name")}
buttonText={t("RENAME")}
fieldType="text"
secondaryButtonAction={onClose}
submitButtonProps={{ sx: { mt: 1, mb: 0 } }}
/>
</Stack>
</Dialog>
);
};

1
web/apps/accounts/src/types/context.ts
View File

@@ -8,7 +8,6 @@ import { createContext, useContext } from "react";
interface AppContextT {
/** Show or hide the app's navigation bar. */
showNavBar: (show: boolean) => void;
isMobile: boolean;
setDialogBoxAttributesV2: (attrs: DialogBoxAttributesV2) => void;
}

8
web/apps/auth/src/pages/_app.tsx
View File

@@ -2,6 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
import type { AccountsContextT } from "@/accounts/types/context";
import { clientPackageName, staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import {
logStartupBanner,
@@ -13,7 +14,6 @@ import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { MessageContainer } from "@ente/shared/components/MessageContainer";
import { AppNavbar } from "@ente/shared/components/Navbar/app";
import { useLocalState } from "@ente/shared/hooks/useLocalState";
import HTTPService from "@ente/shared/network/HTTPService";
import {
@@ -24,7 +24,7 @@ import {
import { getTheme } from "@ente/shared/themes";
import { THEME_COLOR } from "@ente/shared/themes/constants";
import type { User } from "@ente/shared/user/types";
import { CssBaseline, useMediaQuery } from "@mui/material";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { t } from "i18next";
import type { AppProps } from "next/app";
@@ -70,7 +70,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
DialogBoxAttributesV2 | undefined
>();
const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
const isMobile = useMediaQuery("(max-width: 428px)");
const [themeColor, setThemeColor] = useLocalState(
LS_KEYS.THEME,
THEME_COLOR.DARK,
@@ -143,7 +142,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
const appContext = {
logout,
showNavBar,
isMobile,
setDialogBoxAttributesV2,
startLoading,
finishLoading,
@@ -162,7 +160,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
<ThemeProvider theme={getTheme(themeColor, "auth")}>
<CssBaseline enableColorScheme />
{showNavbar && <AppNavbar isMobile={isMobile} />}
{showNavbar && <AppNavbar />}
<MessageContainer>
{isI18nReady && offline && t("OFFLINE_MSG")}
</MessageContainer>

6
web/apps/auth/src/pages/auth.tsx
View File

@@ -1,3 +1,4 @@
import { NavbarBase } from "@/base/components/Navbar";
import { ensure } from "@/utils/ensure";
import {
HorizontalFlex,
@@ -6,7 +7,6 @@ import {
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { sessionExpiredDialogAttributes } from "@ente/shared/components/LoginComponents";
import NavbarBase from "@ente/shared/components/Navbar/base";
import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";
@@ -141,10 +141,10 @@ const Page: React.FC = () => {
export default Page;
const AuthNavbar: React.FC = () => {
const { isMobile, logout } = ensure(useContext(AppContext));
const { logout } = ensure(useContext(AppContext));
return (
<NavbarBase isMobile={isMobile}>
<NavbarBase>
<HorizontalFlex flex={1} justifyContent={"center"}>
<EnteLogo />
</HorizontalFlex>

6
web/apps/photos/src/components/Collections/AllCollections/index.tsx
View File

@@ -1,11 +1,9 @@
import Divider from "@mui/material/Divider";
import { Divider, useMediaQuery } from "@mui/material";
import {
AllCollectionDialog,
Transition,
} from "components/Collections/AllCollections/dialog";
import { COLLECTION_LIST_SORT_BY } from "constants/collection";
import { AppContext } from "pages/_app";
import { useContext } from "react";
import { CollectionSummary } from "types/collection";
import AllCollectionContent from "./content";
import AllCollectionsHeader from "./header";
@@ -32,7 +30,7 @@ export default function AllCollections(props: Iprops) {
setCollectionListSortBy,
isInHiddenSection,
} = props;
const { isMobile } = useContext(AppContext);
const isMobile = useMediaQuery("(max-width: 428px)");
const onCollectionClick = (collectionID: number) => {
setActiveCollectionID(collectionID);

12
web/apps/photos/src/components/Collections/CollectionListBar/index.tsx
View File

@@ -7,7 +7,7 @@ import useComponentScroll, {
} from "@ente/shared/hooks/useComponentScroll";
import useWindowSize from "@ente/shared/hooks/useWindowSize";
import ExpandMore from "@mui/icons-material/ExpandMore";
import { Box, IconButton, Typography } from "@mui/material";
import { Box, IconButton, Typography, useMediaQuery } from "@mui/material";
import CollectionListBarCard from "components/Collections/CollectionListBar/CollectionCard";
import {
CollectionListBarWrapper,
@@ -16,8 +16,7 @@ import {
import { ALL_SECTION, COLLECTION_LIST_SORT_BY } from "constants/collection";
import { t } from "i18next";
import memoize from "memoize-one";
import { AppContext } from "pages/_app";
import React, { useContext, useEffect } from "react";
import React, { useEffect } from "react";
import AutoSizer from "react-virtualized-auto-sizer";
import {
FixedSizeList as List,
@@ -94,9 +93,8 @@ const CollectionListBar = (props: IProps) => {
isInHiddenSection,
} = props;
const appContext = useContext(AppContext);
const windowSize = useWindowSize();
const isMobile = useMediaQuery("(max-width: 428px)");
const {
componentRef: collectionListWrapperRef,
@@ -136,7 +134,7 @@ const CollectionListBar = (props: IProps) => {
<Typography>
{isInHiddenSection ? t("HIDDEN_ALBUMS") : t("ALBUMS")}
</Typography>
{appContext.isMobile && (
{isMobile && (
<Box display="flex" alignItems={"center"} gap={1}>
<CollectionListSortBy
setSortBy={props.setCollectionListSortBy}
@@ -182,7 +180,7 @@ const CollectionListBar = (props: IProps) => {
/>
)}
</CollectionListWrapper>
{!appContext.isMobile && (
{!isMobile && (
<Box
display="flex"
alignItems={"center"}

9
web/apps/photos/src/components/Collections/CollectionSelector/index.tsx
View File

@@ -1,6 +1,6 @@
import { FlexWrapper } from "@ente/shared/components/Container";
import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
import { DialogContent } from "@mui/material";
import { DialogContent, useMediaQuery } from "@mui/material";
import { AllCollectionDialog } from "components/Collections/AllCollections/dialog";
import {
COLLECTION_SORT_ORDER,
@@ -8,8 +8,7 @@ import {
DUMMY_UNCATEGORIZED_COLLECTION,
} from "constants/collection";
import { t } from "i18next";
import { AppContext } from "pages/_app";
import { useContext, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { createUnCategorizedCollection } from "services/collectionService";
import {
Collection,
@@ -45,7 +44,7 @@ function CollectionSelector({
collections,
...props
}: Props) {
const appContext = useContext(AppContext);
const isMobile = useMediaQuery("(max-width: 428px)");
const [collectionsToShow, setCollectionsToShow] = useState<
CollectionSummary[]
@@ -126,7 +125,7 @@ function CollectionSelector({
onClose={onUserTriggeredClose}
open={props.open}
position="center"
fullScreen={appContext.isMobile}
fullScreen={isMobile}
>
<DialogTitleWithCloseButton onClose={onUserTriggeredClose}>
{attributes.intent === CollectionSelectorIntent.upload

2
web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkPassword/setPassword.tsx
View File

@@ -47,6 +47,8 @@ export function PublicLinkSetPassword({
BackdropProps={{ sx: { position: "absolute" } }}
sx={{ position: "absolute" }}
PaperProps={{ sx: { p: 1 } }}
maxWidth={"sm"}
fullWidth
>
<Stack spacing={3} p={1.5}>
<Typography variant="h3" px={1} py={0.5} fontWeight={"bold"}>

8
web/apps/photos/src/components/DeleteAccountModal.tsx
View File

@@ -2,7 +2,7 @@ import log from "@/base/log";
import { initiateEmail } from "@/new/photos/utils/web";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import EnteButton from "@ente/shared/components/EnteButton";
import { Button, Link, Stack } from "@mui/material";
import { Button, Link, Stack, useMediaQuery } from "@mui/material";
import { Formik, type FormikHelpers } from "formik";
import { t } from "i18next";
import { AppContext } from "pages/_app";
@@ -28,15 +28,17 @@ interface FormValues {
}
const DeleteAccountModal = ({ open, onClose }: Iprops) => {
const { setDialogBoxAttributesV2, isMobile, logout } =
useContext(AppContext);
const { setDialogBoxAttributesV2, logout } = useContext(AppContext);
const { authenticateUser } = useContext(GalleryContext);
const [loading, setLoading] = useState(false);
const deleteAccountChallenge = useRef<string>();
const [acceptDataDeletion, setAcceptDataDeletion] = useState(false);
const reasonAndFeedbackRef = useRef<{ reason: string; feedback: string }>();
const isMobile = useMediaQuery("(max-width: 428px)");
useEffect(() => {
preloadImage("/images/delete-account");
}, []);

7
web/apps/photos/src/components/ExportModal.tsx
View File

@@ -156,7 +156,12 @@ export default function ExportModal(props: Props) {
};
return (
<Dialog open={props.show} onClose={props.onHide} maxWidth="xs">
<Dialog
open={props.show}
onClose={props.onHide}
maxWidth="xs"
fullWidth
>
<DialogTitleWithCloseButton onClose={props.onHide}>
{t("EXPORT_DATA")}
</DialogTitleWithCloseButton>

12
web/apps/photos/src/components/MemberSubscriptionManage.tsx
View File

@@ -1,3 +1,4 @@
import { useIsMobileWidth } from "@/base/hooks";
import {
FlexWrapper,
VerticallyCentered,
@@ -12,7 +13,8 @@ import { preloadImage } from "utils/common";
import { getFamilyPlanAdmin } from "utils/user/family";
export function MemberSubscriptionManage({ open, userDetails, onClose }) {
const { setDialogMessage, isMobile } = useContext(AppContext);
const { setDialogMessage } = useContext(AppContext);
const fullScreen = useIsMobileWidth();
useEffect(() => {
preloadImage("/images/family-plan");
@@ -48,13 +50,7 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) {
}
return (
<Dialog
fullWidth
open={open}
onClose={onClose}
maxWidth="xs"
fullScreen={isMobile}
>
<Dialog {...{ open, onClose, fullScreen }} maxWidth="xs" fullWidth>
<DialogTitleWithCloseButton onClose={onClose}>
<Typography variant="h3" fontWeight={"bold"}>
{t("SUBSCRIPTION")}

1
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -565,7 +565,6 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
label={t("PREFERENCES")}
/>
<RecoveryKey
isMobile={appContext.isMobile}
show={recoverModalView}
onHide={closeRecoveryKeyModal}
somethingWentWrong={somethingWentWrong}

2
web/apps/photos/src/components/Upload/CollectionMappingChoiceModal.tsx
View File

@@ -21,7 +21,7 @@ export const CollectionMappingChoiceModal: React.FC<
const handleClose = dialogCloseHandler({ onClose });
return (
<Dialog open={open} onClose={handleClose}>
<Dialog open={open} onClose={handleClose} maxWidth={"sm"} fullWidth>
<DialogTitleWithCloseButton onClose={onClose}>
{t("MULTI_FOLDER_UPLOAD")}
</DialogTitleWithCloseButton>

2
web/apps/photos/src/components/Upload/UploadProgress/dialog.tsx
View File

@@ -41,7 +41,7 @@ export function UploadProgressDialog() {
const handleClose = dialogCloseHandler({ staticBackdrop: true, onClose });
return (
<Dialog maxWidth="xs" open={open} onClose={handleClose}>
<Dialog open={open} onClose={handleClose} maxWidth="xs" fullWidth>
<UploadProgressHeader />
{(uploadStage === UPLOAD_STAGES.UPLOADING ||
uploadStage === UPLOAD_STAGES.FINISH ||

6
web/apps/photos/src/components/pages/dedupe/SelectedFileOptions.tsx
View File

@@ -1,5 +1,5 @@
import { SelectionBar } from "@/base/components/Navbar";
import { FluidContainer } from "@ente/shared/components/Container";
import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
import BackButton from "@mui/icons-material/ArrowBackOutlined";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
@@ -23,13 +23,13 @@ export default function DeduplicateOptions({
count,
clearSelection,
}: IProps) {
const { setDialogMessage, isMobile } = useContext(AppContext);
const { setDialogMessage } = useContext(AppContext);
const trashHandler = () =>
setDialogMessage(getTrashFilesMessage(deleteFileHelper));
return (
<SelectionBar isMobile={isMobile}>
<SelectionBar>
<FluidContainer>
{count ? (
<IconButton onClick={clearSelection}>

16
web/apps/photos/src/components/pages/gallery/Navbar.tsx
View File

@@ -1,14 +1,12 @@
import { NavbarBase } from "@/base/components/Navbar";
import { EnteFile } from "@/new/photos/types/file";
import { FlexWrapper, HorizontalFlex } from "@ente/shared/components/Container";
import SidebarToggler from "@ente/shared/components/Navbar/SidebarToggler";
import NavbarBase from "@ente/shared/components/Navbar/base";
import ArrowBack from "@mui/icons-material/ArrowBack";
import MenuIcon from "@mui/icons-material/Menu";
import { IconButton, Typography } from "@mui/material";
import SearchBar from "components/Search/SearchBar";
import UploadButton from "components/Upload/UploadButton";
import { t } from "i18next";
import { AppContext } from "pages/_app";
import React from "react";
import { Collection } from "types/collection";
import { UpdateSearch } from "types/search";
@@ -35,12 +33,8 @@ export function GalleryNavbar({
setIsInSearchMode,
exitHiddenSection,
}: Iprops) {
const appContext = React.useContext(AppContext);
return (
<NavbarBase
sx={{ background: "transparent", position: "absolute" }}
isMobile={appContext.isMobile}
>
<NavbarBase sx={{ background: "transparent", position: "absolute" }}>
{isInHiddenSection ? (
<HorizontalFlex
gap={"24px"}
@@ -59,7 +53,9 @@ export function GalleryNavbar({
) : (
<>
{!isInSearchMode && (
<SidebarToggler openSidebar={openSidebar} />
<IconButton onClick={openSidebar} sx={{ pl: 0 }}>
<MenuIcon />
</IconButton>
)}
<SearchBar
isInSearchMode={isInSearchMode}

11
web/apps/photos/src/components/pages/gallery/PlanSelector/index.tsx
View File

@@ -1,6 +1,4 @@
import { Dialog } from "@mui/material";
import { AppContext } from "pages/_app";
import { useContext } from "react";
import { Dialog, useMediaQuery, useTheme } from "@mui/material";
import { SetLoading } from "types/gallery";
import PlanSelectorCard from "./card";
@@ -11,19 +9,20 @@ interface Props {
}
function PlanSelector(props: Props) {
const appContext = useContext(AppContext);
const fullScreen = useMediaQuery(useTheme().breakpoints.down("sm"));
if (!props.modalView) {
return <></>;
}
return (
<Dialog
fullScreen={appContext.isMobile}
{...{ fullScreen }}
open={props.modalView}
onClose={props.closeModal}
PaperProps={{
sx: (theme) => ({
width: "391px",
width: { sm: "391px" },
p: 1,
[theme.breakpoints.down(360)]: { p: 0 },
}),

6
web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx
View File

@@ -1,5 +1,5 @@
import { SelectionBar } from "@/base/components/Navbar";
import { FluidContainer } from "@ente/shared/components/Container";
import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
import ClockIcon from "@mui/icons-material/AccessTime";
import AddIcon from "@mui/icons-material/Add";
import ArchiveIcon from "@mui/icons-material/ArchiveOutlined";
@@ -66,7 +66,7 @@ const SelectedFileOptions = ({
isInSearchMode,
isInHiddenSection,
}: Props) => {
const { setDialogMessage, isMobile } = useContext(AppContext);
const { setDialogMessage } = useContext(AppContext);
const addToCollection = () =>
setCollectionSelectorAttributes({
callback: handleCollectionOps(COLLECTION_OPS_TYPE.ADD),
@@ -155,7 +155,7 @@ const SelectedFileOptions = ({
};
return (
<SelectionBar isMobile={isMobile}>
<SelectionBar>
<FluidContainer>
<IconButton onClick={clearSelection}>
<CloseIcon />

7
web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx
View File

@@ -1,17 +1,14 @@
import { NavbarBase } from "@/base/components/Navbar";
import { FluidContainer } from "@ente/shared/components/Container";
import NavbarBase from "@ente/shared/components/Navbar/base";
import AddPhotoAlternateOutlined from "@mui/icons-material/AddPhotoAlternateOutlined";
import { Box } from "@mui/material";
import UploadButton from "components/Upload/UploadButton";
import { t } from "i18next";
import { AppContext } from "pages/_app";
import { useContext } from "react";
import GoToEnte from "./GoToEnte";
export default function SharedAlbumNavbar({ showUploadButton, openUploader }) {
const { isMobile } = useContext(AppContext);
return (
<NavbarBase isMobile={isMobile}>
<NavbarBase>
<FluidContainer>
<EnteLinkLogo />
</FluidContainer>

8
web/apps/photos/src/components/pages/sharedAlbum/SelectedFileOptions.tsx
View File

@@ -1,11 +1,9 @@
import { SelectionBar } from "@/base/components/Navbar";
import { FluidContainer } from "@ente/shared/components/Container";
import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
import CloseIcon from "@mui/icons-material/Close";
import DownloadIcon from "@mui/icons-material/Download";
import { Box, IconButton, Stack, Tooltip } from "@mui/material";
import { t } from "i18next";
import { AppContext } from "pages/_app";
import { useContext } from "react";
import { formatNumber } from "utils/number/format";
interface Props {
@@ -19,10 +17,8 @@ const SelectedFileOptions = ({
count,
clearSelection,
}: Props) => {
const { isMobile } = useContext(AppContext);
return (
<SelectionBar isMobile={isMobile}>
<SelectionBar>
<FluidContainer>
<IconButton onClick={clearSelection}>
<CloseIcon />

8
web/apps/photos/src/pages/_app.tsx
View File

@@ -1,6 +1,7 @@
import type { AccountsContextT } from "@/accounts/types/context";
import { clientPackageName, staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import log from "@/base/log";
import {
@@ -21,7 +22,6 @@ import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { MessageContainer } from "@ente/shared/components/MessageContainer";
import { AppNavbar } from "@ente/shared/components/Navbar/app";
import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
import { useLocalState } from "@ente/shared/hooks/useLocalState";
import HTTPService from "@ente/shared/network/HTTPService";
@@ -39,7 +39,7 @@ import { getTheme } from "@ente/shared/themes";
import { THEME_COLOR } from "@ente/shared/themes/constants";
import type { User } from "@ente/shared/user/types";
import ArrowForward from "@mui/icons-material/ArrowForward";
import { CssBaseline, useMediaQuery } from "@mui/material";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import Notification from "components/Notification";
import { REDIRECTS } from "constants/redirects";
@@ -121,7 +121,6 @@ export default function App({ Component, pageProps }: AppProps) {
const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
const [watchFolderView, setWatchFolderView] = useState(false);
const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
const isMobile = useMediaQuery("(max-width: 428px)");
const [notificationView, setNotificationView] = useState(false);
const closeNotification = () => setNotificationView(false);
const [notificationAttributes, setNotificationAttributes] =
@@ -319,7 +318,6 @@ export default function App({ Component, pageProps }: AppProps) {
setWatchFolderView,
watchFolderFiles,
setWatchFolderFiles,
isMobile,
setNotificationAttributes,
themeColor,
setThemeColor,
@@ -342,7 +340,7 @@ export default function App({ Component, pageProps }: AppProps) {
<ThemeProvider theme={getTheme(themeColor, "photos")}>
<CssBaseline enableColorScheme />
{showNavbar && <AppNavbar isMobile={isMobile} />}
{showNavbar && <AppNavbar />}
<MessageContainer>
{isI18nReady && offline && t("OFFLINE_MSG")}
</MessageContainer>

1
web/packages/accounts/pages/generate.tsx
View File

@@ -102,7 +102,6 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
</VerticallyCentered>
) : recoverModalView ? (
<RecoveryKey
isMobile={appContext.isMobile}
show={recoverModalView}
onHide={() => {
setRecoveryModalView(false);

1
web/packages/accounts/types/context.ts
View File

@@ -9,6 +9,5 @@ export interface AccountsContextT {
logout: () => void;
/** Show or hide the app's navigation bar. */
showNavBar: (show: boolean) => void;
isMobile: boolean;
setDialogBoxAttributesV2: (attrs: DialogBoxAttributesV2) => void;
}

40
web/packages/base/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import { styled } from "@mui/material";
import React from "react";
/**
* The "bar" at the top of the screen.
*
* Usually this area contains the App's main navigation bar ({@link AppNavbar}),
* but depending on the context it can also show the {@link SelectionBar}.
* */
export const NavbarBase = styled(FlexWrapper)`
min-height: 64px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
background-color: ${({ theme }) => theme.colors.background.base};
margin-bottom: 16px;
padding: 0 24px;
@media (max-width: 720px) {
padding: 0 4px;
}
`;
export const AppNavbar: React.FC = () => {
return (
<NavbarBase>
<CenteredFlex>
<EnteLogo />
</CenteredFlex>
</NavbarBase>
);
};
export const SelectionBar = styled(NavbarBase)`
position: fixed;
z-index: 12;
`;

1
web/packages/new/photos/components/DevSettings.tsx
View File

@@ -46,6 +46,7 @@ export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
onClose={handleDialogClose}
TransitionComponent={SlideTransition}
maxWidth="xs"
fullWidth
>
<Contents {...{ onClose }} />
</Dialog>

1
web/packages/new/photos/components/WhatsNew.tsx
View File

@@ -40,6 +40,7 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
{...{ open, fullScreen }}
TransitionComponent={SlideTransition}
maxWidth="xs"
fullWidth
>
<Box m={1}>
<DialogTitle mt={2}>

6
web/packages/shared/components/Navbar/SelectionBar.tsx
View File

@@ -1,6 +0,0 @@
import { styled } from "@mui/material";
import NavbarBase from "./base";
export const SelectionBar = styled(NavbarBase)`
position: fixed;
z-index: 12;
`;

13
web/packages/shared/components/Navbar/SidebarToggler.tsx
View File

@@ -1,13 +0,0 @@
import MenuIcon from "@mui/icons-material/Menu";
import IconButton from "@mui/material/IconButton";
interface Iprops {
openSidebar: () => void;
}
export default function SidebarToggler({ openSidebar }: Iprops) {
return (
<IconButton onClick={openSidebar} sx={{ pl: 0 }}>
<MenuIcon />
</IconButton>
);
}

18
web/packages/shared/components/Navbar/app.tsx
View File

@@ -1,18 +0,0 @@
import React from "react";
import { CenteredFlex } from "../../components/Container";
import { EnteLogo } from "../EnteLogo";
import NavbarBase from "./base";
interface AppNavbarProps {
isMobile: boolean;
}
export const AppNavbar: React.FC<AppNavbarProps> = ({ isMobile }) => {
return (
<NavbarBase isMobile={isMobile}>
<CenteredFlex>
<EnteLogo />
</CenteredFlex>
</NavbarBase>
);
};

21
web/packages/shared/components/Navbar/base.tsx
View File

@@ -1,21 +0,0 @@
import { styled } from "@mui/material";
import { FlexWrapper } from "../../components/Container";
const NavbarBase = styled(FlexWrapper, {
shouldForwardProp: (propName) => propName != "isMobile",
})<{ isMobile: boolean }>`
min-height: 64px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
background-color: ${({ theme }) => theme.colors.background.base};
margin-bottom: 16px;
padding: 0 24px;
@media (max-width: 720px) {
padding: 0 4px;
}
`;
export default NavbarBase;

14
web/packages/shared/components/RecoveryKey.tsx
View File

@@ -1,3 +1,4 @@
import { useIsMobileWidth } from "@/base/hooks";
import { ensure } from "@/utils/ensure";
import CodeBlock from "@ente/shared/components/CodeBlock";
import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
@@ -22,14 +23,14 @@ bip39.setDefaultWordlist("english");
const RECOVERY_KEY_FILE_NAME = "ente-recovery-key.txt";
interface Props {
isMobile: boolean;
show: boolean;
onHide: () => void;
somethingWentWrong: any;
}
function RecoveryKey({ somethingWentWrong, isMobile, ...props }: Props) {
function RecoveryKey({ somethingWentWrong, ...props }: Props) {
const [recoveryKey, setRecoveryKey] = useState<string | null>(null);
const fullScreen = useIsMobileWidth();
useEffect(() => {
if (!props.show) {
@@ -54,10 +55,17 @@ function RecoveryKey({ somethingWentWrong, isMobile, ...props }: Props) {
return (
<Dialog
fullScreen={isMobile}
fullScreen={fullScreen}
open={props.show}
onClose={props.onHide}
// [Note: maxWidth "xs" on MUI dialogs]
//
// While logically the "xs" breakpoint doesn't make sense as a
// maxWidth value (since as a breakpoint it's value is 0), in
// practice MUI has hardcoded its value to a reasonable 444px.
// https://github.com/mui/material-ui/issues/34646.
maxWidth="xs"
fullWidth
>
<DialogTitleWithCloseButton onClose={props.onHide}>
{t("RECOVERY_KEY")}

4
web/packages/shared/themes/components.ts
View File

@@ -62,10 +62,6 @@ export const getComponents = (
},
},
},
defaultProps: {
fullWidth: true,
maxWidth: "sm",
},
},
MuiPaper: {
styleOverrides: { root: { backgroundImage: "none" } },