From abce21d8197a71747401b5fd27da28f95372b8b9 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 21 Sep 2024 06:16:23 +0530 Subject: [PATCH] Move --- .../Collections/CollectionInfoWithOptions.tsx | 11 +++++---- web/apps/photos/src/pages/gallery.tsx | 14 +++++------ web/apps/photos/src/pages/shared-albums.tsx | 14 +++++------ .../photos/components/Gallery/ListHeader.tsx} | 23 +++++++++---------- 4 files changed, 32 insertions(+), 30 deletions(-) rename web/{apps/photos/src/components/Collections/CollectionInfo.tsx => packages/new/photos/components/Gallery/ListHeader.tsx} (56%) diff --git a/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx b/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx index 79bc94f2e0..bc4fdea036 100644 --- a/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx +++ b/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx @@ -1,4 +1,8 @@ import type { Collection } from "@/media/collection"; +import { + GalleryItemsHeaderAdapter, + GalleryItemsSummary, +} from "@/new/photos/components/Gallery/ListHeader"; import { SpaceBetweenFlex } from "@ente/shared/components/Container"; import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined"; import Favorite from "@mui/icons-material/FavoriteRounded"; @@ -10,7 +14,6 @@ import type { Dispatch, SetStateAction } from "react"; import { CollectionSummary, CollectionSummaryType } from "types/collection"; import { SetFilesDownloadProgressAttributesCreator } from "types/gallery"; import { shouldShowOptions } from "utils/collection"; -import { CollectionInfo, CollectionInfoBarWrapper } from "./CollectionInfo"; interface Iprops { activeCollection: Collection; @@ -52,9 +55,9 @@ export default function CollectionInfoWithOptions({ }; return ( - + - } @@ -66,6 +69,6 @@ export default function CollectionInfoWithOptions({ /> )} - + ); } diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 575f953c96..0e6cde3882 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -3,6 +3,10 @@ import { NavbarBase } from "@/base/components/Navbar"; import { useIsMobileWidth } from "@/base/hooks"; import log from "@/base/log"; import type { Collection } from "@/media/collection"; +import { + GalleryItemsHeaderAdapter, + GalleryItemsSummary, +} from "@/new/photos/components/Gallery/ListHeader"; import { SearchBar, type SearchBarProps, @@ -55,10 +59,6 @@ import type { ButtonProps, IconButtonProps } from "@mui/material"; import { Box, Button, IconButton, Typography, styled } from "@mui/material"; import AuthenticateUserModal from "components/AuthenticateUserModal"; import { Collections, type GalleryBarMode } from "components/Collections"; -import { - CollectionInfo, - CollectionInfoBarWrapper, -} from "components/Collections/CollectionInfo"; import CollectionNamer, { CollectionNamerAttributes, } from "components/Collections/CollectionNamer"; @@ -1380,13 +1380,13 @@ interface SearchResultsHeaderProps { const SearchResultsHeader: React.FC = ({ selectedOption, }) => ( - + {t("search_results")} - - + ); diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx index 8edd0bbcab..f00b3a6976 100644 --- a/web/apps/photos/src/pages/shared-albums.tsx +++ b/web/apps/photos/src/pages/shared-albums.tsx @@ -3,6 +3,10 @@ import { sharedCryptoWorker } from "@/base/crypto"; import { useIsMobileWidth, useIsTouchscreen } from "@/base/hooks"; import log from "@/base/log"; import type { Collection } from "@/media/collection"; +import { + GalleryItemsHeaderAdapter, + GalleryItemsSummary, +} from "@/new/photos/components/Gallery/ListHeader"; import downloadManager from "@/new/photos/services/download"; import { EnteFile } from "@/new/photos/types/file"; import { mergeMetadata } from "@/new/photos/utils/file"; @@ -32,10 +36,6 @@ import type { ButtonProps, IconButtonProps } from "@mui/material"; import { Box, Button, IconButton, Stack, Tooltip } from "@mui/material"; import Typography from "@mui/material/Typography"; import bs58 from "bs58"; -import { - CollectionInfo, - CollectionInfoBarWrapper, -} from "components/Collections/CollectionInfo"; import { EnteLogo } from "components/EnteLogo"; import { FilesDownloadProgress, @@ -306,9 +306,9 @@ export default function PublicCollectionGallery() { publicFiles && setPhotoListHeader({ item: ( - + - @@ -328,7 +328,7 @@ export default function PublicCollectionGallery() {
)} - + ), itemType: ITEM_TYPE.HEADER, height: 68, diff --git a/web/apps/photos/src/components/Collections/CollectionInfo.tsx b/web/packages/new/photos/components/Gallery/ListHeader.tsx similarity index 56% rename from web/apps/photos/src/components/Collections/CollectionInfo.tsx rename to web/packages/new/photos/components/Gallery/ListHeader.tsx index 61a98d233a..e60d704509 100644 --- a/web/apps/photos/src/components/Collections/CollectionInfo.tsx +++ b/web/packages/new/photos/components/Gallery/ListHeader.tsx @@ -3,18 +3,17 @@ import { Box, styled, Typography } from "@mui/material"; import { t } from "i18next"; import React from "react"; -interface CollectionInfoProps { +interface GalleryItemsSummaryProps { name: string; fileCount: number; endIcon?: React.ReactNode; } /** - * A component suitable for being used as a (non-sticky) header / summary view - * displayed on top of the of a list of photos (or other items) being displayed - * in the gallery view. + * A component suitable for being used as a (non-sticky) summary displayed on + * top of the of a list of photos (or other items) shown in the gallery. */ -export const CollectionInfo: React.FC = ({ +export const GalleryItemsSummary: React.FC = ({ name, fileCount, endIcon, @@ -41,15 +40,15 @@ export const CollectionInfo: React.FC = ({ }; /** - * A component suitable for wrapping a {@link GalleryItemsSummary} so that it - * fills the entire width (and acts like a "header") when it is displayed in the - * gallery view. + * A component suitable for wrapping a component which is acting like a gallery + * items header so that it fills the entire width (and acts like a "header") + * when it is displayed in the gallery view. * - * The {@link GalleryItemsSummary} is displayed as part of the actual gallery - * items list itself so that it scrolls alongwith the items. This wrapper makes - * it take the full width of the conceptual "row" that it occupies. + * The header view (e.g. a {@link GalleryItemsSummary}) is displayed as part of + * the gallery items list itself so that it scrolls alongwith the items. This + * wrapper makes it take the full width of the "row" that it occupies. */ -export const CollectionInfoBarWrapper = styled(Box)` +export const GalleryItemsHeaderAdapter = styled(Box)` width: 100%; margin-bottom: 12px; `;