IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

mm-1858 - Truncating and adding tooltips to file names in thumbnail details

Browse Source
This commit is contained in:
Asaad Mahmood
2015-08-14 19:36:58 +05:00
parent b9aef9f2a6
commit 67dc6e60f3
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/react/components/file_attachment.jsx
View File

@@ -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>

9
web/sass-files/sass/partials/_files.scss
View File

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