mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-26 17:43:48 +01:00
Add Paper styling to modal
This commit is contained in:
nickofolas
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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user