kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-06-24 12:35:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI tweaks to the select all checkbox

Browse Source 
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
This commit is contained in:
Manav Rathi 2024-03-06 15:43:20 +05:30
parent a857a86608
commit af2ccf7449
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/apps/photos/src/components/PhotoList/index.tsx
View File

@ -1,7 +1,8 @@
import { FlexWrapper } from "@ente/shared/components/Container"; import { FlexWrapper } from "@ente/shared/components/Container";
import { ENTE_WEBSITE_LINK } from "@ente/shared/constants/urls"; 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 { 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 { import {
DATE_CONTAINER_HEIGHT, DATE_CONTAINER_HEIGHT,
GAP_BTW_TILES, GAP_BTW_TILES,
@ -22,10 +23,9 @@ import {
ListChildComponentProps, ListChildComponentProps,
areEqual, areEqual,
} from "react-window"; } 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 { EnteFile } from "types/file";
import { handleSelectCreator } from "utils/photoFrame";
import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
const A_DAY = 24 * 60 * 60 * 1000; const A_DAY = 24 * 60 * 60 * 1000;
const FOOTER_HEIGHT = 90; const FOOTER_HEIGHT = 90;
@ -186,10 +186,6 @@ const NothingContainer = styled(ListItemContainer)`
justify-content: center; justify-content: center;
`; `;
const SelectAllCheckBoxContainer = styled(Checkbox)<{ margin: number }>`
margin-left: ${(props) => props.margin}px;
`;
interface Props { interface Props {
height: number; height: number;
width: number; width: number;
@ -723,7 +719,7 @@ export function PhotoList({
useEffect(() => { useEffect(() => {
const notSelectedFiles = displayFiles?.filter( const notSelectedFiles = displayFiles?.filter(
(item) => !galleryContext.selectedFile[item.id] (item) => !galleryContext.selectedFile[item.id],
); );
const unselectedDates = [ const unselectedDates = [
...new Set(notSelectedFiles?.map((item) => getDate(item))), // to get file's date which were manually unselected ...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( const localSelectedFiles = displayFiles.filter(
// to get files which were manually selected // to get files which were manually selected
(item) => !unselectedDates.includes(getDate(item)) (item) => !unselectedDates.includes(getDate(item)),
); );
const localSelectedDates = [ const localSelectedDates = [
@ -756,7 +752,7 @@ export function PhotoList({
const handleSelect = handleSelectCreator( const handleSelect = handleSelectCreator(
galleryContext.setSelectedFiles, galleryContext.setSelectedFiles,
activeCollectionID activeCollectionID,
); );
const onChangeSelectAllCheckBox = (date: string) => { const onChangeSelectAllCheckBox = (date: string) => {
@ -766,13 +762,13 @@ export function PhotoList({
setCheckedDates(dates); setCheckedDates(dates);
const filesOnADay = displayFiles?.filter( const filesOnADay = displayFiles?.filter(
(item) => getDate(item) === date (item) => getDate(item) === date,
); // all files on a checked/unchecked day ); // all files on a checked/unchecked day
filesOnADay.forEach((file) => { filesOnADay.forEach((file) => {
handleSelect( handleSelect(
file.id, file.id,
file.ownerID === galleryContext?.user?.id file.ownerID === galleryContext?.user?.id,
)(isDateSelected); )(isDateSelected);
}); });
}; };
@ -787,32 +783,36 @@ export function PhotoList({
listItem.dates listItem.dates
.map((item) => [ .map((item) => [
<DateContainer key={item.date} span={item.span}> <DateContainer key={item.date} span={item.span}>
{item.date} <Checkbox
<SelectAllCheckBoxContainer
key={item.date} key={item.date}
name={item.date} name={item.date}
checked={checkedDates[item.date]} checked={checkedDates[item.date]}
onChange={() => onChange={() =>
onChangeSelectAllCheckBox(item.date) onChangeSelectAllCheckBox(item.date)
} }
margin={columns} size="small"
sx={{ pl: 0 }}
disableRipple={true}
/> />
{item.date}
</DateContainer>, </DateContainer>,
<div key={`${item.date}-gap`} />, <div key={`${item.date}-gap`} />,
]) ])
.flat() .flat()
) : ( ) : (
<DateContainer span={columns}> <DateContainer span={columns}>
{listItem.date} <Checkbox
<SelectAllCheckBoxContainer
key={listItem.date} key={listItem.date}
name={listItem.date} name={listItem.date}
checked={checkedDates[listItem.date]} checked={checkedDates[listItem.date]}
onChange={() => onChange={() =>
onChangeSelectAllCheckBox(listItem.date) onChangeSelectAllCheckBox(listItem.date)
} }
margin={columns} size="small"
sx={{ pl: 0 }}
disableRipple={true}
/> />
{listItem.date}
</DateContainer> </DateContainer>
); );
case ITEM_TYPE.SIZE_AND_COUNT: case ITEM_TYPE.SIZE_AND_COUNT: