mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

black magic fixes to the lightbox

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-28 19:41:49 +00:00
parent cb095ba5a0
commit 8eaa96b0b3
3 changed files with 53 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/skins/vector/css/atoms/ImageView.css
View file

@ -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;
*/
}

BIN
src/skins/vector/img/trans.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 959 B

36
src/skins/vector/views/atoms/ImageView.js
View file

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