Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-10-10 23:25:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Route Element Call's DOM decoration through an injectable root element

Browse Source 
Element Call writes its theme classes, background and layout attributes
straight onto document.body, and portals its modals there too. That is
only correct while it owns the page; embedded in a host application it
has to confine itself to the container it was mounted into.

Add a RootElementContext, defaulting to document.body so that the
standalone and widget builds are unaffected, and point the theme classes,
data-background, no-scroll-body and the fullscreen target at it.

Give the Modal and Toast portals an explicit container as well. Radix and
vaul both default to document.body, so without this every modal, drawer
and toast would render outside the container and lose the theme and
platform attributes set on it.

No functional change: the root element is document.body until an embedder
provides otherwise.
This commit is contained in:
Valere
2026-09-01 18:54:27 +02:00
parent 0a8c24bca8
commit 0dca5835f6
7 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/useTheme.ts
+7 -5
View File
@@ -11,12 +11,14 @@ import { type IThemeChangeActionRequest } from "matrix-widget-api";
import { getUrlParams } from "./UrlParams";
import { widget } from "./widget";
import { useRootElement } from "./RootElementContext";
export const useTheme = (): void => {
const rootElement = useRootElement();
const [requestedTheme, setRequestedTheme] = useState(
() => getUrlParams().theme,
);
const previousTheme = useRef<string | null>(document.body.classList.item(0));
const previousTheme = useRef<string | null>(rootElement.classList.item(0));
useEffect(() => {
if (widget) {
@@ -47,15 +49,15 @@ export const useTheme = (): void => {
: "";
const themeString = "cpd-theme-" + theme + themeHighContrast;
if (themeString !== previousTheme.current) {
document.body.classList.remove(
rootElement.classList.remove(
"cpd-theme-light",
"cpd-theme-dark",
"cpd-theme-light-hc",
"cpd-theme-dark-hc",
);
document.body.classList.add(themeString);
rootElement.classList.add(themeString);
previousTheme.current = themeString;
}
document.body.classList.remove("no-theme");
}, [previousTheme, requestedTheme]);
rootElement.classList.remove("no-theme");
}, [previousTheme, requestedTheme, rootElement]);
};