Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases 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; -webkit-box-ordinal-group: 1;
order: 1; order: 1;
-webkit-flex: 1; -webkit-flex: 1;
flex: 1 1 0; flex: 1 1 10%;
min-width: 60px; min-width: 60px;
/*
background-color: #080;
height: 20px;
*/
} }
.mx_ImageView_content { .mx_ImageView_content {
@ -41,8 +45,8 @@ limitations under the License.
/* min-width hack needed for FF */ /* min-width hack needed for FF */
min-width: 0px; min-width: 0px;
height: 90%; height: 90%;
-webkit-flex: 5; -webkit-flex: 100;
flex: 5 5 0; flex: 100 100 0;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -55,21 +59,28 @@ limitations under the License.
.mx_ImageView_content img { .mx_ImageView_content img {
max-width: 100%; max-width: 100%;
/* can't use max-height as it interacts badly with flex on Chrome and doesn't relayout properly until you refresh */ /* 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 hack needed for Chrome */
object-fit: contain; object-fit: contain;
background-image: url('img/trans.png');
}
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
height: 100%;
overflow: auto;
} }
.mx_ImageView_label { .mx_ImageView_label {
text-align: left; text-align: left;
display: inline-block; display: flex;
width: 300px; justify-content: center;
height: 300px; flex-direction: column;
top: 50%; padding-left: 60px;
margin-top: -150px; padding-right: 60px;
position: absolute; min-height: 100%;
color: #fff; color: #fff;
padding: 60px;
} }
.mx_ImageView_name { .mx_ImageView_name {
@ -83,7 +94,7 @@ limitations under the License.
} }
.mx_ImageView_download { .mx_ImageView_download {
display: inline-block; display: table;
margin-top: 28px; margin-top: 28px;
border-radius: 5px; border-radius: 5px;
background-color: #454545; background-color: #454545;
@ -100,10 +111,18 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_ImageView_shim {
height: 30px;
}
.mx_ImageView_rhs { .mx_ImageView_rhs {
-webkit-box-ordinal-group: 3; -webkit-box-ordinal-group: 3;
order: 3; order: 3;
-webkit-flex: 1; -webkit-flex: 1;
flex: 1 1 0; flex: 1 1 10%;
min-width: 300px; 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>
<div className="mx_ImageView_content"> <div className="mx_ImageView_content">
<img src={this.props.src} style={style}/> <img src={this.props.src} style={style}/>
<div className="mx_ImageView_label"> <div className="mx_ImageView_labelWrapper">
<div className="mx_ImageView_name"> <div className="mx_ImageView_label">
{ this.props.mxEvent.getContent().body } <div className="mx_ImageView_shim">
</div> </div>
<div className="mx_ImageView_metadata"> <div className="mx_ImageView_name">
Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() } { this.props.mxEvent.getContent().body }
</div> </div>
<div className="mx_ImageView_download"> <div className="mx_ImageView_metadata">
Download this file ({ filesize(this.props.mxEvent.getContent().info.size) }) Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
</div> </div>
<div className="mx_ImageView_button"> <div className="mx_ImageView_download">
View full screen Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
</div> </div>
<div className="mx_ImageView_button"> <div className="mx_ImageView_button">
Redact View full screen
</div>
<div className="mx_ImageView_button">
Redact
</div>
<div className="mx_ImageView_shim">
</div>
</div> </div>
</div> </div>
</div> </div>