From 67dc6e60f3e49ce1780b4bfccd57e62ccdc3902f Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 14 Aug 2015 19:36:58 +0500
Subject: mm-1858 - Truncating and adding tooltips to file names in thumbnail
 details

---
 web/react/components/file_attachment.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'web/react')

diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index b7ea5734f..de9e2a04b 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -113,6 +113,14 @@ module.exports = React.createClass({
             fileSizeString = utils.fileSizeToString(this.state.fileSize);
         }
 
+        var filenameString = decodeURIComponent(utils.getFileName(filename));
+        if(filenameString.length > 35){
+            trimmedFilename = filenameString.substring(0, Math.min(35,filenameString.length)) + "...";
+        }
+        else {
+            trimmedFilename = decodeURIComponent(utils.getFileName(filename));;
+        }
+
         return (
             <div className="post-image__column" key={filename}>
                 <a className="post-image__thumbnail" href="#" onClick={this.props.handleImageClick}
@@ -120,7 +128,7 @@ module.exports = React.createClass({
                     {thumbnail}
                 </a>
                 <div className="post-image__details">
-                    <div className="post-image__name">{decodeURIComponent(utils.getFileName(filename))}</div>
+                    <div data-toggle="tooltip" title={decodeURIComponent(utils.getFileName(filename))} className="post-image__name">{trimmedFilename}</div>
                     <div>
                         <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span>
                         <span className="post-image__size">{fileSizeString}</span>
-- 
cgit v1.2.3-1-g7c22