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);