mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

make file thumbnails match the design

Browse source
This commit is contained in:
Matthew Hodgson 2015-08-14 14:44:10 +01:00
parent 12e53f5046
commit e1efb165fd
6 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
skins/base/css/molecules/MImageTile.css
View file

@ -14,6 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MImageTile {
.mx_MImageTile_thumbnail {
background-color: #fff;
border: 2px solid #fff;
border-radius: 1px;
}
.mx_MImageTile_download {
color: #80cef4;
cursor: pointer;
}
.mx_MImageTile_download a {
color: #80cef4;
text-decoration: none;
}
.mx_MImageTile_download img {
padding-right: 8px;
}

BIN
skins/base/img/newmessages.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 213 B

9
skins/base/views/molecules/MFileTile.js
View file

@ -32,9 +32,12 @@ module.exports = React.createClass({
return (
<span className="mx_MFileTile">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
{this.presentableTextForFile(content)}
</a>
<div className="mx_MImageTile_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
Download {this.presentableTextForFile(content)}
</a>
</div>
</span>
);
},

11
skins/base/views/molecules/MImageTile.js
View file

@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var filesize = require('filesize');
var MImageTileController = require("../../../../src/controllers/molecules/MImageTile");
@ -78,9 +79,15 @@ module.exports = React.createClass({
return (
<span className="mx_MImageTile">
<a href={cli.mxcUrlToHttp(content.url)} onClick={this.onClick}>
<img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
<a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
<img className="mx_MImageTile_thumbnail" src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
</a>
<div className="mx_MImageTile_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
Download {content.body} ({ filesize(content.info.size) })
</a>
</div>
</span>
);
},

8
skins/base/views/molecules/MessageTile.js
View file

@ -61,6 +61,12 @@ module.exports = React.createClass({
mx_MessageTile_last: this.props.last,
});
var timestamp = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
var aux = null;
if (msgtype === 'm.image') aux = "sent an image";
else if (msgtype === 'm.video') aux = "sent a video";
else if (msgtype === 'm.file') aux = "uploaded a file";
var avatar, sender, resend;
if (!this.props.continuation) {
avatar = (
@ -68,7 +74,7 @@ module.exports = React.createClass({
<MemberAvatar member={this.props.mxEvent.sender} />
</div>
);
sender = <SenderProfile mxEvent={this.props.mxEvent} />;
sender = <SenderProfile mxEvent={this.props.mxEvent} aux={aux} />;
}
if (this.props.mxEvent.status === "not_sent" && !this.state.resending) {
resend = <button className="mx_MessageTile_msgOption" onClick={this.onResend}>

2
skins/base/views/molecules/SenderProfile.js
View file

@ -45,7 +45,7 @@ module.exports = React.createClass({
}
return (
<span className={classes}>
{name}
{name} { this.props.aux }
</span>
);
},