Fix DialPad and Call Menu buttons not working when a call is fullscreened. (#6496)

This PR:
* Moves the dialpad and hold/transfer menu buttons into the part of the DOM that's included when a call is fullscreen'd.
* Tweaks `ContextMenu` to allow menu content to be mount as a child of the current component, rather than at the root of the DOM (which was not included in the full-screen'd content).

<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md before submitting your pull request -->

<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md#sign-off -->

`Signed-off-by: Andrew Morgan <andrewm@element.io>`
This commit is contained in:
Andrew Morgan 2021-07-29 17:51:27 +01:00 committed by GitHub
parent 94af6db201
commit a7c15b2ac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 29 deletions

View file

@ -80,6 +80,10 @@ export interface IProps extends IPosition {
managed?: boolean;
wrapperClassName?: string;
// If true, this context menu will be mounted as a child to the parent container. Otherwise
// it will be mounted to a container at the root of the DOM.
mountAsChild?: boolean;
// Function to be called on menu close
onFinished();
// on resize callback
@ -390,7 +394,13 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
}
render(): React.ReactChild {
return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
if (this.props.mountAsChild) {
// Render as a child of the current parent
return this.renderMenu();
} else {
// Render as a child of a container at the root of the DOM
return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
}
}
}