Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Draw arrows when move review balloons top or bottom

Browse source
This commit is contained in:
Julia Radzhabova 2021-08-17 14:36:38 +03:00
parent df78322513
commit cfa70568bb
2 changed files with 88 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
apps/common/main/lib/view/ReviewPopover.js
View file

@ -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];
}
},

69
apps/common/main/resources/less/comments.less
View file

@ -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;
}
}
}