Reorganized elements
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>pull/21833/head
Šimon Brandner
parent
d3be7b79df
commit
8aabe1f330
|
|
@ -22,45 +22,46 @@ limitations under the License.
|
|||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_lhs {
|
||||
order: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 60px;
|
||||
// background-color: #080;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.mx_ImageView_content {
|
||||
order: 2;
|
||||
/* min-width hack needed for FF */
|
||||
min-width: 0px;
|
||||
height: 90%;
|
||||
flex: 15 15 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_ImageView_imageBox {
|
||||
overflow: auto;
|
||||
margin: 0 50px 50px 50px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_content img {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
//max-width: 100%;
|
||||
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
|
||||
max-height: 100%;
|
||||
//max-height: 100%;
|
||||
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
|
||||
object-fit: contain;
|
||||
/* background-image: url('$(res)/img/trans.png'); */
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mx_ImageView_labelWrapper {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
pointer-events: all;
|
||||
.mx_ImageView_panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.mx_ImageView_toolbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_ImageView_button {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mx_ImageView_label {
|
||||
|
|
@ -68,39 +69,11 @@ limitations under the License.
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
min-height: 100%;
|
||||
max-width: 240px;
|
||||
color: $lightbox-fg-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_cancel {
|
||||
position: absolute;
|
||||
// hack for mx_Dialog having a top padding of 40px
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
padding-top: 35px;
|
||||
padding-right: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_rotateClockwise {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 70px;
|
||||
padding-top: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_rotateCounterClockwise {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 105px;
|
||||
padding-top: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_name {
|
||||
font-size: $font-18px;
|
||||
margin-bottom: 6px;
|
||||
|
|
@ -112,41 +85,6 @@ limitations under the License.
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_ImageView_download {
|
||||
display: table;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: $lightbox-bg-color;
|
||||
font-size: $font-14px;
|
||||
padding: 9px;
|
||||
border: 1px solid $lightbox-border-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
font-size: $font-11px;
|
||||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: $lightbox-fg-color !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.mx_ImageView_button {
|
||||
font-size: $font-15px;
|
||||
opacity: 0.5;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_shim {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
order: 3;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
// background-color: #800;
|
||||
// height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ export default class ImageView extends React.Component {
|
|||
let mayRedact = false;
|
||||
const showEventMeta = !!this.props.mxEvent;
|
||||
|
||||
let eventMeta;
|
||||
let metadata;
|
||||
if (showEventMeta) {
|
||||
// Figure out the sender, defaulting to mxid
|
||||
let sender = this.props.mxEvent.getSender();
|
||||
|
|
@ -165,7 +165,7 @@ export default class ImageView extends React.Component {
|
|||
if (member) sender = member.name;
|
||||
}
|
||||
|
||||
eventMeta = (<div className="mx_ImageView_metadata">
|
||||
metadata = (<div className="mx_ImageView_metadata">
|
||||
{ _t('Uploaded on %(date)s by %(user)s', {
|
||||
date: formatDate(new Date(this.props.mxEvent.getTs())),
|
||||
user: sender,
|
||||
|
|
@ -173,11 +173,13 @@ export default class ImageView extends React.Component {
|
|||
</div>);
|
||||
}
|
||||
|
||||
let eventRedact;
|
||||
let redactButton;
|
||||
if (mayRedact) {
|
||||
eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
|
||||
{ _t('Remove') }
|
||||
</div>);
|
||||
redactButton = (
|
||||
<AccessibleButton className="mx_ImageView_button" title={_t("Remove")} onClick={ this.onRedactClick }>
|
||||
<img src={require("../../../../res/img/cancel-white.svg")} alt={ _t('Remove') } width="18" height="18" />
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
const rotationDegrees = this.state.rotationDegrees;
|
||||
|
|
@ -192,40 +194,34 @@ export default class ImageView extends React.Component {
|
|||
}}
|
||||
className="mx_ImageView"
|
||||
>
|
||||
<div className="mx_ImageView_lhs">
|
||||
</div>
|
||||
<div className="mx_ImageView_content">
|
||||
<img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
|
||||
<div className="mx_ImageView_labelWrapper">
|
||||
<div className="mx_ImageView_panel">
|
||||
<div className="mx_ImageView_label">
|
||||
<AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
|
||||
<img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
|
||||
<img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
|
||||
<img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
|
||||
</AccessibleButton>
|
||||
<div className="mx_ImageView_shim">
|
||||
</div>
|
||||
<div className="mx_ImageView_name">
|
||||
{ this.getName() }
|
||||
</div>
|
||||
{ eventMeta }
|
||||
<a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
|
||||
<div className="mx_ImageView_download">
|
||||
{ _t('Download this file') }<br />
|
||||
<span className="mx_ImageView_size">{ sizeRes }</span>
|
||||
</div>
|
||||
{ metadata }
|
||||
<span className="mx_ImageView_size">{ sizeRes }</span>
|
||||
</div>
|
||||
<div className="mx_ImageView_toolbar">
|
||||
<AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
|
||||
<img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
|
||||
<img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
|
||||
</AccessibleButton>
|
||||
<a className="mx_ImageView_button" href={ this.props.src } download={ this.props.name } title={_t("Download")} target="_blank" rel="noopener">
|
||||
<img src={require("../../../../res/img/download.svg")} width="18" height="18" alt={ _t('Download') } />
|
||||
</a>
|
||||
{ eventRedact }
|
||||
<div className="mx_ImageView_shim">
|
||||
</div>
|
||||
{ redactButton }
|
||||
<AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
|
||||
<img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx_ImageView_rhs">
|
||||
<div className="mx_ImageView_imageBox">
|
||||
<img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
|
||||
</div>
|
||||
</div>
|
||||
</FocusLock>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue