diff options
author | Joram Wilander <jwawilander@gmail.com> | 2015-08-17 09:30:53 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2015-08-17 09:30:53 -0400 |
commit | 2fbc92af108316c0952e4509f5e7a2a9d3305045 (patch) | |
tree | 0c0c95bae2f68fd2e2cc55acf18e26dce61905e0 /web | |
parent | e5a38174884310a07e62bed99e10b655c5c6749f (diff) | |
parent | 5f068109a7581fb069a446b9a2680fb1c24513a9 (diff) | |
download | chat-2fbc92af108316c0952e4509f5e7a2a9d3305045.tar.gz chat-2fbc92af108316c0952e4509f5e7a2a9d3305045.tar.bz2 chat-2fbc92af108316c0952e4509f5e7a2a9d3305045.zip |
Merge pull request #379 from asaadmahmoodspin/mm-1854
mm-1858 - Truncating and adding tooltips to file names
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/file_attachment.jsx | 10 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 9 |
2 files changed, 13 insertions, 6 deletions
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index b7ea5734f..c36c908d2 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)); + var trimmedFilename; + if (filenameString.length > 35) { + trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + "..."; + } else { + trimmedFilename = filenameString; + } + 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={filenameString} className="post-image__name">{trimmedFilename}</div> <div> <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span> <span className="post-image__size">{fileSizeString}</span> diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 65775f01e..ca06d7def 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -115,7 +115,6 @@ height: 100px; float: left; margin: 5px 10px 5px 0; - display: table; border: 1px solid lightgrey; .post__load { height: 100%; @@ -137,16 +136,16 @@ } } .post-image__thumbnail { - display: table-cell; - vertical-align: top; + float: left; width: 50%; height: 100%; cursor: zoom-in; cursor: -webkit-zoom-in; } .post-image__details { - display: table-cell; - vertical-align: top; + float: left; + @include clearfix; + word-break: break-word; width: 50%; height: 100%; background: white; |