From cfa70568bbb5a34682f1938074058974ed4fbbe5 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 17 Aug 2021 14:36:38 +0300
Subject: [PATCH] [DE] Draw arrows when move review balloons top or bottom

---
 apps/common/main/lib/view/ReviewPopover.js    | 56 ++++++++++-----
 apps/common/main/resources/less/comments.less | 69 ++++++++++++++-----
 2 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/apps/common/main/lib/view/ReviewPopover.js b/apps/common/main/lib/view/ReviewPopover.js
index a4ffc454e..36c6f6ac3 100644
--- a/apps/common/main/lib/view/ReviewPopover.js
+++ b/apps/common/main/lib/view/ReviewPopover.js
@@ -738,7 +738,8 @@ define([
                         leftPos = Math.min(sdkBoundsLeft + posX + this.arrow.width, sdkBoundsLeft + this.sdkBounds.width - this.$window.outerWidth() - 25);
                         leftPos = Math.max(sdkBoundsLeft + sdkPanelLeftWidth + this.arrow.width, leftPos);
 
-                        arrowView.removeClass('right').addClass('left');
+                        arrowView.removeClass('right top bottom').addClass('left');
+                        arrowView.css({left: ''});
 
                         if (!_.isUndefined(leftX)) {
                             windowWidth = this.$window.outerWidth();
@@ -805,6 +806,7 @@ define([
                 sdkPanelTop = '',
                 sdkPanelHeight = 0,
                 arrowPosY = 0,
+                arrowPosX = 0,
                 windowHeight = 0,
                 outerHeight = 0,
                 topPos = 0,
@@ -842,8 +844,10 @@ define([
 
                             var movePos = this.isOverCursor();
                             if (movePos) {
-                                var newTopDown = movePos[1] + sdkPanelHeight,// try move down
-                                    newTopUp = movePos[0] + sdkPanelHeight; // try move up
+                                var leftPos = parseInt(this.$window.css('left')) - this.arrow.width,
+                                    newTopDown = movePos[1][1] + sdkPanelHeight + this.arrow.width,// try move down
+                                    newTopUp = movePos[0][1] + sdkPanelHeight - this.arrow.width, // try move up
+                                    isMoveDown = false;
                                 if (newTopDown + outerHeight>sdkBoundsTop + sdkBoundsHeight) {
                                     var diffDown = sdkBoundsTop + sdkBoundsHeight - newTopDown;
                                     if (newTopUp - outerHeight<sdkBoundsTop) {
@@ -859,14 +863,24 @@ define([
                                                 maxHeight: diffDown + 'px',
                                                 top: newTopDown + 'px'
                                             });
+                                            isMoveDown = true;
                                             commentsView.css({height: diffDown - 3 + 'px'});
                                         }
                                     } else
                                         this.$window.css('top', newTopUp - outerHeight + 'px'); // move up
-                                } else
+                                } else {
+                                    isMoveDown = true;
                                     this.$window.css('top', newTopDown + 'px'); // move down
-                                arrowView.addClass('hidden');
-
+                                }
+                                leftPos -= this.arrow.height;
+                                this.$window.css('left', leftPos + 'px');
+                                arrowPosX = movePos[isMoveDown ? 1 : 0][0];
+                                arrowPosX = Math.max(0, arrowPosX - leftPos - this.arrow.height/2);
+                                arrowPosX = Math.min(arrowPosX, this.$window.outerWidth() - this.arrow.height);
+                                arrowView.css({top: '', left: arrowPosX + 'px'});
+                                arrowView.toggleClass('top', isMoveDown);
+                                arrowView.toggleClass('bottom', !isMoveDown);
+                                arrowView.removeClass('left right');
                             } else if (sdkBoundsHeight <= outerHeight) {
                                 this.$window.css({
                                     maxHeight: sdkBoundsHeight - sdkPanelHeight + 'px',
@@ -878,8 +892,9 @@ define([
                                 // arrowPosY = Math.max(this.arrow.margin, this.arrowPosY - sdkPanelHeight - this.arrow.width);
                                 arrowPosY = Math.min(arrowPosY, sdkBoundsHeight - (sdkPanelHeight + this.arrow.margin + this.arrow.height));
 
-                                arrowView.css({top: arrowPosY + 'px'});
-                                arrowView.removeClass('hidden');
+                                arrowView.css({top: arrowPosY + 'px', left: ''});
+                                arrowView.removeClass('top bottom right');
+                                arrowView.addClass('left');
                                 this.scroller.scrollTop(scrollPos);
                             } else {
 
@@ -897,8 +912,9 @@ define([
                                 arrowPosY = Math.max(this.arrow.margin, this.arrowPosY - (sdkBoundsHeight - outerHeight) - this.arrow.height);
                                 arrowPosY = Math.min(arrowPosY, outerHeight - this.arrow.margin - this.arrow.height);
 
-                                arrowView.css({top: arrowPosY + 'px'});
-                                arrowView.removeClass('hidden');
+                                arrowView.css({top: arrowPosY + 'px', left: ''});
+                                arrowView.removeClass('top bottom right');
+                                arrowView.addClass('left');
                             }
                         }
                     }
@@ -915,15 +931,19 @@ define([
             if (!this.api.asc_GetSelectionBounds) return;
             
             var p = this.api.asc_GetSelectionBounds(),
-                isCursor = Math.abs(p[0][0] - p[1][0])<0.1 && Math.abs(p[0][1] - p[1][1])<0.1 && Math.abs(p[2][0] - p[3][0])<0.1 && Math.abs(p[2][1] - p[3][1])<0.1;
-            var x0 = p[0][0], y0 = p[0][1],
-                x1 = p[isCursor ? 2 : 1][0], y1 = p[isCursor ? 2 : 1][1];
-            var leftPos = parseInt(this.$window.css('left'))-25,
-                windowWidth = this.$window.outerWidth();
+                isCursor = Math.abs(p[0][0] - p[1][0])<0.1 && Math.abs(p[0][1] - p[1][1])<0.1 && Math.abs(p[2][0] - p[3][0])<0.1 && Math.abs(p[2][1] - p[3][1])<0.1,
+                sdkPanelLeft = $('#id_panel_left'),
+                sdkPanelLeftWidth = 0;
+            if (sdkPanelLeft.length)
+                sdkPanelLeftWidth = (sdkPanelLeft.css('display') !== 'none') ? sdkPanelLeft.width() : 0;
+            var x0 = p[0][0] + sdkPanelLeftWidth, y0 = p[0][1],
+                x1 = p[isCursor ? 2 : 1][0] + sdkPanelLeftWidth, y1 = p[isCursor ? 2 : 1][1];
+            var leftPos = parseInt(this.$window.css('left')) - this.arrow.width,
+                windowWidth = this.$window.outerWidth() + this.arrow.width;
             if (x0>leftPos && x0<leftPos+windowWidth || x1>leftPos && x1<leftPos+windowWidth) {
-                var newTopDown = Math.max(y0, y1),// try move down
-                    newTopUp = Math.min(y0, y1); // try move up
-                return [newTopUp, newTopDown];
+                var newDown = (y0>y1) ? [x0, y0] : [x1, y1],// try move down
+                    newUp = (y0<y1) ? [x0, y0] : [x1, y1]; // try move up
+                return [newUp, newDown];
             }
         },
 
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index b505e1ba1..71e8fbaeb 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -403,7 +403,7 @@
     width:100%;
     position: relative;
     overflow-y: hidden;
-    margin-bottom: 5px;
+    //margin-bottom: 5px;
 
     .dataview-ct.inner {
         overflow: visible;
@@ -413,24 +413,6 @@
 .comments-arrow {
     position: absolute;
     overflow: hidden;
-    left: -10px;
-    top: 20px;
-    width: 10px;
-    height: 30px;
-
-    &.right {
-        left: 100%;
-
-        &:after {
-            left: -8px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-
-            body.safari &,
-            body.chrome & {
-                box-shadow: none;
-            }
-        }
-    }
 
     &:after {
         content: '';
@@ -449,4 +431,53 @@
         border: solid @scaled-one-px-value-ie @border-toolbar-ie;
         border: solid @scaled-one-px-value @border-toolbar;
     }
+
+    &.left {
+        left: -10px;
+        top: 20px;
+        width: 10px;
+        height: 30px;
+    }
+
+    &.right {
+        left: 100%;
+        top: 20px;
+        width: 10px;
+        height: 30px;
+
+        &:after {
+            left: -8px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+
+            body.safari &,
+            body.chrome & {
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.top {
+        left: 20px;
+        top: -10px;
+        height: 10px;
+        width: 30px;
+
+        &:after {
+            top: 2px;
+            left: 5px;
+        }
+    }
+
+    &.bottom {
+        left: 20px;
+        top: auto;
+        bottom: -10px;
+        height: 10px;
+        width: 30px;
+
+        &:after {
+            top: -7px;
+            left: 5px;
+        }
+    }
 }