diff options
Diffstat (limited to 'webapp/components/file_attachment.jsx')
-rw-r--r-- | webapp/components/file_attachment.jsx | 69 |
1 files changed, 53 insertions, 16 deletions
diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx index 4a040a35b..d5bbae4c9 100644 --- a/webapp/components/file_attachment.jsx +++ b/webapp/components/file_attachment.jsx @@ -8,6 +8,7 @@ import Client from 'utils/web_client.jsx'; import Constants from 'utils/constants.jsx'; import {intlShape, injectIntl, defineMessages} from 'react-intl'; +import {Tooltip, OverlayTrigger} from 'react-bootstrap'; const holders = defineMessages({ download: { @@ -24,6 +25,7 @@ class FileAttachment extends React.Component { this.loadFiles = this.loadFiles.bind(this); this.addBackgroundImage = this.addBackgroundImage.bind(this); + this.onAttachmentClick = this.onAttachmentClick.bind(this); this.canSetState = false; this.state = {fileSize: -1}; @@ -126,6 +128,10 @@ class FileAttachment extends React.Component { $(ReactDOM.findDOMNode(this.refs[name])).css('background-image', 'initial'); } } + onAttachmentClick(e) { + e.preventDefault(); + this.props.handleImageClick(this.props.index); + } render() { var filename = this.props.filename; @@ -149,12 +155,12 @@ class FileAttachment extends React.Component { if (this.state.fileSize < 0) { Client.getFileInfo( filename, - function success(data) { + (data) => { if (this.canSetState) { this.setState({fileSize: parseInt(data.size, 10)}); } - }.bind(this), - function error() { + }, + () => { // Do nothing } ); @@ -169,35 +175,64 @@ class FileAttachment extends React.Component { } else { trimmedFilename = filenameString; } + var filenameOverlay = ( + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={<Tooltip id='file-name__tooltip'>{this.props.intl.formatMessage(holders.download) + ' "' + filenameString + '"'}</Tooltip>} + > + <a + href={fileUrl} + download={filenameString} + className='post-image__name' + target='_blank' + rel='noopener noreferrer' + > + {trimmedFilename} + </a> + </OverlayTrigger> + ); + + if (this.props.compactDisplay) { + filenameOverlay = ( + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={<Tooltip id='file-name__tooltip'>{filenameString}</Tooltip>} + > + <a + href='#' + onClick={this.onAttachmentClick} + className='post-image__name' + rel='noopener noreferrer' + > + <i className='glyphicon glyphicon-paperclip'/>{trimmedFilename} + </a> + </OverlayTrigger> + ); + } return ( <div className='post-image__column' key={filename} > - <a className='post-image__thumbnail' + <a + className='post-image__thumbnail' href='#' - onClick={() => this.props.handleImageClick(this.props.index)} + onClick={this.onAttachmentClick} > {thumbnail} </a> <div className='post-image__details'> - <a - href={fileUrl} - download={filenameString} - data-toggle='tooltip' - title={this.props.intl.formatMessage(holders.download) + ' \"' + filenameString + '\"'} - className='post-image__name' - target='_blank' - > - {trimmedFilename} - </a> + {filenameOverlay} <div> <a href={fileUrl} download={filenameString} className='post-image__download' target='_blank' + rel='noopener noreferrer' > <span className='fa fa-download' @@ -222,7 +257,9 @@ FileAttachment.propTypes = { index: React.PropTypes.number.isRequired, // handler for when the thumbnail is clicked passed the index above - handleImageClick: React.PropTypes.func + handleImageClick: React.PropTypes.func, + + compactDisplay: React.PropTypes.bool }; export default injectIntl(FileAttachment); |