make file thumbnails match the design

skins/base/css/molecules/MImageTile.css

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

skins/base/views/molecules/MFileTile.js

@@ -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>
         );
     },

skins/base/views/molecules/MImageTile.js

@@ -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>
         );
     },

skins/base/views/molecules/MessageTile.js

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

skins/base/views/molecules/SenderProfile.js

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