Add Paper styling to modal

This commit is contained in:
nickofolas 2022-01-29 23:54:36 -06:00
parent e800886d42
commit dd77deca7b

@ -7,6 +7,7 @@ import Button from "@mui/material/Button";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import ReplyIcon from "@mui/icons-material/Reply"; import ReplyIcon from "@mui/icons-material/Reply";
import HistoryIcon from '@mui/icons-material/History'; import HistoryIcon from '@mui/icons-material/History';
@ -104,168 +105,172 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
}}> }}>
<Typography variant="h4">Customize Editor theme</Typography> <Typography variant="h4">Customize Editor theme</Typography>
<Typography>Hover over input boxes for more information</Typography> <Typography>Hover over input boxes for more information</Typography>
<OptionSwitch <Paper sx={{ p: 1, my: 1 }}>
checked={themeCopy.base === "vs"} <OptionSwitch
onChange={(val) => { checked={themeCopy.base === "vs"}
setThemeCopy(_.set(themeCopy, "base", val ? "vs" : "vs-dark")); onChange={(val) => {
rerender(); setThemeCopy(_.set(themeCopy, "base", val ? "vs" : "vs-dark"));
}}
text="Use light theme as base"
tooltip={
<>
If enabled, the vs light theme will be used as the
theme base, otherwise, vs-dark will be used.
</>
}
/>
<Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "fit-content", gap: 1 }}>
<Box>
<Typography variant="h6">UI</Typography>
<ColorEditor
label="Background color"
themePath="common.bg"
onColorChange={onColorChange}
color={themeCopy.common.bg}
defaultColor={defaultMonacoTheme.common.bg}
/>
<ColorEditor
label="Current line and minimap background color"
themePath="ui.line"
onColorChange={onColorChange}
color={themeCopy.ui.line}
defaultColor={defaultMonacoTheme.ui.line}
/>
<ColorEditor
label="Base text color"
themePath="common.fg"
onColorChange={onColorChange}
color={themeCopy.common.fg}
defaultColor={defaultMonacoTheme.common.fg}
/>
<ColorEditor
label="Popup background color"
themePath="ui.panel.bg"
onColorChange={onColorChange}
color={themeCopy.ui.panel.bg}
defaultColor={defaultMonacoTheme.ui.panel.bg}
/>
<ColorEditor
label="Background color for selected item in popup"
themePath="ui.panel.selected"
onColorChange={onColorChange}
color={themeCopy.ui.panel.selected}
defaultColor={defaultMonacoTheme.ui.panel.selected}
/>
<ColorEditor
label="Popup border color"
themePath="ui.panel.border"
onColorChange={onColorChange}
color={themeCopy.ui.panel.border}
defaultColor={defaultMonacoTheme.ui.panel.border}
/>
<ColorEditor
label="Background color of highlighted text"
themePath="ui.selection.bg"
onColorChange={onColorChange}
color={themeCopy.ui.selection.bg}
defaultColor={defaultMonacoTheme.ui.selection.bg}
/>
</Box>
<Box>
<Typography variant="h6">Syntax</Typography>
<ColorEditor
label="Numbers, function names, and other key vars"
themePath="common.accent"
onColorChange={onColorChange}
color={themeCopy.common.accent}
defaultColor={defaultMonacoTheme.common.accent}
/>
<ColorEditor
label="Keywords"
themePath="syntax.keyword"
onColorChange={onColorChange}
color={themeCopy.syntax.keyword}
defaultColor={defaultMonacoTheme.syntax.keyword}
/>
<ColorEditor
label="Strings"
themePath="syntax.string"
onColorChange={onColorChange}
color={themeCopy.syntax.string}
defaultColor={defaultMonacoTheme.syntax.string}
/>
<ColorEditor
label="Regexp literals as well as escapes within strings"
themePath="syntax.regexp"
onColorChange={onColorChange}
color={themeCopy.syntax.regexp}
defaultColor={defaultMonacoTheme.syntax.regexp}
/>
<ColorEditor
label="Constants"
themePath="syntax.constant"
onColorChange={onColorChange}
color={themeCopy.syntax.constant}
defaultColor={defaultMonacoTheme.syntax.constant}
/>
<ColorEditor
label="Entities"
themePath="syntax.entity"
onColorChange={onColorChange}
color={themeCopy.syntax.entity}
defaultColor={defaultMonacoTheme.syntax.entity}
/>
<ColorEditor
label="'this', 'ns', types, and tags"
themePath="syntax.tag"
onColorChange={onColorChange}
color={themeCopy.syntax.tag}
defaultColor={defaultMonacoTheme.syntax.tag}
/>
<ColorEditor
label="Netscript functions and constructors"
themePath="syntax.markup"
onColorChange={onColorChange}
color={themeCopy.syntax.markup}
defaultColor={defaultMonacoTheme.syntax.markup}
/>
<ColorEditor
label="Errors"
themePath="syntax.error"
onColorChange={onColorChange}
color={themeCopy.syntax.error}
defaultColor={defaultMonacoTheme.syntax.error}
/>
<ColorEditor
label="Comments"
themePath="syntax.comment"
onColorChange={onColorChange}
color={themeCopy.syntax.comment}
defaultColor={defaultMonacoTheme.syntax.comment}
/>
</Box>
</Box>
<TextField
multiline
fullWidth
maxRows={10}
label={"import / export theme"}
value={JSON.stringify(themeCopy, undefined, 2)}
onChange={onThemeChange}
/>
<Box sx={{ my: 1 }}>
<Button onClick={() => {
Settings.EditorTheme = { ...themeCopy };
props.onClose()
}} startIcon={<SaveIcon />}>Save</Button>
<Button
onClick={() => {
setThemeCopy(defaultMonacoTheme);
rerender(); rerender();
}} }}
startIcon={<HistoryIcon />} text="Use light theme as base"
>Reset to default</Button> tooltip={
</Box> <>
If enabled, the <code>vs</code> light theme will be used as the
theme base, otherwise, <code>vs-dark</code> will be used.
</>
}
/>
<Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "fit-content", gap: 1 }}>
<Box>
<Typography variant="h6">UI</Typography>
<ColorEditor
label="Background color"
themePath="common.bg"
onColorChange={onColorChange}
color={themeCopy.common.bg}
defaultColor={defaultMonacoTheme.common.bg}
/>
<ColorEditor
label="Current line and minimap background color"
themePath="ui.line"
onColorChange={onColorChange}
color={themeCopy.ui.line}
defaultColor={defaultMonacoTheme.ui.line}
/>
<ColorEditor
label="Base text color"
themePath="common.fg"
onColorChange={onColorChange}
color={themeCopy.common.fg}
defaultColor={defaultMonacoTheme.common.fg}
/>
<ColorEditor
label="Popup background color"
themePath="ui.panel.bg"
onColorChange={onColorChange}
color={themeCopy.ui.panel.bg}
defaultColor={defaultMonacoTheme.ui.panel.bg}
/>
<ColorEditor
label="Background color for selected item in popup"
themePath="ui.panel.selected"
onColorChange={onColorChange}
color={themeCopy.ui.panel.selected}
defaultColor={defaultMonacoTheme.ui.panel.selected}
/>
<ColorEditor
label="Popup border color"
themePath="ui.panel.border"
onColorChange={onColorChange}
color={themeCopy.ui.panel.border}
defaultColor={defaultMonacoTheme.ui.panel.border}
/>
<ColorEditor
label="Background color of highlighted text"
themePath="ui.selection.bg"
onColorChange={onColorChange}
color={themeCopy.ui.selection.bg}
defaultColor={defaultMonacoTheme.ui.selection.bg}
/>
</Box>
<Box>
<Typography variant="h6">Syntax</Typography>
<ColorEditor
label="Numbers, function names, and other key vars"
themePath="common.accent"
onColorChange={onColorChange}
color={themeCopy.common.accent}
defaultColor={defaultMonacoTheme.common.accent}
/>
<ColorEditor
label="Keywords"
themePath="syntax.keyword"
onColorChange={onColorChange}
color={themeCopy.syntax.keyword}
defaultColor={defaultMonacoTheme.syntax.keyword}
/>
<ColorEditor
label="Strings"
themePath="syntax.string"
onColorChange={onColorChange}
color={themeCopy.syntax.string}
defaultColor={defaultMonacoTheme.syntax.string}
/>
<ColorEditor
label="Regexp literals as well as escapes within strings"
themePath="syntax.regexp"
onColorChange={onColorChange}
color={themeCopy.syntax.regexp}
defaultColor={defaultMonacoTheme.syntax.regexp}
/>
<ColorEditor
label="Constants"
themePath="syntax.constant"
onColorChange={onColorChange}
color={themeCopy.syntax.constant}
defaultColor={defaultMonacoTheme.syntax.constant}
/>
<ColorEditor
label="Entities"
themePath="syntax.entity"
onColorChange={onColorChange}
color={themeCopy.syntax.entity}
defaultColor={defaultMonacoTheme.syntax.entity}
/>
<ColorEditor
label="'this', 'ns', types, and tags"
themePath="syntax.tag"
onColorChange={onColorChange}
color={themeCopy.syntax.tag}
defaultColor={defaultMonacoTheme.syntax.tag}
/>
<ColorEditor
label="Netscript functions and constructors"
themePath="syntax.markup"
onColorChange={onColorChange}
color={themeCopy.syntax.markup}
defaultColor={defaultMonacoTheme.syntax.markup}
/>
<ColorEditor
label="Errors"
themePath="syntax.error"
onColorChange={onColorChange}
color={themeCopy.syntax.error}
defaultColor={defaultMonacoTheme.syntax.error}
/>
<ColorEditor
label="Comments"
themePath="syntax.comment"
onColorChange={onColorChange}
color={themeCopy.syntax.comment}
defaultColor={defaultMonacoTheme.syntax.comment}
/>
</Box>
</Box>
</Paper>
<Paper sx={{ p: 1 }}>
<TextField
multiline
fullWidth
maxRows={10}
label={"import / export theme"}
value={JSON.stringify(themeCopy, undefined, 2)}
onChange={onThemeChange}
/>
<Box sx={{ mt: 1 }}>
<Button onClick={() => {
Settings.EditorTheme = { ...themeCopy };
props.onClose()
}} startIcon={<SaveIcon />}>Save</Button>
<Button
onClick={() => {
setThemeCopy(defaultMonacoTheme);
rerender();
}}
startIcon={<HistoryIcon />}
>Reset to default</Button>
</Box>
</Paper>
</Modal> </Modal>
) )
} }