matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-20 16:22:28 +03:00
Code Activity

Merge pull request #3169 from matrix-org/jryans/reactions-tooltip-tweaks

Browse Source 
Improve interactive tooltip hover behaviour
This commit is contained in:
J. Ryan Stinnett
2019-07-02 18:28:09 +01:00
committed by GitHub
parent a4275e6d89 dd94bf799d
commit cf8eeedcc7
2 changed files with 7 additions and 19 deletions
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; z-index: 5000;
} }
.mx_InteractiveTooltip_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 5000;
}
.mx_InteractiveTooltip { .mx_InteractiveTooltip {
border-radius: 3px; border-radius: 3px;
background-color: $interactive-tooltip-bg-color; 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(); this.renderTooltip();
} }
componentWillUnmount() {
document.removeEventListener("mousemove", this.onMouseMove);
}
collectContentRect = (element) => { collectContentRect = (element) => {
// We don't need to clean up when unmounting, so ignore // We don't need to clean up when unmounting, so ignore
if (!element) return; if (!element) return;
@@ -87,11 +91,7 @@ export default class InteractiveTooltip extends React.Component {
this.target = element; this.target = element;
} }
onBackgroundClick = (ev) => { onMouseMove = (ev) => {
this.hideTooltip();
}
onBackgroundMouseMove = (ev) => {
const { clientX: x, clientY: y } = ev; const { clientX: x, clientY: y } = ev;
const { contentRect } = this.state; const { contentRect } = this.state;
const targetRect = this.target.getBoundingClientRect(); const targetRect = this.target.getBoundingClientRect();
@@ -113,6 +113,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) { if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(true); this.props.onVisibilityChange(true);
} }
document.addEventListener("mousemove", this.onMouseMove);
} }
hideTooltip() { hideTooltip() {
@@ -122,6 +123,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) { if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(false); this.props.onVisibilityChange(false);
} }
document.removeEventListener("mousemove", this.onMouseMove);
} }
renderTooltip() { renderTooltip() {
@@ -168,10 +170,6 @@ export default class InteractiveTooltip extends React.Component {
} }
const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}> const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
<div className="mx_ContextualMenu_background"
onMouseMove={this.onBackgroundMouseMove}
onClick={this.onBackgroundClick}
/>
<div className={menuClasses} <div className={menuClasses}
style={menuStyle} style={menuStyle}
ref={this.collectContentRect} ref={this.collectContentRect}