Add editor settings
This commit is contained in:
parent
854afc27cf
commit
b3ec18b9af
|
@ -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": {
|
||||
|
|
|
@ -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"},
|
||||
]
|
||||
}
|
||||
];
|
|
@ -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];
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
}
|
|
@ -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>;
|
||||
|
|
Loading…
Reference in New Issue