stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use stencil to let pictures look like folders

This commit is contained in:
Stefan Forstenlechner 2024-08-19 12:47:38 +02:00
parent 30cdba8fd6
commit 5e860d0ea4
1 changed files with 57 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
picture-gallery-client/src/ImageGallery/FolderGallery.tsx
View File

@ -13,37 +13,62 @@ export const FolderGallery = ({ folders }: { folders: FolderPreview[] }) => {
const columns = useColumns(); const columns = useColumns();
return ( return (
<ImageList cols={columns} gap={8}> <>
{folders.map((folder) => ( <ImageList cols={columns} gap={8} style={{ overflowY: "initial" }}>
<ImageListItem key={folder.fullPath}> {folders.map((folder) => (
{/* Link and image styling taken from https://github.com/mui/material-ui/issues/22597 */} <ImageListItem key={folder.fullPath}>
<Link {/* Link and image styling taken from https://github.com/mui/material-ui/issues/22597 */}
to={folder.fullPath} <Link
style={{ display: "block", height: "100%" }} to={folder.fullPath}
> style={{ display: "block", height: "100%" }}
<img >
src={folder.imagePreviewSrc} <img
alt={folder.name} src={folder.imagePreviewSrc}
loading="lazy" alt={folder.name}
style={{ objectFit: "cover", width: "100%", height: "100%" }} loading="lazy"
/> style={{
<ImageListItemBar objectFit: "cover",
title={folder.name} width: "100%",
actionIcon={ height: "100%",
<Chip clipPath: "url(#folderPath)",
label={folder.numberOfFiles} }}
size="small" />
sx={{ <ImageListItemBar
color: "white", title={folder.name}
backgroundColor: "rgba(255, 255, 255, 0.24);", actionIcon={
marginRight: 1, <Chip
}} label={folder.numberOfFiles}
/> size="small"
} sx={{
/> color: "white",
</Link> backgroundColor: "rgba(255, 255, 255, 0.24);",
</ImageListItem> marginRight: 1,
))} }}
</ImageList> />
}
/>
</Link>
</ImageListItem>
))}
</ImageList>
{/* External svg does not seem to work (anymore?) */}
{/* see for example https://codepen.io/imohkay/pen/GJpxXY */}
<svg
height={0}
width={0}
// Make sure svg does not take up any space
style={{ position: "absolute" }}
>
<defs>
<clipPath id="folderPath" clipPathUnits="objectBoundingBox">
{/* Taken from MUI Folder Icon*/}
<path
transform="translate(-0.1 -0.25) scale(0.05 0.0625)"
d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"
></path>
</clipPath>
</defs>
</svg>
</>
); );
}; };