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

36
frontend/src/components/dialog/image-dialog.js
View File

@@ -9,11 +9,38 @@ const propTypes = {
imageIndex: PropTypes.number.isRequired,
closeImagePopup: PropTypes.func.isRequired,
moveToPrevImage: PropTypes.func.isRequired,
moveToNextImage: PropTypes.func.isRequired
moveToNextImage: PropTypes.func.isRequired,
onDeleteImage: PropTypes.func,
onRotateImage: PropTypes.func,
};
class ImageDialog extends React.Component {
downloadImage = (imageSrc) => {
let downloadUrl = imageSrc.indexOf('?dl=1') > -1 ? imageSrc : imageSrc + '?dl=1';
if (document.getElementById('downloadFrame')) {
document.body.removeChild(document.getElementById('downloadFrame'));
}
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'downloadFrame');
iframe.style.display = 'none';
iframe.src = downloadUrl;
document.body.appendChild(iframe);
};
onViewOriginal = () => {
const imageSrc = this.props.imageItems[this.props.imageIndex].url;
window.open(imageSrc, '_blank');
};
onRotateImage = (angle) => {
if (this.props.onRotateImage) {
this.props.onRotateImage(this.props.imageIndex, angle);
}
};
render() {
const imageItems = this.props.imageItems;
const imageIndex = this.props.imageIndex;
@@ -23,6 +50,7 @@ class ImageDialog extends React.Component {
return (
<Lightbox
wrapperClassName='custom-image-previewer'
imageTitle={imageTitle}
mainSrc={imageItems[imageIndex].src}
nextSrc={imageItems[(imageIndex + 1) % imageItemsLength].src}
@@ -37,6 +65,12 @@ class ImageDialog extends React.Component {
closeLabel={gettext('Close (Esc)')}
zoomInLabel={gettext('Zoom in')}
zoomOutLabel={gettext('Zoom out')}
enableRotate={true}
onClickDownload={() => this.downloadImage(imageItems[imageIndex].url)}
onClickDelete={this.props.onDeleteImage ? () => this.props.onDeleteImage(imageItems[imageIndex].name) : null}
onViewOriginal={this.onViewOriginal}
viewOriginalImageLabel={gettext('View original image')}
onRotateImage={this.onRotateImage}
/>
);
}