[web] Show select-all-for-day checkmark only when there is a selection (#1101)

For now, this at least makes it less obtrusive. Once I have cleaned up
the state handling around selection (to better integrate this with the
rest of the selection state so that there are no discrepancies), can
revisit the UI - e.g. show it only on hover, or reduce the size of the
checkbox / give it a rounded look etc to make it look even less
obstrusive.
This commit is contained in:
Manav Rathi 2024-03-14 14:53:16 +05:30 committed by GitHub
commit 318e8643fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -780,12 +780,16 @@ export function PhotoList({
listItem: TimeStampListItem,
isScrolling: boolean,
) => {
// Enhancement: This logic doesn't work on the shared album screen, the
// galleryContext.selectedFile is always null there.
const haveSelection = (galleryContext.selectedFile?.count ?? 0) > 0;
switch (listItem.itemType) {
case ITEM_TYPE.TIME:
return listItem.dates ? (
listItem.dates
.map((item) => [
<DateContainer key={item.date} span={item.span}>
{haveSelection && (
<Checkbox
key={item.date}
name={item.date}
@ -797,6 +801,7 @@ export function PhotoList({
sx={{ pl: 0 }}
disableRipple={true}
/>
)}
{item.date}
</DateContainer>,
<div key={`${item.date}-gap`} />,
@ -804,6 +809,7 @@ export function PhotoList({
.flat()
) : (
<DateContainer span={columns}>
{haveSelection && (
<Checkbox
key={listItem.date}
name={listItem.date}
@ -815,6 +821,7 @@ export function PhotoList({
sx={{ pl: 0 }}
disableRipple={true}
/>
)}
{listItem.date}
</DateContainer>
);