From 8eaa96b0b30f76467305da624dbe11aa8dbc176a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Oct 2015 19:41:49 +0000
Subject: [PATCH] black magic fixes to the lightbox

---
 src/skins/vector/css/atoms/ImageView.css  |  45 +++++++++++++++-------
 src/skins/vector/img/trans.png            | Bin 0 -> 959 bytes
 src/skins/vector/views/atoms/ImageView.js |  36 +++++++++--------
 3 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 src/skins/vector/img/trans.png

diff --git a/src/skins/vector/css/atoms/ImageView.css b/src/skins/vector/css/atoms/ImageView.css
index b9c357da..571f6361 100644
--- a/src/skins/vector/css/atoms/ImageView.css
+++ b/src/skins/vector/css/atoms/ImageView.css
@@ -31,8 +31,12 @@ limitations under the License.
     -webkit-box-ordinal-group: 1;
     order: 1;
     -webkit-flex: 1;
-    flex: 1 1 0;
+    flex: 1 1 10%;
     min-width: 60px;
+/*
+    background-color: #080;
+    height: 20px;
+*/
 }
 
 .mx_ImageView_content {
@@ -41,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: 100;
+    flex: 100 100 0;
 
     display: -webkit-flex;
     display: flex;
@@ -55,21 +59,28 @@ limitations under the License.
 .mx_ImageView_content img {
     max-width: 100%;
     /* can't use max-height as it interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
-    height: 100%;
+    max-height: 100%;
     /* object-fit hack needed for Chrome */
     object-fit: contain;
+    background-image: url('img/trans.png');
+}
+
+.mx_ImageView_labelWrapper {
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    overflow: auto;
 }
 
 .mx_ImageView_label {
     text-align: left;
-    display: inline-block;
-    width: 300px;
-    height: 300px;
-    top: 50%;
-    margin-top: -150px;
-    position: absolute;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding-left: 60px;
+    padding-right: 60px;
+    min-height: 100%;
     color: #fff;
-    padding: 60px;
 }
 
 .mx_ImageView_name {
@@ -83,7 +94,7 @@ limitations under the License.
 }
 
 .mx_ImageView_download {
-    display: inline-block;
+    display: table;
     margin-top: 28px;
     border-radius: 5px;
     background-color: #454545;
@@ -100,10 +111,18 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_ImageView_shim {
+    height: 30px;
+}
+
 .mx_ImageView_rhs {
     -webkit-box-ordinal-group: 3;
     order: 3;
     -webkit-flex: 1;
-    flex: 1 1 0;
+    flex: 1 1 10%;
     min-width: 300px;
+/*
+    background-color: #800;
+    height: 20px;
+*/
 }
diff --git a/src/skins/vector/img/trans.png b/src/skins/vector/img/trans.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ba2310a063039172ff652a857f7f4ce80fa7f39
GIT binary patch
literal 959
zcmaJ=O^ee&7!K~GEEdF*3c`>@SixkHv}u~qxMY*o4VY586?@z?nYN)#CMHvx_M+=;
z!Gqq#A0Q$g^yERWp1k`5yn2=Ouui&d*Ml`MnVFaOdET#QPFl@-#qAs048s)d1FKE<
zEBPv1qW>2!hZVYAC-p8l#C<Y#6T}!k?jc}@?f|us>(3s2MKy-m+6_8g(sk}@9u9do
z_u;cJrf7z#?Pam+jSvAnGzcP{{rTxL3j$wfAIgs4#3mXB2lE6S&YK-?KJrwb-Mb5F
znMMghL|l-C<0#cKon7#1^qiX^3l=V9q_gKqb)6P4ae{!%S2$0oC_qtpQC5_)atBC)
zC_|wHO9CgAw6dU;C9wQh8ZGhrTH9(YW6_(=4he}h2&dC2KP~Y%89-50RVYYMk~r$Y
zrL%~*85gBHD+UXtUJ}G4z!At9-5#D0ou!$cmk`El+9+MNi8c&oZVW|U$V*x|I?n%H
z!*K1Lk~X@?_n*XRXBH#aMk$^o9vxhNCl3{CW`bOTlMcq?RTo=BOmI5HF)+<V*TAmh
zdO?&MZ!b`equEhP+{i<=rL&ZW4+38^Ohc?x8>%9kB~h%))w&@YWy3P1sv%pVw8C20
zn}jGLE3AKkH8x^%L4+}lY@sB0jQmD|L$D}Z3pVGXY~)*F{mr>lH)0`82Ik}aYuqan
z)lhz1i<e&3@<$QXd_u*|oqoXdVQ{u(bh7WgTKePiR^@0se*WOq$+0E8IllJg*V);V
kw^s+>Uf(R<It`eD!0dl4JbhoT|IVM3U2j_N_K%+Z0RuBBRsaA1

literal 0
HcmV?d00001

diff --git a/src/skins/vector/views/atoms/ImageView.js b/src/skins/vector/views/atoms/ImageView.js
index 82471aa3..0cc642f5 100644
--- a/src/skins/vector/views/atoms/ImageView.js
+++ b/src/skins/vector/views/atoms/ImageView.js
@@ -79,21 +79,27 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_ImageView_content">
                     <img src={this.props.src} style={style}/>
-                    <div className="mx_ImageView_label">
-                        <div className="mx_ImageView_name">
-                            { this.props.mxEvent.getContent().body }
-                        </div>
-                        <div className="mx_ImageView_metadata">
-                            Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
-                        </div>
-                        <div className="mx_ImageView_download">
-                            Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
-                        </div>
-                        <div className="mx_ImageView_button">
-                            View full screen
-                        </div>
-                        <div className="mx_ImageView_button">
-                            Redact
+                    <div className="mx_ImageView_labelWrapper">
+                        <div className="mx_ImageView_label">
+                            <div className="mx_ImageView_shim">
+                            </div>
+                            <div className="mx_ImageView_name">
+                                { this.props.mxEvent.getContent().body }
+                            </div>
+                            <div className="mx_ImageView_metadata">
+                                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+                            </div>
+                            <div className="mx_ImageView_download">
+                                Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
+                            </div>
+                            <div className="mx_ImageView_button">
+                                View full screen
+                            </div>
+                            <div className="mx_ImageView_button">
+                                Redact
+                            </div>
+                            <div className="mx_ImageView_shim">
+                            </div>
                         </div>
                     </div>
                 </div>