From 7c81526805e97e45b7faf88718874c77e705b941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 22 Jul 2021 21:52:36 +0200
Subject: [PATCH] Take panel height into account
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 | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 56c81c937e..f589ba7dc0 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -45,6 +45,8 @@ const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
+const PANEL_HEIGHT = 68;
+
 interface IProps extends IDialogProps {
     src: string; // the source of the image being displayed
     name?: string; // the main title ('name') for the image
@@ -91,8 +93,17 @@ export default class ImageView extends React.Component<IProps, IState> {
             minZoom: MAX_SCALE,
             maxZoom: MAX_SCALE,
             rotation: 0,
-            translationX: thumbnailInfo?.positionX + (thumbnailInfo?.width / 2) - (UIStore.instance.windowWidth / 2),
-            translationY: thumbnailInfo?.positionY + (thumbnailInfo?.height / 2) - (UIStore.instance.windowHeight / 2),
+            translationX: (
+                thumbnailInfo?.positionX +
+                (thumbnailInfo?.width / 2) -
+                (UIStore.instance.windowWidth / 2)
+            ),
+            translationY: (
+                thumbnailInfo?.positionY +
+                (thumbnailInfo?.height / 2) -
+                (UIStore.instance.windowHeight / 2) -
+                (PANEL_HEIGHT / 2)
+            ),
             moving: false,
             contextMenuDisplayed: false,
         };
@@ -125,7 +136,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         this.image.current.removeEventListener("load", this.imageLoaded);
     }
 
-    private imageLoaded =() => {
+    private imageLoaded = () => {
         this.setZoomAndRotation();
         this.setState({
             translationX: 0,