haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 06:33:48 +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

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

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

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.MONTH: {
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: {
const imagesWidth = contentWidth - GALLERY_DEFAULT_GRID_GAP * gapCount;
const small = imagesWidth / 6;
const large = small * 3 + GALLERY_DEFAULT_GRID_GAP * 2;
const middle = small * 2 + GALLERY_DEFAULT_GRID_GAP;
return { large, middle, small };
const medium = small * 2 + GALLERY_DEFAULT_GRID_GAP;
return { large, medium, small };
}
default: {
const size = (containerWidth - 32 - GALLERY_DEFAULT_GRID_GAP * gapCount) / columns;
return { large: size, middle: size, small: size };
return { large: size, medium: size, small: size };
}
}
};