Add editor settings

This commit is contained in:
Zack Rauen 2022-02-05 03:35:07 -05:00
parent 854afc27cf
commit b3ec18b9af
7 changed files with 86 additions and 9 deletions

View File

@ -77,6 +77,30 @@
}
}
},
"editor": {
"name": "Editor Preferences",
"lineNumbers": {
"name": "Line Numbers",
"note": "Enables showing line numbers on the side of the editor"
},
"fontSize": {
"name": "Font Size",
"note": "Size of the font (pt) to use in the editor"
},
"minimap": {
"name": "Minimap",
"note": "Enables showing the code minimap on the side of the editor"
},
"renderWhitespace": {
"name": "Show Whitespace",
"note": "When whitespace should be shown by the editor",
"options": {
"all": "Always",
"none": "Never",
"selection": "Selection"
}
}
},
"developer": {
"name": "Developer Settings",
"devTools": {

View File

@ -35,16 +35,14 @@ export default [
},
{
type: "category",
id: "developer",
id: "editor",
collapsible: true,
shown: false,
settings: [
{type: "switch", id: "debugLogs", value: false},
{type: "switch", id: "devTools", value: false},
{type: "switch", id: "debuggerHotkey", value: false, enableWith: "devTools"},
{type: "switch", id: "reactDevTools", value: false, enableWith: "devTools"},
{type: "switch", id: "inspectElement", value: false, enableWith: "devTools"},
{type: "switch", id: "devToolsWarning", value: false, enableWith: "devTools"},
{type: "switch", id: "lineNumbers", value: true},
{type: "number", id: "fontSize", min: 2, value: 14},
{type: "switch", id: "minimap", value: true},
{type: "dropdown", id: "renderWhitespace", value: "selection", options: [{value: "none"}, {value: "all"}, {value: "selection"}]}
]
},
{
@ -57,5 +55,19 @@ export default [
{type: "switch", id: "removeMinimumSize", value: false},
{type: "switch", id: "frame", value: false, hidden: true}
]
},
{
type: "category",
id: "developer",
collapsible: true,
shown: false,
settings: [
{type: "switch", id: "debugLogs", value: false},
{type: "switch", id: "devTools", value: false},
{type: "switch", id: "debuggerHotkey", value: false, enableWith: "devTools"},
{type: "switch", id: "reactDevTools", value: false, enableWith: "devTools"},
{type: "switch", id: "inspectElement", value: false, enableWith: "devTools"},
{type: "switch", id: "devToolsWarning", value: false, enableWith: "devTools"},
]
}
];

View File

@ -112,6 +112,7 @@ export default new class SettingsManager {
if (previousState[category][setting] == undefined) continue;
const settingObj = this.getSetting(id, category, setting);
if (settingObj.type == "switch") this.state[id][category][setting] = previousState[category][setting];
if (settingObj.type == "number") this.state[id][category][setting] = previousState[category][setting];
if (settingObj.type == "dropdown") {
const exists = settingObj.options.some(o => o.value == previousState[category][setting]);
if (exists) this.state[id][category][setting] = previousState[category][setting];

View File

@ -0,0 +1,16 @@
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
opacity: 0.5;
}
.bd-number-input {
display: flex;
background-color: var(--deprecated-text-input-bg);
border: 1px solid var(--deprecated-text-input-border);
color: var(--text-normal);
font-size: 14px;
padding: 5px;
margin: 0;
border-radius: 3px;
width: 70px;
}

View File

@ -1,4 +1,4 @@
import {React, WebpackModules, DiscordModules} from "modules";
import {React, WebpackModules, DiscordModules, Settings} from "modules";
import Checkbox from "./checkbox";
@ -35,7 +35,11 @@ export default class CodeEditor extends React.Component {
this.editor = window.monaco.editor.create(document.getElementById(this.props.id), {
value: this.props.value,
language: this.props.language,
theme: DiscordModules.UserSettingsStore.theme == "light" ? "vs" : "vs-dark"
theme: DiscordModules.UserSettingsStore.theme == "light" ? "vs" : "vs-dark",
fontSize: Settings.get("settings", "editor", "fontSize"),
lineNumbers: Settings.get("settings", "editor", "lineNumbers"),
minimap: {enabled: Settings.get("settings", "editor", "minimap")},
renderWhitespace: Settings.get("settings", "editor", "renderWhitespace")
});
window.addEventListener("resize", this.resize);

View File

@ -0,0 +1,18 @@
import {React} from "modules";
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {value: this.props.value};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({value: e.target.value});
if (this.props.onChange) this.props.onChange(e.target.value);
}
render() {
return <input onChange={this.onChange} type="number" className="bd-number-input" min={this.props.min} max={this.props.max} step={this.props.step} value={this.state.value} />;
}
}

View File

@ -4,6 +4,7 @@ import Title from "./title";
import Divider from "./divider";
import Switch from "./components/switch";
import Dropdown from "./components/dropdown";
import Number from "./components/number";
import Item from "./components/item";
const baseClassName = "bd-settings-group";
@ -61,6 +62,7 @@ export default class Group extends React.Component {
{settings.filter(s => !s.hidden).map((setting) => {
let component = null;
if (setting.type == "dropdown") component = <Dropdown disabled={setting.disabled} id={setting.id} options={setting.options} value={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
if (setting.type == "number") component = <Number disabled={setting.disabled} id={setting.id} min={setting.min} max={setting.max} step={setting.step} value={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
if (setting.type == "switch") component = <Switch disabled={setting.disabled} id={setting.id} checked={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
if (!component) return null;
return <Item id={setting.id} key={setting.id} name={setting.name} note={setting.note}>{component}</Item>;