Navigation-to-corresponding-album--FileInfo (#1185)
This commit is contained in:
commit
b9826099a5
|
@ -1,10 +1,9 @@
|
|||
import { Box, styled } from '@mui/material';
|
||||
import { Button, ButtonProps, styled } from '@mui/material';
|
||||
import { CSSProperties } from '@mui/material/styles/createTypography';
|
||||
|
||||
export const Chip = styled(Box)(({ theme }) => ({
|
||||
export const Chip = styled((props: ButtonProps) => (
|
||||
<Button color="secondary" {...props} />
|
||||
))(({ theme }) => ({
|
||||
...(theme.typography.small as CSSProperties),
|
||||
padding: '8px 12px',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: theme.colors.fill.faint,
|
||||
fontWeight: 'bold',
|
||||
padding: '8px',
|
||||
}));
|
||||
|
|
|
@ -4,7 +4,6 @@ import { RenderCreationTime } from './RenderCreationTime';
|
|||
import { Box, DialogProps, Link, Stack, styled } from '@mui/material';
|
||||
import { getEXIFLocation } from 'services/upload/exifService';
|
||||
import { RenderCaption } from './RenderCaption';
|
||||
|
||||
import CopyButton from 'components/CodeBlock/CopyButton';
|
||||
import { formatDate, formatTime } from 'utils/time/format';
|
||||
import Titlebar from 'components/Titlebar';
|
||||
|
@ -32,6 +31,7 @@ import { ObjectLabelList } from 'components/MachineLearning/ObjectList';
|
|||
// import MLServiceFileInfoButton from 'components/MachineLearning/MLServiceFileInfoButton';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import { t } from 'i18next';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
|
||||
export const FileInfoSidebar = styled((props: DialogProps) => (
|
||||
<EnteDrawer {...props} anchor="right" />
|
||||
|
@ -53,6 +53,7 @@ interface Iprops {
|
|||
fileToCollectionsMap?: Map<number, number[]>;
|
||||
collectionNameMap?: Map<number, string>;
|
||||
showCollectionChips: boolean;
|
||||
closePhotoViewer: () => void;
|
||||
}
|
||||
|
||||
function BasicDeviceCamera({
|
||||
|
@ -87,8 +88,11 @@ export function FileInfo({
|
|||
fileToCollectionsMap,
|
||||
collectionNameMap,
|
||||
showCollectionChips,
|
||||
closePhotoViewer,
|
||||
}: Iprops) {
|
||||
const appContext = useContext(AppContext);
|
||||
const galleryContext = useContext(GalleryContext);
|
||||
|
||||
const [parsedExifData, setParsedExifData] = useState<Record<string, any>>();
|
||||
const [showExif, setShowExif] = useState(false);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
|
@ -164,6 +168,10 @@ export function FileInfo({
|
|||
if (!file) {
|
||||
return <></>;
|
||||
}
|
||||
const onCollectionChipClick = (collectionID) => {
|
||||
galleryContext.setActiveCollection(collectionID);
|
||||
closePhotoViewer();
|
||||
};
|
||||
|
||||
return (
|
||||
<FileInfoSidebar open={showInfo} onClose={handleCloseInfo}>
|
||||
|
@ -264,13 +272,18 @@ export function FileInfo({
|
|||
collectionNameMap.has(collectionID)
|
||||
)
|
||||
?.map((collectionID) => (
|
||||
<Chip key={collectionID}>
|
||||
<Chip
|
||||
key={collectionID}
|
||||
onClick={() =>
|
||||
onCollectionChipClick(collectionID)
|
||||
}>
|
||||
{collectionNameMap.get(collectionID)}
|
||||
</Chip>
|
||||
))}
|
||||
</Box>
|
||||
</InfoItem>
|
||||
)}
|
||||
|
||||
{appContext.mlSearchEnabled && (
|
||||
<>
|
||||
<PhotoPeopleList
|
||||
|
|
|
@ -692,6 +692,7 @@ function PhotoViewer(props: Iprops) {
|
|||
refreshPhotoswipe={refreshPhotoswipe}
|
||||
fileToCollectionsMap={props.fileToCollectionsMap}
|
||||
collectionNameMap={props.collectionNameMap}
|
||||
closePhotoViewer={handleClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -343,7 +343,13 @@ export default function Gallery() {
|
|||
}
|
||||
}
|
||||
const href = `/gallery${collectionURL}`;
|
||||
router.push(href, undefined, { shallow: true });
|
||||
const delayRouteChange = () => {
|
||||
setTimeout(() => {
|
||||
router.push(href, undefined, { shallow: true });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
delayRouteChange();
|
||||
}, [activeCollection]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
Loading…
Reference in a new issue