Merge pull request #478 from matrix-org/wmwragg/correct-incoming-call-positioning

Wmwragg/correct incoming call positioning

src/components/views/rooms/RoomList.js

@@ -74,6 +74,7 @@ module.exports = React.createClass({
     componentDidUpdate: function() {
         // Reinitialise the stickyHeaders when the component is updated
         this._updateStickyHeaders(true);
+        this._repositionIncomingCallBox(undefined, false);
     },
 
     onAction: function(payload) {
@@ -326,39 +327,23 @@ module.exports = React.createClass({
     _repositionIncomingCallBox: function(e, firstTime) {
         var incomingCallBox = document.getElementById("incomingCallBox");
         if (incomingCallBox && incomingCallBox.parentElement) {
-            var scroll = this._getScrollNode();
-            var top = (scroll.offsetTop + incomingCallBox.parentElement.offsetTop - scroll.scrollTop);
+            var scrollArea = this._getScrollNode();
+            // Use the offset of the top of the scroll area from the window
+            // as this is used to calculate the CSS fixed top position for the stickies
+            var scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
+            // Use the offset of the top of the componet from the window
+            // as this is used to calculate the CSS fixed top position for the stickies
+            var scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
 
-            if (firstTime) {
-                // scroll to make sure the callbox is on the screen...
-                if (top < 10) { // 10px of vertical margin at top of screen
-                    scroll.scrollTop = incomingCallBox.parentElement.offsetTop - 10;
-                }
-                else if (top > scroll.clientHeight - incomingCallBox.offsetHeight + 50) {
-                    scroll.scrollTop = incomingCallBox.parentElement.offsetTop - scroll.offsetHeight + incomingCallBox.offsetHeight - 50;
-                }
-                // recalculate top in case we clipped it.
-                top = (scroll.offsetTop + incomingCallBox.parentElement.offsetTop - scroll.scrollTop);
-            }
-            else {
-                // stop the box from scrolling off the screen
-                if (top < 10) {
-                    top = 10;
-                }
-                else if (top > scroll.clientHeight - incomingCallBox.offsetHeight + 50) {
-                    top = scroll.clientHeight - incomingCallBox.offsetHeight + 50;
-                }
-            }
-
-            // slightly ugly hack to offset if there's a toolbar present.
-            // we really should be calculating our absolute offsets of top by recursing through the DOM
-            toolbar = document.getElementsByClassName("mx_MatrixToolbar")[0];
-            if (toolbar) {
-                top += toolbar.offsetHeight;
-            }
+            var top = (incomingCallBox.parentElement.getBoundingClientRect().top + window.pageYOffset)
+            // Make sure we don't go too far up, if the headers aren't sticky
+            top = (top < scrollAreaOffset) ? scrollAreaOffset : top;
+            // make sure we don't go too far down, if the headers aren't sticky
+            var bottomMargin = scrollAreaOffset + (scrollAreaHeight - 45);
+            top = (top > bottomMargin) ? bottomMargin : top;
 
             incomingCallBox.style.top = top + "px";
-            incomingCallBox.style.left = scroll.offsetLeft + scroll.offsetWidth + "px";
+            incomingCallBox.style.left = scrollArea.offsetLeft + scrollArea.offsetWidth + 12 + "px";
         }
     },
 

src/components/views/rooms/RoomTile.js

@@ -267,11 +267,11 @@ module.exports = React.createClass({
             tooltip = <RoomTooltip className="mx_RoomTile_tooltip" room={this.props.room} />;
         }
 
-        var incomingCallBox;
-        if (this.props.incomingCall) {
-            var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-            incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
-        }
+        //var incomingCallBox;
+        //if (this.props.incomingCall) {
+        //    var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+        //    incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
+        //}
 
         var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
@@ -300,7 +300,7 @@ module.exports = React.createClass({
                     { label }
                     { badge }
                 </div>
-                { incomingCallBox }
+                {/* { incomingCallBox } */}
                 { tooltip }
             </div>
         );

src/components/views/voip/IncomingCallBox.js

@@ -21,6 +21,10 @@ var CallHandler = require("../../../CallHandler");
 module.exports = React.createClass({
     displayName: 'IncomingCallBox',
 
+    propTypes: {
+        incomingCall: React.PropTypes.object,
+    },
+
     onAnswerClick: function() {
         dis.dispatch({
             action: 'answer',
@@ -36,9 +40,13 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var room = null;
+        if (this.props.incomingCall) {
+            room = MatrixClientPeg.get().getRoom(this.props.incomingCall.roomId);
+        }
 
-        var room = this.props.incomingCall ? MatrixClientPeg.get().getRoom(this.props.incomingCall.roomId) : null;
         var caller = room ? room.name : "unknown";
+
         return (
             <div className="mx_IncomingCallBox" id="incomingCallBox">
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />