From d2e2c726eb58550be212a7760b22fde17fda568b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 2 Sep 2016 15:45:43 +0100 Subject: [PATCH] Refactor of the RoomTooltip, so that it is easier to use, and also works with Safari --- src/component-index.js | 1 - src/components/structures/BottomLeftMenu.js | 3 +- .../views/rooms/BottomLeftMenuTile.js | 57 ------------------ src/components/views/rooms/RoomTooltip.js | 60 ++++++++++++------- .../vector-web/views/rooms/RoomTooltip.css | 6 ++ 5 files changed, 47 insertions(+), 80 deletions(-) delete mode 100644 src/components/views/rooms/BottomLeftMenuTile.js diff --git a/src/component-index.js b/src/component-index.js index dfe54993..a0c4d9dc 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -48,7 +48,6 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader'); module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); -module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index bb1f6c5e..4dab5062 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -41,12 +41,11 @@ module.exports = React.createClass({ } else if (this.state.hover) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, render: function() { - var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
diff --git a/src/components/views/rooms/BottomLeftMenuTile.js b/src/components/views/rooms/BottomLeftMenuTile.js deleted file mode 100644 index 0db6bd92..00000000 --- a/src/components/views/rooms/BottomLeftMenuTile.js +++ /dev/null @@ -1,57 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -'use strict'; - -var React = require('react'); - -var sdk = require('matrix-react-sdk') - -module.exports = React.createClass({ - displayName: 'BottomLeftMenuTile', - - getInitialState: function() { - return( { hover : false }); - }, - - onMouseEnter: function() { - this.setState( { hover : true }); - }, - - onMouseLeave: function() { - this.setState( { hover : false }); - }, - - render: function() { - var label; - if (!this.props.collapsed) { - label =
{ this.props.label }
; - } - else if (this.state.hover) { - var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - label = ; - } - - return ( -
-
- -
- { label } -
- ); - } -}); diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 2f5de837..83c8326f 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -24,37 +24,57 @@ var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ displayName: 'RoomTooltip', + propTypes: { + component: React.PropTypes.object.isRequired, + room: React.PropTypes.object, + label: React.PropTypes.string, + }, + + // Create a wrapper for the tooltip outside the main matrix element componentDidMount: function() { - var tooltip = ReactDOM.findDOMNode(this); - if (!this.props.bottom) { - // tell the roomlist about us so it can position us - dis.dispatch({ - action: 'view_tooltip', - tooltip: tooltip, - }); - } - else { - tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px"; - tooltip.style.display = "block"; - } + this.tooltipContainer = document.createElement("div"); + this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; + document.body.appendChild(this.tooltipContainer); + + this._renderTooltip(); + + // tell the roomlist about us so it can position us + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: this.props.component ? ReactDOM.findDOMNode(this.props.component) : null, + }); }, + // Remove the wrapper element, as the tooltip has finished using it componentWillUnmount: function() { - if (!this.props.bottom) { - dis.dispatch({ - action: 'view_tooltip', - tooltip: null, - }); - } + dis.dispatch({ + action: 'view_tooltip', + tooltip: null, + parent: null, + }); + + ReactDOM.unmountComponentAtNode(this.tooltipContainer); + document.body.removeChild(this.tooltipContainer); }, - render: function() { + _renderTooltip: function() { var label = this.props.room ? this.props.room.name : this.props.label; - return ( + var tooltip = (
{ label }
); + + this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); + }, + + render: function() { + // Render a placeholder + return ( +
+
+ ); } }); diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index deb8cd3f..22ec9e23 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -18,6 +18,7 @@ limitations under the License. position: absolute; left: -9px; top: 7px; + pointer-events: none; } .mx_RoomTooltip { @@ -29,4 +30,9 @@ limitations under the License. z-index: 2000; left: 52px; padding: 6px; + pointer-events: none; +} + +mx_RoomToolTip_placeholder { + display: none; }