From 6758734593ad30e9a766e63ccb23921b43c00c4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 19:48:24 +0100
Subject: [PATCH] Remove panel element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/elements/_ImageView.scss     | 39 +++++++++-------
 src/components/views/elements/ImageView.js | 54 +++++++++++-----------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index a2ca9c7927..0153d372fc 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -28,50 +28,55 @@ limitations under the License.
     width: 100%;
 
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     overflow: hidden;
 }
 
 .mainImage {
-    //margin: auto;
+    object-fit: contain;
+    pointer-events: all;
+
+    max-width: 100vw;
+    max-height: 90vh;
+    min-width: 100px;
+    min-height: 100px;
 
     &:hover {
         cursor: grab;
     }
 }
 
-.mx_ImageView_content img {
-    object-fit: contain;
+.mx_ImageView_panel {
+    position: absolute;
+    z-index: 1000;
+    align-self: flex-start;
     pointer-events: all;
 }
 
-.mx_ImageView_panel {
-    display: flex;
-    justify-content: space-between;
-    padding: 50px;
-    position: absolute;
-    width: 100%;
-}
-
 .mx_ImageView_toolbar {
+    right: 0;
+    padding: 50px 50px 0 0;
     display: flex;
-}
-
-.mx_ImageView_button {
-    padding: 5px;
+    
 }
 
 .mx_ImageView_label {
+    left: 0;
+    padding: 50px 0 0 50px;
     text-align: left;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    min-height: 100%;
     max-width: 240px;
     color: $lightbox-fg-color;
 }
 
+.mx_ImageView_button {
+    padding: 5px;
+}
+
 .mx_ImageView_name {
     font-size: $font-18px;
     margin-bottom: 6px;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 9d747463f9..86c6cb8ad5 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -260,35 +260,33 @@ export default class ImageView extends React.Component {
                 ref={ref => this.focusLock = ref}
             >
                 <div className="mx_ImageView_content">
-                    <div className="mx_ImageView_panel">
-                        <div className="mx_ImageView_label">
-                            <div className="mx_ImageView_name">
-                                { this.getName() }
-                            </div>
-                            { metadata }
-                            <span className="mx_ImageView_size">{ sizeRes }</span>
-                        </div>
-                        <div className="mx_ImageView_toolbar">
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
-                                <img src={require("../../../../res/img/plus-white.svg")} alt={ _t('Zoom in') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
-                                <img src={require("../../../../res/img/minus-white.svg")} alt={ _t('Zoom out') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
-                                <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.onRotateClockwiseClick }>
-                                <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-white.svg")} width="18" height="18" alt={ _t('Download') } />
-                            </a>
-                            { 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 className="mx_ImageView_panel mx_ImageView_label">
+                        <div className="mx_ImageView_name">
+                            { this.getName() }
                         </div>
+                        { metadata }
+                        <span className="mx_ImageView_size">{ sizeRes }</span>
+                    </div>
+                    <div className="mx_ImageView_panel mx_ImageView_toolbar">
+                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
+                            <img src={require("../../../../res/img/plus-white.svg")} alt={ _t('Zoom in') } width="18" height="18" />
+                        </AccessibleButton>
+                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
+                            <img src={require("../../../../res/img/minus-white.svg")} alt={ _t('Zoom out') } width="18" height="18" />
+                        </AccessibleButton>
+                        <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
+                            <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.onRotateClockwiseClick }>
+                            <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-white.svg")} width="18" height="18" alt={ _t('Download') } />
+                        </a>
+                        { 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>
                     <img
                         src={this.props.src}