haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 14:50:29 +00:00
Code Issues Releases Wiki Activity

update grid images layout (#7536)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-03-01 17:31:54 +08:00
committed by GitHub
parent dc60da99c5
commit f942992b81
2 changed files with 134 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
frontend/src/metadata/views/gallery/day-images/images-grid.js
View File

@@ -4,204 +4,176 @@ import Image from '../image';
/* /*
small size: * small size: *
middle size: - - medium size: - -
- - - -
large size: . . . large size: . . .
. . . . . .
. . . . . .
*/ */
const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => { const getStyles = (imagesCount, size) => {
const imagesCount = useMemo(() => images.length, [images.length]); const { large, medium, small } = size;
const [firstImg, secondImg, ...others] = images;
const day = firstImg.day ? Number(firstImg.day) : 0;
// One large image, one medium image, five small images // One large image, one medium image, five small images
if (imagesCount < 12) { if (imagesCount < 12) {
const i = imagesCount % 2; return [
const firstImgOffset = i === 0 ? 0 : 3;
const columnsOffset = i === 0 ? 3 : 0;
const styles = [
[ [
{ gridRow: '1 / 2', gridColumn: `${1 + columnsOffset} / ${2 + columnsOffset}` }, /*
{ gridRow: 1, gridColumn: 3 + columnsOffset }, · · · - - *
{ gridRow: 2, gridColumn: 3 + columnsOffset }, · · · - - *
{ gridRow: 3, gridColumn: 1 + columnsOffset }, · · · * * *
{ gridRow: 3, gridColumn: 2 + columnsOffset }, */
{ gridRow: 3, gridColumn: 3 + columnsOffset }, { size: large, gridRow: '1 / 3', gridColumn: '1 / 3' },
{ size: medium, gridRow: '1 / 2', gridColumn: '4 / 5' },
{ size: small, gridRow: 1, gridColumn: 6 },
{ size: small, gridRow: 2, gridColumn: 6 },
{ size: small, gridRow: 3, gridColumn: 4 },
{ size: small, gridRow: 3, gridColumn: 5 },
{ size: small, gridRow: 3, gridColumn: 6 },
], [ ], [
{ gridRow: '1 / 2', gridColumn: `${2 + columnsOffset} / ${3 + columnsOffset}` }, /*
{ gridRow: 1, gridColumn: 1 + columnsOffset }, · · · * - -
{ gridRow: 2, gridColumn: 1 + columnsOffset }, · · · * - -
{ gridRow: 3, gridColumn: 1 + columnsOffset }, · · · * * *
{ gridRow: 3, gridColumn: 2 + columnsOffset }, */
{ gridRow: 3, gridColumn: 3 + columnsOffset }, { size: large, gridRow: '1 / 3', gridColumn: '1 / 3' },
{ size: small, gridRow: 1, gridColumn: 4 },
{ size: small, gridRow: 2, gridColumn: 4 },
{ size: medium, gridRow: '1 / 2', gridColumn: '5 / 6' },
{ size: small, gridRow: 3, gridColumn: 4 },
{ size: small, gridRow: 3, gridColumn: 5 },
{ size: small, gridRow: 3, gridColumn: 6 },
], [ ], [
{ gridRow: '2 / 3', gridColumn: `${1 + columnsOffset} / ${2 + columnsOffset}` }, /*
{ gridRow: 1, gridColumn: 1 + columnsOffset }, - - * · · ·
{ gridRow: 1, gridColumn: 2 + columnsOffset }, - - * · · ·
{ gridRow: 1, gridColumn: 3 + columnsOffset }, * * * · · ·
{ gridRow: 2, gridColumn: 3 + columnsOffset }, */
{ gridRow: 3, gridColumn: 3 + columnsOffset }, { size: medium, gridRow: '1 / 2', gridColumn: '1 / 2' },
{ size: small, gridRow: 1, gridColumn: 3 },
{ size: small, gridRow: 2, gridColumn: 3 },
{ size: small, gridRow: 3, gridColumn: 1 },
{ size: small, gridRow: 3, gridColumn: 2 },
{ size: small, gridRow: 3, gridColumn: 3 },
{ size: large, gridRow: '1 / 3', gridColumn: '4 / 6' },
], [ ], [
{ gridRow: '2 / 3', gridColumn: `${2 + columnsOffset} / ${3 + columnsOffset}` }, /*
{ gridRow: 1, gridColumn: 1 + columnsOffset }, * - - · · ·
{ gridRow: 1, gridColumn: 2 + columnsOffset }, * - - · · ·
{ gridRow: 1, gridColumn: 3 + columnsOffset }, * * * · · ·
{ gridRow: 2, gridColumn: 1 + columnsOffset }, */
{ gridRow: 3, gridColumn: 1 + columnsOffset }, { size: small, gridRow: 1, gridColumn: 1 },
{ size: small, gridRow: 2, gridColumn: 1 },
{ size: medium, gridRow: '1 / 2', gridColumn: '2 / 3' },
{ size: small, gridRow: 3, gridColumn: 1 },
{ size: small, gridRow: 3, gridColumn: 2 },
{ size: small, gridRow: 3, gridColumn: 3 },
{ size: large, gridRow: '1 / 3', gridColumn: '4 / 6' },
] ]
]; ];
const style = styles[day % styles.length];
return (
<>
<Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.large} useOriginalThumbnail={true} style={{ gridRow: 1 / 3, gridColumn: `${1 + firstImgOffset} / ${3 + firstImgOffset}` }} {...imgEvents} />
<Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} useOriginalThumbnail={true} style={style[0]} {...imgEvents} />
{others.slice(0, 5).map((image, index) => {
return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 1] || {}} {...imgEvents} />);
})}
</>
);
} }
// Three medium image, six small images return [
// if (imagesCount < 12) {
// const styles = [
// [
// /*
// - - * * - -
// - - - - - -
// * * - - * *
// */
// { gridRow: '1 / 2', gridColumn: '1 / 2' },
// { gridRow: '1 / 2', gridColumn: '5 / 6' },
// { gridRow: '2 / 3', gridColumn: '3 / 4' },
// { gridRow: 1, gridColumn: 3 },
// { gridRow: 1, gridColumn: 4 },
// { gridRow: 3, gridColumn: 1 },
// { gridRow: 3, gridColumn: 2 },
// { gridRow: 3, gridColumn: 5 },
// { gridRow: 3, gridColumn: 6 },
// ], [
// /*
// * * - - * *
// - - - - - -
// - - * * - -
// */
// { gridRow: '1 / 2', gridColumn: '3 / 4' },
// { gridRow: '2 / 3', gridColumn: '1 / 2' },
// { gridRow: '2 / 3', gridColumn: '5 / 6' },
// { gridRow: 1, gridColumn: 1 },
// { gridRow: 1, gridColumn: 2 },
// { gridRow: 1, gridColumn: 5 },
// { gridRow: 1, gridColumn: 6 },
// { gridRow: 3, gridColumn: 3 },
// { gridRow: 3, gridColumn: 4 },
// ]
// ];
// const style = styles[day % styles.length];
// return (
// <>
// <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} style={style[0]} {...imgEvents} />
// <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[1]} {...imgEvents} />
// <Image key={others[0].id} isSelected={selectedImageIds.includes(others[0].id)} img={others[0]} size={size.middle} style={style[2]} {...imgEvents} />
// {others.slice(1, 7).map((image, index) => {
// return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 3] || {}} {...imgEvents} />);
// })}
// </>
// );
// }
// Two medium images, ten small images
const styles = [
[ [
/* /*
- - * * * * - - * * * *
- - * * - - - - * * - -
* * * * - - * * * * - -
*/ */
{ gridRow: '1 / 2', gridColumn: '1 / 2' }, { size: medium, gridRow: '1 / 2', gridColumn: '1 / 2' },
{ gridRow: '2 / 3', gridColumn: '5 / 6' }, { size: small, gridRow: 1, gridColumn: 3 },
{ gridRow: 1, gridColumn: 3 }, { size: small, gridRow: 1, gridColumn: 4 },
{ gridRow: 1, gridColumn: 4 }, { size: small, gridRow: 1, gridColumn: 5 },
{ gridRow: 1, gridColumn: 5 }, { size: small, gridRow: 1, gridColumn: 6 },
{ gridRow: 1, gridColumn: 6 }, { size: small, gridRow: 2, gridColumn: 3 },
{ gridRow: 2, gridColumn: 3 }, { size: small, gridRow: 2, gridColumn: 4 },
{ gridRow: 2, gridColumn: 4 }, { size: small, gridRow: 3, gridColumn: 1 },
{ gridRow: 3, gridColumn: 1 }, { size: small, gridRow: 3, gridColumn: 2 },
{ gridRow: 3, gridColumn: 2 }, { size: small, gridRow: 3, gridColumn: 3 },
{ gridRow: 3, gridColumn: 3 }, { size: small, gridRow: 3, gridColumn: 4 },
{ gridRow: 3, gridColumn: 4 }, { size: medium, gridRow: '2 / 3', gridColumn: '5 / 6' },
], [ ], [
/* /*
* * * * - - * * * * - -
- - * * - - - - * * - -
- - * * * * - - * * * *
*/ */
{ gridRow: '1 / 2', gridColumn: '5 / 6' }, { size: small, gridRow: 1, gridColumn: 1 },
{ gridRow: '2 / 3', gridColumn: '1 / 2' }, { size: small, gridRow: 1, gridColumn: 2 },
{ gridRow: 1, gridColumn: 1 }, { size: small, gridRow: 1, gridColumn: 3 },
{ gridRow: 1, gridColumn: 2 }, { size: small, gridRow: 1, gridColumn: 4 },
{ gridRow: 1, gridColumn: 3 }, { size: medium, gridRow: '1 / 2', gridColumn: '5 / 6' },
{ gridRow: 1, gridColumn: 4 }, { size: medium, gridRow: '2 / 3', gridColumn: '1 / 2' },
{ gridRow: 2, gridColumn: 3 }, { size: small, gridRow: 2, gridColumn: 3 },
{ gridRow: 2, gridColumn: 4 }, { size: small, gridRow: 2, gridColumn: 4 },
{ gridRow: 3, gridColumn: 3 }, { size: small, gridRow: 3, gridColumn: 3 },
{ gridRow: 3, gridColumn: 4 }, { size: small, gridRow: 3, gridColumn: 4 },
{ gridRow: 3, gridColumn: 5 }, { size: small, gridRow: 3, gridColumn: 5 },
{ gridRow: 3, gridColumn: 6 }, { size: small, gridRow: 3, gridColumn: 6 },
], [ ], [
/* /*
- - * - - * - - * - - *
- - * - - * - - * - - *
* * * * * * * * * * * *
*/ */
{ gridRow: '1 / 2', gridColumn: '1 / 2' }, { size: medium, gridRow: '1 / 2', gridColumn: '1 / 2' },
{ gridRow: '1 / 2', gridColumn: '4 / 5' }, { size: small, gridRow: 1, gridColumn: 3 },
{ gridRow: 1, gridColumn: 3 }, { size: small, gridRow: 2, gridColumn: 3 },
{ gridRow: 1, gridColumn: 6 }, { size: medium, gridRow: '1 / 2', gridColumn: '4 / 5' },
{ gridRow: 2, gridColumn: 3 }, { size: small, gridRow: 1, gridColumn: 6 },
{ gridRow: 2, gridColumn: 6 }, { size: small, gridRow: 2, gridColumn: 6 },
{ gridRow: 3, gridColumn: 1 }, { size: small, gridRow: 3, gridColumn: 1 },
{ gridRow: 3, gridColumn: 2 }, { size: small, gridRow: 3, gridColumn: 2 },
{ gridRow: 3, gridColumn: 3 }, { size: small, gridRow: 3, gridColumn: 3 },
{ gridRow: 3, gridColumn: 4 }, { size: small, gridRow: 3, gridColumn: 4 },
{ gridRow: 3, gridColumn: 5 }, { size: small, gridRow: 3, gridColumn: 5 },
{ gridRow: 3, gridColumn: 6 }, { size: small, gridRow: 3, gridColumn: 6 },
], [ ], [
/* /*
- - * * * * - - * * * *
- - * - - * - - * - - *
* * * - - * * * * - - *
*/ */
{ gridRow: '1 / 2', gridColumn: '1 / 2' }, { size: medium, gridRow: '1 / 2', gridColumn: '1 / 2' },
{ gridRow: '2 / 3', gridColumn: '4 / 5' }, { size: small, gridRow: 1, gridColumn: 3 },
{ gridRow: 1, gridColumn: 3 }, { size: small, gridRow: 1, gridColumn: 4 },
{ gridRow: 1, gridColumn: 4 }, { size: small, gridRow: 1, gridColumn: 5 },
{ gridRow: 1, gridColumn: 5 }, { size: small, gridRow: 1, gridColumn: 6 },
{ gridRow: 1, gridColumn: 6 }, { size: small, gridRow: 2, gridColumn: 3 },
{ gridRow: 2, gridColumn: 3 }, { size: small, gridRow: 3, gridColumn: 1 },
{ gridRow: 2, gridColumn: 6 }, { size: small, gridRow: 3, gridColumn: 2 },
{ gridRow: 3, gridColumn: 1 }, { size: small, gridRow: 3, gridColumn: 3 },
{ gridRow: 3, gridColumn: 2 }, { size: medium, gridRow: '2 / 3', gridColumn: '4 / 5' },
{ gridRow: 3, gridColumn: 3 }, { size: small, gridRow: 2, gridColumn: 6 },
{ gridRow: 3, gridColumn: 6 }, { size: small, gridRow: 3, gridColumn: 6 },
] ]
]; ];
const style = styles[day % styles.length]; };
const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => {
const imagesCount = useMemo(() => images.length, [images.length]);
const day = images[0].day ? Number(images[0].day) : 0;
const styles = useMemo(() => getStyles(imagesCount, size), [imagesCount, size]);
const count = imagesCount < 12 ? 7 : 12;
return ( return (
<> <>
<Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} useOriginalThumbnail={true} style={style[0]} {...imgEvents} /> {images.slice(0, count).map((image, index) => {
<Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} useOriginalThumbnail={true} style={style[1]} {...imgEvents} /> const styleInfo = styles[day % styles.length][index];
{others.slice(0, 10).map((image, index) => { return (
return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 2] || {}} {...imgEvents} />); <Image
key={image.id}
isSelected={selectedImageIds.includes(image.id)}
img={image}
size={styleInfo.size}
useOriginalThumbnail={styleInfo.size > size.small}
style={{ gridRow: styleInfo.gridRow, gridColumn: styleInfo.gridColumn }}
{...imgEvents}
/>
);
})} })}
</> </>
); );
}; };
ImagesGrid.propTypes = { ImagesGrid.propTypes = {

8
frontend/src/metadata/views/gallery/utils.js
View File

@@ -27,18 +27,18 @@ export const getImageSize = (containerWidth, columns, mode) => {
case GALLERY_DATE_MODE.YEAR: case GALLERY_DATE_MODE.YEAR:
case GALLERY_DATE_MODE.MONTH: { case GALLERY_DATE_MODE.MONTH: {
const size = (contentWidth - GALLERY_YEAR_MODE_GRID_GAP * gapCount) / columns; const size = (contentWidth - GALLERY_YEAR_MODE_GRID_GAP * gapCount) / columns;
return { large: size, middle: size, small: size }; return { large: size, medium: size, small: size };
} }
case GALLERY_DATE_MODE.DAY: { case GALLERY_DATE_MODE.DAY: {
const imagesWidth = contentWidth - GALLERY_DEFAULT_GRID_GAP * gapCount; const imagesWidth = contentWidth - GALLERY_DEFAULT_GRID_GAP * gapCount;
const small = imagesWidth / 6; const small = imagesWidth / 6;
const large = small * 3 + GALLERY_DEFAULT_GRID_GAP * 2; const large = small * 3 + GALLERY_DEFAULT_GRID_GAP * 2;
const middle = small * 2 + GALLERY_DEFAULT_GRID_GAP; const medium = small * 2 + GALLERY_DEFAULT_GRID_GAP;
return { large, middle, small }; return { large, medium, small };
} }
default: { default: {
const size = (containerWidth - 32 - GALLERY_DEFAULT_GRID_GAP * gapCount) / columns; const size = (containerWidth - 32 - GALLERY_DEFAULT_GRID_GAP * gapCount) / columns;
return { large: size, middle: size, small: size }; return { large: size, medium: size, small: size };
} }
} }
}; };