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

fix rotate image in metadata table view (#6851)

Browse Source
This commit is contained in:
Michael An
2024-09-26 12:25:02 +08:00
committed by GitHub
parent 4fea5d13c1
commit f1f400499f
3 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,11 +18,9 @@ class ImageDialog extends React.Component {
downloadImage = (imageSrc) => {
let downloadUrl = imageSrc;
if (document.getElementById('downloadFrame')) {
document.body.removeChild(document.getElementById('downloadFrame'));
}
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'downloadFrame');
iframe.style.display = 'none';
@@ -31,36 +29,24 @@ class ImageDialog extends React.Component {
};
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);
}
window.open(this.props.imageItems[this.props.imageIndex].url, '_blank');
};
render() {
const { imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage } = this.props;
const { imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage } = this.props;
const imageItemsLength = imageItems.length;
if (imageItemsLength === 0) return null;
const name = imageItems[imageIndex].name;
const imageTitle = `${name} (${imageIndex + 1}/${imageItemsLength})`;
const mainImg = imageItems[imageIndex];
const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
const mainSrc = mainImg.thumbnail || mainImg.src;
const nextSrc = nextImg.thumbnail || nextImg.src;
const prevSrc = prevImg.thumbnail || prevImg.src;
return (
<Lightbox
wrapperClassName='custom-image-previewer'
imageTitle={imageTitle}
mainSrc={mainSrc}
nextSrc={nextSrc}
prevSrc={prevSrc}
imageTitle={`${name} (${imageIndex + 1}/${imageItemsLength})`}
mainSrc={mainImg.thumbnail || mainImg.src}
nextSrc={nextImg.thumbnail || nextImg.src}
prevSrc={prevImg.thumbnail || prevImg.src}
onCloseRequest={closeImagePopup}
onMovePrevRequest={moveToPrevImage}
onMoveNextRequest={moveToNextImage}
@@ -73,10 +59,10 @@ class ImageDialog extends React.Component {
zoomOutLabel={gettext('Zoom out')}
enableRotate={true}
onClickDownload={() => this.downloadImage(imageItems[imageIndex].url)}
onClickDelete={onDeleteImage ? () => onDeleteImage(imageItems[imageIndex].name) : null}
onClickDelete={onDeleteImage ? () => onDeleteImage(name) : null}
onViewOriginal={this.onViewOriginal}
viewOriginalImageLabel={gettext('View original image')}
onRotateImage={this.onRotateImage}
onRotateImage={onRotateImage ? (angle) => onRotateImage(imageIndex, angle) : null}
/>
);
}