[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:
commit
318e8643fb
|
@ -780,23 +780,28 @@ export function PhotoList({
|
||||||
listItem: TimeStampListItem,
|
listItem: TimeStampListItem,
|
||||||
isScrolling: boolean,
|
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) {
|
switch (listItem.itemType) {
|
||||||
case ITEM_TYPE.TIME:
|
case ITEM_TYPE.TIME:
|
||||||
return listItem.dates ? (
|
return listItem.dates ? (
|
||||||
listItem.dates
|
listItem.dates
|
||||||
.map((item) => [
|
.map((item) => [
|
||||||
<DateContainer key={item.date} span={item.span}>
|
<DateContainer key={item.date} span={item.span}>
|
||||||
<Checkbox
|
{haveSelection && (
|
||||||
key={item.date}
|
<Checkbox
|
||||||
name={item.date}
|
key={item.date}
|
||||||
checked={!!checkedDates[item.date]}
|
name={item.date}
|
||||||
onChange={() =>
|
checked={!!checkedDates[item.date]}
|
||||||
onChangeSelectAllCheckBox(item.date)
|
onChange={() =>
|
||||||
}
|
onChangeSelectAllCheckBox(item.date)
|
||||||
size="small"
|
}
|
||||||
sx={{ pl: 0 }}
|
size="small"
|
||||||
disableRipple={true}
|
sx={{ pl: 0 }}
|
||||||
/>
|
disableRipple={true}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{item.date}
|
{item.date}
|
||||||
</DateContainer>,
|
</DateContainer>,
|
||||||
<div key={`${item.date}-gap`} />,
|
<div key={`${item.date}-gap`} />,
|
||||||
|
@ -804,17 +809,19 @@ export function PhotoList({
|
||||||
.flat()
|
.flat()
|
||||||
) : (
|
) : (
|
||||||
<DateContainer span={columns}>
|
<DateContainer span={columns}>
|
||||||
<Checkbox
|
{haveSelection && (
|
||||||
key={listItem.date}
|
<Checkbox
|
||||||
name={listItem.date}
|
key={listItem.date}
|
||||||
checked={!!checkedDates[listItem.date]}
|
name={listItem.date}
|
||||||
onChange={() =>
|
checked={!!checkedDates[listItem.date]}
|
||||||
onChangeSelectAllCheckBox(listItem.date)
|
onChange={() =>
|
||||||
}
|
onChangeSelectAllCheckBox(listItem.date)
|
||||||
size="small"
|
}
|
||||||
sx={{ pl: 0 }}
|
size="small"
|
||||||
disableRipple={true}
|
sx={{ pl: 0 }}
|
||||||
/>
|
disableRipple={true}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{listItem.date}
|
{listItem.date}
|
||||||
</DateContainer>
|
</DateContainer>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue