From 8239e57fa1ceeb509dd85c6c5e6c08b87b45f1cf Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 29 Oct 2015 17:42:03 +0000
Subject: [PATCH] more lightbox tweaks

---
 src/skins/vector/css/atoms/ImageView.css  |  8 ++++++--
 src/skins/vector/views/atoms/ImageView.js | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/skins/vector/css/atoms/ImageView.css b/src/skins/vector/css/atoms/ImageView.css
index 94512ddb..22ef343b 100644
--- a/src/skins/vector/css/atoms/ImageView.css
+++ b/src/skins/vector/css/atoms/ImageView.css
@@ -45,8 +45,8 @@ limitations under the License.
     /* min-width hack needed for FF */
     min-width: 0px;
     height: 90%;
-    -webkit-flex: 5;
-    flex: 5 5 0;
+    -webkit-flex: 15;
+    flex: 15 15 0;
 
     display: -webkit-flex;
     display: flex;
@@ -110,6 +110,10 @@ limitations under the License.
     border: 1px solid #fff;
 }
 
+.mx_ImageView_size {
+    font-size: 12px;
+}
+
 .mx_ImageView_link {
     color: #fff ! important;
     text-decoration: none ! important;
diff --git a/src/skins/vector/views/atoms/ImageView.js b/src/skins/vector/views/atoms/ImageView.js
index f81dee5d..6ff88e28 100644
--- a/src/skins/vector/views/atoms/ImageView.js
+++ b/src/skins/vector/views/atoms/ImageView.js
@@ -90,14 +90,22 @@ module.exports = React.createClass({
             height: displayHeight
         };
 */
-        var style;
+        var style, res;
+
+        if (this.props.width && this.props.height) {
+            style = {
+                width: this.props.width,
+                height: this.props.height,
+            };
+            res = ", " + style.width + "x" + style.height + "px";
+        }
 
         return (
             <div className="mx_ImageView">
                 <div className="mx_ImageView_lhs">
                 </div>
                 <div className="mx_ImageView_content">
-                    <img src={this.props.src} width={this.props.width} height={this.props.height}/>
+                    <img src={this.props.src} style={style}/>
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
                             <div className="mx_ImageView_shim">
@@ -110,7 +118,8 @@ module.exports = React.createClass({
                             </div>
                             <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
                                 <div className="mx_ImageView_download">
-                                        Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
+                                        Download this file<br/>
+                                        <span className="mx_ImageView_size">({ filesize(this.props.mxEvent.getContent().info.size) }{ res })</span>
                                 </div>
                             </a>
                             <div className="mx_ImageView_button">