From 1b95a0a9b0fd7903befba06925662e6e8c37d47e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Victor=20Ara=C3=BAjo?= Date: Tue, 17 Feb 2026 18:50:09 -0300 Subject: [PATCH] refactor(gutter): replace font size dropdown with 12-24px slider Simpler and more flexible than mapping to Obsidian CSS variables. Default is 15px. --- common/data.ts | 4 ++-- components/plugin.ts | 8 +------- components/setting-tab.ts | 24 +++++++----------------- locales/en.json | 6 +----- locales/zh-TW.json | 6 +----- locales/zh.json | 6 +----- types.d.ts | 2 +- 7 files changed, 14 insertions(+), 42 deletions(-) diff --git a/common/data.ts b/common/data.ts index 07efb6f..1c24c84 100644 --- a/common/data.ts +++ b/common/data.ts @@ -325,9 +325,9 @@ export function defaultSettings(): HeadingPluginSettings { sourceHideNumberSigns: false, useGutter: false, gutterPosition: "before-line-numbers", - gutterFontSize: "ui-small", + gutterFontSize: 15, enabledGutterSettings: false, - gutterSettings: { ...defaultHeadingDecoratorSettings(), opacity: 100 }, + gutterSettings: { ...defaultHeadingDecoratorSettings(), opacity: 80 }, enabledInOutline: false, enabledOutlineSettings: false, outlineSettings: defaultHeadingDecoratorSettings(), diff --git a/components/plugin.ts b/components/plugin.ts index 1e61689..80d4ddd 100644 --- a/components/plugin.ts +++ b/components/plugin.ts @@ -472,15 +472,9 @@ export class HeadingPlugin extends Plugin { } private applyGutterFontSize(): void { - const cssVarMap: Record = { - "ui-smaller": "var(--font-ui-smaller)", - "ui-small": "var(--font-ui-small)", - "ui-medium": "var(--font-ui-medium)", - "ui-large": "var(--font-ui-large)", - }; document.body.style.setProperty( "--heading-decorator-gutter-font-size", - cssVarMap[this.settings.gutterFontSize] ?? "var(--font-ui-small)" + `${this.settings.gutterFontSize}px` ); } diff --git a/components/setting-tab.ts b/components/setting-tab.ts index 3f2dc2c..f8ad8ed 100644 --- a/components/setting-tab.ts +++ b/components/setting-tab.ts @@ -118,22 +118,16 @@ export class HeadingSettingTab extends PluginSettingTab { new Setting(containerEl) .setName(i18n.t("setting.gutterFontSize")) .setDesc(i18n.t("setting.gutterFontSizeDesc")) - .addDropdown((dropdown) => { - dropdown - .addOptions({ - "ui-smaller": i18n.t("setting.gutterFontSizeSmaller"), - "ui-small": i18n.t("setting.gutterFontSizeSmall"), - "ui-medium": i18n.t("setting.gutterFontSizeMedium"), - "ui-large": i18n.t("setting.gutterFontSizeLarge"), - }) + .addSlider((slider) => + slider + .setLimits(12, 24, 1) .setValue(settings.gutterFontSize) .onChange((value) => { - settings.gutterFontSize = this.isGutterFontSize(value) - ? value - : "ui-small"; + settings.gutterFontSize = value; this.plugin.saveSettings(); - }); - }) + }) + .setDynamicTooltip() + ) ); //* enabledGutterSettings @@ -542,10 +536,6 @@ export class HeadingSettingTab extends PluginSettingTab { return ["before-line-numbers", "after-line-numbers"].includes(value); } - private isGutterFontSize(value: string): value is GutterFontSize { - return ["ui-smaller", "ui-small", "ui-medium", "ui-large"].includes(value); - } - private manageHeadingDecoratorSettings( settingsType: PluginDecoratorSettingsType ) { diff --git a/locales/en.json b/locales/en.json index 7f5a765..e9532b5 100644 --- a/locales/en.json +++ b/locales/en.json @@ -162,11 +162,7 @@ "beforeLineNumbers": "Before line numbers", "afterLineNumbers": "After line numbers", "gutterFontSize": "Gutter font size", - "gutterFontSizeDesc": "Set the font size for heading decorations in the gutter column.", - "gutterFontSizeSmaller": "Smaller (12px)", - "gutterFontSizeSmall": "Small (13px)", - "gutterFontSizeMedium": "Medium (15px)", - "gutterFontSizeLarge": "Large (20px)", + "gutterFontSizeDesc": "Set the font size (in pixels) for heading decorations in the gutter column.", "enabledInGutterConfig": "Heading decorator for gutter", "enabledInGutterConfigDesc": "Ignore the generic heading decorator config and set the heading decorator for the gutter display.", "logic": "Logic", diff --git a/locales/zh-TW.json b/locales/zh-TW.json index cf03e26..cde4432 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -162,11 +162,7 @@ "beforeLineNumbers": "在行號之前", "afterLineNumbers": "在行號之後", "gutterFontSize": "邊欄字型大小", - "gutterFontSizeDesc": "設定邊欄中標題裝飾器的字型大小。", - "gutterFontSizeSmaller": "較小 (12px)", - "gutterFontSizeSmall": "小 (13px)", - "gutterFontSizeMedium": "中等 (15px)", - "gutterFontSizeLarge": "大 (20px)", + "gutterFontSizeDesc": "設定邊欄中標題裝飾器的字型大小（像素）。", "enabledInGutterConfig": "邊欄的標題裝飾器", "enabledInGutterConfigDesc": "忽略通用的標題裝飾器配置，單獨配置邊欄的標題裝飾器。", "logic": "邏輯控制", diff --git a/locales/zh.json b/locales/zh.json index de9ca5e..bdc2630 100644 --- a/locales/zh.json +++ b/locales/zh.json @@ -162,11 +162,7 @@ "beforeLineNumbers": "在行号之前", "afterLineNumbers": "在行号之后", "gutterFontSize": "边栏字体大小", - "gutterFontSizeDesc": "设置边栏中标题装饰器的字体大小。", - "gutterFontSizeSmaller": "较小 (12px)", - "gutterFontSizeSmall": "小 (13px)", - "gutterFontSizeMedium": "中等 (15px)", - "gutterFontSizeLarge": "大 (20px)", + "gutterFontSizeDesc": "设置边栏中标题装饰器的字体大小（像素）。", "enabledInGutterConfig": "边栏的标题装饰器", "enabledInGutterConfigDesc": "忽略通用的标题装饰器配置，单独配置边栏的标题装饰器。", "logic": "逻辑控制", diff --git a/types.d.ts b/types.d.ts index cc03e08..cb9dfca 100644 --- a/types.d.ts +++ b/types.d.ts @@ -14,7 +14,7 @@ type DecoratorMode = "orderd" | "independent" | "splice" | "unordered"; type OpacityOptions = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100; type PostionOptions = "before" | "before-inside" | "after" | "after-inside"; type GutterPosition = "before-line-numbers" | "after-line-numbers"; -type GutterFontSize = "ui-smaller" | "ui-small" | "ui-medium" | "ui-large"; +type GutterFontSize = number; type RenderPolicy = "partial" | "full"; type PluginDecoratorSettingsType =