haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 07:55:36 +00:00
Code Issues Releases Wiki Activity

[improvement] use component ImageDialog for 'show image with popup' (#3229)

Browse Source
This commit is contained in:
llj
2019-04-09 17:24:44 +08:00
committed by Daniel Pan
parent 8688620f5b
commit 831eec3a81
2 changed files with 47 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/dir-view-mode/dir-column-nav.js
View File

@@ -9,12 +9,10 @@ import Copy from '../../components/dialog/copy-dirent-dialog';
import Move from '../../components/dialog/move-dirent-dialog'; import Move from '../../components/dialog/move-dirent-dialog';
import CreateFolder from '../../components/dialog/create-folder-dialog'; import CreateFolder from '../../components/dialog/create-folder-dialog';
import CreateFile from '../../components/dialog/create-file-dialog'; import CreateFile from '../../components/dialog/create-file-dialog';
import ImageDialog from '../../components/dialog/image-dialog';
import { siteRoot, gettext, thumbnailSizeForOriginal } from '../../utils/constants'; import { siteRoot, gettext, thumbnailSizeForOriginal } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
const propTypes = { const propTypes = {
currentPath: PropTypes.string.isRequired, currentPath: PropTypes.string.isRequired,
repoPermission: PropTypes.bool.isRequired, repoPermission: PropTypes.bool.isRequired,
@@ -137,11 +135,11 @@ class DirColumnNav extends React.Component {
} }
onCopyToggle = () => { onCopyToggle = () => {
this.setState({isCopyDialogShow: !this.state.isCopyDialogShow}) this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
} }
onMoveToggle = () => { onMoveToggle = () => {
this.setState({isMoveDialogShow: !this.state.isMoveDialogShow}) this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
} }
onAddFolderNode = (dirPath) => { onAddFolderNode = (dirPath) => {
@@ -191,7 +189,7 @@ class DirColumnNav extends React.Component {
}); });
let imageNames = items.map((item) => { let imageNames = items.map((item) => {
return item.object.name; return item.object.name;
}) });
this.setState({ this.setState({
isNodeImagePopupOpen: true, isNodeImagePopupOpen: true,
imageNodeItems: this.prepareImageItems(node), imageNodeItems: this.prepareImageItems(node),
@@ -254,18 +252,6 @@ class DirColumnNav extends React.Component {
render() { render() {
let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%'; let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
const select = this.props.inResizing ? 'none' : ''; const select = this.props.inResizing ? 'none' : '';
const imageNodeItems = this.state.imageNodeItems;
const imageIndex = this.state.imageIndex;
const imageItemsLength = imageNodeItems.length;
const imageCaption = imageItemsLength && (
<Fragment>
<span>{gettext('%curr% of %total%').replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
<br />
<a href={imageNodeItems[imageIndex].url} target="_blank">{gettext('Open in New Tab')}</a>
</Fragment>
);
return ( return (
<Fragment> <Fragment>
<div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}> <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}>
@@ -355,23 +341,15 @@ class DirColumnNav extends React.Component {
</ModalPortal> </ModalPortal>
)} )}
{this.state.isNodeImagePopupOpen && ( {this.state.isNodeImagePopupOpen && (
<Lightbox <ModalPortal>
mainSrc={imageNodeItems[imageIndex].src} <ImageDialog
imageCaption={imageCaption} imageItems={this.state.imageNodeItems}
imageTitle={imageNodeItems[imageIndex].name} imageIndex={this.state.imageIndex}
nextSrc={imageNodeItems[(imageIndex + 1) % imageItemsLength].src} closeImagePopup={this.closeNodeImagePopup}
prevSrc={imageNodeItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src} moveToPrevImage={this.moveToPrevImage}
onCloseRequest={this.closeNodeImagePopup} moveToNextImage={this.moveToNextImage}
onMovePrevRequest={this.moveToPrevImage}
onMoveNextRequest={this.moveToNextImage}
imagePadding={70}
imageLoadErrorMessage={gettext('The image could not be loaded.')}
prevLabel={gettext('Previous (Left arrow key)')}
nextLabel={gettext('Next (Right arrow key)')}
closeLabel={gettext('Close (Esc)')}
zoomInLabel={gettext('Zoom in')}
zoomOutLabel={gettext('Zoom out')}
/> />
</ModalPortal>
)} )}
</Fragment> </Fragment>
); );

95
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -6,9 +6,7 @@ import Loading from '../loading';
import DirentListItem from './dirent-list-item'; import DirentListItem from './dirent-list-item';
import ModalPortal from '../modal-portal'; import ModalPortal from '../modal-portal';
import CreateFile from '../../components/dialog/create-file-dialog'; import CreateFile from '../../components/dialog/create-file-dialog';
import ImageDialog from '../../components/dialog/image-dialog';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
import '../../css/tip-for-new-md.css'; import '../../css/tip-for-new-md.css';
import toaster from '../toast'; import toaster from '../toast';
@@ -71,7 +69,7 @@ class DirentListView extends React.Component {
if (thead) { if (thead) {
thead.addEventListener('contextmenu', (e) => { thead.addEventListener('contextmenu', (e) => {
e.stopPropagation(); e.stopPropagation();
}) });
} }
} }
@@ -138,45 +136,42 @@ class DirentListView extends React.Component {
} }
// for image popup // for image popup
prepareImageItems = () => { prepareImageItem = (item) => {
let items = this.props.direntList.filter((item) => {
return Utils.imageCheck(item.name);
});
const useThumbnail = !this.repoEncrypted; const useThumbnail = !this.repoEncrypted;
let prepareItem = (item) => { const name = item.name;
const name = item.name;
const fileExt = name.substr(name.lastIndexOf('.') + 1).toLowerCase(); const fileExt = name.substr(name.lastIndexOf('.') + 1).toLowerCase();
const isGIF = fileExt == 'gif'; const isGIF = fileExt == 'gif';
const path = Utils.encodePath(Utils.joinPath(this.props.path, name)); const path = Utils.encodePath(Utils.joinPath(this.props.path, name));
const repoID = this.props.repoID; const repoID = this.props.repoID;
let src; let src;
if (useThumbnail && !isGIF) { if (useThumbnail && !isGIF) {
src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`; src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
} else { } else {
src = `${siteRoot}repo/${repoID}/raw${path}`; src = `${siteRoot}repo/${repoID}/raw${path}`;
} }
return { return {
'name': name, 'name': name,
'url': `${siteRoot}lib/${repoID}/file${path}`, 'url': `${siteRoot}lib/${repoID}/file${path}`,
'src': src 'src': src
};
}; };
return items.map((item) => { return prepareItem(item); });
} }
showImagePopup = (dirent) => { showImagePopup = (curItem) => {
let items = this.props.direntList.filter((item) => { let items = this.props.direntList.filter((item) => {
return Utils.imageCheck(item.name); return Utils.imageCheck(item.name);
}); });
const imageItems = items.map((item) => {
return this.prepareImageItem(item);
});
this.setState({ this.setState({
isImagePopupOpen: true, isImagePopupOpen: true,
imageItems: this.prepareImageItems(), imageItems: imageItems,
imageIndex: items.indexOf(dirent) imageIndex: items.indexOf(curItem)
}); });
} }
@@ -256,18 +251,6 @@ class DirentListView extends React.Component {
const sortByTime = sortBy == 'time'; const sortByTime = sortBy == 'time';
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>; const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
// for image popup
const imageItems = this.state.imageItems;
const imageIndex = this.state.imageIndex;
const imageItemsLength = imageItems.length;
const imageCaption = imageItemsLength && (
<Fragment>
<span>{gettext('%curr% of %total%').replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
<br />
<a href={imageItems[imageIndex].url} target="_blank">{gettext('Open in New Tab')}</a>
</Fragment>
);
return ( return (
<Fragment> <Fragment>
<table> <table>
@@ -326,23 +309,15 @@ class DirentListView extends React.Component {
</table> </table>
{this.state.isImagePopupOpen && ( {this.state.isImagePopupOpen && (
<Lightbox <ModalPortal>
mainSrc={imageItems[imageIndex].src} <ImageDialog
imageTitle={imageItems[imageIndex].name} imageItems={this.state.imageItems}
imageCaption={imageCaption} imageIndex={this.state.imageIndex}
nextSrc={imageItems[(imageIndex + 1) % imageItemsLength].src} closeImagePopup={this.closeImagePopup}
prevSrc={imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src} moveToPrevImage={this.moveToPrevImage}
onCloseRequest={this.closeImagePopup} moveToNextImage={this.moveToNextImage}
onMovePrevRequest={this.moveToPrevImage} />
onMoveNextRequest={this.moveToNextImage} </ModalPortal>
imagePadding={70}
imageLoadErrorMessage={gettext('The image could not be loaded.')}
prevLabel={gettext('Previous (Left arrow key)')}
nextLabel={gettext('Next (Right arrow key)')}
closeLabel={gettext('Close (Esc)')}
zoomInLabel={gettext('Zoom in')}
zoomOutLabel={gettext('Zoom out')}
/>
)} )}
</Fragment> </Fragment>
); );