Tie up loose ends

- Ensure that customTheme is redefined whenever the options modal
is closed, regardless of saved or not
- Reset the pending value for the theme editor whenever modal is clsoed
This commit is contained in:
nickofolas 2022-01-29 23:44:31 -06:00 committed by nickofolas
parent a66ed00998
commit 6f60589779
2 changed files with 10 additions and 4 deletions

@ -994,7 +994,10 @@ export function Root(props: IProps): React.ReactElement {
</Box>
<OptionsModal
open={optionsOpen}
onClose={() => setOptionsOpen(false)}
onClose={() => {
monacoRef.current?.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
setOptionsOpen(false);
}}
options={{
theme: Settings.MonacoTheme,
insertSpaces: Settings.MonacoInsertSpaces,

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Modal } from "../../ui/React/Modal";
import { defaultMonacoTheme } from "./themes";
import { defaultMonacoTheme, IScriptEditorTheme } from "./themes";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
@ -80,7 +80,7 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
}
// Need to deep copy the object since it has nested attributes
const [themeCopy, setThemeCopy] = useState(JSON.parse(JSON.stringify(Settings.EditorTheme)));
const [themeCopy, setThemeCopy] = useState<IScriptEditorTheme>(JSON.parse(JSON.stringify(Settings.EditorTheme)));
function onColorChange(name: string, value: string): void {
setThemeCopy(_.set(themeCopy, name, value));
@ -98,7 +98,10 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Modal open={props.open} onClose={() => {
setThemeCopy(Settings.EditorTheme);
props.onClose();
}}>
<Typography variant="h4">Customize Editor theme</Typography>
<Typography>Hover over input boxes for more information</Typography>
<OptionSwitch