From 8aabe1f33077ef95f4414c32b3b625b4297369ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 09:26:09 +0100
Subject: [PATCH 001/104] Reorganized elements
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     | 114 +++++----------------
 src/components/views/elements/ImageView.js |  60 +++++------
 2 files changed, 54 insertions(+), 120 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 0a4ed2a194..77fa597d66 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/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;
-    /* 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;
-}
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e39075cedc..a66d2e2e6f 100644
--- a/src/components/views/elements/ImageView.js
+++ b/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}>
-                { _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>
         );

From 2040815f661be9c832a629022f01764ae99c8c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 10:20:15 +0100
Subject: [PATCH 002/104] Implement zooming
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>
---
 src/components/views/elements/ImageView.js | 45 +++++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index a66d2e2e6f..0c235d87be 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -46,7 +46,10 @@ export default class ImageView extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = { rotationDegrees: 0 };
+        this.state = {
+            rotationDegrees: 0,
+            zoom: 100,
+        };
     }
 
     onKeyDown = (ev) => {
@@ -57,6 +60,16 @@ export default class ImageView extends React.Component {
         }
     };
 
+    onWheel = (ev) => {
+        if (ev.ctrlKey) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.setState({
+                zoom: this.state.zoom - ev.deltaY,
+            });
+        }
+    }
+
     onRedactClick = () => {
         const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
@@ -98,6 +111,18 @@ export default class ImageView extends React.Component {
         this.setState({ rotationDegrees });
     };
 
+    zoomIn = () => {
+        this.setState({
+            zoom: this.state.zoom + 10,
+        });
+    };
+
+    zoomOut = () => {
+        this.setState({
+            zoom: this.state.zoom - 10,
+        });
+    }
+
     render() {
 /*
         // In theory max-width: 80%, max-height: 80% on the CSS should work
@@ -130,12 +155,13 @@ export default class ImageView extends React.Component {
         let style = {};
         let res;
 
+        style = {
+            width: this.state.zoom + "%",
+            height: this.state.zoom + "%",
+        };
+
         if (this.props.width && this.props.height) {
-            style = {
-                width: this.props.width,
-                height: this.props.height,
-            };
-            res = style.width + "x" + style.height + "px";
+            res = this.props.width + "x" + this.props.height + "px";
         }
 
         let size;
@@ -190,6 +216,7 @@ export default class ImageView extends React.Component {
                 returnFocus={true}
                 lockProps={{
                     onKeyDown: this.onKeyDown,
+                    onWheel: this.onWheel,
                     role: "dialog",
                 }}
                 className="mx_ImageView"
@@ -204,6 +231,12 @@ export default class ImageView extends React.Component {
                             <span className="mx_ImageView_size">{ sizeRes }</span>
                         </div>
                         <div className="mx_ImageView_toolbar">
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.zoomIn }>
+                                <img src={require("../../../../res/img/plus.svg")} alt={ _t('Zoom in') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.zoomOut }>
+                                <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Zoom out') } width="18" height="18" />
+                            </AccessibleButton>
                             <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>

From 3c306bc54bb81aea6fa18d3f7204c083a053a0ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 12:54:55 +0100
Subject: [PATCH 003/104] Added icons
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/img/download-white.svg                  | 95 +++++++++++++++++++++
 res/img/feather-customised/trash.custom.svg | 87 +++++++++++++++++--
 res/img/minus-white.svg                     | 64 ++++++++++++++
 res/img/plus-white.svg                      | 73 ++++++++++++++++
 res/img/trash-red.svg                       | 89 +++++++++++++++++++
 src/components/views/elements/ImageView.js  |  8 +-
 6 files changed, 406 insertions(+), 10 deletions(-)
 create mode 100644 res/img/download-white.svg
 create mode 100644 res/img/minus-white.svg
 create mode 100644 res/img/plus-white.svg
 create mode 100644 res/img/trash-red.svg

diff --git a/res/img/download-white.svg b/res/img/download-white.svg
new file mode 100644
index 0000000000..5c800b350e
--- /dev/null
+++ b/res/img/download-white.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18"
+   height="18"
+   viewBox="-1 -1 18 18"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="download-white.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Fill 75</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1914"
+     inkscape:window-height="1048"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="32.283595"
+     inkscape:cx="4.829485"
+     inkscape:cy="6.7819403"
+     inkscape:window-x="1920"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">Fill 75</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs6" />
+  <g
+     id="02-Chat"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd"
+     sketch:type="MSPage"
+     transform="matrix(1.2103961,0,0,1.3332813,1.9999996,1.566422e-4)"
+     style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
+    <g
+       id="02_x-Chat-MAX"
+       sketch:type="MSArtboardGroup"
+       transform="translate(-280,-546)"
+       fill="#76cfa6"
+       style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
+      <g
+         id="Group"
+         sketch:type="MSLayerGroup"
+         transform="translate(243,58)"
+         style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
+        <g
+           id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap"
+           transform="translate(1,181)"
+           sketch:type="MSShapeGroup"
+           style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
+          <g
+             id="Group-Copy-13"
+             style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
+            <path
+               d="m 45.340043,312.52677 c 0.146962,0 0.293924,-0.0559 0.406442,-0.16839 0.223505,-0.22427 0.223505,-0.58708 0,-0.81135 l -4.380545,-4.37902 c -0.223506,-0.22427 -0.587084,-0.2235 -0.811354,-7.6e-4 l -4.385904,4.37289 c -0.22427,0.22427 -0.225036,0.58785 -0.0015,0.81212 0.223504,0.22503 0.587083,0.22503 0.811353,0.002 l 3.413045,-3.4031 0.0015,9.47524 c 0,0.31689 0.25795,0.57407 0.574071,0.57407 0.317653,0 0.574072,-0.25718 0.574072,-0.57407 l -0.0015,-9.46069 3.394674,3.39314 c 0.111752,0.11252 0.258714,0.16839 0.405677,0.16839 z"
+               id="Fill-75"
+               transform="rotate(180,40.957057,313)"
+               style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res/img/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg
index dc1985ddb2..589bb0a4e5 100644
--- a/res/img/feather-customised/trash.custom.svg
+++ b/res/img/feather-customised/trash.custom.svg
@@ -1,7 +1,82 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="trash.custom.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="934"
+     inkscape:window-height="1016"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="11.249472"
+     inkscape:cx="11.649601"
+     inkscape:cy="23.142771"
+     inkscape:window-x="2884"
+     inkscape:window-y="162"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <path
+     d="M2.25 5.5H5.16667H21.75"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path2" />
+  <path
+     d="M16.5 5.5L15 1H9L7.5 5.5"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path4" />
+  <path
+     d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path6" />
+  <path
+     d="M9.75 9.25V18.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path8" />
+  <path
+     d="M14.25 9.25V18.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10" />
 </svg>
diff --git a/res/img/minus-white.svg b/res/img/minus-white.svg
new file mode 100644
index 0000000000..2921f34980
--- /dev/null
+++ b/res/img/minus-white.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18"
+   height="18"
+   viewBox="-1 -1 18 18"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="minus-white.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Fill 75</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1914"
+     inkscape:window-height="1048"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="32.283595"
+     inkscape:cx="4.829485"
+     inkscape:cy="6.7819403"
+     inkscape:window-x="1920"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">Fill 75</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs6" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     id="rect1545"
+     width="16"
+     height="1.5"
+     x="0"
+     y="7.25"
+     ry="0.75" />
+</svg>
diff --git a/res/img/plus-white.svg b/res/img/plus-white.svg
new file mode 100644
index 0000000000..7759ace50a
--- /dev/null
+++ b/res/img/plus-white.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18"
+   height="18"
+   viewBox="-1 -1 18 18"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="plus-white.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Fill 75</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1914"
+     inkscape:window-height="1048"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="32.283595"
+     inkscape:cx="4.829485"
+     inkscape:cy="6.7819403"
+     inkscape:window-x="1920"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">Fill 75</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs6" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     id="rect1545"
+     width="16"
+     height="1.5"
+     x="0"
+     y="7.25"
+     ry="0.75" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     id="rect1545-3"
+     width="16"
+     height="1.5"
+     x="-16"
+     y="7.25"
+     ry="0.75"
+     transform="rotate(-90)" />
+</svg>
diff --git a/res/img/trash-red.svg b/res/img/trash-red.svg
new file mode 100644
index 0000000000..0b1d201d2e
--- /dev/null
+++ b/res/img/trash-red.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="trash-red.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1914"
+     inkscape:window-height="1048"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="27.610949"
+     inkscape:cx="12.318518"
+     inkscape:cy="13.781064"
+     inkscape:window-x="1920"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12"
+     inkscape:document-rotation="0" />
+  <path
+     d="M2.25 5.5H5.16667H21.75"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path2"
+     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
+  <path
+     d="M16.5 5.5L15 1H9L7.5 5.5"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path4"
+     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
+  <path
+     d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path6"
+     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
+  <path
+     d="M9.75 9.25V18.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path8"
+     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
+  <path
+     d="M14.25 9.25V18.25"
+     stroke="#2E2F32"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10"
+     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
+</svg>
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 0c235d87be..719a17d3cb 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -203,7 +203,7 @@ export default class ImageView extends React.Component {
         if (mayRedact) {
             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" />
+                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="18" height="18" />
                 </AccessibleButton>
             );
         }
@@ -232,10 +232,10 @@ export default class ImageView extends React.Component {
                         </div>
                         <div className="mx_ImageView_toolbar">
                             <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.zoomIn }>
-                                <img src={require("../../../../res/img/plus.svg")} alt={ _t('Zoom in') } width="18" height="18" />
+                                <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.zoomOut }>
-                                <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Zoom out') } width="18" height="18" />
+                                <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.rotateCounterClockwise }>
                                 <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
@@ -244,7 +244,7 @@ export default class ImageView extends React.Component {
                                 <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') } />
+                                <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 }>

From b9f480a825f8f8279d807aa2d10973a58fef78b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 13:13:34 +0100
Subject: [PATCH 004/104] Remove flex property
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 | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 77fa597d66..5f002c7d7a 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -35,7 +35,6 @@ limitations under the License.
 .mx_ImageView_imageBox {
     overflow: auto;
     margin: 0 50px 50px 50px;
-    flex: 1;
     display: flex;
 }
 

From 2c5f3f31b1bd339c6d40337ddc3bd059fe095edf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 13:30:56 +0100
Subject: [PATCH 005/104] Fixed Chromium issues - made listner non-passive
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>
---
 src/components/views/elements/ImageView.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 719a17d3cb..6dfd1f78ad 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -52,6 +52,14 @@ export default class ImageView extends React.Component {
         };
     }
 
+    componentDidMount() {
+        this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+
+    componentWillUnmount() {
+        this.focusLock.removeEventListener('wheel', this.onWheel);
+    }
+
     onKeyDown = (ev) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
@@ -216,10 +224,10 @@ export default class ImageView extends React.Component {
                 returnFocus={true}
                 lockProps={{
                     onKeyDown: this.onKeyDown,
-                    onWheel: this.onWheel,
                     role: "dialog",
                 }}
                 className="mx_ImageView"
+                ref={ref => this.focusLock = ref}
             >
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel">

From 633221f012961024d2e706f7b7ee0c1fb3cb88f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 13:50:21 +0100
Subject: [PATCH 006/104] Center image
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 | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 5f002c7d7a..e6ed3684bb 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -40,13 +40,9 @@ limitations under the License.
 
 .mx_ImageView_content img {
     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%;
-    /* 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;
+    margin: auto;
 }
 
 .mx_ImageView_panel {

From ae25ff82169048be25dcb37c8ec680b22dfb805d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Dec 2020 15:54:26 +0100
Subject: [PATCH 007/104] Switched to scale
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     | 5 +++--
 src/components/views/elements/ImageView.js | 9 ++-------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index e6ed3684bb..c87cfd1ece 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -36,13 +36,14 @@ limitations under the License.
     overflow: auto;
     margin: 0 50px 50px 50px;
     display: flex;
+    height: 100%;
 }
 
 .mx_ImageView_content img {
-    flex: 1;
     object-fit: contain;
     pointer-events: all;
-    margin: auto;
+    //margin: auto;
+    //margin: 0 auto 0 auto;
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 6dfd1f78ad..a42d957daa 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -160,14 +160,8 @@ export default class ImageView extends React.Component {
             height: displayHeight
         };
 */
-        let style = {};
         let res;
 
-        style = {
-            width: this.state.zoom + "%",
-            height: this.state.zoom + "%",
-        };
-
         if (this.props.width && this.props.height) {
             res = this.props.width + "x" + this.props.height + "px";
         }
@@ -217,7 +211,8 @@ export default class ImageView extends React.Component {
         }
 
         const rotationDegrees = this.state.rotationDegrees;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
+        const zoom = this.state.zoom/100;
+        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg) scale(${zoom})`};
 
         return (
             <FocusLock

From ec5fcaf59bf85d42ae2e7ffb0abde72f74732b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 09:51:57 +0100
Subject: [PATCH 008/104] Added a comment
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>
---
 src/components/views/elements/ImageView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index a42d957daa..bc1d8b4d53 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -53,6 +53,8 @@ export default class ImageView extends React.Component {
     }
 
     componentDidMount() {
+        // We have to use addEventListener() because the listener
+        // needs to be passive in order to work with Chromium
         this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
     }
 

From be9b68a4dd3d453548b5e1562019998bd28170de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 10:07:03 +0100
Subject: [PATCH 009/104] Use height and width properties for scaling again
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     | 11 ++++++-----
 src/components/views/elements/ImageView.js |  7 +++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index c87cfd1ece..1fcf1bf543 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -33,17 +33,18 @@ limitations under the License.
 }
 
 .mx_ImageView_imageBox {
-    overflow: auto;
-    margin: 0 50px 50px 50px;
+    overflow: scroll;
     display: flex;
-    height: 100%;
+    flex-grow: 1;
+}
+
+.mainImage {
+    margin: auto;
 }
 
 .mx_ImageView_content img {
     object-fit: contain;
     pointer-events: all;
-    //margin: auto;
-    //margin: 0 auto 0 auto;
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index bc1d8b4d53..2feff97fef 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -163,6 +163,10 @@ export default class ImageView extends React.Component {
         };
 */
         let res;
+        const style = {
+            height: this.state.zoom + "%",
+            width: this.state.zoom + "%",
+        };
 
         if (this.props.width && this.props.height) {
             res = this.props.width + "x" + this.props.height + "px";
@@ -213,8 +217,7 @@ export default class ImageView extends React.Component {
         }
 
         const rotationDegrees = this.state.rotationDegrees;
-        const zoom = this.state.zoom/100;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg) scale(${zoom})`};
+        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
 
         return (
             <FocusLock

From 8de019c05471a0ebc4738266dc1d49c80267673a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 12:16:05 +0100
Subject: [PATCH 010/104] Added some padding
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 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 1fcf1bf543..ec651fcc6a 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -35,6 +35,7 @@ limitations under the License.
 .mx_ImageView_imageBox {
     overflow: scroll;
     display: flex;
+    padding: 0 50px 50px 50px;
     flex-grow: 1;
 }
 

From f9884b1cc75cd7b2cbdb1d15cfa9b9ea364f424c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 17:40:16 +0100
Subject: [PATCH 011/104] Implement translation
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     |   6 +-
 src/components/views/elements/ImageView.js | 144 +++++++++++++--------
 2 files changed, 97 insertions(+), 53 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index ec651fcc6a..10553a1c54 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -33,7 +33,7 @@ limitations under the License.
 }
 
 .mx_ImageView_imageBox {
-    overflow: scroll;
+    overflow: hidden;
     display: flex;
     padding: 0 50px 50px 50px;
     flex-grow: 1;
@@ -41,6 +41,10 @@ limitations under the License.
 
 .mainImage {
     margin: auto;
+
+    &:hover {
+        cursor: grab;
+    }
 }
 
 .mx_ImageView_content img {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 2feff97fef..8cc55e40bf 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -47,11 +47,19 @@ export default class ImageView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            rotationDegrees: 0,
+            rotation: 0,
             zoom: 100,
+            translationX: 0,
+            translationY: 0,
+            moving: false,
         };
     }
 
