Merge pull request #6242 from vector-im/rxl881/snapshot

Stickerpacks

src/components/views/context_menus/GenericElementContextMenu.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2017 New Vector 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';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/*
+ * This component can be used to display generic HTML content in a contextual
+ * menu.
+ */
+
+
+export default class GenericElementContextMenu extends React.Component {
+    static PropTypes = {
+        element: PropTypes.element.isRequired,
+        // Function to be called when the parent window is resized
+        // This can be used to reposition or close the menu on resize and
+        // ensure that it is not displayed in a stale position.
+        onResize: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+        this.resize = this.resize.bind(this);
+    }
+
+    componentDidMount() {
+        this.resize = this.resize.bind(this);
+        window.addEventListener("resize", this.resize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.resize);
+    }
+
+    resize() {
+        if (this.props.onResize) {
+            this.props.onResize();
+        }
+    }
+
+    render() {
+        return <div>{ this.props.element }</div>;
+    }
+}

src/components/views/rooms/RoomTooltip.js

@@ -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',
 
@@ -39,6 +41,9 @@ module.exports = React.createClass({
         this.tooltipContainer = document.createElement("div");
         this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
         document.body.appendChild(this.tooltipContainer);
+        window.addEventListener('scroll', this._renderTooltip, true);
+
+        this.parent = ReactDOM.findDOMNode(this).parentNode;
 
         this._renderTooltip();
     },
@@ -57,6 +62,18 @@ module.exports = React.createClass({
 
         ReactDOM.unmountComponentAtNode(this.tooltipContainer);
         document.body.removeChild(this.tooltipContainer);
+        window.removeEventListener('scroll', this._renderTooltip, true);
+    },
+
+    _updatePosition(style) {
+        const parentBox = this.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() {
@@ -66,10 +83,9 @@ 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);
+        var parent = ReactDOM.findDOMNode(this).parentNode;
         var style = {};
-        style.top = parent.getBoundingClientRect().top + window.pageYOffset;
-        style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
+        style = this._updatePosition(style);
         style.display = "block";
 
         const tooltipClasses = classNames(
@@ -97,8 +113,8 @@ module.exports = React.createClass({
     render: function() {
         // Render a placeholder
         return (
-            <div className={ this.props.className } >
+            <div className={this.props.className} >
             </div>
         );
-    }
+    },
 });