mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 19:55:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Wmwragg/correct incoming call positioning
This commit is contained in:
Matthew Hodgson 2016-09-15 15:59:06 +01:00 committed by GitHub
commit 70011410cf
3 changed files with 30 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/views/rooms/RoomList.js
View file

@ -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";
}
},

12
src/components/views/rooms/RoomTile.js
View file

@ -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>
);

10
src/components/views/voip/IncomingCallBox.js
View file

@ -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" />