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

Fix tooltip vertical positioning.

Browse source
This commit is contained in:
Richard Lewis 2018-03-06 14:21:31 +00:00
parent d77ab891a0
commit 78ae1ada3c
1 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/rooms/RoomTooltip.js
View file

@ -21,6 +21,8 @@ var ReactDOM = require('react-dom');
var dis = require('matrix-react-sdk/lib/dispatcher');
import classNames from 'classnames';
const MIN_TOOLTIP_HEIGHT = 25;
module.exports = React.createClass({
displayName: 'RoomTooltip',
@ -41,6 +43,12 @@ module.exports = React.createClass({
document.body.appendChild(this.tooltipContainer);
window.addEventListener('scroll', this._renderTooltip, true);
const parent = ReactDOM.findDOMNode(this).parentNode;
this.state={
parent,
parentBox: parent.getBoundingClientRect(),
};
this._renderTooltip();
},
@ -61,6 +69,17 @@ module.exports = React.createClass({
window.removeEventListener('scroll', this._renderTooltip, true);
},
_updatePosition(style) {
const parentBox = this.state.parent.getBoundingClientRect();
let offset = 0;
if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
}
style.top = (parentBox.top - 2) + window.pageYOffset + offset;
style.left = 6 + parentBox.right + window.pageXOffset;
return style;
},
_renderTooltip: function() {
var label = this.props.room ? this.props.room.name : this.props.label;
@ -70,8 +89,8 @@ module.exports = React.createClass({
// tooltips chevron
var parent = ReactDOM.findDOMNode(this).parentNode;
var style = {};
style.top = parent.getBoundingClientRect().top + window.pageYOffset;
style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
console.warn('Bounding box', parent.getBoundingClientRect());
style = this._updatePosition(style);
style.display = "block";
const tooltipClasses = classNames(