From af2ccf7449e50c865acde9ac4f85f18b51a51fd9 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 6 Mar 2024 15:43:20 +0530 Subject: [PATCH 1/2] UI tweaks to the select all checkbox This select-all checkbox was added in https://github.com/ente-io/ente/pull/674. These are some changes to how it looks: - Move the checkbox to the left - Reduce the size of the checkbox --- .../photos/src/components/PhotoList/index.tsx | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx index 0b641b8de8c..6a752ceb677 100644 --- a/web/apps/photos/src/components/PhotoList/index.tsx +++ b/web/apps/photos/src/components/PhotoList/index.tsx @@ -1,7 +1,8 @@ import { FlexWrapper } from "@ente/shared/components/Container"; import { ENTE_WEBSITE_LINK } from "@ente/shared/constants/urls"; +import { formatDate, getDate, isSameDay } from "@ente/shared/time/format"; import { convertBytesToHumanReadable } from "@ente/shared/utils/size"; -import { Box, Link, Typography, Checkbox, styled } from "@mui/material"; +import { Box, Checkbox, Link, Typography, styled } from "@mui/material"; import { DATE_CONTAINER_HEIGHT, GAP_BTW_TILES, @@ -22,10 +23,9 @@ import { ListChildComponentProps, areEqual, } from "react-window"; -import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; -import { formatDate, getDate, isSameDay } from "@ente/shared/time/format"; -import { handleSelectCreator } from "utils/photoFrame"; import { EnteFile } from "types/file"; +import { handleSelectCreator } from "utils/photoFrame"; +import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; const A_DAY = 24 * 60 * 60 * 1000; const FOOTER_HEIGHT = 90; @@ -186,10 +186,6 @@ const NothingContainer = styled(ListItemContainer)` justify-content: center; `; -const SelectAllCheckBoxContainer = styled(Checkbox)<{ margin: number }>` - margin-left: ${(props) => props.margin}px; -`; - interface Props { height: number; width: number; @@ -723,7 +719,7 @@ export function PhotoList({ useEffect(() => { const notSelectedFiles = displayFiles?.filter( - (item) => !galleryContext.selectedFile[item.id] + (item) => !galleryContext.selectedFile[item.id], ); const unselectedDates = [ ...new Set(notSelectedFiles?.map((item) => getDate(item))), // to get file's date which were manually unselected @@ -731,7 +727,7 @@ export function PhotoList({ const localSelectedFiles = displayFiles.filter( // to get files which were manually selected - (item) => !unselectedDates.includes(getDate(item)) + (item) => !unselectedDates.includes(getDate(item)), ); const localSelectedDates = [ @@ -756,7 +752,7 @@ export function PhotoList({ const handleSelect = handleSelectCreator( galleryContext.setSelectedFiles, - activeCollectionID + activeCollectionID, ); const onChangeSelectAllCheckBox = (date: string) => { @@ -766,13 +762,13 @@ export function PhotoList({ setCheckedDates(dates); const filesOnADay = displayFiles?.filter( - (item) => getDate(item) === date + (item) => getDate(item) === date, ); // all files on a checked/unchecked day filesOnADay.forEach((file) => { handleSelect( file.id, - file.ownerID === galleryContext?.user?.id + file.ownerID === galleryContext?.user?.id, )(isDateSelected); }); }; @@ -787,32 +783,36 @@ export function PhotoList({ listItem.dates .map((item) => [ - {item.date} - onChangeSelectAllCheckBox(item.date) } - margin={columns} + size="small" + sx={{ pl: 0 }} + disableRipple={true} /> + {item.date} ,
, ]) .flat() ) : ( - {listItem.date} - onChangeSelectAllCheckBox(listItem.date) } - margin={columns} + size="small" + sx={{ pl: 0 }} + disableRipple={true} /> + {listItem.date} ); case ITEM_TYPE.SIZE_AND_COUNT: From d57e59493b60faf4ec596bdb664940309bb3334e Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 6 Mar 2024 15:51:26 +0530 Subject: [PATCH 2/2] Fix formatting issues --- web/apps/photos/src/components/PhotoFrame.tsx | 12 ++++++------ web/apps/photos/src/pages/gallery/index.tsx | 3 ++- web/apps/photos/src/utils/photoFrame/index.ts | 8 ++++---- web/packages/shared/time/format.ts | 6 +++--- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/web/apps/photos/src/components/PhotoFrame.tsx b/web/apps/photos/src/components/PhotoFrame.tsx index 524b555efb2..405f09ac4be 100644 --- a/web/apps/photos/src/components/PhotoFrame.tsx +++ b/web/apps/photos/src/components/PhotoFrame.tsx @@ -17,16 +17,16 @@ import DownloadManager, { LivePhotoSourceURL, SourceURLs, } from "services/download"; -import { - handleSelectCreator, - updateFileMsrcProps, - updateFileSrcProps, -} from "utils/photoFrame"; import { EnteFile } from "types/file"; import { SelectedState, SetFilesDownloadProgressAttributesCreator, } from "types/gallery"; +import { + handleSelectCreator, + updateFileMsrcProps, + updateFileSrcProps, +} from "utils/photoFrame"; import { PhotoList } from "./PhotoList"; import { DedupePhotoList } from "./PhotoList/dedupe"; import PreviewCard from "./pages/gallery/PreviewCard"; @@ -234,7 +234,7 @@ const PhotoFrame = ({ const handleSelect = handleSelectCreator( setSelected, activeCollectionID, - setRangeStart + setRangeStart, ); const onHoverOver = (index: number) => () => { diff --git a/web/apps/photos/src/pages/gallery/index.tsx b/web/apps/photos/src/pages/gallery/index.tsx index 46dd87c898e..e0bf2de7622 100644 --- a/web/apps/photos/src/pages/gallery/index.tsx +++ b/web/apps/photos/src/pages/gallery/index.tsx @@ -1017,7 +1017,8 @@ export default function Gallery() { isClipSearchResult, selectedFile: selected, setSelectedFiles: setSelected, - }}> + }} + > diff --git a/web/apps/photos/src/utils/photoFrame/index.ts b/web/apps/photos/src/utils/photoFrame/index.ts index 4396c78b936..8b92126f8e6 100644 --- a/web/apps/photos/src/utils/photoFrame/index.ts +++ b/web/apps/photos/src/utils/photoFrame/index.ts @@ -1,7 +1,7 @@ -import { FILE_TYPE } from "constants/file"; -import { EnteFile } from "types/file"; import { logError } from "@ente/shared/sentry"; +import { FILE_TYPE } from "constants/file"; import { LivePhotoSourceURL, SourceURLs } from "services/download"; +import { EnteFile } from "types/file"; import { SetSelectedState } from "types/gallery"; const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000; @@ -135,11 +135,11 @@ export const handleSelectCreator = ( setSelected: SetSelectedState, activeCollectionID: number, - setRangeStart? + setRangeStart?, ) => (id: number, isOwnFile: boolean, index?: number) => (checked: boolean) => { - if (typeof index !== 'undefined') { + if (typeof index !== "undefined") { if (checked) { setRangeStart(index); } else { diff --git a/web/packages/shared/time/format.ts b/web/packages/shared/time/format.ts index 1fc7ef08917..0380d56ff6c 100644 --- a/web/packages/shared/time/format.ts +++ b/web/packages/shared/time/format.ts @@ -90,10 +90,10 @@ export const isSameDay = (first, second) => { export const getDate = (item) => { const currentDate = item.metadata.creationTime / 1000; const date = isSameDay(new Date(currentDate), new Date()) - ? t('TODAY') + ? t("TODAY") : isSameDay(new Date(currentDate), new Date(Date.now() - A_DAY)) - ? t('YESTERDAY') - : formatDate(currentDate); + ? t("YESTERDAY") + : formatDate(currentDate); return date; };