From 45f17eb9730606f0b121fa9e15d23d7320eb03ff Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 15 Sep 2016 14:39:34 +0100 Subject: [PATCH] Added incomingCallBox to header and removed from roomTile --- src/components/views/rooms/RoomList.js | 64 +++++++++++--------- src/components/views/rooms/RoomTile.js | 12 ++-- src/components/views/voip/IncomingCallBox.js | 10 ++- 3 files changed, 50 insertions(+), 36 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 008e4be14e..c20c9cf1fb 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -326,39 +326,45 @@ 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; - 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; - } - } +// var scroll = this._getScrollNode(); +// var top = (scroll.offsetTop + incomingCallBox.parentElement.offsetTop - scroll.scrollTop); + var top = (incomingCallBox.parentElement.getBoundingClientRect().top + window.pageYOffset) - // 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; - } +// if (firstTime) { +// // scroll to make sure the callbox is on the screen... +// if (top < 10) { // 10px of vertical margin at top of screen +// scrollArea.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; +// } incomingCallBox.style.top = top + "px"; - incomingCallBox.style.left = scroll.offsetLeft + scroll.offsetWidth + "px"; + incomingCallBox.style.left = scrollArea.offsetLeft + scrollArea.offsetWidth + "px"; } }, diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index f25b5140f4..6f71d6bacf 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -267,11 +267,11 @@ module.exports = React.createClass({ tooltip = ; } - var incomingCallBox; - if (this.props.incomingCall) { - var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox"); - incomingCallBox = ; - } + //var incomingCallBox; + //if (this.props.incomingCall) { + // var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox"); + // incomingCallBox = ; + //} var RoomAvatar = sdk.getComponent('avatars.RoomAvatar'); @@ -300,7 +300,7 @@ module.exports = React.createClass({ { label } { badge } - { incomingCallBox } + {/* { incomingCallBox } */} { tooltip } ); diff --git a/src/components/views/voip/IncomingCallBox.js b/src/components/views/voip/IncomingCallBox.js index d7e608a816..6cd19538f0 100644 --- a/src/components/views/voip/IncomingCallBox.js +++ b/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 (