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