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