2021-09-22 08:20:29 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import { Modal } from "./Modal";
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import TextField from "@mui/material/TextField";
|
|
|
|
import DoneIcon from "@mui/icons-material/Done";
|
|
|
|
import IconButton from "@mui/material/IconButton";
|
|
|
|
import ReplyIcon from "@mui/icons-material/Reply";
|
2021-09-22 17:51:13 +02:00
|
|
|
import { Color, ColorPicker } from "material-ui-color";
|
2021-09-22 08:20:29 +02:00
|
|
|
import { ThemeEvents } from "./Theme";
|
|
|
|
import { Settings, defaultSettings } from "../../Settings/Settings";
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
open: boolean;
|
|
|
|
onClose: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
function ColorEditor({ name }: { name: string }): React.ReactElement {
|
|
|
|
const [color, setColor] = useState(Settings.theme[name]);
|
|
|
|
if (color === undefined) return <></>;
|
|
|
|
const valid = color.match(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})/g);
|
|
|
|
|
|
|
|
function set(): void {
|
|
|
|
if (!valid) return;
|
|
|
|
Settings.theme[name] = color;
|
|
|
|
ThemeEvents.emit();
|
|
|
|
}
|
|
|
|
|
|
|
|
function revert(): void {
|
|
|
|
Settings.theme[name] = defaultSettings.theme[name];
|
|
|
|
setColor(defaultSettings.theme[name]);
|
|
|
|
ThemeEvents.emit();
|
|
|
|
}
|
2021-09-22 17:51:13 +02:00
|
|
|
|
2021-09-22 08:20:29 +02:00
|
|
|
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
|
|
|
setColor(event.target.value);
|
|
|
|
}
|
2021-09-22 17:51:13 +02:00
|
|
|
|
|
|
|
function onColorPickerChange(newValue: Color): void {
|
|
|
|
setColor("#" + newValue.hex.toLowerCase());
|
|
|
|
}
|
|
|
|
|
2021-09-22 08:20:29 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<TextField
|
|
|
|
sx={{ mx: 1 }}
|
|
|
|
label={name}
|
|
|
|
value={color}
|
|
|
|
onChange={onChange}
|
|
|
|
variant="standard"
|
|
|
|
InputProps={{
|
2021-09-22 17:51:13 +02:00
|
|
|
startAdornment: (
|
|
|
|
<>
|
2021-09-22 18:56:55 +02:00
|
|
|
<ColorPicker hideTextfield value={color} onChange={onColorPickerChange} />
|
2021-09-22 17:51:13 +02:00
|
|
|
</>
|
|
|
|
),
|
2021-09-22 08:20:29 +02:00
|
|
|
endAdornment: (
|
|
|
|
<>
|
|
|
|
<IconButton onClick={set} disabled={!valid}>
|
|
|
|
<DoneIcon color={valid ? "primary" : "error"} />
|
|
|
|
</IconButton>
|
|
|
|
<IconButton onClick={revert}>
|
|
|
|
<ReplyIcon color="primary" />
|
|
|
|
</IconButton>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ThemeEditorModal(props: IProps): React.ReactElement {
|
|
|
|
return (
|
|
|
|
<Modal open={props.open} onClose={props.onClose}>
|
|
|
|
<Button color="primary">primary</Button>
|
|
|
|
<Button color="secondary">secondary</Button>
|
|
|
|
<Button color="warning">warning</Button>
|
|
|
|
<Button color="info">info</Button>
|
|
|
|
<Button color="error">error</Button>
|
|
|
|
<Typography color="primary">primary</Typography>
|
|
|
|
<Typography color="secondary">secondary</Typography>
|
|
|
|
<Typography color="warning">warning</Typography>
|
|
|
|
<Typography color="info">info</Typography>
|
|
|
|
<Typography color="error">error</Typography>
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="primarylight" />
|
|
|
|
<ColorEditor name="primary" />
|
|
|
|
<ColorEditor name="primarydark" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="errorlight" />
|
|
|
|
<ColorEditor name="error" />
|
|
|
|
<ColorEditor name="errordark" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="secondarylight" />
|
|
|
|
<ColorEditor name="secondary" />
|
|
|
|
<ColorEditor name="secondarydark" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="warninglight" />
|
|
|
|
<ColorEditor name="warning" />
|
|
|
|
<ColorEditor name="warningdark" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="infolight" />
|
|
|
|
<ColorEditor name="info" />
|
|
|
|
<ColorEditor name="infodark" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="welllight" />
|
|
|
|
<ColorEditor name="well" />
|
|
|
|
<ColorEditor name="white" />
|
|
|
|
<ColorEditor name="black" />
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<ColorEditor name="hp" />
|
|
|
|
<ColorEditor name="money" />
|
|
|
|
<ColorEditor name="hack" />
|
|
|
|
<ColorEditor name="combat" />
|
|
|
|
<ColorEditor name="cha" />
|
|
|
|
<ColorEditor name="int" />
|
|
|
|
<ColorEditor name="rep" />
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|