From 8dd90980d8bf86f5e8472abfb90573d2db0e00dc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 02:15:23 +0000
Subject: [PATCH] add cancel button for lightbox and pare down pointer-events
 stuff a bit

---
 src/components/views/elements/ImageView.js |  1 +
 src/skins/vector/css/atoms/ImageView.css   | 16 +++++++++++-----
 src/skins/vector/img/cancel-white.svg      | 10 ++++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/skins/vector/img/cancel-white.svg

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 741524be..ee51ee26 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -118,6 +118,7 @@ module.exports = React.createClass({
                     <img src={this.props.src} style={style}/>
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
+                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">
diff --git a/src/skins/vector/css/atoms/ImageView.css b/src/skins/vector/css/atoms/ImageView.css
index 9dd34f80..438d13a7 100644
--- a/src/skins/vector/css/atoms/ImageView.css
+++ b/src/skins/vector/css/atoms/ImageView.css
@@ -60,9 +60,10 @@ limitations under the License.
     max-width: 100%;
     /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
     max-height: 100%;
-    /* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
+    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
     /* background-image: url('img/trans.png'); */
+    pointer-events: all;
 }
 
 .mx_ImageView_labelWrapper {
@@ -70,6 +71,7 @@ limitations under the License.
     top: 0px;
     height: 100%;
     overflow: auto;
+    pointer-events: all;
 }
 
 .mx_ImageView_label {
@@ -86,20 +88,25 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_ImageView_cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 35px;
+    cursor: pointer;
+}
+
 .mx_ImageView_name {
     font-size: 18px;
     margin-bottom: 6px;
-    pointer-events: all;
 }
 
 .mx_ImageView_metadata {
     font-size: 15px;
     opacity: 0.5;
-    pointer-events: all;
 }
 
 .mx_ImageView_download {
-    pointer-events: all;
     display: table;
     margin-top: 24px;
     margin-bottom: 6px;
@@ -120,7 +127,6 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    pointer-events: all;
     font-size: 15px;
     opacity: 0.5;
     margin-top: 18px;
diff --git a/src/skins/vector/img/cancel-white.svg b/src/skins/vector/img/cancel-white.svg
new file mode 100644
index 00000000..65e14c2f
--- /dev/null
+++ b/src/skins/vector/img/cancel-white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>
\ No newline at end of file