mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-21 08:42:53 +02:00
Move theme related things into its own subfolder
This will make contributions easier and less prone to conflicts.
This commit is contained in:
Martin Fournier
@@ -0,0 +1,381 @@
|
||||
import React, { useState } from "react";
|
||||
import { Modal } from "../../ui/React/Modal";
|
||||
import Button from "@mui/material/Button";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import ReplyIcon from "@mui/icons-material/Reply";
|
||||
import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
|
||||
import { Color, ColorPicker } from "material-ui-color";
|
||||
import { ThemeEvents } from "./Theme";
|
||||
import { Settings, defaultSettings } from "../../Settings/Settings";
|
||||
import { getPredefinedThemes } from "../Themes";
|
||||
import { UserInterfaceTheme } from "../../ScriptEditor/NetscriptDefinitions";
|
||||
|
||||
interface IProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface IColorEditorProps {
|
||||
name: string;
|
||||
color: string | undefined;
|
||||
onColorChange: (name: string, value: string) => void;
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
function ColorEditor({ name, onColorChange, color, defaultColor }: IColorEditorProps): React.ReactElement {
|
||||
if (color === undefined) {
|
||||
console.error(`color ${name} was undefined, reverting to default`);
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextField
|
||||
sx={{ mx: 1 }}
|
||||
label={name}
|
||||
value={color}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<ColorPicker
|
||||
hideTextfield
|
||||
deferred
|
||||
value={color}
|
||||
onChange={(newColor: Color) => onColorChange(name, "#" + newColor.hex)}
|
||||
disableAlpha
|
||||
/>
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<>
|
||||
<IconButton onClick={() => onColorChange(name, defaultColor)}>
|
||||
<ReplyIcon color="primary" />
|
||||
</IconButton>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
const [customTheme, setCustomTheme] = useState<{ [key: string]: string | undefined }>({
|
||||
...Settings.theme,
|
||||
});
|
||||
|
||||
const predefinedThemes = getPredefinedThemes();
|
||||
const themes = predefinedThemes && Object.entries(predefinedThemes)
|
||||
.map(([key, templateTheme]) => {
|
||||
const name = templateTheme.name || key;
|
||||
let inner = <Typography>{name}</Typography>;
|
||||
let toolTipTitle;
|
||||
if (templateTheme.credit) {
|
||||
toolTipTitle = <Typography>{templateTheme.description || name} <em>by {templateTheme.credit}</em></Typography>;
|
||||
} else if (templateTheme.description) {
|
||||
toolTipTitle = <Typography>{templateTheme.description}</Typography>;
|
||||
}
|
||||
if (toolTipTitle) {
|
||||
inner = <Tooltip title={toolTipTitle}>{inner}</Tooltip>
|
||||
}
|
||||
return (
|
||||
<Button onClick={() => setTemplateTheme(templateTheme.colors)}
|
||||
startIcon={<PaletteSharpIcon />} key={key} sx={{ mr: 1, mb: 1 }}>
|
||||
{inner}
|
||||
</Button>
|
||||
);
|
||||
}) || <></>;
|
||||
|
||||
function setTheme(theme: UserInterfaceTheme): void {
|
||||
setCustomTheme(theme);
|
||||
Object.assign(Settings.theme, theme);
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
function onThemeChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
try {
|
||||
const importedTheme = JSON.parse(event.target.value);
|
||||
if (typeof importedTheme !== "object") return;
|
||||
setCustomTheme(importedTheme);
|
||||
for (const key of Object.keys(importedTheme)) {
|
||||
Settings.theme[key] = importedTheme[key];
|
||||
}
|
||||
ThemeEvents.emit();
|
||||
} catch (err) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
function onColorChange(name: string, value: string): void {
|
||||
setCustomTheme((old: any) => {
|
||||
old[name] = value;
|
||||
return old;
|
||||
});
|
||||
|
||||
Settings.theme[name] = value;
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
function setTemplateTheme(theme: UserInterfaceTheme): void {
|
||||
setTheme(theme);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={props.open} onClose={props.onClose}>
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
|
||||
<Button color="primary" size="small">primary button</Button>
|
||||
</Tooltip>
|
||||
<Button color="secondary" size="small">secondary button</Button>
|
||||
<Button color="warning" size="small">warning button</Button>
|
||||
<Button color="info" size="small">info button</Button>
|
||||
<Button color="error" size="small">error button</Button>
|
||||
<Button disabled size="small">disabled button</Button>
|
||||
|
||||
<br />
|
||||
<Typography color="primary" variant="caption">text with primary color</Typography>
|
||||
<Typography color="secondary" variant="caption">text with secondary color</Typography>
|
||||
<Typography color="error" variant="caption">text with error color</Typography>
|
||||
|
||||
<br />
|
||||
<TextField value={"Text field"} size="small" />
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ py: 1, my: 1 }}>
|
||||
<ColorEditor
|
||||
name="primarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarylight"]}
|
||||
defaultColor={defaultSettings.theme["primarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primary"]}
|
||||
defaultColor={defaultSettings.theme["primary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarydark"]}
|
||||
defaultColor={defaultSettings.theme["primarydark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="successlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successlight"]}
|
||||
defaultColor={defaultSettings.theme["successlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="success"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["success"]}
|
||||
defaultColor={defaultSettings.theme["success"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="successdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successdark"]}
|
||||
defaultColor={defaultSettings.theme["successdark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="errorlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errorlight"]}
|
||||
defaultColor={defaultSettings.theme["errorlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="error"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["error"]}
|
||||
defaultColor={defaultSettings.theme["error"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="errordark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errordark"]}
|
||||
defaultColor={defaultSettings.theme["errordark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="secondarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarylight"]}
|
||||
defaultColor={defaultSettings.theme["secondarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondary"]}
|
||||
defaultColor={defaultSettings.theme["secondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarydark"]}
|
||||
defaultColor={defaultSettings.theme["secondarydark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="warninglight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warninglight"]}
|
||||
defaultColor={defaultSettings.theme["warninglight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warning"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warning"]}
|
||||
defaultColor={defaultSettings.theme["warning"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warningdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warningdark"]}
|
||||
defaultColor={defaultSettings.theme["warningdark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="infolight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infolight"]}
|
||||
defaultColor={defaultSettings.theme["infolight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="info"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["info"]}
|
||||
defaultColor={defaultSettings.theme["info"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="infodark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infodark"]}
|
||||
defaultColor={defaultSettings.theme["infodark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="welllight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["welllight"]}
|
||||
defaultColor={defaultSettings.theme["welllight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="well"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["well"]}
|
||||
defaultColor={defaultSettings.theme["well"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="white"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["white"]}
|
||||
defaultColor={defaultSettings.theme["white"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="black"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["black"]}
|
||||
defaultColor={defaultSettings.theme["black"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundprimary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundprimary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundprimary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundsecondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundsecondary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundsecondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="button"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["button"]}
|
||||
defaultColor={defaultSettings.theme["button"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="hp"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hp"]}
|
||||
defaultColor={defaultSettings.theme["hp"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="money"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["money"]}
|
||||
defaultColor={defaultSettings.theme["money"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="hack"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hack"]}
|
||||
defaultColor={defaultSettings.theme["hack"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="combat"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["combat"]}
|
||||
defaultColor={defaultSettings.theme["combat"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="cha"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["cha"]}
|
||||
defaultColor={defaultSettings.theme["cha"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="int"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["int"]}
|
||||
defaultColor={defaultSettings.theme["int"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="rep"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["rep"]}
|
||||
defaultColor={defaultSettings.theme["rep"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="disabled"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["disabled"]}
|
||||
defaultColor={defaultSettings.theme["disabled"]}
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<TextField
|
||||
sx={{ mb: 1 }}
|
||||
multiline
|
||||
fullWidth
|
||||
maxRows={3}
|
||||
label={"import / export theme"}
|
||||
value={JSON.stringify(customTheme)}
|
||||
onChange={onThemeChange}
|
||||
/>
|
||||
<>
|
||||
<Typography sx={{ my: 1 }}>Backup your theme or share it with others by copying the string above.</Typography>
|
||||
<Typography sx={{ my: 1 }}>Replace the current theme with a pre-built template using the buttons below.</Typography>
|
||||
{themes}
|
||||
</>
|
||||
</Paper>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user