From e1efb165fdb21955752788e60540f0a7eb7c208e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 14 Aug 2015 14:44:10 +0100
Subject: [PATCH] make file thumbnails match the design

---
 skins/base/css/molecules/MImageTile.css     |  18 +++++++++++++++++-
 skins/base/img/newmessages.png              | Bin 0 -> 213 bytes
 skins/base/views/molecules/MFileTile.js     |   9 ++++++---
 skins/base/views/molecules/MImageTile.js    |  11 +++++++++--
 skins/base/views/molecules/MessageTile.js   |   8 +++++++-
 skins/base/views/molecules/SenderProfile.js |   2 +-
 6 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 skins/base/img/newmessages.png

diff --git a/skins/base/css/molecules/MImageTile.css b/skins/base/css/molecules/MImageTile.css
index 775ebca9..187915aa 100644
--- a/skins/base/css/molecules/MImageTile.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/skins/base/img/newmessages.png b/skins/base/img/newmessages.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6dbeb17fdc3364637fb85c127c773e0f89fee68
GIT binary patch
literal 213
zcmeAS@N?(olHy`uVBq!ia0vp^AT|#N8<337)>#0g7>k44ofy`glX(f`^n1EEhDb;z
zCpa+w|NlRq{gI4GBAZwVqe8q;$Nz=h#tXS0JmO#Cw17XjVFv&7+YLoY4l=w&$r=Lh
zk1Uf|!lAKUzQfj$i@EWKwZMC)FrJid=A#Z>c}#^$$`cY8xQZB8>N@Z&n$P?(T45W@
zBWVYjgC|b>koIt9@Gum3&zvL?!JU%OEzoh&!E-|O^u^jt3_=HkSjy@yzXm#u!PC{x
JWt~$(69Da>L|*^^

literal 0
HcmV?d00001

diff --git a/skins/base/views/molecules/MFileTile.js b/skins/base/views/molecules/MFileTile.js
index c519bfc4..a0b4465e 100644
--- a/skins/base/views/molecules/MFileTile.js
+++ b/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>
         );
     },
diff --git a/skins/base/views/molecules/MImageTile.js b/skins/base/views/molecules/MImageTile.js
index b35de04f..6b95f7ef 100644
--- a/skins/base/views/molecules/MImageTile.js
+++ b/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>
         );
     },
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index d6b8713f..458de3c9 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/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}>
diff --git a/skins/base/views/molecules/SenderProfile.js b/skins/base/views/molecules/SenderProfile.js
index c4bec306..f13b29cf 100644
--- a/skins/base/views/molecules/SenderProfile.js
+++ b/skins/base/views/molecules/SenderProfile.js
@@ -45,7 +45,7 @@ module.exports = React.createClass({
         }
         return (
             <span className={classes}>
-                {name}
+                {name} { this.props.aux }
             </span>
         );
     },