diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 3615ce8d..27ae2924 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -79,7 +79,7 @@ module.exports = React.createClass({ getLabel: function(label, show) { if (show) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 84c2e5d1..bbed5df8 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -24,13 +24,11 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', propTypes: { + // Alllow the tooltip to be styled by the parent element + className: React.PropTypes.string.isRequired, // The tooltip is derived from either the room name or a label room: React.PropTypes.object, label: React.PropTypes.string, - - // The tooltip position can be tweaked by passing in additional positional information - top: React.PropTypes.number, - left: React.PropTypes.number, }, // Create a wrapper for the tooltip outside the parent and attach it to the body element @@ -52,8 +50,6 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: null, parent: null, - top: null, - left: null, }); ReactDOM.unmountComponentAtNode(this.tooltipContainer); @@ -67,16 +63,12 @@ module.exports = React.createClass({ // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron - var parent = ReactDOM.findDOMNode(this).parentElement; + var parent = ReactDOM.findDOMNode(this); var style = {}; style.top = parent.getBoundingClientRect().top + window.pageYOffset; style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset; style.display = "block"; - // Add any additional positional tweaks passed in to the tooltip - if (this.props.top) { style.top += this.props.top; } - if (this.props.left) { style.left += this.props.left; } - var tooltip = (
@@ -92,15 +84,13 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: this.tooltip, parent: parent, - top: this.props.top, - left: this.props.left, }); }, render: function() { // Render a placeholder return ( -
+
); } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e4d0304a..0bff0444 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -22,6 +22,14 @@ limitations under the License. height: 34px; } +.mx_RoomTile_tooltip { + display: inline-block; + position: relative; + top: -62px; + left: 44px; +} + + .mx_RoomTile_nameContainer { display: inline-block; width: 180px; diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index e7834c4a..12991fc2 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -105,3 +105,10 @@ limitations under the License. .mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { float: none; } + +.mx_LeftPanel .mx_BottomLeftMenu_tooltip { + display: inline-block; + position: relative; + top: -25px; + left: 6px; +} 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 5bb5f21a..bf69f9e7 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -50,6 +50,3 @@ limitations under the License. font-size: 13px; } -mx_RoomToolTip_placeholder { - display: none; -}