From b3ec18b9af01935f7a1705de0930307b9a81f484 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Sat, 5 Feb 2022 03:35:07 -0500 Subject: [PATCH] Add editor settings --- assets/locales/en-us.json | 24 +++++++++++++++++ renderer/src/data/settings.js | 26 ++++++++++++++----- renderer/src/modules/settingsmanager.js | 1 + renderer/src/styles/ui/number.css | 16 ++++++++++++ renderer/src/ui/customcss/editor.jsx | 8 ++++-- .../src/ui/settings/components/number.jsx | 18 +++++++++++++ renderer/src/ui/settings/group.jsx | 2 ++ 7 files changed, 86 insertions(+), 9 deletions(-) create mode 100644 renderer/src/styles/ui/number.css create mode 100644 renderer/src/ui/settings/components/number.jsx diff --git a/assets/locales/en-us.json b/assets/locales/en-us.json index e59e62ad..1bd4be40 100644 --- a/assets/locales/en-us.json +++ b/assets/locales/en-us.json @@ -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": { diff --git a/renderer/src/data/settings.js b/renderer/src/data/settings.js index 98a1bede..d9559f84 100644 --- a/renderer/src/data/settings.js +++ b/renderer/src/data/settings.js @@ -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"}, + ] } ]; \ No newline at end of file diff --git a/renderer/src/modules/settingsmanager.js b/renderer/src/modules/settingsmanager.js index bf0bbb7a..f8ded34c 100644 --- a/renderer/src/modules/settingsmanager.js +++ b/renderer/src/modules/settingsmanager.js @@ -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]; diff --git a/renderer/src/styles/ui/number.css b/renderer/src/styles/ui/number.css new file mode 100644 index 00000000..60ca1f1a --- /dev/null +++ b/renderer/src/styles/ui/number.css @@ -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; +} \ No newline at end of file diff --git a/renderer/src/ui/customcss/editor.jsx b/renderer/src/ui/customcss/editor.jsx index f25c89cb..a9aaec50 100644 --- a/renderer/src/ui/customcss/editor.jsx +++ b/renderer/src/ui/customcss/editor.jsx @@ -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); diff --git a/renderer/src/ui/settings/components/number.jsx b/renderer/src/ui/settings/components/number.jsx new file mode 100644 index 00000000..d4ba32e9 --- /dev/null +++ b/renderer/src/ui/settings/components/number.jsx @@ -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 ; + } +} \ No newline at end of file diff --git a/renderer/src/ui/settings/group.jsx b/renderer/src/ui/settings/group.jsx index a10a30f5..050d08bf 100644 --- a/renderer/src/ui/settings/group.jsx +++ b/renderer/src/ui/settings/group.jsx @@ -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 = ; + if (setting.type == "number") component = ; if (setting.type == "switch") component = ; if (!component) return null; return {component};