OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Display some sensible UI for non-mxc content URLs.

pull/354/head
David Baker 2015-11-12 14:16:57 +00:00
parent c12c716dc0
commit c8a8306165
2 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/skins/vector/views/molecules/MFileTile.js
View File

@ -30,15 +30,25 @@ module.exports = React.createClass({
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
var cli = MatrixClientPeg.get(); var cli = MatrixClientPeg.get();
return ( var httpUrl = cli.mxcUrlToHttp(content.url);
<span className="mx_MFileTile"> var text = this.presentableTextForFile(content);
<div className="mx_MImageTile_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank"> if (httpUrl) {
<img src="img/download.png" width="10" height="12"/> return (
Download {this.presentableTextForFile(content)} <span className="mx_MFileTile">
</a> <div className="mx_MImageTile_download">
</div> <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
Download {text}
</a>
</div>
</span>
);
} else {
var extra = text ? ': '+text : '';
return <span className="mx_MFileTile">
Invalid file{extra}
</span> </span>
); }
}, },
}); });

39
src/skins/vector/views/molecules/MImageTile.js
View File

@ -73,18 +73,33 @@ module.exports = React.createClass({
var imgStyle = {}; var imgStyle = {};
if (thumbHeight) imgStyle['height'] = thumbHeight; if (thumbHeight) imgStyle['height'] = thumbHeight;
return ( var thumbUrl = cli.mxcUrlToHttp(content.url, 480, 360);
<span className="mx_MImageTile"> if (thumbUrl) {
<a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }> return (
<img className="mx_MImageTile_thumbnail" src={cli.mxcUrlToHttp(content.url, 480, 360)} alt={content.body} style={imgStyle} /> <span className="mx_MImageTile">
</a> <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
<div className="mx_MImageTile_download"> <img className="mx_MImageTile_thumbnail" src={thumbUrl} alt={content.body} style={imgStyle} />
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
</a> </a>
</div> <div className="mx_MImageTile_download">
</span> <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
); <img src="img/download.png" width="10" height="12"/>
Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
</a>
</div>
</span>
);
} else if (content.body) {
return (
<span className="mx_MImageTile">
Image '{content.body}' cannot be displayed.
</span>
);
} else {
return (
<span className="mx_MImageTile">
This image cannot be displayed.
</span>
);
}
}, },
}); });