From f1ba4e8a54eb7dd096dd2727679a2737f08acc5f Mon Sep 17 00:00:00 2001 From: makermelissa-ai-assistant <276182804+makermelissa-ai-assistant@users.noreply.github.com> Date: Fri, 17 Jul 2026 09:25:39 -0700 Subject: [PATCH] Add editor font size setting --- js/common/settings.js | 37 ++++++++++++++++++++++++++++++++----- js/layout.js | 2 +- js/script.js | 30 +++++++++++++++++++++++++++++- sass/layout/_layout.scss | 6 +++--- 4 files changed, 65 insertions(+), 10 deletions(-) diff --git a/js/common/settings.js b/js/common/settings.js index 6f48b5a..e73fca3 100644 --- a/js/common/settings.js +++ b/js/common/settings.js @@ -29,7 +29,7 @@ class SettingsDialog extends GenericModal { contentDiv.appendChild(label); const control = await this._createControl(setting); - control.value = settings[setting.key]; + control.value = settings?.[setting.key] ?? setting.default; contentDiv.appendChild(control); } @@ -40,7 +40,20 @@ class SettingsDialog extends GenericModal { let settings = {} for (const setting of this._settingsData) { const control = this._currentModal.querySelector(`#setting-${setting.key}`); - settings[setting.key] = control.value; + let value = control.value; + if (setting.type === 'number') { + value = Number.parseInt(value, 10); + if (Number.isNaN(value)) { + value = setting.default; + } + if (setting.min !== undefined) { + value = Math.max(value, setting.min); + } + if (setting.max !== undefined) { + value = Math.min(value, setting.max); + } + } + settings[setting.key] = value; } this._returnValue(settings); } @@ -56,6 +69,18 @@ class SettingsDialog extends GenericModal { option.textContent = optionValue.charAt(0).toUpperCase() + optionValue.slice(1); control.appendChild(option); } + } else if (settingData.type === 'number') { + control = document.createElement('input'); + control.type = 'number'; + if (settingData.min !== undefined) { + control.min = settingData.min; + } + if (settingData.max !== undefined) { + control.max = settingData.max; + } + if (settingData.step !== undefined) { + control.step = settingData.step; + } } control.id = `setting-${settingData.key}`; @@ -70,7 +95,8 @@ class Settings { constructor() { // This will hold the layout/save data for the settings this._settingsData = [ - { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' } + { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' }, + { key: 'editorFontSize', type: 'number', label: 'Font Size', icon: 'text-height', min: 8, max: 48, step: 1, default: 16 } ]; this._settings = {}; this._loadSettings(); @@ -110,8 +136,9 @@ class Settings { } async showDialog() { - this._settings = await this._settingsDialog.open(this._settings); - if (this._settings) { + const updatedSettings = await this._settingsDialog.open(this._settings); + if (updatedSettings) { + this._settings = updatedSettings; this._saveSettings(); return true; } diff --git a/js/layout.js b/js/layout.js index aa5caf4..14c2af1 100644 --- a/js/layout.js +++ b/js/layout.js @@ -151,7 +151,7 @@ function updatePageLayout(updateType) { } } -function refitTerminal() { +export function refitTerminal() { // Custom function to replace the terminal refit function as it was a bit buggy // Re-fitting the terminal requires a full re-layout of the DOM which can be tricky to time right. diff --git a/js/script.js b/js/script.js index 8cf6ffd..c1a9d9c 100644 --- a/js/script.js +++ b/js/script.js @@ -29,7 +29,7 @@ import { Settings } from './common/settings.js'; import { CONNTYPE } from './constants.js'; import './layout.js'; // load for side effects only import { setupPlotterChart } from "./common/plotter.js"; -import { mainContent, showSerial } from './layout.js'; +import { mainContent, showSerial, refitTerminal } from './layout.js'; import { registerPWA } from "./common/pwa.js"; registerPWA(); @@ -68,6 +68,10 @@ const messageDialog = new MessageModal("message"); const connectionType = new ButtonValueDialog("connection-type"); const settings = new Settings(); +const DEFAULT_EDITOR_FONT_SIZE = 16; +const MIN_EDITOR_FONT_SIZE = 8; +const MAX_EDITOR_FONT_SIZE = 48; + // localStorage key used to remember the most recently chosen backend // ("web" | "ble" | "usb"). When the user clicks Connect after a // disconnect, we prefer the last backend over re-prompting for one. @@ -97,6 +101,23 @@ function rememberLastBackend(workflowType) { } const editorTheme = EditorView.theme({}, {dark: getCssVar('editor-theme-dark').trim() === '1'}); +const editorFontSizeCompartment = new Compartment(); + +function getEditorFontSize() { + const fontSize = Number.parseInt(settings.getSetting('editorFontSize'), 10); + if (Number.isNaN(fontSize)) { + return DEFAULT_EDITOR_FONT_SIZE; + } + return Math.min(Math.max(fontSize, MIN_EDITOR_FONT_SIZE), MAX_EDITOR_FONT_SIZE); +} + +function editorFontSizeTheme() { + return EditorView.theme({ + "&": { + fontSize: `${getEditorFontSize()}px`, + }, + }); +} // Map file extensions to a CodeMirror 6 language extension factory. // Anything not in this map falls back to plain text (no language plugin). @@ -662,6 +683,7 @@ const baseEditorExtensions = [ function buildEditorExtensions(path) { return [ ...baseEditorExtensions, + editorFontSizeCompartment.of(editorFontSizeTheme()), languageCompartment.of(languageExtensionsForPath(path)), ]; } @@ -939,6 +961,7 @@ function getCssVar(varName) { async function setupXterm() { state.terminal = new Terminal({ + fontSize: getEditorFontSize(), theme: { background: getCssVar('background-color'), foreground: getCssVar('terminal-text-color'), @@ -999,6 +1022,9 @@ function applySettings() { // Apply to EditorView.theme dark parameter editor.darkTheme = getCssVar('editor-theme-dark').trim() === '1'; + editor.dispatch({ + effects: editorFontSizeCompartment.reconfigure(editorFontSizeTheme()), + }); // Apply to xterm state.terminal.options.theme = { @@ -1006,6 +1032,8 @@ function applySettings() { foreground: getCssVar('terminal-text-color'), cursor: getCssVar('terminal-text-color'), }; + state.terminal.options.fontSize = getEditorFontSize(); + refitTerminal(); debugMessageAnsi = null; diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss index b7d7c31..99f7305 100644 --- a/sass/layout/_layout.scss +++ b/sass/layout/_layout.scss @@ -155,15 +155,15 @@ &.settings-dialog { #settings-content { padding-top: 10px; - display: flex; - justify-content: center; + display: grid; + grid-template-columns: max-content minmax(120px, 1fr); + gap: 12px 20px; align-items: center; min-width: 300px; label { i { margin-right: 3px; } - margin-right: 20px; white-space: nowrap; } input, select {