haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 06:34:40 +00:00
Code Issues Releases Wiki Activity

fix: day images selected (#7355)

Browse Source 
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2025-01-13 18:19:33 +08:00
committed by GitHub
parent 20c81de6cf
commit 2bc89a67d9
4 changed files with 196 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/metadata/views/gallery/content.js
View File

@@ -51,7 +51,7 @@ const Content = ({
const selected = [];
groups.forEach(group => {
group.displayChildren.forEach((row) => {
group.children.forEach((row) => {
row.children.forEach((img) => {
const imgElement = document.getElementById(img.id);
if (imgElement) {
@@ -83,7 +83,7 @@ const Content = ({
const renderDisplayGroup = useCallback((group) => {
const { top: overScanTop, bottom: overScanBottom } = overScan;
const { name, displayChildren: children, height, top, paddingTop } = group;
const { name, children, height, top, paddingTop } = group;
// group not in rendering area, return empty div
if (top >= overScanBottom || top + height <= overScanTop) {
@@ -117,9 +117,7 @@ const Content = ({
if ([GALLERY_DATE_MODE.YEAR, GALLERY_DATE_MODE.MONTH].includes(mode)) {
newChildren = children.flatMap(row => row.children);
listStyle['gap'] = GALLERY_YEAR_MODE_GRID_GAP;
if (newChildren.length === 1) {
listStyle['gridTemplateColumns'] = '1fr';
}
if (newChildren.length === 1) listStyle['gridTemplateColumns'] = '1fr';
} else if (mode === GALLERY_DATE_MODE.DAY) {
newChildren = children.flatMap(row => row.children);
if (newChildren.length === 1) {
@@ -127,8 +125,8 @@ const Content = ({
} else if (newChildren.length < 7) {
listStyle['gridTemplateColumns'] = '1fr 1fr';
} else {
delete listStyle['gridTemplateColumns'];
listStyle['display'] = 'flex';
listStyle['gridTemplateColumns'] = `repeat(${columns}, ${size.small}px)`;
listStyle['gridTemplateRows'] = `repeat(3, ${size.small}px)`;
}
}
const imgEvents = {
@@ -169,7 +167,7 @@ const Content = ({
})}
</>
) : (
<DayImages size={size} images={newChildren} imgEvents={imgEvents} />
<DayImages size={size} selectedImageIds={selectedImageIds} images={newChildren} imgEvents={imgEvents} />
)}
</div>
</div>
@@ -199,7 +197,6 @@ Content.propTypes = {
height: PropTypes.number.isRequired,
top: PropTypes.number.isRequired,
paddingTop: PropTypes.number.isRequired,
displayChildren: PropTypes.array,
children: PropTypes.arrayOf(PropTypes.shape({
top: PropTypes.number.isRequired,
children: PropTypes.arrayOf(PropTypes.shape({

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

@@ -1,68 +1,212 @@
import React from 'react';
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import Image from '../image';
import { GALLERY_DEFAULT_GRID_GAP } from '../../../constants';
const ImagesGrid = ({ images, size, imgEvents }) => {
const allStyles = [
/*
small size: *
middle 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;
// 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 = [
[
{ 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 },
], [
{ 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 },
], [
{ 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 },
], [
{ 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 },
]
];
const style = styles[day % styles.length];
return (
<>
<Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.large} style={{ gridRow: 1 / 3, gridColumn: `${1 + firstImgOffset} / ${3 + firstImgOffset}` }} {...imgEvents} />
<Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} 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 = [
[
{ position: 'absolute', top: 0, left: 0 },
/*
- - * * * *
- - * * - -
* * * * - -
*/
{ 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 },
], [
{ position: 'absolute', top: 0, left: size.small + GALLERY_DEFAULT_GRID_GAP },
/*
* * * * - -
- - * * - -
- - * * * *
*/
{ gridRow: '1 / 2', gridColumn: '5 / 6' },
{ gridRow: '2 / 3', gridColumn: '1 / 2' },
{ gridRow: 1, gridColumn: 1 },
{ gridRow: 2, 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 },
], [
/*
- - * - - *
- - * - - *
* * * * * *
*/
{ 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 },
], [
{ position: 'absolute', top: size.small + GALLERY_DEFAULT_GRID_GAP, left: 0 },
{ gridRow: 1, gridColumn: 1 },
{ gridRow: 1, gridColumn: 2 },
/*
- - * * * *
- - * - - *
* * * - - *
*/
{ 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: 3, gridColumn: 3 },
], [
{ position: 'absolute', top: size.small + GALLERY_DEFAULT_GRID_GAP, left: size.small + GALLERY_DEFAULT_GRID_GAP },
{ gridRow: 1, gridColumn: 1 },
{ gridRow: 1, gridColumn: 2 },
{ gridRow: 1, gridColumn: 3 },
{ gridRow: 2, gridColumn: 1 },
{ gridRow: 2, gridColumn: 6 },
{ gridRow: 3, gridColumn: 1 },
{ gridRow: 3, gridColumn: 2 },
{ gridRow: 3, gridColumn: 3 },
{ gridRow: 3, gridColumn: 6 },
]
];
let day = images[0].day;
day = day ? Number(day) : 0;
const styles = allStyles[day % 4];
const style = styles[day % styles.length];
return (
<div
className="position-relative"
style={{
display: 'grid',
gridTemplateColumns: `repeat(3, ${size.small}px)`,
gridTemplateRows: `repeat(3, ${size.small}px)`,
width: size.large,
height: size.large,
gap: GALLERY_DEFAULT_GRID_GAP,
}}
>
<Image key={images[0].id} img={images[0]} size={size.middle} {...imgEvents} style={styles[0]} />
{images.slice(1, 6).map((image, index) => {
const style = styles[index + 1] || {};
return (<Image key={image.id} img={image} size={size.small} style={style} {...imgEvents} />);
<>
<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} />
{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} />);
})}
</div>
</>
);
};
ImagesGrid.propTypes = {
images: PropTypes.array.isRequired,
selectedImageIds: PropTypes.array,
size: PropTypes.object.isRequired,
imgEvents: PropTypes.object,
};

27
frontend/src/metadata/views/gallery/day-images/index.js
View File

@@ -3,43 +3,26 @@ import PropTypes from 'prop-types';
import Image from '../image';
import ImagesGrid from './images-grid';
const DayImages = ({ size, images, imgEvents }) => {
const DayImages = ({ size, selectedImageIds, images, imgEvents }) => {
const imagesCount = Array.isArray(images) ? images.length : 0;
if (imagesCount === 0) return null;
if (imagesCount === 1) {
const img = images[0];
return (<Image img={img} size={size.large} style={{ width: '100%' }} {...imgEvents} />);
return (<Image isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} style={{ width: '100%' }} {...imgEvents} />);
}
if (imagesCount < 7) {
const imgs = images.slice(0, 2);
return imgs.map(img => (<Image key={img.id} img={img} size={size.large} {...imgEvents} />));
}
if (imagesCount < 12) {
const i = imagesCount % 2;
const firstImg = images[0];
const renderContent = [
(<Image key={firstImg.id} img={firstImg} size={size.large} {...imgEvents} />),
(<ImagesGrid key={firstImg.id + '_'} images={images.slice(1)} size={size} imgEvents={imgEvents} />)
];
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
{i === 0 ? renderContent : [renderContent[1], renderContent[0]]}
</div>
);
return imgs.map(img => (<Image key={img.id} isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} {...imgEvents} />));
}
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<ImagesGrid key="1" images={images.slice(0, 6)} size={size} imgEvents={imgEvents} />
<ImagesGrid key="2" images={images.slice(6, 12)} size={size} imgEvents={imgEvents} />
</div>
);
return (<ImagesGrid selectedImageIds={selectedImageIds} images={images} size={size} imgEvents={imgEvents} />);
};
DayImages.propTypes = {
size: PropTypes.object,
images: PropTypes.array,
selectedImageIds: PropTypes.array,
imgEvents: PropTypes.object,
};

11
frontend/src/metadata/views/gallery/main.js
View File

@@ -93,7 +93,6 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
const { children, ...__init } = _init;
let top = 0;
let rows = [];
let displayChildren = [];
if (index > 0) {
const lastGroup = _groups[index - 1];
const { top: lastGroupTop, height: lastGroupHeight } = lastGroup;
@@ -107,16 +106,14 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
rows[rowIndex].children.push(child);
});
if (mode === GALLERY_DATE_MODE.YEAR) displayChildren = rows.slice(0, 1);
if (mode === GALLERY_DATE_MODE.MONTH) displayChildren = rows.slice(0, 1);
if (mode === GALLERY_DATE_MODE.DAY) displayChildren = [{ top: rows[0].top, children: rows.flatMap(r => r.children) }];
if (mode === GALLERY_DATE_MODE.ALL) displayChildren = rows;
if (mode === GALLERY_DATE_MODE.YEAR) rows = rows.slice(0, 1);
if (mode === GALLERY_DATE_MODE.MONTH) rows = rows.slice(0, 1);
if (mode === GALLERY_DATE_MODE.DAY) rows = [{ top: rows[0].top, children: rows.slice(0, 2).flatMap(r => r.children) }];
_groups.push({
...__init,
top,
height: displayChildren.length * rowHeight + paddingTop,
height: rows.length * rowHeight + paddingTop,
paddingTop,
displayChildren,
children: rows
});
});