+    initX = 0;
+    initY = 0;
+    lastX = 0;
+    lastY = 0;
+
     componentDidMount() {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
@@ -74,8 +82,18 @@ export default class ImageView extends React.Component {
         if (ev.ctrlKey) {
             ev.stopPropagation();
             ev.preventDefault();
+            const newZoom =this.state.zoom - ev.deltaY;
+
+            if (newZoom <= 100) {
+                this.setState({
+                    zoom: 100,
+                    translationX: 0,
+                    translationY: 0,
+                });
+                return;
+            }
             this.setState({
-                zoom: this.state.zoom - ev.deltaY,
+                zoom: newZoom,
             });
         }
     }
@@ -109,65 +127,72 @@ export default class ImageView extends React.Component {
         return name;
     }
 
-    rotateCounterClockwise = () => {
-        const cur = this.state.rotationDegrees;
+    onRotateCounterClockwiseClick = () => {
+        const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
-        this.setState({ rotationDegrees });
+        this.setState({ rotation: rotationDegrees });
     };
 
-    rotateClockwise = () => {
-        const cur = this.state.rotationDegrees;
+    onRotateClockwiseClick = () => {
+        const cur = this.state.rotation;
         const rotationDegrees = (cur + 90) % 360;
-        this.setState({ rotationDegrees });
+        this.setState({ rotation: rotationDegrees });
     };
 
-    zoomIn = () => {
+    onZoomInClick = () => {
         this.setState({
             zoom: this.state.zoom + 10,
         });
     };
 
-    zoomOut = () => {
+    onZoomOutClick = () => {
+        if (this.state.zoom <= 100) {
+            this.setState({
+                zoom: 100,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
         this.setState({
             zoom: this.state.zoom - 10,
         });
     }
 
+    onStartMoving = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        if (this.state.zoom <= 100) return false;
+
+        this.setState({moving: true});
+        this.initX = ev.pageX - this.lastX;
+        this.initY = ev.pageY - this.lastY;
+    }
+
+    onMoving = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        if (!this.state.moving) return false;
+
+        this.lastX = ev.pageX - this.initX;
+        this.lastY = ev.pageY - this.initY;
+        this.setState({
+            translationX: this.lastX,
+            translationY: this.lastY,
+        });
+    }
+
+    onEndMoving = ev => {
+        this.setState({moving: false});
+    }
+
     render() {
-/*
-        // In theory max-width: 80%, max-height: 80% on the CSS should work
-        // but in practice, it doesn't, so do it manually:
+        let mayRedact = false;
+        const showEventMeta = !!this.props.mxEvent;
 
-        var width = this.props.width || 500;
-        var height = this.props.height || 500;
-
-        var maxWidth = document.documentElement.clientWidth * 0.8;
-        var maxHeight = document.documentElement.clientHeight * 0.8;
-
-        var widthFrac = width / maxWidth;
-        var heightFrac = height / maxHeight;
-
-        var displayWidth;
-        var displayHeight;
-        if (widthFrac > heightFrac) {
-            displayWidth = Math.min(width, maxWidth);
-            displayHeight = (displayWidth / width) * height;
-        } else {
-            displayHeight = Math.min(height, maxHeight);
-            displayWidth = (displayHeight / height) * width;
-        }
-
-        var style = {
-            width: displayWidth,
-            height: displayHeight
-        };
-*/
         let res;
-        const style = {
-            height: this.state.zoom + "%",
-            width: this.state.zoom + "%",
-        };
-
         if (this.props.width && this.props.height) {
             res = this.props.width + "x" + this.props.height + "px";
         }
@@ -184,9 +209,6 @@ export default class ImageView extends React.Component {
             sizeRes = size || res;
         }
 
-        let mayRedact = false;
-        const showEventMeta = !!this.props.mxEvent;
-
         let metadata;
         if (showEventMeta) {
             // Figure out the sender, defaulting to mxid
@@ -216,8 +238,16 @@ export default class ImageView extends React.Component {
             );
         }
 
-        const rotationDegrees = this.state.rotationDegrees;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
+        const rotationDegrees = this.state.rotation + "deg";
+        const zoomPercentage = this.state.zoom/100;
+        const translatePixelsX = this.state.translationX + "px";
+        const translatePixelsY = this.state.translationY + "px";
+        const style = {
+            transform: `rotate(${rotationDegrees})
+                        scale(${zoomPercentage})
+                        translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})`,
+        };
 
         return (
             <FocusLock
@@ -239,16 +269,16 @@ export default class ImageView extends React.Component {
                             <span className="mx_ImageView_size">{ sizeRes }</span>
                         </div>
                         <div className="mx_ImageView_toolbar">
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.zoomIn }>
+                            <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.zoomOut }>
+                            <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.rotateCounterClockwise }>
+                            <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.rotateClockwise }>
+                            <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">
@@ -261,7 +291,17 @@ export default class ImageView extends React.Component {
                         </div>
                     </div>
                     <div className="mx_ImageView_imageBox">
-                        <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
+                        <img
+                            src={this.props.src}
+                            title={this.props.name}
+                            style={style}
+                            className="mainImage"
+                            draggable={true}
+                            onMouseDown={this.onStartMoving}
+                            onMouseMove={this.onMoving}
+                            onMouseUp={this.onEndMoving}
+                            onMouseLeave={this.onEndMoving}
+                        />
                     </div>
                 </div>
             </FocusLock>

From 7dd7aeffedc612827712a0b1ff91a3561f56f016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 18:19:11 +0100
Subject: [PATCH 012/104] Remove imageBox
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     | 10 +++------
 src/components/views/elements/ImageView.js | 24 ++++++++++------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 10553a1c54..a2ca9c7927 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -26,21 +26,15 @@ limitations under the License.
 
 .mx_ImageView_content {
     width: 100%;
-    height: 100%;
 
     display: flex;
     flex-direction: column;
-}
 
-.mx_ImageView_imageBox {
     overflow: hidden;
-    display: flex;
-    padding: 0 50px 50px 50px;
-    flex-grow: 1;
 }
 
 .mainImage {
-    margin: auto;
+    //margin: auto;
 
     &:hover {
         cursor: grab;
@@ -56,6 +50,8 @@ limitations under the License.
     display: flex;
     justify-content: space-between;
     padding: 50px;
+    position: absolute;
+    width: 100%;
 }
 
 .mx_ImageView_toolbar {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 8cc55e40bf..9d747463f9 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -290,19 +290,17 @@ export default class ImageView extends React.Component {
                             </AccessibleButton>
                         </div>
                     </div>
-                    <div className="mx_ImageView_imageBox">
-                        <img
-                            src={this.props.src}
-                            title={this.props.name}
-                            style={style}
-                            className="mainImage"
-                            draggable={true}
-                            onMouseDown={this.onStartMoving}
-                            onMouseMove={this.onMoving}
-                            onMouseUp={this.onEndMoving}
-                            onMouseLeave={this.onEndMoving}
-                        />
-                    </div>
+                    <img
+                        src={this.props.src}
+                        title={this.props.name}
+                        style={style}
+                        className="mainImage"
+                        draggable={true}
+                        onMouseDown={this.onStartMoving}
+                        onMouseMove={this.onMoving}
+                        onMouseUp={this.onEndMoving}
+                        onMouseLeave={this.onEndMoving}
+                    />
                 </div>
             </FocusLock>
         );

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 013/104] 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}

From 18de342fa13eafce2fe074eda1b50772d4292b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:00:11 +0100
Subject: [PATCH 014/104] Fixed translation issue while the image is rotated
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>
---
 src/components/views/elements/ImageView.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 86c6cb8ad5..0db907003c 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -242,11 +242,15 @@ export default class ImageView extends React.Component {
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
         const translatePixelsY = this.state.translationY + "px";
+        /* The order of the values is important!
+         * First, we translate and only then we rotate, otherwise
+         * we would apply the translation to an already rotated
+         * image causing it translate in the wrong direction. */
         const style = {
-            transform: `rotate(${rotationDegrees})
+            transform: `translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})
                         scale(${zoomPercentage})
-                        translateX(${translatePixelsX})
-                        translateY(${translatePixelsY})`,
+                        rotate(${rotationDegrees})`,
         };
 
         return (

From 776b0e8198e1179ee5f1b7ee9edb6e07d6c14ed6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:05:27 +0100
Subject: [PATCH 015/104] Change comment styling
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>
---
 src/components/views/elements/ImageView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 0db907003c..b6fa9ef35b 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -61,8 +61,8 @@ export default class ImageView extends React.Component {
     lastY = 0;
 
     componentDidMount() {
-        // We have to use addEventListener() because the listener
-        // needs to be passive in order to work with Chromium
+        /* We have to use addEventListener() because the listener
+         * needs to be passive in order to work with Chromium */
         this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
     }
 

From f0abd52130b6f70df4bef144d26afdda05819bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:09:01 +0100
Subject: [PATCH 016/104] Remove the need to press ctrl while zooming
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>
---
 src/components/views/elements/ImageView.js | 24 ++++++++++------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index b6fa9ef35b..d40708af4c 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -79,23 +79,21 @@ export default class ImageView extends React.Component {
     };
 
     onWheel = (ev) => {
-        if (ev.ctrlKey) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            const newZoom =this.state.zoom - ev.deltaY;
+        ev.stopPropagation();
+        ev.preventDefault();
+        const newZoom =this.state.zoom - ev.deltaY;
 
-            if (newZoom <= 100) {
-                this.setState({
-                    zoom: 100,
-                    translationX: 0,
-                    translationY: 0,
-                });
-                return;
-            }
+        if (newZoom <= 100) {
             this.setState({
-                zoom: newZoom,
+                zoom: 100,
+                translationX: 0,
+                translationY: 0,
             });
+            return;
         }
+        this.setState({
+            zoom: newZoom,
+        });
     }
 
     onRedactClick = () => {

From cbfa6c5f94bc839ce158ee994a2efda81d024508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:15:25 +0100
Subject: [PATCH 017/104] Fix some sizing issues
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 0153d372fc..2c3d881394 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -39,7 +39,7 @@ limitations under the License.
     pointer-events: all;
 
     max-width: 100vw;
-    max-height: 90vh;
+    max-height: 80vh;
     min-width: 100px;
     min-height: 100px;
 

From 61c5e7e8f17356c849fda70793cd6e5c86f4342c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:15:39 +0100
Subject: [PATCH 018/104] Reorder label items
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>
---
 src/components/views/elements/ImageView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index d40708af4c..b343ec37c2 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -266,8 +266,8 @@ export default class ImageView extends React.Component {
                         <div className="mx_ImageView_name">
                             { this.getName() }
                         </div>
-                        { metadata }
                         <span className="mx_ImageView_size">{ sizeRes }</span>
+                        { metadata }
                     </div>
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
                         <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>

From 0dff150bb271985133b551c0b99639fc68461cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:18:21 +0100
Subject: [PATCH 019/104] Fix some more sizing issues
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 2c3d881394..1b38021267 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -39,7 +39,7 @@ limitations under the License.
     pointer-events: all;
 
     max-width: 100vw;
-    max-height: 80vh;
+    max-height: 70vh;
     min-width: 100px;
     min-height: 100px;
 

From 096fb33397e29e65cf0ec5dea77eb99b8b8c690e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:19:32 +0100
Subject: [PATCH 020/104] Always allow moving
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>
---
 src/components/views/elements/ImageView.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index b343ec37c2..12112db48a 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -161,8 +161,6 @@ export default class ImageView extends React.Component {
         ev.stopPropagation();
         ev.preventDefault();
 
-        if (this.state.zoom <= 100) return false;
-
         this.setState({moving: true});
         this.initX = ev.pageX - this.lastX;
         this.initY = ev.pageY - this.lastY;

From 3d62138cbd67fa7beefa9770abf954a35c8286f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:28:19 +0100
Subject: [PATCH 021/104] Set max zoom
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>
---
 src/components/views/elements/ImageView.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 12112db48a..82f3386e8d 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -91,6 +91,11 @@ export default class ImageView extends React.Component {
             });
             return;
         }
+        if (newZoom >= 300) {
+            this.setState({zoom: 300});
+            return;
+        }
+
         this.setState({
             zoom: newZoom,
         });
@@ -138,6 +143,11 @@ export default class ImageView extends React.Component {
     };
 
     onZoomInClick = () => {
+        if (this.state.zoom >= 300) {
+            this.setState({zoom: 300});
+            return;
+        }
+
         this.setState({
             zoom: this.state.zoom + 10,
         });

From f771b7ac98764135691f64fbddefded6cdb06621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:37:31 +0100
Subject: [PATCH 022/104] Added zoom button
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/img/zoom-white.svg                     | 59 ++++++++++++++++++++++
 src/components/views/elements/ImageView.js | 33 +++++++++---
 2 files changed, 84 insertions(+), 8 deletions(-)
 create mode 100644 res/img/zoom-white.svg

diff --git a/res/img/zoom-white.svg b/res/img/zoom-white.svg
new file mode 100644
index 0000000000..19379cb881
--- /dev/null
+++ b/res/img/zoom-white.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18"
+   height="18"
+   viewBox="0 0 18 18"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="zoom-white.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1914"
+     inkscape:window-height="1048"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="35.510143"
+     inkscape:cx="7.977162"
+     inkscape:cy="6.70548"
+     inkscape:window-x="1920"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M12.1333 8.06667C12.1333 10.3126 10.3126 12.1333 8.06667 12.1333C5.82071 12.1333 4 10.3126 4 8.06667C4 5.82071 5.82071 4 8.06667 4C10.3126 4 12.1333 5.82071 12.1333 8.06667ZM12.9992 11.5994C13.7131 10.6044 14.1333 9.38463 14.1333 8.06667C14.1333 4.71614 11.4172 2 8.06667 2C4.71614 2 2 4.71614 2 8.06667C2 11.4172 4.71614 14.1333 8.06667 14.1333C9.38457 14.1333 10.6043 13.7131 11.5992 12.9993C11.6274 13.0369 11.6586 13.0729 11.6928 13.1071L14.2928 15.7071C14.6833 16.0977 15.3165 16.0977 15.707 15.7071C16.0975 15.3166 16.0975 14.6834 15.707 14.2929L13.107 11.6929C13.0728 11.6587 13.0368 11.6276 12.9992 11.5994Z"
+     fill="black"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 82f3386e8d..8552b2e381 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -59,6 +59,8 @@ export default class ImageView extends React.Component {
     initY = 0;
     lastX = 0;
     lastY = 0;
+    minZoom = 100;
+    maxZoom = 300;
 
     componentDidMount() {
         /* We have to use addEventListener() because the listener
@@ -83,16 +85,16 @@ export default class ImageView extends React.Component {
         ev.preventDefault();
         const newZoom =this.state.zoom - ev.deltaY;
 
-        if (newZoom <= 100) {
+        if (newZoom <= this.minZoom) {
             this.setState({
-                zoom: 100,
+                zoom: this.minZoom,
                 translationX: 0,
                 translationY: 0,
             });
             return;
         }
-        if (newZoom >= 300) {
-            this.setState({zoom: 300});
+        if (newZoom >= this.maxZoom) {
+            this.setState({zoom: this.maxZoom});
             return;
         }
 
@@ -143,8 +145,8 @@ export default class ImageView extends React.Component {
     };
 
     onZoomInClick = () => {
-        if (this.state.zoom >= 300) {
-            this.setState({zoom: 300});
+        if (this.state.zoom >= this.maxZoom) {
+            this.setState({zoom: this.maxZoom});
             return;
         }
 
@@ -154,9 +156,9 @@ export default class ImageView extends React.Component {
     };
 
     onZoomOutClick = () => {
-        if (this.state.zoom <= 100) {
+        if (this.state.zoom <= this.minZoom) {
             this.setState({
-                zoom: 100,
+                zoom: this.minZoom,
                 translationX: 0,
                 translationY: 0,
             });
@@ -167,6 +169,18 @@ export default class ImageView extends React.Component {
         });
     }
 
+    onZoomClick = () => {
+        if (this.state.zoom <= this.minZoom) {
+            this.setState({zoom: this.maxZoom});
+        } else {
+            this.setState({
+                zoom: this.minZoom,
+                translationX: 0,
+                translationY: 0,
+            });
+        }
+    }
+
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();
@@ -278,6 +292,9 @@ export default class ImageView extends React.Component {
                         { metadata }
                     </div>
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
+                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom")} onClick={ this.onZoomClick }>
+                            <img src={require("../../../../res/img/zoom-white.svg")} alt={ _t('Zoom') } width="18" height="18" />
+                        </AccessibleButton>
                         <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>

From 6315c8ecefae446a11eb9b031e35b524a1bfa9d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:45:33 +0100
Subject: [PATCH 023/104] Fix formatting
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 | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 1b38021267..43333a25e6 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -59,7 +59,6 @@ limitations under the License.
     right: 0;
     padding: 50px 50px 0 0;
     display: flex;
-    
 }
 
 .mx_ImageView_label {

From 00bc97b63fde4d1605b8820422d98fa73680e889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 20:45:47 +0100
Subject: [PATCH 024/104] i18n
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>
---
 src/i18n/strings/en_EN.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f8ef44763d..cd4285753f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1833,11 +1833,14 @@
     "expand": "expand",
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
+    "Zoom": "Zoom",
+    "Zoom in": "Zoom in",
+    "Zoom out": "Zoom out",
     "Rotate Left": "Rotate Left",
     "Rotate counter-clockwise": "Rotate counter-clockwise",
     "Rotate Right": "Rotate Right",
     "Rotate clockwise": "Rotate clockwise",
-    "Download this file": "Download this file",
+    "Download": "Download",
     "Information": "Information",
     "Language Dropdown": "Language Dropdown",
     "%(nameList)s %(transitionList)s": "%(nameList)s %(transitionList)s",
@@ -2593,7 +2596,6 @@
     "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.",
     "Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
     "Your recovery key": "Your recovery key",
-    "Download": "Download",
     "Your recovery key has been <b>copied to your clipboard</b>, paste it to:": "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
     "Your recovery key is in your <b>Downloads</b> folder.": "Your recovery key is in your <b>Downloads</b> folder.",
     "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",

From 997e08f21e32d61f164cfefb4c397fc48d19de71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 21 Dec 2020 10:07:46 +0100
Subject: [PATCH 025/104] Reorganize buttons
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>
---
 src/components/views/elements/ImageView.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 8552b2e381..4e38b4b4eb 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -292,15 +292,16 @@ export default class ImageView extends React.Component {
                         { metadata }
                     </div>
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
+                        { redactButton }
                         <AccessibleButton className="mx_ImageView_button" title={_t("Zoom")} onClick={ this.onZoomClick }>
                             <img src={require("../../../../res/img/zoom-white.svg")} alt={ _t('Zoom') } width="18" height="18" />
                         </AccessibleButton>
-                        <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("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("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
                             <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
                         </AccessibleButton>
@@ -310,7 +311,6 @@ export default class ImageView extends React.Component {
                         <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>

From ad5844fcc0b9e585e0f0f5766a33a9e7f716d43e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 21 Dec 2020 20:33:03 +0100
Subject: [PATCH 026/104] Fix i18n
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>
---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 32c3a61f8a..a3345caac5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1839,8 +1839,8 @@
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
     "Zoom": "Zoom",
-    "Zoom in": "Zoom in",
     "Zoom out": "Zoom out",
+    "Zoom in": "Zoom in",
     "Rotate Left": "Rotate Left",
     "Rotate counter-clockwise": "Rotate counter-clockwise",
     "Rotate Right": "Rotate Right",

From e5d68142c6e35811a37d2ea709167ead99247a13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 23 Feb 2021 20:47:42 +0100
Subject: [PATCH 027/104] Remove zoom icon
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/img/zoom-white.svg                     | 59 ----------------------
 src/components/views/elements/ImageView.js |  3 --
 2 files changed, 62 deletions(-)
 delete mode 100644 res/img/zoom-white.svg

diff --git a/res/img/zoom-white.svg b/res/img/zoom-white.svg
deleted file mode 100644
index 19379cb881..0000000000
--- a/res/img/zoom-white.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="18"
-   height="18"
-   viewBox="0 0 18 18"
-   fill="none"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="zoom-white.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1914"
-     inkscape:window-height="1048"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="35.510143"
-     inkscape:cx="7.977162"
-     inkscape:cy="6.70548"
-     inkscape:window-x="1920"
-     inkscape:window-y="146"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
-  <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="M12.1333 8.06667C12.1333 10.3126 10.3126 12.1333 8.06667 12.1333C5.82071 12.1333 4 10.3126 4 8.06667C4 5.82071 5.82071 4 8.06667 4C10.3126 4 12.1333 5.82071 12.1333 8.06667ZM12.9992 11.5994C13.7131 10.6044 14.1333 9.38463 14.1333 8.06667C14.1333 4.71614 11.4172 2 8.06667 2C4.71614 2 2 4.71614 2 8.06667C2 11.4172 4.71614 14.1333 8.06667 14.1333C9.38457 14.1333 10.6043 13.7131 11.5992 12.9993C11.6274 13.0369 11.6586 13.0729 11.6928 13.1071L14.2928 15.7071C14.6833 16.0977 15.3165 16.0977 15.707 15.7071C16.0975 15.3166 16.0975 14.6834 15.707 14.2929L13.107 11.6929C13.0728 11.6587 13.0368 11.6276 12.9992 11.5994Z"
-     fill="black"
-     id="path2"
-     style="fill:#ffffff;fill-opacity:1" />
-</svg>
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 4e38b4b4eb..be849d1dde 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -293,9 +293,6 @@ export default class ImageView extends React.Component {
                     </div>
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
                         { redactButton }
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom")} onClick={ this.onZoomClick }>
-                            <img src={require("../../../../res/img/zoom-white.svg")} alt={ _t('Zoom') } 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>

From 35663c35d27e6fc6211ad501375c49a1b8c469d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 23 Feb 2021 20:49:31 +0100
Subject: [PATCH 028/104] Reorder the icons according to the design
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>
---
 src/components/views/elements/ImageView.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index be849d1dde..7c40604a88 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -293,18 +293,18 @@ export default class ImageView extends React.Component {
                     </div>
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
                         { redactButton }
+                        <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>
+                        <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("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("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("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>

From 6cf19e889777a1732182274ae0408dc8a746d7b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 23 Feb 2021 21:04:21 +0100
Subject: [PATCH 029/104] Update icons according to the design
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/img/cancel-white.svg                   | 10 ---
 res/img/download-white.svg                 | 95 ----------------------
 res/img/image-view/close.svg               |  4 +
 res/img/image-view/download.svg            |  3 +
 res/img/image-view/rotate-ccw.svg          |  3 +
 res/img/image-view/rotate-cw.svg           |  3 +
 res/img/image-view/zoom-in.svg             |  3 +
 res/img/image-view/zoom-out.svg            |  3 +
 res/img/minus-white.svg                    | 64 ---------------
 res/img/plus-white.svg                     | 73 -----------------
 res/img/rotate-ccw.svg                     |  1 -
 res/img/rotate-cw.svg                      |  1 -
 src/components/views/elements/ImageView.js | 12 +--
 13 files changed, 25 insertions(+), 250 deletions(-)
 delete mode 100644 res/img/cancel-white.svg
 delete mode 100644 res/img/download-white.svg
 create mode 100644 res/img/image-view/close.svg
 create mode 100644 res/img/image-view/download.svg
 create mode 100644 res/img/image-view/rotate-ccw.svg
 create mode 100644 res/img/image-view/rotate-cw.svg
 create mode 100644 res/img/image-view/zoom-in.svg
 create mode 100644 res/img/image-view/zoom-out.svg
 delete mode 100644 res/img/minus-white.svg
 delete mode 100644 res/img/plus-white.svg
 delete mode 100644 res/img/rotate-ccw.svg
 delete mode 100644 res/img/rotate-cw.svg

diff --git a/res/img/cancel-white.svg b/res/img/cancel-white.svg
deleted file mode 100644
index 65e14c2fbc..0000000000
--- a/res/img/cancel-white.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
-    <title>Slice 1</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/res/img/download-white.svg b/res/img/download-white.svg
deleted file mode 100644
index 5c800b350e..0000000000
--- a/res/img/download-white.svg
+++ /dev/null
@@ -1,95 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="18"
-   height="18"
-   viewBox="-1 -1 18 18"
-   version="1.1"
-   id="svg14"
-   sodipodi:docname="download-white.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Fill 75</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1914"
-     inkscape:window-height="1048"
-     id="namedview16"
-     showgrid="false"
-     inkscape:zoom="32.283595"
-     inkscape:cx="4.829485"
-     inkscape:cy="6.7819403"
-     inkscape:window-x="1920"
-     inkscape:window-y="146"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg14" />
-  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title2">Fill 75</title>
-  <desc
-     id="desc4">Created with Sketch.</desc>
-  <defs
-     id="defs6" />
-  <g
-     id="02-Chat"
-     stroke="none"
-     stroke-width="1"
-     fill="none"
-     fill-rule="evenodd"
-     sketch:type="MSPage"
-     transform="matrix(1.2103961,0,0,1.3332813,1.9999996,1.566422e-4)"
-     style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
-    <g
-       id="02_x-Chat-MAX"
-       sketch:type="MSArtboardGroup"
-       transform="translate(-280,-546)"
-       fill="#76cfa6"
-       style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
-      <g
-         id="Group"
-         sketch:type="MSLayerGroup"
-         transform="translate(243,58)"
-         style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
-        <g
-           id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap"
-           transform="translate(1,181)"
-           sketch:type="MSShapeGroup"
-           style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
-          <g
-             id="Group-Copy-13"
-             style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1">
-            <path
-               d="m 45.340043,312.52677 c 0.146962,0 0.293924,-0.0559 0.406442,-0.16839 0.223505,-0.22427 0.223505,-0.58708 0,-0.81135 l -4.380545,-4.37902 c -0.223506,-0.22427 -0.587084,-0.2235 -0.811354,-7.6e-4 l -4.385904,4.37289 c -0.22427,0.22427 -0.225036,0.58785 -0.0015,0.81212 0.223504,0.22503 0.587083,0.22503 0.811353,0.002 l 3.413045,-3.4031 0.0015,9.47524 c 0,0.31689 0.25795,0.57407 0.574071,0.57407 0.317653,0 0.574072,-0.25718 0.574072,-0.57407 l -0.0015,-9.46069 3.394674,3.39314 c 0.111752,0.11252 0.258714,0.16839 0.405677,0.16839 z"
-               id="Fill-75"
-               transform="rotate(180,40.957057,313)"
-               style="stroke:none;stroke-opacity:1;stroke-width:0.99972159;stroke-miterlimit:4;stroke-dasharray:none;fill:#ffffff;fill-opacity:1" />
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/res/img/image-view/close.svg b/res/img/image-view/close.svg
new file mode 100644
index 0000000000..f849425264
--- /dev/null
+++ b/res/img/image-view/close.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="16" fill="#21262C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4684 12.0406C21.8589 11.65 21.8589 11.0169 21.4684 10.6263C21.0779 10.2358 20.4447 10.2358 20.0542 10.6263L16.0472 14.6333L11.8114 10.3975C11.4208 10.007 10.7877 10.007 10.3972 10.3975C10.0066 10.788 10.0066 11.4212 10.3972 11.8117L14.633 16.0475L10.6261 20.0544C10.2356 20.445 10.2356 21.0781 10.6261 21.4686C11.0166 21.8592 11.6498 21.8592 12.0403 21.4686L16.0472 17.4618L19.8252 21.2398C20.2158 21.6303 20.8489 21.6303 21.2395 21.2398C21.63 20.8493 21.63 20.2161 21.2395 19.8256L17.4614 16.0475L21.4684 12.0406Z" fill="#A9B2BC"/>
+</svg>
diff --git a/res/img/image-view/download.svg b/res/img/image-view/download.svg
new file mode 100644
index 0000000000..c51deed876
--- /dev/null
+++ b/res/img/image-view/download.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1L7 12.5858L2.20711 7.79289C1.81658 7.40237 1.18342 7.40237 0.792893 7.79289C0.402369 8.18342 0.402369 8.81658 0.792893 9.20711L7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L15.2071 9.20711C15.5976 8.81658 15.5976 8.18342 15.2071 7.79289C14.8166 7.40237 14.1834 7.40237 13.7929 7.79289L9 12.5858L9 1Z" fill="#8E99A4"/>
+</svg>
diff --git a/res/img/image-view/rotate-ccw.svg b/res/img/image-view/rotate-ccw.svg
new file mode 100644
index 0000000000..85ea3198de
--- /dev/null
+++ b/res/img/image-view/rotate-ccw.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.25C14.2811 0.25 16.3824 1.03493 18.0435 2.34854L18.0645 2.36549C19.294 3.38165 21.75 6.28172 21.75 10C21.75 15.3848 17.3848 19.75 12 19.75C11.3096 19.75 10.75 19.1904 10.75 18.5C10.75 17.8096 11.3096 17.25 12 17.25C16.0041 17.25 19.25 14.0041 19.25 10C19.25 7.32797 17.4103 5.07339 16.4819 4.30089C15.2482 3.32907 13.6934 2.75 12 2.75C8.33522 2.75 5.30553 5.46916 4.8184 9H6.50851C6.9004 9 7.13415 9.43723 6.91677 9.76366L3.90826 14.2813C3.71404 14.5729 3.28596 14.5729 3.09174 14.2813L0.083231 9.76366C-0.134151 9.43723 0.0995979 9 0.491489 9H2.30066C2.80139 4.085 6.95284 0.25 12 0.25Z" fill="#8E99A4"/>
+</svg>
diff --git a/res/img/image-view/rotate-cw.svg b/res/img/image-view/rotate-cw.svg
new file mode 100644
index 0000000000..e337f3420e
--- /dev/null
+++ b/res/img/image-view/rotate-cw.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.25C7.71886 0.25 5.61758 1.03493 3.95646 2.34854L3.93549 2.36549C2.70597 3.38165 0.25 6.28172 0.25 10C0.25 15.3848 4.61522 19.75 10 19.75C10.6904 19.75 11.25 19.1904 11.25 18.5C11.25 17.8096 10.6904 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 7.32797 4.58973 5.07339 5.51806 4.30089C6.7518 3.32907 8.30655 2.75 10 2.75C13.6648 2.75 16.6945 5.46916 17.1816 9H15.4915C15.0996 9 14.8658 9.43723 15.0832 9.76366L18.0917 14.2813C18.286 14.5729 18.714 14.5729 18.9083 14.2813L21.9168 9.76366C22.1342 9.43723 21.9004 9 21.5085 9H19.6993C19.1986 4.085 15.0472 0.25 10 0.25Z" fill="#8E99A4"/>
+</svg>
diff --git a/res/img/image-view/zoom-in.svg b/res/img/image-view/zoom-in.svg
new file mode 100644
index 0000000000..c0816d489e
--- /dev/null
+++ b/res/img/image-view/zoom-in.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM9.5 4C9.5 3.44772 9.05228 3 8.5 3C7.94772 3 7.5 3.44772 7.5 4V7.5H4C3.44772 7.5 3 7.94772 3 8.5C3 9.05228 3.44772 9.5 4 9.5H7.5V13C7.5 13.5523 7.94771 14 8.5 14C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5C14 7.94772 13.5523 7.5 13 7.5H9.5V4Z" fill="#8E99A4"/>
+</svg>
diff --git a/res/img/image-view/zoom-out.svg b/res/img/image-view/zoom-out.svg
new file mode 100644
index 0000000000..0539e8c81a
--- /dev/null
+++ b/res/img/image-view/zoom-out.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM3 8.5C3 7.94772 3.44772 7.5 4 7.5H13C13.5523 7.5 14 7.94772 14 8.5C14 9.05229 13.5523 9.5 13 9.5H4C3.44772 9.5 3 9.05229 3 8.5Z" fill="#8E99A4"/>
+</svg>
diff --git a/res/img/minus-white.svg b/res/img/minus-white.svg
deleted file mode 100644
index 2921f34980..0000000000
--- a/res/img/minus-white.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="18"
-   height="18"
-   viewBox="-1 -1 18 18"
-   version="1.1"
-   id="svg14"
-   sodipodi:docname="minus-white.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Fill 75</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1914"
-     inkscape:window-height="1048"
-     id="namedview16"
-     showgrid="false"
-     inkscape:zoom="32.283595"
-     inkscape:cx="4.829485"
-     inkscape:cy="6.7819403"
-     inkscape:window-x="1920"
-     inkscape:window-y="146"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg14" />
-  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title2">Fill 75</title>
-  <desc
-     id="desc4">Created with Sketch.</desc>
-  <defs
-     id="defs6" />
-  <rect
-     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-     id="rect1545"
-     width="16"
-     height="1.5"
-     x="0"
-     y="7.25"
-     ry="0.75" />
-</svg>
diff --git a/res/img/plus-white.svg b/res/img/plus-white.svg
deleted file mode 100644
index 7759ace50a..0000000000
--- a/res/img/plus-white.svg
+++ /dev/null
@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="18"
-   height="18"
-   viewBox="-1 -1 18 18"
-   version="1.1"
-   id="svg14"
-   sodipodi:docname="plus-white.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Fill 75</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1914"
-     inkscape:window-height="1048"
-     id="namedview16"
-     showgrid="false"
-     inkscape:zoom="32.283595"
-     inkscape:cx="4.829485"
-     inkscape:cy="6.7819403"
-     inkscape:window-x="1920"
-     inkscape:window-y="146"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg14" />
-  <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title2">Fill 75</title>
-  <desc
-     id="desc4">Created with Sketch.</desc>
-  <defs
-     id="defs6" />
-  <rect
-     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-     id="rect1545"
-     width="16"
-     height="1.5"
-     x="0"
-     y="7.25"
-     ry="0.75" />
-  <rect
-     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.22474;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-     id="rect1545-3"
-     width="16"
-     height="1.5"
-     x="-16"
-     y="7.25"
-     ry="0.75"
-     transform="rotate(-90)" />
-</svg>
diff --git a/res/img/rotate-ccw.svg b/res/img/rotate-ccw.svg
deleted file mode 100644
index 3924eca040..0000000000
--- a/res/img/rotate-ccw.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
diff --git a/res/img/rotate-cw.svg b/res/img/rotate-cw.svg
deleted file mode 100644
index 91021c96d8..0000000000
--- a/res/img/rotate-cw.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 7c40604a88..10e5b083da 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -294,22 +294,22 @@ export default class ImageView extends React.Component {
                     <div className="mx_ImageView_panel mx_ImageView_toolbar">
                         { redactButton }
                         <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" />
+                            <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } 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" />
+                            <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } 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" />
+                            <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="18" height="18" />
                         </AccessibleButton>
                         <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" />
+                            <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } 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') } />
+                            <img src={require("../../../../res/img/image-view/download.svg")} width="18" height="18" alt={ _t('Download') } />
                         </a>
                         <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') } />
+                            <img src={require("../../../../res/img/image-view/close.svg")} width="18" height="18" alt={ _t('Close') } />
                         </AccessibleButton>
                     </div>
                     <img

From d85ab382f52297808491f5db72c7d362bd07434d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 07:47:59 +0100
Subject: [PATCH 030/104] Reorganize elements
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>
---
 src/components/views/elements/ImageView.js | 48 +++++++++++-----------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 10e5b083da..d37f6ee618 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -284,33 +284,35 @@ export default class ImageView extends React.Component {
                 ref={ref => this.focusLock = ref}
             >
                 <div className="mx_ImageView_content">
-                    <div className="mx_ImageView_panel mx_ImageView_label">
+                    <div className="mx_ImageView_panel">
+                        <div className="mx_ImageView_label">
                         <div className="mx_ImageView_name">
                             { this.getName() }
                         </div>
-                        <span className="mx_ImageView_size">{ sizeRes }</span>
+                        <span>{ sizeRes }</span>
                         { metadata }
-                    </div>
-                    <div className="mx_ImageView_panel mx_ImageView_toolbar">
-                        { redactButton }
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
-                            <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
-                        </AccessibleButton>
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
-                            <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
-                        </AccessibleButton>
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
-                            <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="18" height="18" />
-                        </AccessibleButton>
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
-                            <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } 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/image-view/download.svg")} width="18" height="18" alt={ _t('Download') } />
-                        </a>
-                        <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
-                            <img src={require("../../../../res/img/image-view/close.svg")} width="18" height="18" alt={ _t('Close') } />
-                        </AccessibleButton>
+                        </div>
+                        <div className="mx_ImageView_toolbar">
+                            { redactButton }
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
+                                <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
+                                <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
+                                <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
+                                <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } 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/image-view/download.svg")} width="18" height="18" alt={ _t('Download') } />
+                            </a>
+                            <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
+                                <img src={require("../../../../res/img/image-view/close.svg")} width="18" height="18" alt={ _t('Close') } />
+                            </AccessibleButton>
+                        </div>
                     </div>
                     <img
                         src={this.props.src}

From 05e9019bc98eb72401e4327bc13768be4e1e33ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 07:50:10 +0100
Subject: [PATCH 031/104] Remove name
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>
---
 src/components/views/elements/ImageView.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index d37f6ee618..3007fe566b 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -124,14 +124,6 @@ export default class ImageView extends React.Component {
         });
     };
 
-    getName() {
-        let name = this.props.name;
-        if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noreferrer noopener">{ name }</a>;
-        }
-        return name;
-    }
-
     onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
@@ -286,11 +278,8 @@ export default class ImageView extends React.Component {
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel">
                         <div className="mx_ImageView_label">
-                        <div className="mx_ImageView_name">
-                            { this.getName() }
-                        </div>
-                        <span>{ sizeRes }</span>
-                        { metadata }
+                            <span>{ sizeRes }</span>
+                            { metadata }
                         </div>
                         <div className="mx_ImageView_toolbar">
                             { redactButton }

From 497131874b2c16e3d532558557bec59057ade65c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 07:53:33 +0100
Subject: [PATCH 032/104] Remove size info
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>
---
 src/components/views/elements/ImageView.js | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 3007fe566b..e3dbe2a411 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {formatDate} from '../../../DateUtils';
 import { _t } from '../../../languageHandler';
-import filesize from "filesize";
 import AccessibleButton from "./AccessibleButton";
 import Modal from "../../../Modal";
 import * as sdk from "../../../index";
@@ -204,23 +203,6 @@ export default class ImageView extends React.Component {
         let mayRedact = false;
         const showEventMeta = !!this.props.mxEvent;
 
-        let res;
-        if (this.props.width && this.props.height) {
-            res = this.props.width + "x" + this.props.height + "px";
-        }
-
-        let size;
-        if (this.props.fileSize) {
-            size = filesize(this.props.fileSize);
-        }
-
-        let sizeRes;
-        if (size && res) {
-            sizeRes = size + ", " + res;
-        } else {
-            sizeRes = size || res;
-        }
-
         let metadata;
         if (showEventMeta) {
             // Figure out the sender, defaulting to mxid
@@ -278,7 +260,6 @@ export default class ImageView extends React.Component {
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel">
                         <div className="mx_ImageView_label">
-                            <span>{ sizeRes }</span>
                             { metadata }
                         </div>
                         <div className="mx_ImageView_toolbar">

From 768d26818965d10646e3605c70cabaf7e596f3e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 07:54:36 +0100
Subject: [PATCH 033/104] Fix css
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 | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 43333a25e6..ee02a1dce8 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -53,6 +53,9 @@ limitations under the License.
     z-index: 1000;
     align-self: flex-start;
     pointer-events: all;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .mx_ImageView_toolbar {
@@ -76,17 +79,7 @@ limitations under the License.
     padding: 5px;
 }
 
-.mx_ImageView_name {
-    font-size: $font-18px;
-    margin-bottom: 6px;
-    word-wrap: break-word;
-}
-
 .mx_ImageView_metadata {
     font-size: $font-15px;
     opacity: 0.5;
 }
-
-.mx_ImageView_size {
-    font-size: $font-11px;
-}

From ab79deb88fa828ef1a13a1fecb9e0648b38b68f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 08:11:53 +0100
Subject: [PATCH 034/104] Update the looks a bit more
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     | 14 ++++++--
 src/components/views/elements/ImageView.js | 38 ++++++++++++----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index ee02a1dce8..8afd2670a7 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -49,24 +49,32 @@ limitations under the License.
 }
 
 .mx_ImageView_panel {
+    width: 100%;
+    height: 68px;
     position: absolute;
     z-index: 1000;
     align-self: flex-start;
     pointer-events: all;
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    align-items: center;
 }
 
 .mx_ImageView_toolbar {
     right: 0;
-    padding: 50px 50px 0 0;
+    padding-right: 18px;
     display: flex;
+    align-items: center;
+}
+
+.mx_ImageView_toolbar_buttons {
+    display: flex;
+    align-items: center;
 }
 
 .mx_ImageView_label {
     left: 0;
-    padding: 50px 0 0 50px;
+    padding-left: 18px;
     text-align: left;
     display: flex;
     justify-content: center;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e3dbe2a411..fd9d84b900 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -227,7 +227,7 @@ export default class ImageView extends React.Component {
         if (mayRedact) {
             redactButton = (
                 <AccessibleButton className="mx_ImageView_button" title={_t("Remove")} onClick={ this.onRedactClick }>
-                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="18" height="18" />
+                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="24" height="24" />
                 </AccessibleButton>
             );
         }
@@ -263,24 +263,26 @@ export default class ImageView extends React.Component {
                             { metadata }
                         </div>
                         <div className="mx_ImageView_toolbar">
-                            { redactButton }
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
-                                <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
-                                <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
-                                <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
-                                <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } 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/image-view/download.svg")} width="18" height="18" alt={ _t('Download') } />
-                            </a>
+                            <div className="mx_ImageView_toolbar_buttons">
+                                { redactButton }
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
+                                    <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
+                                    <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
+                                    <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
+                                    <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="24" height="24" />
+                                </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/image-view/download.svg")} width="24" height="24" alt={ _t('Download') } />
+                                </a>
+                            </div>
                             <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
-                                <img src={require("../../../../res/img/image-view/close.svg")} width="18" height="18" alt={ _t('Close') } />
+                                <img src={require("../../../../res/img/image-view/close.svg")} width="32" height="32" alt={ _t('Close') } />
                             </AccessibleButton>
                         </div>
                     </div>

From 899ce1f605bcebbe46d44c35a6e70bae0155eac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 11:15:59 +0100
Subject: [PATCH 035/104] Partially fix overflow issues
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     | 14 ++++++++-----
 src/components/views/elements/ImageView.js | 24 ++++++++++++----------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 8afd2670a7..b8fb9b81c2 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -27,14 +27,19 @@ limitations under the License.
 .mx_ImageView_content {
     width: 100%;
 
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_ImageView_image_wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
-
+    height: 100%;
     overflow: hidden;
 }
 
-.mainImage {
+.mx_ImageView_image {
     object-fit: contain;
     pointer-events: all;
 
@@ -43,6 +48,8 @@ limitations under the License.
     min-width: 100px;
     min-height: 100px;
 
+    border-radius: 8px;
+
     &:hover {
         cursor: grab;
     }
@@ -51,7 +58,6 @@ limitations under the License.
 .mx_ImageView_panel {
     width: 100%;
     height: 68px;
-    position: absolute;
     z-index: 1000;
     align-self: flex-start;
     pointer-events: all;
@@ -62,7 +68,6 @@ limitations under the License.
 
 .mx_ImageView_toolbar {
     right: 0;
-    padding-right: 18px;
     display: flex;
     align-items: center;
 }
@@ -74,7 +79,6 @@ limitations under the License.
 
 .mx_ImageView_label {
     left: 0;
-    padding-left: 18px;
     text-align: left;
     display: flex;
     justify-content: center;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index fd9d84b900..e35c8a3e15 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -286,17 +286,19 @@ export default class ImageView extends React.Component {
                             </AccessibleButton>
                         </div>
                     </div>
-                    <img
-                        src={this.props.src}
-                        title={this.props.name}
-                        style={style}
-                        className="mainImage"
-                        draggable={true}
-                        onMouseDown={this.onStartMoving}
-                        onMouseMove={this.onMoving}
-                        onMouseUp={this.onEndMoving}
-                        onMouseLeave={this.onEndMoving}
-                    />
+                    <div className="mx_ImageView_image_wrapper">
+                        <img
+                            src={this.props.src}
+                            title={this.props.name}
+                            style={style}
+                            className="mx_ImageView_image"
+                            draggable={true}
+                            onMouseDown={this.onStartMoving}
+                            onMouseMove={this.onMoving}
+                            onMouseUp={this.onEndMoving}
+                            onMouseLeave={this.onEndMoving}
+                        />
+                    </div>
                 </div>
             </FocusLock>
         );

From 6aac8f1735b8d3bb0bfae0bfc91f8a514178edfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 11:20:28 +0100
Subject: [PATCH 036/104] Change padding a bit
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index b8fb9b81c2..943758b80e 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -88,7 +88,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    padding: 5px;
+    padding-left: 28px;
 }
 
 .mx_ImageView_metadata {

From 13d766218aeb0f866f45ffe8e7e0b9e91bf93fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 11:59:43 +0100
Subject: [PATCH 037/104] Remove redact button
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>
---
 src/components/views/elements/ImageView.js | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e35c8a3e15..e1babd8bf1 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -200,7 +200,6 @@ export default class ImageView extends React.Component {
     }
 
     render() {
-        let mayRedact = false;
         const showEventMeta = !!this.props.mxEvent;
 
         let metadata;
@@ -210,7 +209,6 @@ export default class ImageView extends React.Component {
             const cli = MatrixClientPeg.get();
             const room = cli.getRoom(this.props.mxEvent.getRoomId());
             if (room) {
-                mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
                 const member = room.getMember(sender);
                 if (member) sender = member.name;
             }
@@ -223,15 +221,6 @@ export default class ImageView extends React.Component {
             </div>);
         }
 
-        let redactButton;
-        if (mayRedact) {
-            redactButton = (
-                <AccessibleButton className="mx_ImageView_button" title={_t("Remove")} onClick={ this.onRedactClick }>
-                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="24" height="24" />
-                </AccessibleButton>
-            );
-        }
-
         const rotationDegrees = this.state.rotation + "deg";
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
@@ -264,14 +253,7 @@ export default class ImageView extends React.Component {
                         </div>
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">
-                                { redactButton }
-                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
-                                    <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="24" height="24" />
-                                </AccessibleButton>
-                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
-                                    <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="24" height="24" />
-                                </AccessibleButton>
-                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
+                                
                                     <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
                                 </AccessibleButton>
                                 <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>

From 8454a2d44098ed5c3c7f509c673b85e323cc90a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 12:52:08 +0100
Subject: [PATCH 038/104] Remove padding on lightboxes
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/_common.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 6e9d252659..9296b67375 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -315,6 +315,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     max-width: 100%;
     max-height: 100%;
     pointer-events: none;
+    padding: 0;
 }
 
 .mx_Dialog_header {

From 3e408b3fcd6c3c8a201f3cb9affbd9bc651ef7cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 12:59:40 +0100
Subject: [PATCH 039/104] Remove unused code
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>
---
 src/components/views/elements/ImageView.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e1babd8bf1..0e11eda7d0 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -160,18 +160,6 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onZoomClick = () => {
-        if (this.state.zoom <= this.minZoom) {
-            this.setState({zoom: this.maxZoom});
-        } else {
-            this.setState({
-                zoom: this.minZoom,
-                translationX: 0,
-                translationY: 0,
-            });
-        }
-    }
-
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();

From 7cd8f1135bafc69e2e3aab117e19a9379a6936c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 13:02:25 +0100
Subject: [PATCH 040/104] Quit on empty panel click
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>
---
 src/components/views/elements/ImageView.js | 25 +++++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 0e11eda7d0..288d3495d3 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -123,19 +123,25 @@ export default class ImageView extends React.Component {
         });
     };
 
-    onRotateCounterClockwiseClick = () => {
+    onRotateCounterClockwiseClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onRotateClockwiseClick = () => {
+    onRotateClockwiseClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         const cur = this.state.rotation;
         const rotationDegrees = (cur + 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onZoomInClick = () => {
+    onZoomInClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         if (this.state.zoom >= this.maxZoom) {
             this.setState({zoom: this.maxZoom});
             return;
@@ -146,7 +152,9 @@ export default class ImageView extends React.Component {
         });
     };
 
-    onZoomOutClick = () => {
+    onZoomOutClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         if (this.state.zoom <= this.minZoom) {
             this.setState({
                 zoom: this.minZoom,
@@ -160,6 +168,10 @@ export default class ImageView extends React.Component {
         });
     }
 
+    onPanelClick = (ev) => {
+        this.props.onFinished();
+    }
+
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();
@@ -235,10 +247,7 @@ 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">
-                            { metadata }
-                        </div>
+                    <div className="mx_ImageView_panel" onClick={this.onPanelClick}>
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">
                                 

From fafb8d43a37b039dcc8e98a0b2d192e2db05e22d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 14:16:58 +0100
Subject: [PATCH 041/104] Fix padding according to the design
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 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 943758b80e..17e2167494 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -64,6 +64,7 @@ limitations under the License.
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 0 16px 0 32px;
 }
 
 .mx_ImageView_toolbar {

From a6bb203a4b2e165b9c5a505213ecfab6b4dc6c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 14:43:33 +0100
Subject: [PATCH 042/104] Redo icons
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     | 57 ++++++++++++++++++--
 src/components/views/elements/ImageView.js | 63 ++++++++++++++++------
 2 files changed, 99 insertions(+), 21 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 17e2167494..ddc51cf583 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -64,10 +64,10 @@ limitations under the License.
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 16px 0 32px;
 }
 
 .mx_ImageView_toolbar {
+    padding-right: 16px;
     right: 0;
     display: flex;
     align-items: center;
@@ -78,18 +78,65 @@ limitations under the License.
     align-items: center;
 }
 
-.mx_ImageView_label {
+.mx_ImageView_info_wrapper {
+    padding-left: 32px;
     left: 0;
     text-align: left;
     display: flex;
     justify-content: center;
-    flex-direction: column;
-    max-width: 240px;
+    flex-direction: row;
     color: $lightbox-fg-color;
+    align-items: center;
+}
+
+.mx_ImageView_info {
+    padding-left: 12px;
 }
 
 .mx_ImageView_button {
-    padding-left: 28px;
+    padding-left: 24px;
+    display: block;
+
+    &::before {
+        content: '';
+        height: 22px;
+        width: 22px;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        display: block;
+        background-color: $icon-button-color;
+    }
+}
+
+.mx_ImageView_button_rotateCW::before {
+    mask-image: url('$(res)/img/image-view/rotate-cw.svg');
+}
+
+.mx_ImageView_button_rotateCCW::before {
+    mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
+}
+
+.mx_ImageView_button_zoomOut::before {
+    mask-image: url('$(res)/img/image-view/zoom-out.svg');
+}
+
+.mx_ImageView_button_zoomIn::before {
+    mask-image: url('$(res)/img/image-view/zoom-in.svg');
+}
+
+.mx_ImageView_button_download::before {
+    mask-image: url('$(res)/img/image-view/download.svg');
+}
+
+.mx_ImageView_button_close {
+    padding-left: 32px;
+    &::before {
+        width: 32px;
+        height: 32px;
+        mask-image: url('$(res)/img/image-view/close.svg');
+        background-color: none;
+    }
 }
 
 .mx_ImageView_metadata {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 288d3495d3..28a087f77d 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -20,11 +20,12 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {formatDate} from '../../../DateUtils';
 import { _t } from '../../../languageHandler';
-import AccessibleButton from "./AccessibleButton";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import Modal from "../../../Modal";
 import * as sdk from "../../../index";
 import {Key} from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
+import MemberAvatar from "../avatars/MemberAvatar";
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -214,10 +215,7 @@ export default class ImageView extends React.Component {
             }
 
             metadata = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {
-                    date: formatDate(new Date(this.props.mxEvent.getTs())),
-                    user: sender,
-                }) }
+                { formatDate(new Date(this.props.mxEvent.getTs())) }
             </div>);
         }
 
@@ -236,6 +234,8 @@ export default class ImageView extends React.Component {
                         rotate(${rotationDegrees})`,
         };
 
+        const event = this.props.mxEvent;
+
         return (
             <FocusLock
                 returnFocus={true}
@@ -248,21 +248,52 @@ export default class ImageView extends React.Component {
             >
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel" onClick={this.onPanelClick}>
+                        <div className="mx_ImageView_info_wrapper">
+                            <MemberAvatar
+                                member={event.sender}
+                                width={32} height={32}
+                                viewUserOnClick={true}
+                            />
+                            <div className="mx_ImageView_info">
+                                { event.sender ? event.sender.name : event.getSender() }
+                                { metadata }
+                            </div>
+                        </div>
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">
-                                
-                                    <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
-                                </AccessibleButton>
-                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
-                                    <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="24" height="24" />
-                                </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/image-view/download.svg")} width="24" height="24" alt={ _t('Download') } />
+                                <AccessibleTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                                    title={_t("Rotate Right")}
+                                    onClick={this.onRotateClockwiseClick}>
+                                </AccessibleTooltipButton>
+                                <AccessibleTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                                    title={_t("Rotate Left")}
+                                    onClick={ this.onRotateCounterClockwiseClick }>
+                                </AccessibleTooltipButton>
+                                <AccessibleTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                                    title={_t("Zoom out")}
+                                    onClick={ this.onZoomOutClick }>
+                                </AccessibleTooltipButton>
+                                <AccessibleTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                                    title={_t("Zoom in")}
+                                    onClick={ this.onZoomInClick }>
+                                </AccessibleTooltipButton>
+                                <a
+                                    className="mx_ImageView_button mx_ImageView_button_download"
+                                    href={ this.props.src }
+                                    download={ this.props.name }
+                                    title={_t("Download")}
+                                    target="_blank" rel="noopener">
                                 </a>
+                                <AccessibleTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_close"
+                                    title={_t("Close")}
+                                    onClick={ this.props.onFinished }>
+                                </AccessibleTooltipButton>
                             </div>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
-                                <img src={require("../../../../res/img/image-view/close.svg")} width="32" height="32" alt={ _t('Close') } />
-                            </AccessibleButton>
                         </div>
                     </div>
                     <div className="mx_ImageView_image_wrapper">

From b068a4c05504c4b5104a97c99f23f899e7dfb301 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 16:28:12 +0100
Subject: [PATCH 043/104] Make download into a button
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>
---
 src/components/views/elements/ImageView.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 28a087f77d..8251af1a5d 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -169,6 +169,15 @@ export default class ImageView extends React.Component {
         });
     }
 
+    onDownloadClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const a = document.createElement("a");
+        a.href = this.props.src;
+        a.download = this.props.name;
+        a.click();
+    }
+
     onPanelClick = (ev) => {
         this.props.onFinished();
     }
@@ -281,13 +290,11 @@ export default class ImageView extends React.Component {
                                     title={_t("Zoom in")}
                                     onClick={ this.onZoomInClick }>
                                 </AccessibleTooltipButton>
-                                <a
+                                <AccessibleTooltipButton
                                     className="mx_ImageView_button mx_ImageView_button_download"
-                                    href={ this.props.src }
-                                    download={ this.props.name }
                                     title={_t("Download")}
-                                    target="_blank" rel="noopener">
-                                </a>
+                                    onClick={ this.onDownloadClick }>
+                                </AccessibleTooltipButton>
                                 <AccessibleTooltipButton
                                     className="mx_ImageView_button mx_ImageView_button_close"
                                     title={_t("Close")}

From 0a00ffa9d6c332aaf0c6c7f01daaf40820c1a31f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 18:10:50 +0100
Subject: [PATCH 044/104] Add more icon
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/img/image-view/more.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 res/img/image-view/more.svg

diff --git a/res/img/image-view/more.svg b/res/img/image-view/more.svg
new file mode 100644
index 0000000000..4f5fa6f9b9
--- /dev/null
+++ b/res/img/image-view/more.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66699 12C6.66699 13.1046 5.77156 14 4.66699 14C3.56242 14 2.66699 13.1046 2.66699 12C2.66699 10.8954 3.56242 10 4.66699 10C5.77156 10 6.66699 10.8954 6.66699 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM19.333 14C20.4376 14 21.333 13.1046 21.333 12C21.333 10.8954 20.4376 10 19.333 10C18.2284 10 17.333 10.8954 17.333 12C17.333 13.1046 18.2284 14 19.333 14Z" fill="#8E99A4"/>
+</svg>

From 83e1a7a70781c026c62c03dd8f2652125e44da9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 18:13:12 +0100
Subject: [PATCH 045/104] Add more button
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     | 4 ++++
 src/components/views/elements/ImageView.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index ddc51cf583..bb99454152 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -129,6 +129,10 @@ limitations under the License.
     mask-image: url('$(res)/img/image-view/download.svg');
 }
 
+.mx_ImageView_button_more::before {
+    mask-image: url('$(res)/img/image-view/more.svg');
+}
+
 .mx_ImageView_button_close {
     padding-left: 32px;
     &::before {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 8251af1a5d..cd104cce37 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -295,6 +295,10 @@ export default class ImageView extends React.Component {
                                     title={_t("Download")}
                                     onClick={ this.onDownloadClick }>
                                 </AccessibleTooltipButton>
+                                <ContextMenuTooltipButton
+                                    className="mx_ImageView_button mx_ImageView_button_more"
+                                    title={_t("Options")}
+                                />
                                 <AccessibleTooltipButton
                                     className="mx_ImageView_button mx_ImageView_button_close"
                                     title={_t("Close")}

From fa9ae89b5bdf214d56b1d102cfa20b3c90f0f148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 18:24:44 +0100
Subject: [PATCH 046/104] Don't show info if no event
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>
---
 src/components/views/elements/ImageView.js | 36 +++++++++++++++-------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index cd104cce37..c00b62ecc8 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -245,6 +245,30 @@ export default class ImageView extends React.Component {
 
         const event = this.props.mxEvent;
 
+        let info;
+        if (event) {
+            info = (
+                <div className="mx_ImageView_info_wrapper">
+                    <MemberAvatar
+                        member={event.sender}
+                        width={32} height={32}
+                        viewUserOnClick={true}
+                    />
+                    <div className="mx_ImageView_info">
+                        { event.sender ? event.sender.name : event.getSender() }
+                        { metadata }
+                    </div>
+                </div>
+            );
+        } else {
+            // If there is no event - we're viewing an avatar, we set
+            // an empty div here, since the panel uses space-between
+            // and we want the same placement of elements
+            info = (
+                <div></div>
+            );
+        }
+
         return (
             <FocusLock
                 returnFocus={true}
@@ -257,17 +281,7 @@ export default class ImageView extends React.Component {
             >
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel" onClick={this.onPanelClick}>
-                        <div className="mx_ImageView_info_wrapper">
-                            <MemberAvatar
-                                member={event.sender}
-                                width={32} height={32}
-                                viewUserOnClick={true}
-                            />
-                            <div className="mx_ImageView_info">
-                                { event.sender ? event.sender.name : event.getSender() }
-                                { metadata }
-                            </div>
-                        </div>
+                        {info}
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">
                                 <AccessibleTooltipButton

From bd5efc7ceb0d1d56ef4b87e8a77ec12b1cc2c11b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 19:11:08 +0100
Subject: [PATCH 047/104] Pass permallinkCreator to ImageView
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>
---
 src/components/views/elements/ImageView.js    | 1 +
 src/components/views/messages/MImageBody.js   | 3 +++
 src/components/views/messages/MessageEvent.js | 3 +++
 src/components/views/rooms/EventTile.js       | 1 +
 4 files changed, 8 insertions(+)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index c00b62ecc8..ede4cc9623 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -42,6 +42,7 @@ export default class ImageView extends React.Component {
         // properties above, which let us use lightboxes to display images which aren't associated
         // with events.
         mxEvent: PropTypes.object,
+        permalinkCreator: PropTypes.object,
     };
 
     constructor(props) {
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 8456a5bd09..616f2b1cc8 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -38,6 +38,8 @@ export default class MImageBody extends React.Component {
 
         /* the maximum image height to use */
         maxImageHeight: PropTypes.number,
+
+        permalinkCreator: PropTypes.object,
     };
 
     static contextType = MatrixClientContext;
@@ -103,6 +105,7 @@ export default class MImageBody extends React.Component {
                 src: httpUrl,
                 name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
+                permalinkCreator: this.props.permalinkCreator,
             };
 
             if (content.info) {
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index f93813fe79..daee6558c9 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -44,6 +44,8 @@ export default class MessageEvent extends React.Component {
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
+
+        permalinkCreator: PropTypes.object,
     };
 
     constructor(props) {
@@ -120,6 +122,7 @@ export default class MessageEvent extends React.Component {
             editState={this.props.editState}
             onHeightChanged={this.props.onHeightChanged}
             onMessageAllowed={this.onTileUpdate}
+            permalinkCreator={this.props.permalinkCreator}
         />;
     }
 }
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index c856919f5a..fb0fa7d6d2 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -968,6 +968,7 @@ export default class EventTile extends React.Component {
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}
+                                           permalinkCreator={this.props.permalinkCreator}
                                            onHeightChanged={this.props.onHeightChanged} />
                             { keyRequestInfo }
                             { reactionsRow }

From 9312becee56ee0dd5b704e0913b9fc8fc2c1119a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 19:17:33 +0100
Subject: [PATCH 048/104] Add context menu
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>
---
 src/components/views/elements/ImageView.js | 48 +++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index ede4cc9623..5f77b1ccfa 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {formatDate} from '../../../DateUtils';
@@ -26,6 +26,9 @@ import * as sdk from "../../../index";
 import {Key} from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
+import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import MessageContextMenu from "../context_menus/MessageContextMenu";
+import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -53,9 +56,11 @@ export default class ImageView extends React.Component {
             translationX: 0,
             translationY: 0,
             moving: false,
+            contextMenuDisplay: false,
         };
     }
 
+    contextMenuButton = createRef();
     initX = 0;
     initY = 0;
     lastX = 0;
@@ -179,6 +184,20 @@ export default class ImageView extends React.Component {
         a.click();
     }
 
+    onOpenContextMenu = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            contextMenuDisplay: true,
+        });
+    }
+
+    onCloseContextMenu = () => {
+        this.setState({
+            contextMenuDisplay: false,
+        });
+    }
+
     onPanelClick = (ev) => {
         this.props.onFinished();
     }
@@ -210,6 +229,30 @@ export default class ImageView extends React.Component {
         this.setState({moving: false});
     }
 
+    renderContextMenu() {
+        let contextMenu = null;
+        if (this.state.contextMenuDisplay) {
+            contextMenu = (
+                <ContextMenu
+                    {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
+                    onFinished={this.onCloseContextMenu}
+                >
+                    <MessageContextMenu
+                        mxEvent={this.props.mxEvent}
+                        permalinkCreator={this.props.permalinkCreator}
+                        onFinished={this.onCloseContextMenu}
+                    />
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                { contextMenu }
+            </React.Fragment>
+        );
+    }
+
     render() {
         const showEventMeta = !!this.props.mxEvent;
 
@@ -313,12 +356,15 @@ export default class ImageView extends React.Component {
                                 <ContextMenuTooltipButton
                                     className="mx_ImageView_button mx_ImageView_button_more"
                                     title={_t("Options")}
+                                    onClick={this.onOpenContextMenu}
+                                    inputRef={this.contextMenuButton}
                                 />
                                 <AccessibleTooltipButton
                                     className="mx_ImageView_button mx_ImageView_button_close"
                                     title={_t("Close")}
                                     onClick={ this.props.onFinished }>
                                 </AccessibleTooltipButton>
+                                {this.renderContextMenu()}
                             </div>
                         </div>
                     </div>

From 81698a2714ff2637d522831c109f4e7a0750fbb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 19:31:19 +0100
Subject: [PATCH 049/104] Fix pointer-events
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 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index bb99454152..cd5f9a247b 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -58,9 +58,7 @@ limitations under the License.
 .mx_ImageView_panel {
     width: 100%;
     height: 68px;
-    z-index: 1000;
     align-self: flex-start;
-    pointer-events: all;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -76,6 +74,7 @@ limitations under the License.
 .mx_ImageView_toolbar_buttons {
     display: flex;
     align-items: center;
+    pointer-events: all;
 }
 
 .mx_ImageView_info_wrapper {
@@ -91,6 +90,7 @@ limitations under the License.
 
 .mx_ImageView_info {
     padding-left: 12px;
+    pointer-events: all;
 }
 
 .mx_ImageView_button {

From 2021e4e345c7cfc554421509e88253dcddedcf07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 19:33:17 +0100
Subject: [PATCH 050/104] Remove ugly workaround
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>
---
 src/components/views/elements/ImageView.js | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 5f77b1ccfa..dc785aabb2 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -131,24 +131,18 @@ export default class ImageView extends React.Component {
     };
 
     onRotateCounterClockwiseClick = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
     onRotateClockwiseClick = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         const cur = this.state.rotation;
         const rotationDegrees = (cur + 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
     onZoomInClick = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         if (this.state.zoom >= this.maxZoom) {
             this.setState({zoom: this.maxZoom});
             return;
@@ -160,8 +154,6 @@ export default class ImageView extends React.Component {
     };
 
     onZoomOutClick = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         if (this.state.zoom <= this.minZoom) {
             this.setState({
                 zoom: this.minZoom,
@@ -176,8 +168,6 @@ export default class ImageView extends React.Component {
     }
 
     onDownloadClick = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         const a = document.createElement("a");
         a.href = this.props.src;
         a.download = this.props.name;
@@ -185,8 +175,6 @@ export default class ImageView extends React.Component {
     }
 
     onOpenContextMenu = (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
         this.setState({
             contextMenuDisplay: true,
         });
@@ -198,10 +186,6 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onPanelClick = (ev) => {
-        this.props.onFinished();
-    }
-
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();
@@ -324,7 +308,7 @@ export default class ImageView extends React.Component {
                 ref={ref => this.focusLock = ref}
             >
                 <div className="mx_ImageView_content">
-                    <div className="mx_ImageView_panel" onClick={this.onPanelClick}>
+                    <div className="mx_ImageView_panel">
                         {info}
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">

From 7293181552b3bad2b24ec9f9dae80597be82ab04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 19:33:22 +0100
Subject: [PATCH 051/104] i18n
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>
---
 src/i18n/strings/en_EN.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 74617e17af..e94e1bbae6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1861,14 +1861,10 @@
     "collapse": "collapse",
     "expand": "expand",
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
-    "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
-    "Zoom": "Zoom",
+    "Rotate Right": "Rotate Right",
+    "Rotate Left": "Rotate Left",
     "Zoom out": "Zoom out",
     "Zoom in": "Zoom in",
-    "Rotate Left": "Rotate Left",
-    "Rotate counter-clockwise": "Rotate counter-clockwise",
-    "Rotate Right": "Rotate Right",
-    "Rotate clockwise": "Rotate clockwise",
     "Download": "Download",
     "Information": "Information",
     "Language Dropdown": "Language Dropdown",

From 983895289c30a9626816ba0ef971cbc01d4eefbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 20:04:25 +0100
Subject: [PATCH 052/104] Update info
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     |  7 +---
 src/components/views/elements/ImageView.js | 47 +++++++++-------------
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index cd5f9a247b..11ef9ec692 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -91,6 +91,8 @@ limitations under the License.
 .mx_ImageView_info {
     padding-left: 12px;
     pointer-events: all;
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_ImageView_button {
@@ -142,8 +144,3 @@ limitations under the License.
         background-color: none;
     }
 }
-
-.mx_ImageView_metadata {
-    font-size: $font-15px;
-    opacity: 0.5;
-}
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index dc785aabb2..1a93b5c3f7 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -18,7 +18,6 @@ limitations under the License.
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {formatDate} from '../../../DateUtils';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import Modal from "../../../Modal";
@@ -29,6 +28,8 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import MessageTimestamp from "../messages/MessageTimestamp";
+import SenderProfile from '../messages/SenderProfile';
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -240,22 +241,6 @@ export default class ImageView extends React.Component {
     render() {
         const showEventMeta = !!this.props.mxEvent;
 
-        let metadata;
-        if (showEventMeta) {
-            // Figure out the sender, defaulting to mxid
-            let sender = this.props.mxEvent.getSender();
-            const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(this.props.mxEvent.getRoomId());
-            if (room) {
-                const member = room.getMember(sender);
-                if (member) sender = member.name;
-            }
-
-            metadata = (<div className="mx_ImageView_metadata">
-                { formatDate(new Date(this.props.mxEvent.getTs())) }
-            </div>);
-        }
-
         const rotationDegrees = this.state.rotation + "deg";
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
@@ -271,20 +256,28 @@ export default class ImageView extends React.Component {
                         rotate(${rotationDegrees})`,
         };
 
-        const event = this.props.mxEvent;
-
         let info;
-        if (event) {
+        if (showEventMeta) {
+            const mxEvent = this.props.mxEvent;
+
+            const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const messageTimestamp = (
+                <MessageTimestamp showTwelveHour={false} ts={mxEvent.getTs()} />
+            );
+            const avatar = (
+                <MemberAvatar
+                    member={mxEvent.sender}
+                    width={32} height={32}
+                    viewUserOnClick={true}
+                />
+            );
+
             info = (
                 <div className="mx_ImageView_info_wrapper">
-                    <MemberAvatar
-                        member={event.sender}
-                        width={32} height={32}
-                        viewUserOnClick={true}
-                    />
+                    {avatar}
                     <div className="mx_ImageView_info">
-                        { event.sender ? event.sender.name : event.getSender() }
-                        { metadata }
+                        {senderName}
+                        {messageTimestamp}
                     </div>
                 </div>
             );

From 6008a6f9fa09060f2c6851e61a5d416d7a28469d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 20:07:41 +0100
Subject: [PATCH 053/104] Use showTwelveHourTimestamps
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>
---
 src/components/views/elements/ImageView.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 1a93b5c3f7..cbe5b0592f 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -29,7 +29,7 @@ import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/Cont
 import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
-import SenderProfile from '../messages/SenderProfile';
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -259,10 +259,11 @@ export default class ImageView extends React.Component {
         let info;
         if (showEventMeta) {
             const mxEvent = this.props.mxEvent;
+            const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
 
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const messageTimestamp = (
-                <MessageTimestamp showTwelveHour={false} ts={mxEvent.getTs()} />
+                <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
             );
             const avatar = (
                 <MemberAvatar

From 649b87ac1121aee88c189d3e04d5ccc052c3ea8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 20:14:12 +0100
Subject: [PATCH 054/104] Make permalink clickable
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>
---
 src/components/views/elements/ImageView.js | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index cbe5b0592f..073b9dddbd 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -30,6 +30,8 @@ import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
+import {formatTime} from "../../../DateUtils";
+import dis from '../../../dispatcher/dispatcher';
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -187,6 +189,18 @@ export default class ImageView extends React.Component {
         });
     }
 
+    onPermalinkClicked = e => {
+        // This allows the permalink to be opened in a new tab/window or copied as
+        // matrix.to, but also for it to enable routing within Element when clicked.
+        e.preventDefault();
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+    };
+
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();
@@ -260,10 +274,21 @@ export default class ImageView extends React.Component {
         if (showEventMeta) {
             const mxEvent = this.props.mxEvent;
             const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+            let permalink = "#";
+            if (this.props.permalinkCreator) {
+                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            }
 
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const messageTimestamp = (
-                <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                <a
+                    href={permalink}
+                    onClick={this.onPermalinkClicked}
+                    aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+                >
+                    <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                </a>
+
             );
             const avatar = (
                 <MemberAvatar

From 25873c87592841aaccea1769f0df90e7ce04da13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 20:41:20 +0100
Subject: [PATCH 055/104] Remove rounded border

---
 res/css/views/elements/_ImageView.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 11ef9ec692..f904d31330 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -48,8 +48,6 @@ limitations under the License.
     min-width: 100px;
     min-height: 100px;
 
-    border-radius: 8px;
-
     &:hover {
         cursor: grab;
     }

From d58c17ff3bfb75c61329979b7ea8d3ccd69bfe70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 07:50:53 +0100
Subject: [PATCH 056/104] Show grabbing cursor
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     | 4 ----
 src/components/views/elements/ImageView.js | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index f904d31330..d864ad9adf 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -47,10 +47,6 @@ limitations under the License.
     max-height: 70vh;
     min-width: 100px;
     min-height: 100px;
-
-    &:hover {
-        cursor: grab;
-    }
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 073b9dddbd..51e700c481 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -264,6 +264,7 @@ export default class ImageView extends React.Component {
          * we would apply the translation to an already rotated
          * image causing it translate in the wrong direction. */
         const style = {
+            cursor: this.state.moving ? "grabbing" : "grab",
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoomPercentage})

From fe8e90f92063d8efd6f1b880e6f70e994cb84f93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 07:51:38 +0100
Subject: [PATCH 057/104] Change comment styling
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>
---
 src/components/views/elements/ImageView.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 51e700c481..d91b7c8aba 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -72,8 +72,8 @@ export default class ImageView extends React.Component {
     maxZoom = 300;
 
     componentDidMount() {
-        /* We have to use addEventListener() because the listener
-         * needs to be passive in order to work with Chromium */
+        // We have to use addEventListener() because the listener
+        // needs to be passive in order to work with Chromium
         this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
     }
 
@@ -259,10 +259,10 @@ export default class ImageView extends React.Component {
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
         const translatePixelsY = this.state.translationY + "px";
-        /* The order of the values is important!
-         * First, we translate and only then we rotate, otherwise
-         * we would apply the translation to an already rotated
-         * image causing it translate in the wrong direction. */
+        // The order of the values is important!
+        // First, we translate and only then we rotate, otherwise
+        // we would apply the translation to an already rotated
+        // image causing it translate in the wrong direction.
         const style = {
             cursor: this.state.moving ? "grabbing" : "grab",
             transform: `translateX(${translatePixelsX})

From 5a9e1a14822e5f6ecb5e0fed186e9f021921286c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 08:10:54 +0100
Subject: [PATCH 058/104] Fix close icon
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 | 7 ++++---
 res/img/image-view/close.svg           | 5 ++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index d864ad9adf..9b77f70262 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -90,7 +90,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    padding-left: 24px;
+    margin-left: 24px;
     display: block;
 
     &::before {
@@ -130,11 +130,12 @@ limitations under the License.
 }
 
 .mx_ImageView_button_close {
-    padding-left: 32px;
+    border-radius: 100%;
+    background: #21262C;
     &::before {
         width: 32px;
         height: 32px;
         mask-image: url('$(res)/img/image-view/close.svg');
-        background-color: none;
+        mask-size: 40%;
     }
 }
diff --git a/res/img/image-view/close.svg b/res/img/image-view/close.svg
index f849425264..d603b7f5cc 100644
--- a/res/img/image-view/close.svg
+++ b/res/img/image-view/close.svg
@@ -1,4 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="32" height="32" rx="16" fill="#21262C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4684 12.0406C21.8589 11.65 21.8589 11.0169 21.4684 10.6263C21.0779 10.2358 20.4447 10.2358 20.0542 10.6263L16.0472 14.6333L11.8114 10.3975C11.4208 10.007 10.7877 10.007 10.3972 10.3975C10.0066 10.788 10.0066 11.4212 10.3972 11.8117L14.633 16.0475L10.6261 20.0544C10.2356 20.445 10.2356 21.0781 10.6261 21.4686C11.0166 21.8592 11.6498 21.8592 12.0403 21.4686L16.0472 17.4618L19.8252 21.2398C20.2158 21.6303 20.8489 21.6303 21.2395 21.2398C21.63 20.8493 21.63 20.2161 21.2395 19.8256L17.4614 16.0475L21.4684 12.0406Z" fill="#A9B2BC"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4684 2.04056C11.8589 1.65003 11.8589 1.01687 11.4684 0.626342C11.0779 0.235818 10.4447 0.235818 10.0542 0.626342L6.04718 4.63333L1.81137 0.397522C1.42084 0.00699783 0.78768 0.00699781 0.397156 0.397522C0.0066314 0.788046 0.00663096 1.42121 0.397155 1.81174L4.63297 6.04755L0.62608 10.0544C0.235557 10.445 0.235556 11.0781 0.626081 11.4686C1.0166 11.8592 1.64977 11.8592 2.04029 11.4686L6.04718 7.46176L9.82525 11.2398C10.2158 11.6303 10.8489 11.6303 11.2395 11.2398C11.63 10.8493 11.63 10.2161 11.2395 9.82561L7.46139 6.04755L11.4684 2.04056Z" fill="#A9B2BC"/>
 </svg>

From 83de84972ed143750f0f633f962398818643207b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 08:13:27 +0100
Subject: [PATCH 059/104] Close onPermalinkClicked
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>
---
 src/components/views/elements/ImageView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index d91b7c8aba..f7826d45fe 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -199,6 +199,7 @@ export default class ImageView extends React.Component {
             highlighted: true,
             room_id: this.props.mxEvent.getRoomId(),
         });
+        this.props.onFinished();
     };
 
     onStartMoving = ev => {

From b18622efe492860153bf60a92ea56ce49dbd4480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 08:20:34 +0100
Subject: [PATCH 060/104] Show full date
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>
---
 src/components/views/elements/ImageView.js        | 6 +++---
 src/components/views/messages/MessageTimestamp.js | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index f7826d45fe..5acd36bde0 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -30,7 +30,7 @@ import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import {formatTime} from "../../../DateUtils";
+import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 
 export default class ImageView extends React.Component {
@@ -286,9 +286,9 @@ export default class ImageView extends React.Component {
                 <a
                     href={permalink}
                     onClick={this.onPermalinkClicked}
-                    aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
                 >
-                    <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                    <MessageTimestamp showFullDate={true} showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
                 </a>
 
             );
diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index 199a6f47ce..26b8096c4f 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -23,13 +23,18 @@ export default class MessageTimestamp extends React.Component {
     static propTypes = {
         ts: PropTypes.number.isRequired,
         showTwelveHour: PropTypes.bool,
+        showFullDate: PropTypes.bool,
     };
 
     render() {
         const date = new Date(this.props.ts);
         return (
             <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
-                { formatTime(date, this.props.showTwelveHour) }
+                {
+                    this.props.showFullDate ?
+                    formatFullDate(date, this.props.showTwelveHour) :
+                    formatTime(date, this.props.showTwelveHour)
+                }
             </span>
         );
     }

From 273753a42a9a122b1f6044c2840ef4830896781d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 08:25:34 +0100
Subject: [PATCH 061/104] Fix hex formatting
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 9b77f70262..45968ddaa5 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -131,7 +131,7 @@ limitations under the License.
 
 .mx_ImageView_button_close {
     border-radius: 100%;
-    background: #21262C;
+    background: #21262c;
     &::before {
         width: 32px;
         height: 32px;

From a4130cb7f35ae8325b2b68b457246e23db02158a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 10:23:27 +0100
Subject: [PATCH 062/104] Revert trash icon
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/img/feather-customised/trash.custom.svg | 89 ++-------------------
 1 file changed, 7 insertions(+), 82 deletions(-)

diff --git a/res/img/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg
index 589bb0a4e5..70eeaf35cd 100644
--- a/res/img/feather-customised/trash.custom.svg
+++ b/res/img/feather-customised/trash.custom.svg
@@ -1,82 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="24"
-   height="24"
-   viewBox="0 0 24 24"
-   fill="none"
-   version="1.1"
-   id="svg12"
-   sodipodi:docname="trash.custom.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs16" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="934"
-     inkscape:window-height="1016"
-     id="namedview14"
-     showgrid="false"
-     inkscape:zoom="11.249472"
-     inkscape:cx="11.649601"
-     inkscape:cy="23.142771"
-     inkscape:window-x="2884"
-     inkscape:window-y="162"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg12" />
-  <path
-     d="M2.25 5.5H5.16667H21.75"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path2" />
-  <path
-     d="M16.5 5.5L15 1H9L7.5 5.5"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path4" />
-  <path
-     d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path6" />
-  <path
-     d="M9.75 9.25V18.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path8" />
-  <path
-     d="M14.25 9.25V18.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path10" />
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file

From 7fc375805628a6b7a11777b70f8c06011e132b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 10:23:59 +0100
Subject: [PATCH 063/104] Add newline
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/img/feather-customised/trash.custom.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/img/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg
index 70eeaf35cd..dc1985ddb2 100644
--- a/res/img/feather-customised/trash.custom.svg
+++ b/res/img/feather-customised/trash.custom.svg
@@ -4,4 +4,4 @@
 <path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
+</svg>

From 984b4372db4e6c56638dc0f6d419acb5b4e8a324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 10:25:24 +0100
Subject: [PATCH 064/104] Remove trash red icon
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/img/trash-red.svg | 89 -------------------------------------------
 1 file changed, 89 deletions(-)
 delete mode 100644 res/img/trash-red.svg

diff --git a/res/img/trash-red.svg b/res/img/trash-red.svg
deleted file mode 100644
index 0b1d201d2e..0000000000
--- a/res/img/trash-red.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="24"
-   height="24"
-   viewBox="0 0 24 24"
-   fill="none"
-   version="1.1"
-   id="svg12"
-   sodipodi:docname="trash-red.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs16" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1914"
-     inkscape:window-height="1048"
-     id="namedview14"
-     showgrid="false"
-     inkscape:zoom="27.610949"
-     inkscape:cx="12.318518"
-     inkscape:cy="13.781064"
-     inkscape:window-x="1920"
-     inkscape:window-y="146"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg12"
-     inkscape:document-rotation="0" />
-  <path
-     d="M2.25 5.5H5.16667H21.75"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path2"
-     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
-  <path
-     d="M16.5 5.5L15 1H9L7.5 5.5"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path4"
-     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
-  <path
-     d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path6"
-     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
-  <path
-     d="M9.75 9.25V18.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path8"
-     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
-  <path
-     d="M14.25 9.25V18.25"
-     stroke="#2E2F32"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path10"
-     style="stroke:#d90000;stroke-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none" />
-</svg>

From 4f3fe3d236640f744eec9f966b0a0260d698f469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:09:52 +0100
Subject: [PATCH 065/104] Add comments
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>
---
 src/components/views/messages/MImageBody.js   | 1 +
 src/components/views/messages/MessageEvent.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 616f2b1cc8..b1d5995121 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -39,6 +39,7 @@ export default class MImageBody extends React.Component {
         /* the maximum image height to use */
         maxImageHeight: PropTypes.number,
 
+        /* the permalinkCreator */
         permalinkCreator: PropTypes.object,
     };
 
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index daee6558c9..fe0bb19fda 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -45,6 +45,7 @@ export default class MessageEvent extends React.Component {
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
 
+        /* the permalinkCreator */
         permalinkCreator: PropTypes.object,
     };
 

From d0dea91e92986cbcb07d53888a4014cb69a0ba6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:16:40 +0100
Subject: [PATCH 066/104] contextMenuDisplay -> contextMenuDisplayed
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>
---
 src/components/views/elements/ImageView.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 5acd36bde0..bbadad9778 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -59,7 +59,7 @@ export default class ImageView extends React.Component {
             translationX: 0,
             translationY: 0,
             moving: false,
-            contextMenuDisplay: false,
+            contextMenuDisplayed: false,
         };
     }
 
@@ -179,13 +179,13 @@ export default class ImageView extends React.Component {
 
     onOpenContextMenu = (ev) => {
         this.setState({
-            contextMenuDisplay: true,
+            contextMenuDisplayed: true,
         });
     }
 
     onCloseContextMenu = () => {
         this.setState({
-            contextMenuDisplay: false,
+            contextMenuDisplayed: false,
         });
     }
 
@@ -231,7 +231,7 @@ export default class ImageView extends React.Component {
 
     renderContextMenu() {
         let contextMenu = null;
-        if (this.state.contextMenuDisplay) {
+        if (this.state.contextMenuDisplayed) {
             contextMenu = (
                 <ContextMenu
                     {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}

From fa239e506d6fdca0f91efe606536e277ee69ab0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:19:50 +0100
Subject: [PATCH 067/104] ZOOM shouldn't be a part of the class
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>
---
 src/components/views/elements/ImageView.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index bbadad9778..6e9066ccbf 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -33,6 +33,9 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 
+const MIN_ZOOM = 100;
+const MAX_ZOOM = 300;
+
 export default class ImageView extends React.Component {
     static propTypes = {
         src: PropTypes.string.isRequired, // the source of the image being displayed
@@ -68,8 +71,6 @@ export default class ImageView extends React.Component {
     initY = 0;
     lastX = 0;
     lastY = 0;
-    minZoom = 100;
-    maxZoom = 300;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener
@@ -94,16 +95,16 @@ export default class ImageView extends React.Component {
         ev.preventDefault();
         const newZoom =this.state.zoom - ev.deltaY;
 
-        if (newZoom <= this.minZoom) {
+        if (newZoom <= MIN_ZOOM) {
             this.setState({
-                zoom: this.minZoom,
+                zoom: MIN_ZOOM,
                 translationX: 0,
                 translationY: 0,
             });
             return;
         }
-        if (newZoom >= this.maxZoom) {
-            this.setState({zoom: this.maxZoom});
+        if (newZoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
             return;
         }
 
@@ -146,8 +147,8 @@ export default class ImageView extends React.Component {
     };
 
     onZoomInClick = (ev) => {
-        if (this.state.zoom >= this.maxZoom) {
-            this.setState({zoom: this.maxZoom});
+        if (this.state.zoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
             return;
         }
 
@@ -157,9 +158,9 @@ export default class ImageView extends React.Component {
     };
 
     onZoomOutClick = (ev) => {
-        if (this.state.zoom <= this.minZoom) {
+        if (this.state.zoom <= MIN_ZOOM) {
             this.setState({
-                zoom: this.minZoom,
+                zoom: MIN_ZOOM,
                 translationX: 0,
                 translationY: 0,
             });

From 80ce4da9b66a2d2cf0044bb4ef59f47410a72a83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:21:04 +0100
Subject: [PATCH 068/104] Remove onRedactClick
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>
---
 src/components/views/elements/ImageView.js | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 6e9066ccbf..dd5ad56a4a 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -113,27 +113,6 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onRedactClick = () => {
-        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
-            onFinished: (proceed) => {
-                if (!proceed) return;
-                this.props.onFinished();
-                MatrixClientPeg.get().redactEvent(
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
-                ).catch(function(e) {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    // display error message stating you couldn't delete this.
-                    const code = e.errcode || e.statusCode;
-                    Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
-                        title: _t('Error'),
-                        description: _t('You cannot delete this image. (%(code)s)', {code: code}),
-                    });
-                });
-            },
-        });
-    };
-
     onRotateCounterClockwiseClick = (ev) => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;

From 4c377ae037fc8bbc1a8a320092550470de8a0b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:23:14 +0100
Subject: [PATCH 069/104] Consistent evs
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>
---
 src/components/views/elements/ImageView.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index dd5ad56a4a..c14b8c60bb 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -113,19 +113,19 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onRotateCounterClockwiseClick = (ev) => {
+    onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onRotateClockwiseClick = (ev) => {
+    onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur + 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onZoomInClick = (ev) => {
+    onZoomInClick = () => {
         if (this.state.zoom >= MAX_ZOOM) {
             this.setState({zoom: MAX_ZOOM});
             return;
@@ -136,7 +136,7 @@ export default class ImageView extends React.Component {
         });
     };
 
-    onZoomOutClick = (ev) => {
+    onZoomOutClick = () => {
         if (this.state.zoom <= MIN_ZOOM) {
             this.setState({
                 zoom: MIN_ZOOM,
@@ -150,14 +150,14 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onDownloadClick = (ev) => {
+    onDownloadClick = () => {
         const a = document.createElement("a");
         a.href = this.props.src;
         a.download = this.props.name;
         a.click();
     }
 
-    onOpenContextMenu = (ev) => {
+    onOpenContextMenu = () => {
         this.setState({
             contextMenuDisplayed: true,
         });
@@ -169,10 +169,10 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onPermalinkClicked = e => {
+    onPermalinkClicked = (ev) => {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Element when clicked.
-        e.preventDefault();
+        ev.preventDefault();
         dis.dispatch({
             action: 'view_room',
             event_id: this.props.mxEvent.getId(),
@@ -182,7 +182,7 @@ export default class ImageView extends React.Component {
         this.props.onFinished();
     };
 
-    onStartMoving = ev => {
+    onStartMoving = (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -191,7 +191,7 @@ export default class ImageView extends React.Component {
         this.initY = ev.pageY - this.lastY;
     }
 
-    onMoving = ev => {
+    onMoving = (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -205,7 +205,7 @@ export default class ImageView extends React.Component {
         });
     }
 
-    onEndMoving = ev => {
+    onEndMoving = () => {
         this.setState({moving: false});
     }
 

From 436a17bcc91feca49de9c454646a7efeda1404e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:26:34 +0100
Subject: [PATCH 070/104] Remove imports
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>
---
 src/components/views/elements/ImageView.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index c14b8c60bb..ea424d9925 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -17,11 +17,8 @@ limitations under the License.
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import Modal from "../../../Modal";
-import * as sdk from "../../../index";
 import {Key} from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";

From dc283241aa08d9cdc24bc35552c8703b38348b64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:28:42 +0100
Subject: [PATCH 071/104] Remove wrapper
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     | 6 ------
 src/components/views/elements/ImageView.js | 2 --
 2 files changed, 8 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 45968ddaa5..4b786a244b 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -22,12 +22,6 @@ limitations under the License.
     display: flex;
     width: 100%;
     height: 100%;
-}
-
-.mx_ImageView_content {
-    width: 100%;
-
-    display: flex;
     flex-direction: column;
 }
 
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index ea424d9925..21b16ed89d 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -305,7 +305,6 @@ export default class ImageView extends React.Component {
                 className="mx_ImageView"
                 ref={ref => this.focusLock = ref}
             >
-                <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel">
                         {info}
                         <div className="mx_ImageView_toolbar">
@@ -363,7 +362,6 @@ export default class ImageView extends React.Component {
                             onMouseLeave={this.onEndMoving}
                         />
                     </div>
-                </div>
             </FocusLock>
         );
     }

From 1955fff08cfb11761d9328718852270367269719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:50:50 +0100
Subject: [PATCH 072/104] CSS cleanup
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     | 31 +++------
 src/components/views/elements/ImageView.js | 76 +++++++++++-----------
 2 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 4b786a244b..626878b03e 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -34,10 +34,9 @@ limitations under the License.
 }
 
 .mx_ImageView_image {
-    object-fit: contain;
     pointer-events: all;
 
-    max-width: 100vw;
+    max-width: 70vw;
     max-height: 70vh;
     min-width: 100px;
     min-height: 100px;
@@ -46,43 +45,33 @@ limitations under the License.
 .mx_ImageView_panel {
     width: 100%;
     height: 68px;
-    align-self: flex-start;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.mx_ImageView_toolbar {
-    padding-right: 16px;
-    right: 0;
-    display: flex;
-    align-items: center;
-}
-
-.mx_ImageView_toolbar_buttons {
-    display: flex;
-    align-items: center;
-    pointer-events: all;
-}
-
 .mx_ImageView_info_wrapper {
+    pointer-events: all;
     padding-left: 32px;
-    left: 0;
-    text-align: left;
     display: flex;
-    justify-content: center;
     flex-direction: row;
-    color: $lightbox-fg-color;
     align-items: center;
+    color: $lightbox-fg-color;
 }
 
 .mx_ImageView_info {
     padding-left: 12px;
-    pointer-events: all;
     display: flex;
     flex-direction: column;
 }
 
+.mx_ImageView_toolbar {
+    padding-right: 16px;
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+}
+
 .mx_ImageView_button {
     margin-left: 24px;
     display: block;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 21b16ed89d..15bb25d473 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -308,45 +308,43 @@ export default class ImageView extends React.Component {
                     <div className="mx_ImageView_panel">
                         {info}
                         <div className="mx_ImageView_toolbar">
-                            <div className="mx_ImageView_toolbar_buttons">
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                                    title={_t("Rotate Right")}
-                                    onClick={this.onRotateClockwiseClick}>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_rotateCCW"
-                                    title={_t("Rotate Left")}
-                                    onClick={ this.onRotateCounterClockwiseClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                                    title={_t("Zoom out")}
-                                    onClick={ this.onZoomOutClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                                    title={_t("Zoom in")}
-                                    onClick={ this.onZoomInClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_download"
-                                    title={_t("Download")}
-                                    onClick={ this.onDownloadClick }>
-                                </AccessibleTooltipButton>
-                                <ContextMenuTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_more"
-                                    title={_t("Options")}
-                                    onClick={this.onOpenContextMenu}
-                                    inputRef={this.contextMenuButton}
-                                />
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_close"
-                                    title={_t("Close")}
-                                    onClick={ this.props.onFinished }>
-                                </AccessibleTooltipButton>
-                                {this.renderContextMenu()}
-                            </div>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                                title={_t("Rotate Right")}
+                                onClick={this.onRotateClockwiseClick}>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                                title={_t("Rotate Left")}
+                                onClick={ this.onRotateCounterClockwiseClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                                title={_t("Zoom out")}
+                                onClick={ this.onZoomOutClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                                title={_t("Zoom in")}
+                                onClick={ this.onZoomInClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_download"
+                                title={_t("Download")}
+                                onClick={ this.onDownloadClick }>
+                            </AccessibleTooltipButton>
+                            <ContextMenuTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_more"
+                                title={_t("Options")}
+                                onClick={this.onOpenContextMenu}
+                                inputRef={this.contextMenuButton}
+                            />
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_close"
+                                title={_t("Close")}
+                                onClick={ this.props.onFinished }>
+                            </AccessibleTooltipButton>
+                            {this.renderContextMenu()}
                         </div>
                     </div>
                     <div className="mx_ImageView_image_wrapper">

From fc32ceade74c072585c58905e153027f9ab766f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:57:39 +0100
Subject: [PATCH 073/104] i18n

---
 src/i18n/strings/en_EN.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e94e1bbae6..982ee44452 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1860,7 +1860,6 @@
     "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
     "collapse": "collapse",
     "expand": "expand",
-    "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Rotate Right": "Rotate Right",
     "Rotate Left": "Rotate Left",
     "Zoom out": "Zoom out",

From 9c313854d01485d331c8b25f75c5dea7441bebca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 15 Mar 2021 19:23:40 +0100
Subject: [PATCH 074/104] Increase defautl size
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 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 626878b03e..51e72b7c83 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -36,8 +36,8 @@ limitations under the License.
 .mx_ImageView_image {
     pointer-events: all;
 
-    max-width: 70vw;
-    max-height: 70vh;
+    max-width: 95vw;
+    max-height: 95vh;
     min-width: 100px;
     min-height: 100px;
 }

From 67a57ead96168d9761efb9dbc04562921ec34cfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 15 Mar 2021 19:24:00 +0100
Subject: [PATCH 075/104] Export ZOOM_STEP into a variable
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>
---
 src/components/views/elements/ImageView.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 546b2ea695..7808ec5386 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -33,6 +33,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const MIN_ZOOM = 100;
 const MAX_ZOOM = 300;
+const ZOOM_STEP = 10;
 
 @replaceableComponent("views.elements.ImageView")
 export default class ImageView extends React.Component {
@@ -131,7 +132,7 @@ export default class ImageView extends React.Component {
         }
 
         this.setState({
-            zoom: this.state.zoom + 10,
+            zoom: this.state.zoom + ZOOM_STEP,
         });
     };
 
@@ -145,7 +146,7 @@ export default class ImageView extends React.Component {
             return;
         }
         this.setState({
-            zoom: this.state.zoom - 10,
+            zoom: this.state.zoom - ZOOM_STEP,
         });
     }
 

From 7b6d393754c1f802773f791eb3c7da451dfeed75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 15 Mar 2021 19:24:44 +0100
Subject: [PATCH 076/104] Add a missing space
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>
---
 src/components/views/elements/ImageView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 7808ec5386..fc904412ab 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -93,7 +93,7 @@ export default class ImageView extends React.Component {
     onWheel = (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
-        const newZoom =this.state.zoom - ev.deltaY;
+        const newZoom = this.state.zoom - ev.deltaY;
 
         if (newZoom <= MIN_ZOOM) {
             this.setState({

From e45035582d54357821baaccfde89e59f1b8693ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 15 Mar 2021 19:28:21 +0100
Subject: [PATCH 077/104] Add ZOOM_COEFFICIENT with value of 10
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>
---
 src/components/views/elements/ImageView.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index fc904412ab..dc51ff019d 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -33,7 +33,10 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const MIN_ZOOM = 100;
 const MAX_ZOOM = 300;
+// This is used for the buttons
 const ZOOM_STEP = 10;
+// This is used for mouse wheel events
+const ZOOM_COEFFICIENT = 10;
 
 @replaceableComponent("views.elements.ImageView")
 export default class ImageView extends React.Component {
@@ -93,7 +96,7 @@ export default class ImageView extends React.Component {
     onWheel = (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
-        const newZoom = this.state.zoom - ev.deltaY;
+        const newZoom = this.state.zoom - (ev.deltaY * ZOOM_COEFFICIENT);
 
         if (newZoom <= MIN_ZOOM) {
             this.setState({

From 8f6f9cd6faf54b921e0112f1e1af26812b9c44f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 15 Mar 2021 20:37:39 +0100
Subject: [PATCH 078/104] Remove some unnecessary CSS and set MIN_ZOOM to 95
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     | 5 -----
 src/components/views/elements/ImageView.js | 4 ++--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 51e72b7c83..90f265b0c1 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -35,11 +35,6 @@ limitations under the License.
 
 .mx_ImageView_image {
     pointer-events: all;
-
-    max-width: 95vw;
-    max-height: 95vh;
-    min-width: 100px;
-    min-height: 100px;
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index dc51ff019d..a8e70fe700 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -31,7 +31,7 @@ import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-const MIN_ZOOM = 100;
+const MIN_ZOOM = 95;
 const MAX_ZOOM = 300;
 // This is used for the buttons
 const ZOOM_STEP = 10;
@@ -61,7 +61,7 @@ export default class ImageView extends React.Component {
         super(props);
         this.state = {
             rotation: 0,
-            zoom: 100,
+            zoom: 95,
             translationX: 0,
             translationY: 0,
             moving: false,

From c96d2621a079115dcc9ca7ae0d93f4cb45f8903f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 16 Mar 2021 19:57:14 +0100
Subject: [PATCH 079/104] Set max-width and MIN_ZOOM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This might have some side effects but as far as I can tell they shouldn't be too problematic

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

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 90f265b0c1..c9183a9eab 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -35,6 +35,8 @@ limitations under the License.
 
 .mx_ImageView_image {
     pointer-events: all;
+    max-width: 95%;
+    max-height: 95%;
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index a8e70fe700..d3be3c1d54 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -31,7 +31,7 @@ import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-const MIN_ZOOM = 95;
+const MIN_ZOOM = 100;
 const MAX_ZOOM = 300;
 // This is used for the buttons
 const ZOOM_STEP = 10;

From e5a563f88740310f841d42e20ef6050b02372b99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 08:17:05 +0200
Subject: [PATCH 080/104] Close ImageView after forward click
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>
---
 src/components/views/context_menus/MessageContextMenu.js | 4 ++++
 src/components/views/elements/ImageView.js               | 1 +
 2 files changed, 5 insertions(+)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 56f070ba36..cce628120c 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -52,6 +52,9 @@ export default class MessageContextMenu extends React.Component {
 
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func,
+
+        /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+        onCloseDialog: PropTypes.func,
     };
 
     state = {
@@ -194,6 +197,7 @@ export default class MessageContextMenu extends React.Component {
             action: 'forward_event',
             event: this.props.mxEvent,
         });
+        this.props.onCloseDialog();
         this.closeMenu();
     };
 
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index d3be3c1d54..f39ac8ba19 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -224,6 +224,7 @@ export default class ImageView extends React.Component {
                         mxEvent={this.props.mxEvent}
                         permalinkCreator={this.props.permalinkCreator}
                         onFinished={this.onCloseContextMenu}
+                        onCloseDialog={this.props.onFinished}
                     />
                 </ContextMenu>
             );

From 535ae086b4f17b74a8a416814977caee1055af4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 08:31:42 +0200
Subject: [PATCH 081/104] Make sender bold
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     | 4 ++++
 src/components/views/elements/ImageView.js | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index c9183a9eab..b98a9baf90 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -62,6 +62,10 @@ limitations under the License.
     flex-direction: column;
 }
 
+.mx_ImageView_info_sender {
+    font-weight: bold;
+}
+
 .mx_ImageView_toolbar {
     padding-right: 16px;
     pointer-events: all;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index f39ac8ba19..e2d900117a 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -266,6 +266,11 @@ export default class ImageView extends React.Component {
             }
 
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const sender = (
+                <div className="mx_ImageView_info_sender">
+                    {senderName}
+                </div>
+            );
             const messageTimestamp = (
                 <a
                     href={permalink}
@@ -288,7 +293,7 @@ export default class ImageView extends React.Component {
                 <div className="mx_ImageView_info_wrapper">
                     {avatar}
                     <div className="mx_ImageView_info">
-                        {senderName}
+                        {sender}
                         {messageTimestamp}
                     </div>
                 </div>

From 12b3661dd615ae8853ef415eb293b5b3bc5b1e34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 09:03:28 +0200
Subject: [PATCH 082/104] Set color-hex-case to null
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is both lowercase and uppercase in some files so this should just make life easier if someone is using a stylelinter

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .stylelintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 313102ea83..0e6de7000f 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -4,6 +4,7 @@ module.exports = {
         "stylelint-scss",
     ],
     "rules": {
+        "color-hex-case": null,
         "indentation": 4,
         "comment-empty-line-before": null,
         "declaration-empty-line-before": null,

From e79254e7bf2763433caea02a1503740d8fd34e20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 09:07:36 +0200
Subject: [PATCH 083/104] Set opacity of lightboxes to 95 in light theme
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/_common.scss                           | 2 +-
 res/themes/dark/css/_dark.scss                 | 3 ++-
 res/themes/legacy-dark/css/_legacy-dark.scss   | 1 +
 res/themes/legacy-light/css/_legacy-light.scss | 1 +
 res/themes/light/css/_light.scss               | 1 +
 5 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 16d3f29726..87fa4578b1 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -303,7 +303,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
-    opacity: 0.85;
+    opacity: $lightbox-background-bg-opacity;
     background-color: $lightbox-background-bg-color;
 }
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index cf1fd17e58..bd7057c3e4 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -85,6 +85,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 85%;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #21262c;
@@ -242,7 +243,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index ff58314bdd..9b2365a621 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -83,6 +83,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 85%;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #e7e7e7;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 121366decb..7cb7082c4e 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -127,6 +127,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 95%;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index f082247754..dc26c4d652 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -118,6 +118,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 95%;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);

From 80854ab6bbd1ae8169cfbfd26cc83d77452aa27d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 09:25:21 +0200
Subject: [PATCH 084/104] Don't show seconds in ImageView
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>
---
 src/DateUtils.ts                               |  4 ++--
 src/components/views/elements/ImageView.js     |  5 ++---
 .../views/messages/MessageTimestamp.js         | 18 ++++++++++++------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 9b1edf0775..e4a1175d88 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -97,7 +97,7 @@ export function formatFullDateNoTime(date: Date): string {
     });
 }
 
-export function formatFullDate(date: Date, showTwelveHour = false): string {
+export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true): string {
     const days = getDaysArray();
     const months = getMonthsArray();
     return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
@@ -105,7 +105,7 @@ export function formatFullDate(date: Date, showTwelveHour = false): string {
         monthName: months[date.getMonth()],
         day: date.getDate(),
         fullYear: date.getFullYear(),
-        time: formatFullTime(date, showTwelveHour),
+        time: showSeconds ? formatFullTime(date, showTwelveHour) : formatTime(date, showTwelveHour),
     });
 }
 
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e2d900117a..68a360d4b9 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -275,11 +275,10 @@ export default class ImageView extends React.Component {
                 <a
                     href={permalink}
                     onClick={this.onPermalinkClicked}
-                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour, false)}
                 >
-                    <MessageTimestamp showFullDate={true} showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                    <MessageTimestamp showFullDate={true} showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} showSeconds={false} />
                 </a>
-
             );
             const avatar = (
                 <MemberAvatar
diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index 320f09d295..a7f350adcd 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {formatFullDate, formatTime} from '../../../DateUtils';
+import {formatFullDate, formatTime, formatFullTime} from '../../../DateUtils';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MessageTimestamp")
@@ -26,17 +26,23 @@ export default class MessageTimestamp extends React.Component {
         ts: PropTypes.number.isRequired,
         showTwelveHour: PropTypes.bool,
         showFullDate: PropTypes.bool,
+        showSeconds: PropTypes.bool,
     };
 
     render() {
         const date = new Date(this.props.ts);
+        let timestamp;
+        if (this.props.showFullDate) {
+            timestamp = formatFullDate(date, this.props.showTwelveHour, this.props.showSeconds);
+        } else if (this.props.showSeconds) {
+            timestamp = formatFullTime(date, this.props.showTwelveHour);
+        } else {
+            timestamp = formatTime(date, this.props.showTwelveHour);
+        }
+
         return (
             <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
-                {
-                    this.props.showFullDate ?
-                    formatFullDate(date, this.props.showTwelveHour) :
-                    formatTime(date, this.props.showTwelveHour)
-                }
+                {timestamp}
             </span>
         );
     }

From eb83ae0a9faec8b538a2f9baaf17f834f258c3d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 09:40:13 +0200
Subject: [PATCH 085/104] Use MIN_ZOOM in contructor
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>
---
 src/components/views/elements/ImageView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 68a360d4b9..e97c39790e 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -61,7 +61,7 @@ export default class ImageView extends React.Component {
         super(props);
         this.state = {
             rotation: 0,
-            zoom: 95,
+            zoom: MIN_ZOOM,
             translationX: 0,
             translationY: 0,
             moving: false,

From 33a1006488d1d12e63c2bc8cdd164076396d764c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:01:41 +0200
Subject: [PATCH 086/104] Iterate mouse actions and cursor behaviour
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>
---
 src/components/views/elements/ImageView.js | 26 +++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e97c39790e..bec7a35b79 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -74,6 +74,8 @@ export default class ImageView extends React.Component {
     initY = 0;
     lastX = 0;
     lastY = 0;
+    previousX = 0;
+    previousY = 0;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener
@@ -190,6 +192,8 @@ export default class ImageView extends React.Component {
         ev.preventDefault();
 
         this.setState({moving: true});
+        this.previousX = this.state.translationX;
+        this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.lastX;
         this.initY = ev.pageY - this.lastY;
     }
@@ -209,6 +213,18 @@ export default class ImageView extends React.Component {
     }
 
     onEndMoving = () => {
+        // Zoom in or out if we haven't moved much
+        if (
+            this.state.moving === true &&
+            Math.abs(this.state.translationX - this.previousX) < 10 &&
+            Math.abs(this.state.translationY - this.previousY) < 10
+        ) {
+            if (this.state.zoom === MIN_ZOOM) {
+                this.setState({zoom: MAX_ZOOM});
+            } else {
+                this.setState({zoom: MIN_ZOOM});
+            }
+        }
         this.setState({moving: false});
     }
 
@@ -240,6 +256,14 @@ export default class ImageView extends React.Component {
     render() {
         const showEventMeta = !!this.props.mxEvent;
 
+        let cursor;
+        if (this.state.moving) {
+            cursor= "grabbing";
+        } else if (this.state.zoom === MIN_ZOOM) {
+            cursor = "zoom-in";
+        } else {
+            cursor = "zoom-out";
+        }
         const rotationDegrees = this.state.rotation + "deg";
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
@@ -249,7 +273,7 @@ export default class ImageView extends React.Component {
         // we would apply the translation to an already rotated
         // image causing it translate in the wrong direction.
         const style = {
-            cursor: this.state.moving ? "grabbing" : "grab",
+            cursor: cursor,
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoomPercentage})

From 7068996b601ba2a1c19066ed82af6766c8f2ac02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:09:53 +0200
Subject: [PATCH 087/104] Animate zooming
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>
---
 src/components/views/elements/ImageView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index bec7a35b79..33a4b3a748 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -274,6 +274,7 @@ export default class ImageView extends React.Component {
         // image causing it translate in the wrong direction.
         const style = {
             cursor: cursor,
+            transition: this.state.moving ? null : "transform 200ms ease 0s",
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoomPercentage})

From 2ff34000fd0bc6fcd9aa460b729fb73f7fdd3091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:16:42 +0200
Subject: [PATCH 088/104] Reset translation with zoom out
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>
---
 src/components/views/elements/ImageView.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 33a4b3a748..89f6780cf9 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -222,7 +222,11 @@ export default class ImageView extends React.Component {
             if (this.state.zoom === MIN_ZOOM) {
                 this.setState({zoom: MAX_ZOOM});
             } else {
-                this.setState({zoom: MIN_ZOOM});
+                this.setState({
+                    zoom: MIN_ZOOM,
+                    translationX: 0,
+                    translationY: 0,
+                });
             }
         }
         this.setState({moving: false});

From 722178e26e92995d19e67bd2dee47c542fba9a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:22:10 +0200
Subject: [PATCH 089/104] Don't return false
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>
---
 src/components/views/elements/ImageView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 89f6780cf9..ef2cc7d2ce 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -202,7 +202,7 @@ export default class ImageView extends React.Component {
         ev.stopPropagation();
         ev.preventDefault();
 
-        if (!this.state.moving) return false;
+        if (!this.state.moving) return;
 
         this.lastX = ev.pageX - this.initX;
         this.lastY = ev.pageY - this.initY;

From 429c945bbf5979fce25b2bc3e21dd6298bf65b7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:37:42 +0200
Subject: [PATCH 090/104] Don't allow translation when zoomed out
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>
---
 src/components/views/elements/ImageView.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index ef2cc7d2ce..cc20e04135 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -191,6 +191,12 @@ export default class ImageView extends React.Component {
         ev.stopPropagation();
         ev.preventDefault();
 
+        // Zoom in if we are completely zoomed out
+        if (this.state.zoom === MIN_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
         this.setState({moving: true});
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
@@ -213,21 +219,17 @@ export default class ImageView extends React.Component {
     }
 
     onEndMoving = () => {
-        // Zoom in or out if we haven't moved much
+        // Zoom out if we haven't moved much
         if (
             this.state.moving === true &&
             Math.abs(this.state.translationX - this.previousX) < 10 &&
             Math.abs(this.state.translationY - this.previousY) < 10
         ) {
-            if (this.state.zoom === MIN_ZOOM) {
-                this.setState({zoom: MAX_ZOOM});
-            } else {
-                this.setState({
-                    zoom: MIN_ZOOM,
-                    translationX: 0,
-                    translationY: 0,
-                });
-            }
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
         }
         this.setState({moving: false});
     }

From 12a36d1a30d80fb5fb745ddfd4e5de9efcef799a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:44:40 +0200
Subject: [PATCH 091/104] This is hopefully not true anymore
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 | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index b98a9baf90..2672eef849 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* This has got to be the most fragile piece of CSS ever written.
-   But empirically it works on Chrome/FF/Safari
- */
-
 .mx_ImageView {
     display: flex;
     width: 100%;

From fd8e785a5e4dec0c87b8bc0c8a48d9c9ed19d4b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 3 Apr 2021 15:06:27 +0200
Subject: [PATCH 092/104] Why don't I convert this to Typescript while I am
 here?
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>
---
 .../elements/{ImageView.js => ImageView.tsx}  | 218 ++++++++++--------
 1 file changed, 118 insertions(+), 100 deletions(-)
 rename src/components/views/elements/{ImageView.js => ImageView.tsx} (64%)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.tsx
similarity index 64%
rename from src/components/views/elements/ImageView.js
rename to src/components/views/elements/ImageView.tsx
index cc20e04135..e54e519707 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import {Key} from "../../../Keyboard";
@@ -30,6 +29,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 
 const MIN_ZOOM = 100;
 const MAX_ZOOM = 300;
@@ -38,25 +39,34 @@ const ZOOM_STEP = 10;
 // This is used for mouse wheel events
 const ZOOM_COEFFICIENT = 10;
 
+interface IProps {
+    src: string, // the source of the image being displayed
+    name?: string, // the main title ('name') for the image
+    link?: string, // the link (if any) applied to the name of the image
+    width?: number, // width of the image src in pixels
+    height?: number, // height of the image src in pixels
+    fileSize?: number, // size of the image src in bytes
+    onFinished(): void, // callback when the lightbox is dismissed
+
+    // the event (if any) that the Image is displaying. Used for event-specific stuff like
+    // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
+    // properties above, which let us use lightboxes to display images which aren't associated
+    // with events.
+    mxEvent: MatrixEvent,
+    permalinkCreator: RoomPermalinkCreator,
+}
+
+interface IState {
+    rotation: number,
+    zoom: number,
+    translationX: number,
+    translationY: number,
+    moving: boolean,
+    contextMenuDisplayed: boolean,
+}
+
 @replaceableComponent("views.elements.ImageView")
-export default class ImageView extends React.Component {
-    static propTypes = {
-        src: PropTypes.string.isRequired, // the source of the image being displayed
-        name: PropTypes.string, // the main title ('name') for the image
-        link: PropTypes.string, // the link (if any) applied to the name of the image
-        width: PropTypes.number, // width of the image src in pixels
-        height: PropTypes.number, // height of the image src in pixels
-        fileSize: PropTypes.number, // size of the image src in bytes
-        onFinished: PropTypes.func.isRequired, // callback when the lightbox is dismissed
-
-        // the event (if any) that the Image is displaying. Used for event-specific stuff like
-        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
-        // properties above, which let us use lightboxes to display images which aren't associated
-        // with events.
-        mxEvent: PropTypes.object,
-        permalinkCreator: PropTypes.object,
-    };
-
+export default class ImageView extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
@@ -69,7 +79,9 @@ export default class ImageView extends React.Component {
         };
     }
 
-    contextMenuButton = createRef();
+    contextMenuButton = createRef<any>();
+    focusLock = createRef<any>();
+
     initX = 0;
     initY = 0;
     lastX = 0;
@@ -80,14 +92,14 @@ export default class ImageView extends React.Component {
     componentDidMount() {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
-        this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
+        this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
     }
 
     componentWillUnmount() {
-        this.focusLock.removeEventListener('wheel', this.onWheel);
+        this.focusLock.current.removeEventListener('wheel', this.onWheel);
     }
 
-    onKeyDown = (ev) => {
+    private onKeyDown = (ev: KeyboardEvent) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
             ev.preventDefault();
@@ -95,7 +107,7 @@ export default class ImageView extends React.Component {
         }
     };
 
-    onWheel = (ev) => {
+    private onWheel = (ev: WheelEvent) => {
         ev.stopPropagation();
         ev.preventDefault();
         const newZoom = this.state.zoom - (ev.deltaY * ZOOM_COEFFICIENT);
@@ -116,21 +128,21 @@ export default class ImageView extends React.Component {
         this.setState({
             zoom: newZoom,
         });
-    }
+    };
 
-    onRotateCounterClockwiseClick = () => {
+    private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur - 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onRotateClockwiseClick = () => {
+    private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = (cur + 90) % 360;
         this.setState({ rotation: rotationDegrees });
     };
 
-    onZoomInClick = () => {
+    private onZoomInClick = () => {
         if (this.state.zoom >= MAX_ZOOM) {
             this.setState({zoom: MAX_ZOOM});
             return;
@@ -141,7 +153,7 @@ export default class ImageView extends React.Component {
         });
     };
 
-    onZoomOutClick = () => {
+    private onZoomOutClick = () => {
         if (this.state.zoom <= MIN_ZOOM) {
             this.setState({
                 zoom: MIN_ZOOM,
@@ -153,28 +165,28 @@ export default class ImageView extends React.Component {
         this.setState({
             zoom: this.state.zoom - ZOOM_STEP,
         });
-    }
+    };
 
-    onDownloadClick = () => {
+    private onDownloadClick = () => {
         const a = document.createElement("a");
         a.href = this.props.src;
         a.download = this.props.name;
         a.click();
-    }
+    };
 
-    onOpenContextMenu = () => {
+    private onOpenContextMenu = () => {
         this.setState({
             contextMenuDisplayed: true,
         });
-    }
+    };
 
-    onCloseContextMenu = () => {
+    private onCloseContextMenu = () => {
         this.setState({
             contextMenuDisplayed: false,
         });
-    }
+    };
 
-    onPermalinkClicked = (ev) => {
+    private onPermalinkClicked = (ev: React.MouseEvent) => {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Element when clicked.
         ev.preventDefault();
@@ -187,7 +199,7 @@ export default class ImageView extends React.Component {
         this.props.onFinished();
     };
 
-    onStartMoving = (ev) => {
+    private onStartMoving = (ev: React.MouseEvent) => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -202,9 +214,9 @@ export default class ImageView extends React.Component {
         this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.lastX;
         this.initY = ev.pageY - this.lastY;
-    }
+    };
 
-    onMoving = (ev) => {
+    private onMoving = (ev: React.MouseEvent) => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -216,9 +228,9 @@ export default class ImageView extends React.Component {
             translationX: this.lastX,
             translationY: this.lastY,
         });
-    }
+    };
 
-    onEndMoving = () => {
+    private onEndMoving = () => {
         // Zoom out if we haven't moved much
         if (
             this.state.moving === true &&
@@ -232,9 +244,9 @@ export default class ImageView extends React.Component {
             });
         }
         this.setState({moving: false});
-    }
+    };
 
-    renderContextMenu() {
+    private renderContextMenu() {
         let contextMenu = null;
         if (this.state.contextMenuDisplayed) {
             contextMenu = (
@@ -306,9 +318,14 @@ export default class ImageView extends React.Component {
                 <a
                     href={permalink}
                     onClick={this.onPermalinkClicked}
-                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour, false)}
+                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
                 >
-                    <MessageTimestamp showFullDate={true} showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} showSeconds={false} />
+                    <MessageTimestamp
+                        showFullDate={true}
+                        showTwelveHour={showTwelveHour}
+                        ts={mxEvent.getTs()}
+                        showSeconds={false}
+                    />
                 </a>
             );
             const avatar = (
@@ -345,63 +362,64 @@ export default class ImageView extends React.Component {
                     role: "dialog",
                 }}
                 className="mx_ImageView"
-                ref={ref => this.focusLock = ref}
+                ref={this.focusLock}
             >
-                    <div className="mx_ImageView_panel">
-                        {info}
-                        <div className="mx_ImageView_toolbar">
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                                title={_t("Rotate Right")}
-                                onClick={this.onRotateClockwiseClick}>
-                            </AccessibleTooltipButton>
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_rotateCCW"
-                                title={_t("Rotate Left")}
-                                onClick={ this.onRotateCounterClockwiseClick }>
-                            </AccessibleTooltipButton>
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                                title={_t("Zoom out")}
-                                onClick={ this.onZoomOutClick }>
-                            </AccessibleTooltipButton>
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                                title={_t("Zoom in")}
-                                onClick={ this.onZoomInClick }>
-                            </AccessibleTooltipButton>
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_download"
-                                title={_t("Download")}
-                                onClick={ this.onDownloadClick }>
-                            </AccessibleTooltipButton>
-                            <ContextMenuTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_more"
-                                title={_t("Options")}
-                                onClick={this.onOpenContextMenu}
-                                inputRef={this.contextMenuButton}
-                            />
-                            <AccessibleTooltipButton
-                                className="mx_ImageView_button mx_ImageView_button_close"
-                                title={_t("Close")}
-                                onClick={ this.props.onFinished }>
-                            </AccessibleTooltipButton>
-                            {this.renderContextMenu()}
-                        </div>
-                    </div>
-                    <div className="mx_ImageView_image_wrapper">
-                        <img
-                            src={this.props.src}
-                            title={this.props.name}
-                            style={style}
-                            className="mx_ImageView_image"
-                            draggable={true}
-                            onMouseDown={this.onStartMoving}
-                            onMouseMove={this.onMoving}
-                            onMouseUp={this.onEndMoving}
-                            onMouseLeave={this.onEndMoving}
+                <div className="mx_ImageView_panel">
+                    {info}
+                    <div className="mx_ImageView_toolbar">
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                            title={_t("Rotate Left")}
+                            onClick={ this.onRotateCounterClockwiseClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                            title={_t("Zoom out")}
+                            onClick={ this.onZoomOutClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                            title={_t("Zoom in")}
+                            onClick={ this.onZoomInClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_download"
+                            title={_t("Download")}
+                            onClick={ this.onDownloadClick }>
+                        </AccessibleTooltipButton>
+                        <ContextMenuTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_more"
+                            title={_t("Options")}
+                            onClick={this.onOpenContextMenu}
+                            inputRef={this.contextMenuButton}
+                            isExpanded={this.state.contextMenuDisplayed}
                         />
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_close"
+                            title={_t("Close")}
+                            onClick={ this.props.onFinished }>
+                        </AccessibleTooltipButton>
+                        {this.renderContextMenu()}
                     </div>
+                </div>
+                <div className="mx_ImageView_image_wrapper">
+                    <img
+                        src={this.props.src}
+                        title={this.props.name}
+                        style={style}
+                        className="mx_ImageView_image"
+                        draggable={true}
+                        onMouseDown={this.onStartMoving}
+                        onMouseMove={this.onMoving}
+                        onMouseUp={this.onEndMoving}
+                        onMouseLeave={this.onEndMoving}
+                    />
+                </div>
             </FocusLock>
         );
     }

From 88a881baec84135df5d2670858fbf121cdd7fc33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 3 Apr 2021 16:19:22 +0200
Subject: [PATCH 093/104] ZOOM_DISTANCE into a const
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>
---
 src/components/views/elements/ImageView.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index e54e519707..e58601f142 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -38,6 +38,9 @@ const MAX_ZOOM = 300;
 const ZOOM_STEP = 10;
 // This is used for mouse wheel events
 const ZOOM_COEFFICIENT = 10;
+// If we have moved only this much we can zoom
+const ZOOM_DISTANCE = 10;
+
 
 interface IProps {
     src: string, // the source of the image being displayed
@@ -234,8 +237,8 @@ export default class ImageView extends React.Component<IProps, IState> {
         // Zoom out if we haven't moved much
         if (
             this.state.moving === true &&
-            Math.abs(this.state.translationX - this.previousX) < 10 &&
-            Math.abs(this.state.translationY - this.previousY) < 10
+            Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE &&
+            Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
         ) {
             this.setState({
                 zoom: MIN_ZOOM,

From cb02c39d7f22c79196fe8ca6cc63091a5f0b5a94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:01:14 +0200
Subject: [PATCH 094/104] Add name to copyright
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>
---
 src/components/views/elements/ImageView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index e58601f142..3674e91a4a 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020, 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From 4a40f67e755c3b4c2118fc91bed6428723407a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:02:38 +0200
Subject: [PATCH 095/104] Make private
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>
---
 src/components/views/elements/ImageView.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 3674e91a4a..79e657c682 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -83,15 +83,15 @@ export default class ImageView extends React.Component<IProps, IState> {
         };
     }
 
-    contextMenuButton = createRef<any>();
-    focusLock = createRef<any>();
+    private contextMenuButton = createRef<any>();
+    private focusLock = createRef<any>();
 
-    initX = 0;
-    initY = 0;
-    lastX = 0;
-    lastY = 0;
-    previousX = 0;
-    previousY = 0;
+    private initX = 0;
+    private initY = 0;
+    private lastX = 0;
+    private lastY = 0;
+    private previousX = 0;
+    private previousY = 0;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener

From 90f9d20f45168ce498caa569e541774bab5edcf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:03:10 +0200
Subject: [PATCH 096/104] Add comment about refs to functional components
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>
---
 src/components/views/elements/ImageView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 79e657c682..2bcdaf15cc 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -83,6 +83,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         };
     }
 
+    // XXX: Refs to functional components
     private contextMenuButton = createRef<any>();
     private focusLock = createRef<any>();
 

From 7f496c7bf572d1a12bd2fb6d6c887ac86c16e646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:04:07 +0200
Subject: [PATCH 097/104] Add comment: same on all themes
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 2672eef849..93ebcc2d56 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -111,7 +111,7 @@ limitations under the License.
 
 .mx_ImageView_button_close {
     border-radius: 100%;
-    background: #21262c;
+    background: #21262c; // same on all themes
     &::before {
         width: 32px;
         height: 32px;

From b723092ed2e26f24c73ce15bff7bbf489af10968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:05:49 +0200
Subject: [PATCH 098/104] Add null check
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>
---
 src/components/views/context_menus/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index cce628120c..af7b7178c7 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -197,7 +197,7 @@ export default class MessageContextMenu extends React.Component {
             action: 'forward_event',
             event: this.props.mxEvent,
         });
-        this.props.onCloseDialog();
+        if (this.props.onCloseDialog) this.props.onCloseDialog();
         this.closeMenu();
     };
 

From 829bef45a2e25792b61e01444a3b7fb7f5ffac10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:13:42 +0200
Subject: [PATCH 099/104] Close dialog on redact
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>
---
 src/components/views/context_menus/MessageContextMenu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index af7b7178c7..d2ae368cec 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -150,6 +150,7 @@ export default class MessageContextMenu extends React.Component {
                         undefined,
                         reason ? { reason } : {},
                     );
+                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                 } catch (e) {
                     const code = e.errcode || e.statusCode;
                     // only show the dialog if failing for something other than a network error

From 86dd81cda08cfb8ae6f37e16dc08bba2dc1ed383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Apr 2021 08:16:52 +0200
Subject: [PATCH 100/104] Fix rotation animation when rotating 360 deg
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>
---
 src/components/views/elements/ImageView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 2bcdaf15cc..05e71b67bf 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -137,13 +137,13 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = (cur - 90) % 360;
+        const rotationDegrees = cur - 90;
         this.setState({ rotation: rotationDegrees });
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = (cur + 90) % 360;
+        const rotationDegrees = cur + 90;
         this.setState({ rotation: rotationDegrees });
     };
 

From f1c80fceded8891758a92a865e1db731d061b9e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 13 Apr 2021 08:04:50 +0200
Subject: [PATCH 101/104] Call onCloseDialog straigh away
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This avoids some delay in the dialog disappearing

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/context_menus/MessageContextMenu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index d2ae368cec..f86cd26f32 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -144,13 +144,13 @@ export default class MessageContextMenu extends React.Component {
 
                 const cli = MatrixClientPeg.get();
                 try {
+                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                     await cli.redactEvent(
                         this.props.mxEvent.getRoomId(),
                         this.props.mxEvent.getId(),
                         undefined,
                         reason ? { reason } : {},
                     );
-                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                 } catch (e) {
                     const code = e.errcode || e.statusCode;
                     // only show the dialog if failing for something other than a network error
@@ -194,11 +194,11 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
+        if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
             action: 'forward_event',
             event: this.props.mxEvent,
         });
-        if (this.props.onCloseDialog) this.props.onCloseDialog();
         this.closeMenu();
     };
 

From e1446f01e4ac218ba5b604e445678949897bbdb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 13 Apr 2021 08:07:17 +0200
Subject: [PATCH 102/104] Make ImageView static
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>
---
 src/components/views/avatars/RoomAvatar.tsx      | 2 +-
 src/components/views/messages/MImageBody.js      | 2 +-
 src/components/views/messages/RoomAvatarEvent.js | 2 +-
 src/components/views/right_panel/UserInfo.tsx    | 2 +-
 src/components/views/rooms/LinkPreviewWidget.js  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 31245b44b7..ad0eb45a52 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -129,7 +129,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             name: this.props.room.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     public render() {
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6135643ebd..5af2063c84 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -118,7 +118,7 @@ export default class MImageBody extends React.Component {
                 params.fileSize = content.info.size;
             }
 
-            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
         }
     }
 
diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js
index 00aaf9bfda..41eada3193 100644
--- a/src/components/views/messages/RoomAvatarEvent.js
+++ b/src/components/views/messages/RoomAvatarEvent.js
@@ -49,7 +49,7 @@ export default class RoomAvatarEvent extends React.Component {
             src: httpUrl,
             name: text,
         };
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 12a6a2a311..d59d5ba632 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -1431,7 +1431,7 @@ const UserInfoHeader: React.FC<{
             name: member.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     }, [member]);
 
     const avatarElement = (
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 536abf57fc..c04bb6cb7c 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -96,7 +96,7 @@ export default class LinkPreviewWidget extends React.Component {
             link: this.props.link,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {

From b1091a22a3777392ed39e98b619de9d71e0a35d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 13 Apr 2021 08:11:09 +0200
Subject: [PATCH 103/104] Don't render context menu button if mxEvent is
 missing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button is useless and doesn't work if we're viewing an avatar

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/elements/ImageView.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 05e71b67bf..35f494025c 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -359,6 +359,19 @@ export default class ImageView extends React.Component<IProps, IState> {
             );
         }
 
+        let contextMenuButton;
+        if (this.props.mxEvent) {
+            contextMenuButton = (
+                <ContextMenuTooltipButton
+                    className="mx_ImageView_button mx_ImageView_button_more"
+                    title={_t("Options")}
+                    onClick={this.onOpenContextMenu}
+                    inputRef={this.contextMenuButton}
+                    isExpanded={this.state.contextMenuDisplayed}
+                />
+            );
+        }
+
         return (
             <FocusLock
                 returnFocus={true}
@@ -397,13 +410,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                             title={_t("Download")}
                             onClick={ this.onDownloadClick }>
                         </AccessibleTooltipButton>
-                        <ContextMenuTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_more"
-                            title={_t("Options")}
-                            onClick={this.onOpenContextMenu}
-                            inputRef={this.contextMenuButton}
-                            isExpanded={this.state.contextMenuDisplayed}
-                        />
+                        {contextMenuButton}
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("Close")}

From f9fde3670dd49ab0845ae903971ecff9f10c9657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 13 Apr 2021 08:15:42 +0200
Subject: [PATCH 104/104] Set target to _blank
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>
---
 src/components/views/elements/ImageView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 35f494025c..dad62521da 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -176,6 +176,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         const a = document.createElement("a");
         a.href = this.props.src;
         a.download = this.props.name;
+        a.target = "_blank";
         a.click();
     };