Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3245 from matrix-org/jryans/tooltip-larger-buffer

Browse Source 
Tweak interactive tooltip buffer area allow for overshoot
This commit is contained in:
J. Ryan Stinnett 2019-07-25 13:16:20 +01:00 committed by GitHub
commit cef67d5784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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)