Reorganized elements

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/elements/_ImageView.scss

@@ -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;
+    width: 100%;
-    /* min-width hack needed for FF */
+    height: 100%;
-    min-width: 0px;
+
-    height: 90%;
+    display: flex;
-    flex: 15 15 0;
+    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 {
+.mx_ImageView_panel {
-    position: absolute;
+    display: flex;
-    top: 0px;
+    justify-content: space-between;
-    right: 0px;
+    padding: 50px;
-    height: 100%;
+}
-    overflow: auto;
+
-    pointer-events: all;
+.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;
-}

src/components/views/elements/ImageView.js

@@ -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}>
+            redactButton = (
-                { _t('Remove') }
+                <AccessibleButton className="mx_ImageView_button" title={_t("Remove")} onClick={ this.onRedactClick }>
-            </div>);
+                    <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_panel">
-                    <div className="mx_ImageView_labelWrapper">
                         <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 }
+                            { metadata }
-                            <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
+                            <span className="mx_ImageView_size">{ sizeRes }</span>
-                                <div className="mx_ImageView_download">
+                        </div>
-                                        { _t('Download this file') }<br />
+                        <div className="mx_ImageView_toolbar">
-                                         <span className="mx_ImageView_size">{ sizeRes }</span>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
-                                </div>
+                                <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 }
+                            { redactButton }
-                            <div className="mx_ImageView_shim">
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
-                            </div>
+                                <img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
+                            </AccessibleButton>
                         </div>
                     </div>
-                </div>
+                    <div className="mx_ImageView_imageBox">
-                <div className="mx_ImageView_rhs">
+                        <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
+                    </div>
                 </div>
             </FocusLock>
         );