OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve interactive tooltip hover behaviour 

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
pull/21833/head
J. Ryan Stinnett 2019-07-01 17:47:30 +01:00
parent 38bfe8b1ce
commit dd94bf799d
2 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/views/elements/_InteractiveTooltip.scss
View File

@ -19,16 +19,6 @@ limitations under the License.
z-index: 5000;
}
.mx_InteractiveTooltip_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 5000;
}
.mx_InteractiveTooltip {
border-radius: 3px;
background-color: $interactive-tooltip-bg-color;

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}