gaja-group
/
matrix-bot
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tolltip thweak to not require the passing in of the parent

This commit is contained in:
wmwragg 2016-09-04 07:41:48 +01:00
parent c2d8067523
commit 5417385c83
2 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/structures/BottomLeftMenu.js
View File

@ -76,10 +76,10 @@ module.exports = React.createClass({
}, },
// Get the label/tooltip to show // Get the label/tooltip to show
getLabel: function(label, parent, show) { getLabel: function(label, show) {
if (show) { if (show) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
return <RoomTooltip label={label} parent={parent} left={6} top={this.props.collapsed ? 3 : null} />; return <RoomTooltip label={label} left={6} top={this.props.collapsed ? 3 : null} />;
} }
}, },
@ -88,17 +88,17 @@ module.exports = React.createClass({
return ( return (
<div className="mx_BottomLeftMenu"> <div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options"> <div className="mx_BottomLeftMenu_options">
<div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } ref={(ref) => this._rooms = ref} > <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" /> <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Rooms", this._rooms, this.state.roomsHover) } { this.getLabel("Rooms", this.state.roomsHover) }
</div> </div>
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } ref={(ref) => this._people = ref} > <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
<TintableSvg src="img/icons-people.svg" width="25" height="25" /> <TintableSvg src="img/icons-people.svg" width="25" height="25" />
{ this.getLabel("New direct message", this._people, this.state.peopleHover) } { this.getLabel("New direct message", this.state.peopleHover) }
</div> </div>
<div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } ref={(ref) => this._settings = ref} > <div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
<TintableSvg src="img/icons-settings.svg" width="25" height="25" /> <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
{ this.getLabel("Settings", this._settings, this.state.settingsHover) } { this.getLabel("Settings", this.state.settingsHover) }
</div> </div>
</div> </div>
</div> </div>

13
src/components/views/rooms/RoomTooltip.js
View File

@ -25,9 +25,6 @@ module.exports = React.createClass({
displayName: 'RoomTooltip', displayName: 'RoomTooltip',
propTypes: { propTypes: {
// The 'parent' can either be a React component or a DOM element
parent: React.PropTypes.object.isRequired,
// The tooltip is derived from either the room name or a label // The tooltip is derived from either the room name or a label
room: React.PropTypes.object, room: React.PropTypes.object,
label: React.PropTypes.string, label: React.PropTypes.string,
@ -83,19 +80,11 @@ module.exports = React.createClass({
if (this.props.left) { style.left = this.props.left; } if (this.props.left) { style.left = this.props.left; }
if (this.props.right) { style.right = this.props.right; } if (this.props.right) { style.right = this.props.right; }
var parent;
if (this._isDOMElement(this.props.parent)) {
parent = this.props.parent;
} else if (this._isReactComponent(this.props.parent)) {
parent = ReactDOM.findDOMNode(this.props.parent);
} else {
parent = null;
}
// If a parent exists, add the parent's position to the tooltips, so it's correctly // If a parent exists, add the parent's position to the tooltips, so it's correctly
// positioned, also taking into account any window zoom // positioned, also taking into account any window zoom
// NOTE: The additional 6 pixels for the left position, is to take account of the // NOTE: The additional 6 pixels for the left position, is to take account of the
// tooltips chevron // tooltips chevron
var parent = ReactDOM.findDOMNode(this).parentElement;
if (parent) { if (parent) {
style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset;
style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset;