mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 18:23:15 +02:00
a26b9c8dcf
Removed the themes buttons that were in the ThemeEditorModal and only left a "Revert to Default" button along with a link to the ThemeBrowser page. Split off the buttons into reusable components since they are now used in two pages. Display the themes in big cards with a zoomable screenshot. Applying the theme now shows a toast with an option to undo the action. The snackbar now allows ReactNode instead of only strings. - Add link with details on how to create a new theme in the game. - Add link to the theme-sharing discord channel. - Add icons to the theme & style buttons in GameOptions - Add "Theme Editor" button to ThemeBrowser - Add "Style Editor" button to ThemeBrowser - Move Styles related files into Themes folder - Includes a modal that shows a bigger version of the screenshot. - Change Snackbar to allow for ReactNode as the message
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
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,
|
|
|
|
"& .MuiAlert-icon": {
|
|
alignSelf: 'center',
|
|
},
|
|
}
|
|
}));
|
|
|
|
export function SnackbarProvider(props: IProps): React.ReactElement {
|
|
const classes = useStyles();
|
|
return (
|
|
<SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}
|
|
classes={{ containerRoot: classes.snackbar }}>
|
|
{props.children}
|
|
</SB>
|
|
);
|
|
}
|
|
|
|
export const SnackbarEvents = new EventEmitter<[string | React.ReactNode, "success" | "warning" | "error" | "info", number]>();
|
|
|
|
export function Snackbar(): React.ReactElement {
|
|
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
|
|
|
|
useEffect(() =>
|
|
SnackbarEvents.subscribe((s, variant, duration) => {
|
|
const id = enqueueSnackbar(<Alert severity={variant}>{s}</Alert>, {
|
|
content: (k, m) => <Paper key={k}>{m}</Paper>,
|
|
variant: variant,
|
|
autoHideDuration: duration,
|
|
onClick: () => closeSnackbar(id),
|
|
})
|
|
}),
|
|
);
|
|
return <></>;
|
|
}
|