add cancel button for lightbox and pare down pointer-events stuff a bit

This commit is contained in:
Matthew Hodgson 2015-12-28 02:15:23 +00:00
parent e9db7b1dcc
commit 8dd90980d8
3 changed files with 22 additions and 5 deletions

View File

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

View File

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

View File

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

After

Width:  |  Height:  |  Size: 1.0 KiB