PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Change interactive tooltip to only flip when required

Browse source 
This changes the interactive tooltip to only flip around when the tooltip
content would be near the window edge.

Fixes https://github.com/vector-im/riot-web/issues/10176
This commit is contained in:
J. Ryan Stinnett 2019-06-26 18:16:38 +01:00
parent 15d286ed93
commit e8fba4f770
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/elements/InteractiveTooltip.js
View file

@ -21,6 +21,10 @@ import classNames from 'classnames';
const InteractiveTooltipContainerId = "mx_InteractiveTooltip_Container"; const InteractiveTooltipContainerId = "mx_InteractiveTooltip_Container";
// If the distance from tooltip to window edge is below this value, the tooltip
// will flip around to the other side of the target.
const MIN_SAFE_DISTANCE_TO_WINDOW_EDGE = 20;
function getOrCreateContainer() { function getOrCreateContainer() {
let container = document.getElementById(InteractiveTooltipContainerId); let container = document.getElementById(InteractiveTooltipContainerId);
@ -121,7 +125,7 @@ export default class InteractiveTooltip extends React.Component {
} }
renderTooltip() { renderTooltip() {
const { visible } = this.state; const { contentRect, visible } = this.state;
if (!visible) { if (!visible) {
ReactDOM.unmountComponentAtNode(getOrCreateContainer()); ReactDOM.unmountComponentAtNode(getOrCreateContainer());
return null; return null;
@ -134,11 +138,12 @@ export default class InteractiveTooltip extends React.Component {
const targetBottom = targetRect.bottom + window.pageYOffset; const targetBottom = targetRect.bottom + window.pageYOffset;
const targetTop = targetRect.top + window.pageYOffset; const targetTop = targetRect.top + window.pageYOffset;
// Align the tooltip vertically on whichever side of the target has more // Place the tooltip above the target by default. If we find that the
// space available. // tooltip content would extend past the safe area towards the window
// edge, flip around to below the target.
const position = {}; const position = {};
let chevronFace = null; let chevronFace = null;
if (targetBottom < window.innerHeight / 2) { if (contentRect && (targetTop - contentRect.height <= MIN_SAFE_DISTANCE_TO_WINDOW_EDGE)) {
position.top = targetBottom; position.top = targetBottom;
chevronFace = "top"; chevronFace = "top";
} else { } else {
@ -158,8 +163,8 @@ export default class InteractiveTooltip extends React.Component {
}); });
const menuStyle = {}; const menuStyle = {};
if (this.state.contentRect) { if (contentRect) {
menuStyle.left = `-${this.state.contentRect.width / 2}px`; menuStyle.left = `-${contentRect.width / 2}px`;
} }
const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}> const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>