OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Tweak interactive tooltip buffer area allow for overshoot 

This uses a larger buffer area around the tooltip, as it easy to overshoot and
mouse the cursor past the tooltip.

Fixes https://github.com/vector-im/riot-web/issues/10400
pull/21833/head
J. Ryan Stinnett 2019-07-25 12:17:07 +01:00
parent a5ac50f90f
commit f5fbd30a28
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/views/elements/InteractiveTooltip.js
View File

@ -37,10 +37,9 @@ function getOrCreateContainer() {
return container; return container;
} }
function isInRect(x, y, rect, { buffer = 0 } = {}) { function isInRect(x, y, rect) {
const { top, right, bottom, left } = rect; const { top, right, bottom, left } = rect;
return x >= (left - buffer) && x <= (right + buffer) return x >= left && x <= right && y >= top && y <= bottom;
&& y >= (top - buffer) && y <= (bottom + buffer);
} }
/** /**
@ -163,14 +162,17 @@ export default class InteractiveTooltip extends React.Component {
// //
// As long as the mouse remains inside the safe area, the tooltip will // As long as the mouse remains inside the safe area, the tooltip will
// stay open. // stay open.
const buffer = 10; const buffer = 50;
if ( if (isInRect(x, y, targetRect)) {
isInRect(x, y, contentRect, { buffer }) ||
isInRect(x, y, targetRect)
) {
return; return;
} }
if (this.canTooltipFitAboveTarget()) { if (this.canTooltipFitAboveTarget()) {
const contentRectWithBuffer = {
top: contentRect.top - buffer,
right: contentRect.right + buffer,
bottom: contentRect.bottom,
left: contentRect.left - buffer,
};
const trapezoidLeft = { const trapezoidLeft = {
top: contentRect.bottom, top: contentRect.bottom,
right: targetRect.left, right: targetRect.left,
@ -191,6 +193,7 @@ export default class InteractiveTooltip extends React.Component {
}; };
if ( if (
isInRect(x, y, contentRectWithBuffer) ||
isInUpperRightHalf(x, y, trapezoidLeft) || isInUpperRightHalf(x, y, trapezoidLeft) ||
isInRect(x, y, trapezoidCenter) || isInRect(x, y, trapezoidCenter) ||
isInUpperLeftHalf(x, y, trapezoidRight) isInUpperLeftHalf(x, y, trapezoidRight)
@ -198,6 +201,12 @@ export default class InteractiveTooltip extends React.Component {
return; return;
} }
} else { } else {
const contentRectWithBuffer = {
top: contentRect.top,
right: contentRect.right + buffer,
bottom: contentRect.bottom + buffer,
left: contentRect.left - buffer,
};
const trapezoidLeft = { const trapezoidLeft = {
top: targetRect.top, top: targetRect.top,
right: targetRect.left, right: targetRect.left,
@ -218,6 +227,7 @@ export default class InteractiveTooltip extends React.Component {
}; };
if ( if (
isInRect(x, y, contentRectWithBuffer) ||
isInLowerRightHalf(x, y, trapezoidLeft) || isInLowerRightHalf(x, y, trapezoidLeft) ||
isInRect(x, y, trapezoidCenter) || isInRect(x, y, trapezoidCenter) ||
isInLowerLeftHalf(x, y, trapezoidRight) isInLowerLeftHalf(x, y, trapezoidRight)