Fix regression around CSS stacking contexts and PIP widgets (#12094)
* Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix border-radius on widget pip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix majority of tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix jest retryTimes applying outside of CI Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix remaining tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React unique key warnings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix sticker picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * id not class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix widget pip button colour in light theme Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert unrelated change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
896d890198
commit
57da29de58
9 changed files with 101 additions and 45 deletions
|
|
@ -305,6 +305,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
|
|||
const call = this.state.primaryCall;
|
||||
pipContent.push(({ onStartMoving, onResize }) => (
|
||||
<LegacyCallView
|
||||
key="call-view"
|
||||
onMouseDownOnHeader={onStartMoving}
|
||||
call={call}
|
||||
secondaryCall={this.state.secondaryCall}
|
||||
|
|
@ -317,6 +318,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
|
|||
if (this.state.showWidgetInPip && this.state.persistentWidgetId) {
|
||||
pipContent.push(({ onStartMoving }) => (
|
||||
<WidgetPip
|
||||
key="widget-pip"
|
||||
widgetId={this.state.persistentWidgetId!}
|
||||
room={MatrixClientPeg.safeGet().getRoom(this.state.persistentRoomId ?? undefined)!}
|
||||
viewingRoom={this.state.viewedRoomId === this.state.persistentRoomId}
|
||||
|
|
|
|||
|
|
@ -93,6 +93,8 @@ interface IProps {
|
|||
showLayoutButtons?: boolean;
|
||||
// Handle to manually notify the PersistedElement that it needs to move
|
||||
movePersistedElement?: MutableRefObject<(() => void) | undefined>;
|
||||
// An element to render after the iframe as an overlay
|
||||
overlay?: ReactNode;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -663,17 +665,20 @@ export default class AppTile extends React.Component<IProps, IState> {
|
|||
);
|
||||
} else {
|
||||
appTileBody = (
|
||||
<div className={appTileBodyClass} style={appTileBodyStyles}>
|
||||
{this.state.loading && loadingElement}
|
||||
<iframe
|
||||
title={widgetTitle}
|
||||
allow={iframeFeatures}
|
||||
ref={this.iframeRefChange}
|
||||
src={this.sgWidget.embedUrl}
|
||||
allowFullScreen={true}
|
||||
sandbox={sandboxFlags}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className={appTileBodyClass} style={appTileBodyStyles}>
|
||||
{this.state.loading && loadingElement}
|
||||
<iframe
|
||||
title={widgetTitle}
|
||||
allow={iframeFeatures}
|
||||
ref={this.iframeRefChange}
|
||||
src={this.sgWidget.embedUrl}
|
||||
allowFullScreen={true}
|
||||
sandbox={sandboxFlags}
|
||||
/>
|
||||
</div>
|
||||
{this.props.overlay}
|
||||
</>
|
||||
);
|
||||
|
||||
if (!this.props.userWidget) {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,19 @@ export const getPersistKey = (appId: string): string => "widget_" + appId;
|
|||
// of doing reusable widgets like dialog boxes & menus where we go and
|
||||
// pass in a custom control as the actual body.
|
||||
|
||||
// We contain all persisted elements within a master container to allow them all to be within the same
|
||||
// CSS stacking context, and thus be able to control their z-indexes relative to each other.
|
||||
function getOrCreateMasterContainer(): HTMLDivElement {
|
||||
let container = getContainer("mx_PersistedElement_container");
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.id = "mx_PersistedElement_container";
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
function getContainer(containerId: string): HTMLDivElement {
|
||||
return document.getElementById(containerId) as HTMLDivElement;
|
||||
}
|
||||
|
|
@ -39,7 +52,7 @@ function getOrCreateContainer(containerId: string): HTMLDivElement {
|
|||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.id = containerId;
|
||||
document.body.appendChild(container);
|
||||
getOrCreateMasterContainer().appendChild(container);
|
||||
}
|
||||
|
||||
return container;
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export default class PersistentApp extends React.Component<IProps> {
|
|||
showMenubar={false}
|
||||
pointerEvents={this.props.pointerEvents}
|
||||
movePersistedElement={this.props.movePersistedElement}
|
||||
overlay={this.props.children}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,34 +107,37 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
|
|||
|
||||
return (
|
||||
<div className="mx_WidgetPip" onMouseDown={onStartMoving} onClick={onBackClick}>
|
||||
<Toolbar className="mx_WidgetPip_header">
|
||||
<RovingAccessibleButton
|
||||
onClick={onBackClick}
|
||||
className="mx_WidgetPip_backButton"
|
||||
aria-label={_t("action|back")}
|
||||
>
|
||||
<BackIcon className="mx_Icon mx_Icon_16" />
|
||||
{roomName}
|
||||
</RovingAccessibleButton>
|
||||
</Toolbar>
|
||||
<PersistentApp
|
||||
persistentWidgetId={widgetId}
|
||||
persistentRoomId={room.roomId}
|
||||
pointerEvents="none"
|
||||
movePersistedElement={movePersistedElement}
|
||||
/>
|
||||
{(call !== null || WidgetType.JITSI.matches(widget?.type)) && (
|
||||
<Toolbar className="mx_WidgetPip_footer">
|
||||
<RovingAccessibleTooltipButton
|
||||
onClick={onLeaveClick}
|
||||
tooltip={_t("action|leave")}
|
||||
aria-label={_t("action|leave")}
|
||||
alignment={Alignment.Top}
|
||||
>
|
||||
<HangupIcon className="mx_Icon mx_Icon_24" />
|
||||
</RovingAccessibleTooltipButton>
|
||||
</Toolbar>
|
||||
)}
|
||||
>
|
||||
<div onMouseDown={onStartMoving} className="mx_WidgetPip_overlay">
|
||||
<Toolbar className="mx_WidgetPip_header">
|
||||
<RovingAccessibleButton
|
||||
onClick={onBackClick}
|
||||
className="mx_WidgetPip_backButton"
|
||||
aria-label={_t("action|back")}
|
||||
>
|
||||
<BackIcon className="mx_Icon mx_Icon_16" />
|
||||
{roomName}
|
||||
</RovingAccessibleButton>
|
||||
</Toolbar>
|
||||
{(call !== null || WidgetType.JITSI.matches(widget?.type)) && (
|
||||
<Toolbar className="mx_WidgetPip_footer">
|
||||
<RovingAccessibleTooltipButton
|
||||
onClick={onLeaveClick}
|
||||
tooltip={_t("action|leave")}
|
||||
aria-label={_t("action|leave")}
|
||||
alignment={Alignment.Top}
|
||||
>
|
||||
<HangupIcon className="mx_Icon mx_Icon_24" />
|
||||
</RovingAccessibleTooltipButton>
|
||||
</Toolbar>
|
||||
)}
|
||||
</div>
|
||||
</PersistentApp>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue