imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve interactive tooltip hover behaviour

Browse source 
This gives the interactive tooltip a more natural hover behaviour by removing
the full screen div behind it. This allows the target button to keep its hover
state, for example.

This also removes the click to close behaviour, which was too easy to trigger
accidentally.

Fixes https://github.com/vector-im/riot-web/issues/10179
Fixes https://github.com/vector-im/riot-web/issues/10222
Fixes https://github.com/vector-im/riot-web/issues/10225
This commit is contained in:
J. Ryan Stinnett 2019-07-01 17:47:30 +01:00
parent 38bfe8b1ce
commit dd94bf799d
2 changed files with 7 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -74,6 +74,10 @@ export default class InteractiveTooltip extends React.Component {
this.renderTooltip();
}
componentWillUnmount() {
document.removeEventListener("mousemove", this.onMouseMove);
}
collectContentRect = (element) => {
// We don't need to clean up when unmounting, so ignore
if (!element) return;
@ -87,11 +91,7 @@ export default class InteractiveTooltip extends React.Component {
this.target = element;
}
onBackgroundClick = (ev) => {
this.hideTooltip();
}
onBackgroundMouseMove = (ev) => {
onMouseMove = (ev) => {
const { clientX: x, clientY: y } = ev;
const { contentRect } = this.state;
const targetRect = this.target.getBoundingClientRect();
@ -113,6 +113,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(true);
}
document.addEventListener("mousemove", this.onMouseMove);
}
hideTooltip() {
@ -122,6 +123,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(false);
}
document.removeEventListener("mousemove", this.onMouseMove);
}
renderTooltip() {
@ -168,10 +170,6 @@ export default class InteractiveTooltip extends React.Component {
}
const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
<div className="mx_ContextualMenu_background"
onMouseMove={this.onBackgroundMouseMove}
onClick={this.onBackgroundClick}
/>
<div className={menuClasses}
style={menuStyle}
ref={this.collectContentRect}