From 552cc2753f2d48ed72a641b85eb1bb349f8a580d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 11 Jan 2025 11:02:22 +0200 Subject: [PATCH] chore(client/ts): port options/appearance --- src/public/app/components/app_context.ts | 3 +++ .../{code_block.js => code_block.ts} | 25 +++++++++++++++---- ...integration.js => electron_integration.ts} | 18 ++++++++----- .../options/appearance/{i18n.js => i18n.ts} | 17 ++++++++++--- ..._content_width.js => max_content_width.ts} | 10 +++++--- .../appearance/{ribbon.js => ribbon.ts} | 9 +++++-- .../options/appearance/{theme.js => theme.ts} | 25 +++++++++++++++---- 7 files changed, 83 insertions(+), 24 deletions(-) rename src/public/app/widgets/type_widgets/options/appearance/{code_block.js => code_block.ts} (84%) rename src/public/app/widgets/type_widgets/options/appearance/{electron_integration.js => electron_integration.ts} (84%) rename src/public/app/widgets/type_widgets/options/appearance/{i18n.js => i18n.ts} (78%) rename src/public/app/widgets/type_widgets/options/appearance/{max_content_width.js => max_content_width.ts} (78%) rename src/public/app/widgets/type_widgets/options/appearance/{ribbon.js => ribbon.ts} (83%) rename src/public/app/widgets/type_widgets/options/appearance/{theme.js => theme.ts} (80%) diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts index 71bff126a..ea11d2ea4 100644 --- a/src/public/app/components/app_context.ts +++ b/src/public/app/components/app_context.ts @@ -188,6 +188,9 @@ export type CommandMappings = { copyTabToNewWindow: CommandData; closeActiveTab: CommandData & { $el: JQuery + }, + setZoomFactorAndSave: { + zoomFactor: string; } }; diff --git a/src/public/app/widgets/type_widgets/options/appearance/code_block.js b/src/public/app/widgets/type_widgets/options/appearance/code_block.ts similarity index 84% rename from src/public/app/widgets/type_widgets/options/appearance/code_block.js rename to src/public/app/widgets/type_widgets/options/appearance/code_block.ts index 3b999edd5..a51a4b3c9 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/code_block.js +++ b/src/public/app/widgets/type_widgets/options/appearance/code_block.ts @@ -1,3 +1,4 @@ +import type { OptionMap } from "../../../../../../services/options_interface.js"; import { t } from "../../../../services/i18n.js"; import library_loader from "../../../../services/library_loader.js"; import server from "../../../../services/server.js"; @@ -54,15 +55,27 @@ const TPL = ` `; +interface Theme { + title: string; + val: string; +} + +type Response = Record + /** * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter. */ export default class CodeBlockOptions extends OptionsWidget { + + private $themeSelect!: JQuery; + private $wordWrap!: JQuery; + private $sampleEl!: JQuery; + doRender() { this.$widget = $(TPL); this.$themeSelect = this.$widget.find(".theme-select"); this.$themeSelect.on("change", async () => { - const newTheme = this.$themeSelect.val(); + const newTheme = String(this.$themeSelect.val()); library_loader.loadHighlightingTheme(newTheme); await server.put(`options/codeBlockTheme/${newTheme}`); }); @@ -74,7 +87,7 @@ export default class CodeBlockOptions extends OptionsWidget { this.$sampleEl = this.$widget.find(".code-sample"); } - #setupPreview(shouldEnableSyntaxHighlight) { + #setupPreview(shouldEnableSyntaxHighlight: boolean) { const text = SAMPLE_CODE; if (shouldEnableSyntaxHighlight) { library_loader.requireLibrary(library_loader.HIGHLIGHT_JS).then(() => { @@ -88,8 +101,8 @@ export default class CodeBlockOptions extends OptionsWidget { } } - async optionsLoaded(options) { - const themeGroups = await server.get("options/codeblock-themes"); + async optionsLoaded(options: OptionMap) { + const themeGroups = await server.get("options/codeblock-themes"); this.$themeSelect.empty(); for (const [key, themes] of Object.entries(themeGroups)) { @@ -104,7 +117,9 @@ export default class CodeBlockOptions extends OptionsWidget { this.$themeSelect.append(option); } } - this.$themeSelect.append($group); + if ($group) { + this.$themeSelect.append($group); + } } this.$themeSelect.val(options.codeBlockTheme); this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap); diff --git a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js b/src/public/app/widgets/type_widgets/options/appearance/electron_integration.ts similarity index 84% rename from src/public/app/widgets/type_widgets/options/appearance/electron_integration.js rename to src/public/app/widgets/type_widgets/options/appearance/electron_integration.ts index d9007a50c..a298109a1 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js +++ b/src/public/app/widgets/type_widgets/options/appearance/electron_integration.ts @@ -1,15 +1,16 @@ import OptionsWidget from "../options_widget.js"; import { t } from "../../../../services/i18n.js"; import utils from "../../../../services/utils.js"; +import type { OptionMap } from "../../../../../../services/options_interface.js"; const TPL = ` -
+

${t("electron_integration.desktop-application")}

- +

${t("zoom_factor.description")}

@@ -20,7 +21,7 @@ const TPL = ` ${t("electron_integration.native-title-bar")}

${t("electron_integration.native-title-bar-description")}

- +
@@ -28,7 +29,7 @@ const TPL = ` ${t("electron_integration.background-effects")}

${t("electron_integration.background-effects-description")}

- +
@@ -36,12 +37,17 @@ const TPL = ` `; export default class ElectronIntegrationOptions extends OptionsWidget { + + private $zoomFactorSelect!: JQuery; + private $nativeTitleBar!: JQuery; + private $backgroundEffects!: JQuery; + doRender() { this.$widget = $(TPL); this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select"); this.$zoomFactorSelect.on("change", () => { - appContext.triggerCommand("setZoomFactorAndSave", { zoomFactor: this.$zoomFactorSelect.val() }); + this.triggerCommand("setZoomFactorAndSave", { zoomFactor: String(this.$zoomFactorSelect.val()) }); }); this.$nativeTitleBar = this.$widget.find("input.native-title-bar"); @@ -62,7 +68,7 @@ export default class ElectronIntegrationOptions extends OptionsWidget { return utils.isElectron(); } - async optionsLoaded(options) { + async optionsLoaded(options: OptionMap) { this.$zoomFactorSelect.val(options.zoomFactor); this.setCheckboxState(this.$nativeTitleBar, options.nativeTitleBarVisible); this.setCheckboxState(this.$backgroundEffects, options.backgroundEffects); diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.js b/src/public/app/widgets/type_widgets/options/appearance/i18n.ts similarity index 78% rename from src/public/app/widgets/type_widgets/options/appearance/i18n.js rename to src/public/app/widgets/type_widgets/options/appearance/i18n.ts index c60318dd1..7d1c54f0f 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/i18n.js +++ b/src/public/app/widgets/type_widgets/options/appearance/i18n.ts @@ -2,6 +2,7 @@ import OptionsWidget from "../options_widget.js"; import server from "../../../../services/server.js"; import utils from "../../../../services/utils.js"; import { t } from "../../../../services/i18n.js"; +import type { OptionMap } from "../../../../../../services/options_interface.js"; const TPL = `
@@ -24,7 +25,17 @@ const TPL = `
`; +// TODO: Deduplicate with server. +interface Locale { + id: string; + name: string; +} + export default class LocalizationOptions extends OptionsWidget { + + private $localeSelect!: JQuery; + private $firstDayOfWeek!: JQuery; + doRender() { this.$widget = $(TPL); @@ -37,12 +48,12 @@ export default class LocalizationOptions extends OptionsWidget { this.$firstDayOfWeek = this.$widget.find(".first-day-of-week-select"); this.$firstDayOfWeek.on("change", () => { - this.updateOption("firstDayOfWeek", this.$firstDayOfWeek.val()); + this.updateOption("firstDayOfWeek", String(this.$firstDayOfWeek.val())); }); } - async optionsLoaded(options) { - const availableLocales = await server.get("options/locales"); + async optionsLoaded(options: OptionMap) { + const availableLocales = await server.get("options/locales"); this.$localeSelect.empty(); for (const locale of availableLocales) { diff --git a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts similarity index 78% rename from src/public/app/widgets/type_widgets/options/appearance/max_content_width.js rename to src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts index 658d4babe..f93642641 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js +++ b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts @@ -1,6 +1,7 @@ import OptionsWidget from "../options_widget.js"; import utils from "../../../../services/utils.js"; import { t } from "../../../../services/i18n.js"; +import type { OptionMap } from "../../../../../../services/options_interface.js"; const MIN_VALUE = 640; @@ -24,17 +25,20 @@ const TPL = `
`; export default class MaxContentWidthOptions extends OptionsWidget { + + private $maxContentWidth!: JQuery; + doRender() { this.$widget = $(TPL); this.$maxContentWidth = this.$widget.find(".max-content-width"); - this.$maxContentWidth.on("change", async () => this.updateOption("maxContentWidth", this.$maxContentWidth.val())); + this.$maxContentWidth.on("change", async () => this.updateOption("maxContentWidth", String(this.$maxContentWidth.val()))); this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp(t("max_content_width.reload_description"))); } - async optionsLoaded(options) { - this.$maxContentWidth.val(Math.max(MIN_VALUE, options.maxContentWidth)); + async optionsLoaded(options: OptionMap) { + this.$maxContentWidth.val(Math.max(MIN_VALUE, parseInt(options.maxContentWidth, 10))); } } diff --git a/src/public/app/widgets/type_widgets/options/appearance/ribbon.js b/src/public/app/widgets/type_widgets/options/appearance/ribbon.ts similarity index 83% rename from src/public/app/widgets/type_widgets/options/appearance/ribbon.js rename to src/public/app/widgets/type_widgets/options/appearance/ribbon.ts index 4f80dbf4b..e6128b2ee 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/ribbon.js +++ b/src/public/app/widgets/type_widgets/options/appearance/ribbon.ts @@ -1,3 +1,4 @@ +import type { OptionMap } from "../../../../../../services/options_interface.js"; import { t } from "../../../../services/i18n.js"; import OptionsWidget from "../options_widget.js"; @@ -8,7 +9,7 @@ const TPL = ` ${t("ribbon.promoted_attributes_message")} - +