haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 19:01:42 +00:00
Code Issues Releases Wiki Activity

update image dialog, add download, delete and view original image button (#6670)

Browse Source 
* update image dialog, add download, delete and view original image button

* update react-image-lightbox

* add-image-rotate-api

* support restore in image previewer

* support image rotate

* upgrade react-image-lightbox

* fix bug - first image auto previewed in list layout, improve delete and restore action

* remove raise

* fix last line

---------

Co-authored-by: r350178982 <32759763+r350178982@users.noreply.github.com>
Co-authored-by: Michael An <2331806369@qq.com>
This commit is contained in:
Aries
2024-09-03 10:31:42 +08:00
committed by GitHub
parent 670ee89f24
commit 89b4e92fa6
17 changed files with 384 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/dirent-grid-view/dirent-grid-item.js
View File

@@ -289,8 +289,8 @@ class DirentGridItem extends React.Component {
onDrop={this.onGridItemDragDrop}
>
{(this.canPreview && dirent.encoded_thumbnail_src) ?
<img src={`${siteRoot}${fileUrl}`} ref={this.gridIcon} className="thumbnail" onClick={this.onItemClick} alt=""/> :
<img src={iconUrl} ref={this.gridIcon} width="96" alt='' />
<img src={`${siteRoot}${fileUrl}`} className="thumbnail" onClick={this.onItemClick} alt=""/> :
<img src={iconUrl} width="96" alt='' />
}
{dirent.is_locked && <img className="grid-file-locked-icon" src={lockedImageUrl} alt={lockedMessage} title={lockedInfo}/>}
</div>

68
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -21,7 +21,9 @@ import CreateFile from '../dialog/create-file-dialog';
import CreateFolder from '../dialog/create-folder-dialog';
import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
import toaster from '../toast';
import imageAPI from '../../utils/image-api';
import FileAccessLog from '../dialog/file-access-log';
import { EVENT_BUS_TYPE } from '../common/event-bus-type';
import '../../css/grid-view.css';
@@ -59,6 +61,7 @@ const propTypes = {
posY: PropTypes.number,
dirent: PropTypes.object,
getMenuContainerSize: PropTypes.func,
eventBus: PropTypes.object,
};
const DIRENT_GRID_CONTAINER_MENU_ID = 'dirent-grid-container-menu';
@@ -103,10 +106,24 @@ class DirentGridView extends React.Component {
componentDidMount() {
window.addEventListener('mouseup', this.onGlobalMouseUp);
this.unsubscribeEvent = this.props.eventBus.subscribe(EVENT_BUS_TYPE.RESTORE_IMAGE, this.recalculateImageItems);
}
recalculateImageItems = () => {
if (!this.state.isImagePopupOpen) return;
let imageItems = this.props.direntList
.filter((item) => Utils.imageCheck(item.name))
.map((item) => this.prepareImageItem(item));
this.setState({
imageItems: imageItems,
imageIndex: this.state.imageIndex % imageItems.length,
});
};
componentWillUnmount() {
window.removeEventListener('mouseup', this.onGlobalMouseUp);
this.unsubscribeEvent();
}
onGridContainerMouseDown = (event) => {
@@ -550,7 +567,8 @@ class DirentGridView extends React.Component {
const repoID = this.props.repoID;
const path = Utils.encodePath(Utils.joinPath(this.props.path, name));
const src = `${siteRoot}repo/${repoID}/raw${path}`;
const cacheBuster = new Date().getTime();
const src = `${siteRoot}repo/${repoID}/raw${path}?t=${cacheBuster}`;
return {
'name': name,
@@ -593,6 +611,50 @@ class DirentGridView extends React.Component {
}));
};
deleteImage = (name) => {
const item = this.props.fullDirentList.find((item) => item.name === name);
this.props.onItemDelete(item);
const newImageItems = this.props.fullDirentList
.filter((item) => item.name !== name && Utils.imageCheck(item.name))
.map((item) => this.prepareImageItem(item));
this.setState((prevState) => ({
isImagePopupOpen: newImageItems.length > 0,
imageItems: newImageItems,
imageIndex: prevState.imageIndex % newImageItems.length,
}));
};
rotateImage = (imageIndex, angle) => {
if (imageIndex >= 0 && angle !== 0) {
const path = this.state.path === '/' ? this.props.path + this.state.imageItems[imageIndex].name : this.props.path + '/' + this.state.imageItems[imageIndex].name;
imageAPI.rotateImage(this.props.repoID, path, 360 - angle).then((res) => {
seafileAPI.createThumbnail(this.props.repoID, path, 48).then((res) => {
// Generate a unique query parameter to bust the cache
const cacheBuster = new Date().getTime();
const newThumbnailSrc = `${res.data.encoded_thumbnail_src}?t=${cacheBuster}`;
this.setState((prevState) => {
const updatedImageItems = [...prevState.imageItems];
updatedImageItems[imageIndex].src = newThumbnailSrc;
return { imageItems: updatedImageItems };
});
// Update the thumbnail URL with the cache-busting query parameter
const item = this.props.direntList.find((item) => item.name === this.state.imageItems[imageIndex].name);
this.props.updateDirent(item, 'encoded_thumbnail_src', newThumbnailSrc);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
}
};
checkDuplicatedName = (newName) => {
return Utils.checkDuplicatedNameInList(this.props.direntList, newName);
};
@@ -896,7 +958,7 @@ class DirentGridView extends React.Component {
/>
</ModalPortal>
}
{this.state.isImagePopupOpen && (
{this.state.isImagePopupOpen && this.state.imageItems.length && (
<ModalPortal>
<ImageDialog
imageItems={this.state.imageItems}
@@ -904,6 +966,8 @@ class DirentGridView extends React.Component {
closeImagePopup={this.closeImagePopup}
moveToPrevImage={this.moveToPrevImage}
moveToNextImage={this.moveToNextImage}
onDeleteImage={this.deleteImage}
onRotateImage={this.rotateImage}
/>
</ModalPortal>
)}