Merge pull request #2469 from MartinFournier/fix/snackbar-zindex

Make toasts appear above tail popups
This commit is contained in:
hydroflame 2022-01-08 12:36:05 -05:00 committed by GitHub
commit b373e5dddc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions

@ -113,6 +113,8 @@ const useStyles = makeStyles((theme: Theme) =>
}),
);
export const logBoxBaseZIndex = 1500;
function LogWindow(props: IProps): React.ReactElement {
const [script, setScript] = useState(props.script);
const classes = useStyles();
@ -147,7 +149,7 @@ function LogWindow(props: IProps): React.ReactElement {
function updateLayer(): void {
const c = container.current;
if (c === null) return;
c.style.zIndex = 1500 + layerCounter + "";
c.style.zIndex = logBoxBaseZIndex + layerCounter + "";
layerCounter++;
rerender();
}

@ -1,16 +1,27 @@
import React, { useEffect } from "react";
import { useSnackbar, SnackbarProvider as SB } from "notistack";
import makeStyles from "@mui/styles/makeStyles";
import { EventEmitter } from "../../utils/EventEmitter";
import Alert from "@mui/material/Alert";
import Paper from "@mui/material/Paper";
import { logBoxBaseZIndex } from "./LogBoxManager";
interface IProps {
children: React.ReactNode | React.ReactNode[];
}
const useStyles = makeStyles(() => ({
snackbar: {
// Log popup z-index increments, so let's add a padding to be well above them.
zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
}
}));
export function SnackbarProvider(props: IProps): React.ReactElement {
const classes = useStyles();
return (
<SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}>
<SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}
classes={{ containerRoot: classes.snackbar }}>
{props.children}
</SB>
);