From 4d116f57fd5fbc9f2439ec9a3f7875dcaaa8d609 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Dec 2023 10:40:21 +0000 Subject: [PATCH 01/12] Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.pcss | 6 ++++++ src/components/views/elements/PersistedElement.tsx | 1 + 2 files changed, 7 insertions(+) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 29bb165e7b1..63a6f989831 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -56,6 +56,12 @@ limitations under the License. /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ contain: strict; } +.mx_PersistedElement_container, +#mx_Dialog_Container, +#mx_Dialog_StaticContainer { + /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ + isolation: isolate; +} /** * We need to increase the specificity of the selector to override the diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index 2d4c763eb20..28f876d967f 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -39,6 +39,7 @@ function getOrCreateContainer(containerId: string): HTMLDivElement { if (!container) { container = document.createElement("div"); container.id = containerId; + container.className = "mx_PersistedElement_container"; document.body.appendChild(container); } From 53e30e21055f28fe1c6e50e80b24007743e93047 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Dec 2023 11:22:29 +0000 Subject: [PATCH 02/12] Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.pcss | 2 +- .../views/elements/PersistedElement.tsx | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 63a6f989831..6a95408a1cb 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -56,7 +56,7 @@ limitations under the License. /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ contain: strict; } -.mx_PersistedElement_container, +#mx_PersistedElement_container, #mx_Dialog_Container, #mx_Dialog_StaticContainer { /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index 28f876d967f..99730ec3443 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -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,8 +52,7 @@ function getOrCreateContainer(containerId: string): HTMLDivElement { if (!container) { container = document.createElement("div"); container.id = containerId; - container.className = "mx_PersistedElement_container"; - document.body.appendChild(container); + getOrCreateMasterContainer().appendChild(container); } return container; From c9783dea406359c6eb66313cd3125e9dd0ccc305 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Dec 2023 11:26:09 +0000 Subject: [PATCH 03/12] Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/components/views/pips/_WidgetPip.pcss | 19 +++++-- src/components/views/elements/AppTile.tsx | 27 +++++----- .../views/elements/PersistentApp.tsx | 1 + src/components/views/pips/WidgetPip.tsx | 49 ++++++++++--------- 4 files changed, 59 insertions(+), 37 deletions(-) diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss index f6bf5a2a63e..db619bd4727 100644 --- a/res/css/components/views/pips/_WidgetPip.pcss +++ b/res/css/components/views/pips/_WidgetPip.pcss @@ -14,15 +14,25 @@ See the License for the specific language governing permissions and limitations under the License. */ +$width: 320px; +$height: 220px; + .mx_WidgetPip { - width: 320px; - height: 220px; + width: $width; + height: $height; border-radius: 8px; contain: paint; color: $call-primary-content; cursor: pointer; } +.mx_WidgetPip_overlay { + width: $width; + height: $height; + position: absolute; + top: 0; +} + .mx_WidgetPip_header, .mx_WidgetPip_footer { position: absolute; @@ -31,8 +41,11 @@ limitations under the License. width: 100%; box-sizing: border-box; transition: opacity ease 0.15s; +} - .mx_WidgetPip:not(:hover) > & { +.mx_WidgetPip_overlay:not(:hover) { + .mx_WidgetPip_header, + .mx_WidgetPip_footer { opacity: 0; } } diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 56a1969c1b0..c33cfc571c3 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -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 { ); } else { appTileBody = ( -
- {this.state.loading && loadingElement} -