mirror of
https://github.com/panatgithub/AnkiHeadingSync.git
synced 2026-07-22 06:51:43 +00:00
fix(settings): keep toggles native
中文: 恢复设置页开关使用 Obsidian 原生样式，仅保留操作按钮主题色背景，并更新相关测试与构建产物。 English: Restore native Obsidian toggle styling in settings, keep themed backgrounds for action buttons only, and update related tests and build output.
This commit is contained in:
Dusk
parent
31cde1c88a
commit
c9e80d4034
4 changed files with 26 additions and 72 deletions
30
main.js
30
main.js
File diff suppressed because one or more lines are too long
|
|
@ -871,7 +871,7 @@ describe("PluginSettingTab", () => {
|
|||
expect(plugin.insertDeckTemplateCalls).toBe(1);
|
||||
});
|
||||
|
||||
it("marks every settings toggle with theme state and updates the dataset on change", async () => {
|
||||
it("keeps settings toggles on the native Obsidian toggle styling path", async () => {
|
||||
const plugin = new FakePlugin();
|
||||
const tab = new AnkiHeadingSyncSettingTab(plugin as never);
|
||||
|
||||
|
|
@ -889,15 +889,16 @@ describe("PluginSettingTab", () => {
|
|||
|
||||
for (const setting of toggleSettings) {
|
||||
const toggle = getToggle(setting);
|
||||
expect(toggle.toggleEl.classList.contains("ahs-theme-toggle")).toBe(true);
|
||||
expect(toggle.toggleEl.dataset.ahsToggleState).toBe(toggle.value ? "on" : "off");
|
||||
expect(toggle.toggleEl.classList.contains("ahs-theme-toggle")).toBe(false);
|
||||
expect(toggle.toggleEl.dataset.ahsToggleState).toBeUndefined();
|
||||
}
|
||||
|
||||
const highlightsToggle = getToggle(findSetting(tab.containerEl, "高亮转填空题"));
|
||||
const nextValue = !highlightsToggle.value;
|
||||
await highlightsToggle.triggerChange(nextValue);
|
||||
|
||||
expect(highlightsToggle.toggleEl.dataset.ahsToggleState).toBe(nextValue ? "on" : "off");
|
||||
expect(plugin.settings.convertHighlightsToCloze).toBe(nextValue);
|
||||
expect(highlightsToggle.toggleEl.dataset.ahsToggleState).toBeUndefined();
|
||||
});
|
||||
|
||||
it("auto saves toggle, heading, note type and field mapping edits", async () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { PluginSettingTab, Setting } from "obsidian";
|
||||
import type { ButtonComponent, ToggleComponent } from "obsidian";
|
||||
import type { ButtonComponent } from "obsidian";
|
||||
|
||||
import {
|
||||
DEFAULT_OBSIDIAN_BACKLINK_LABEL,
|
||||
|
|
@ -52,7 +52,6 @@ const SETTINGS_PAGE_HEADER_MASK_SIDE = "-24px";
|
|||
const DECK_HELPER_TEXT_INDENT = "32px";
|
||||
const SETTINGS_ROOT_CLASS = "anki-heading-sync-settings";
|
||||
const THEME_ACTION_BUTTON_CLASS = "ahs-theme-action-button";
|
||||
const THEME_TOGGLE_CLASS = "ahs-theme-toggle";
|
||||
|
||||
type SettingsCardId = (typeof SETTINGS_CARD_ORDER)[number];
|
||||
type NoteTypeCacheCheckStatus = "idle" | "checking" | "same" | "changed" | "failed";
|
||||
|
|
@ -176,23 +175,6 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
this.markThemeButton(button.buttonEl);
|
||||
}
|
||||
|
||||
private markThemeToggle(
|
||||
toggle: ToggleComponent,
|
||||
value: boolean,
|
||||
onChange: (value: boolean) => void | Promise<void>,
|
||||
): void {
|
||||
toggle.toggleEl.classList.add(THEME_TOGGLE_CLASS);
|
||||
this.syncThemeToggleState(toggle, value);
|
||||
toggle.setValue(value).onChange((nextValue) => {
|
||||
this.syncThemeToggleState(toggle, nextValue);
|
||||
return onChange(nextValue);
|
||||
});
|
||||
}
|
||||
|
||||
private syncThemeToggleState(toggle: ToggleComponent, value: boolean): void {
|
||||
toggle.toggleEl.dataset.ahsToggleState = value ? "on" : "off";
|
||||
}
|
||||
|
||||
private initializeCards(containerEl: HTMLElement): void {
|
||||
this.cardShells.clear();
|
||||
|
||||
|
|
@ -605,7 +587,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
.setName(t("settings.syncOptions.addObsidianBacklink.name"))
|
||||
.setDesc(t("settings.syncOptions.addObsidianBacklink.desc"))
|
||||
.addToggle((toggle) => {
|
||||
this.markThemeToggle(toggle, this.plugin.settings.addObsidianBacklink, (value) => {
|
||||
toggle.setValue(this.plugin.settings.addObsidianBacklink).onChange((value) => {
|
||||
void this.plugin.updateSettings({ addObsidianBacklink: value });
|
||||
});
|
||||
});
|
||||
|
|
@ -645,7 +627,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
.setName(t("settings.syncOptions.syncObsidianTagsToAnki.name"))
|
||||
.setDesc(t("settings.syncOptions.syncObsidianTagsToAnki.desc"))
|
||||
.addToggle((toggle) => {
|
||||
this.markThemeToggle(toggle, this.plugin.settings.syncObsidianTagsToAnki, (value) => {
|
||||
toggle.setValue(this.plugin.settings.syncObsidianTagsToAnki).onChange((value) => {
|
||||
void this.plugin.updateSettings({ syncObsidianTagsToAnki: value });
|
||||
});
|
||||
});
|
||||
|
|
@ -654,7 +636,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
.setName(t("settings.syncOptions.keepPureTagLinesInCardBody.name"))
|
||||
.setDesc(t("settings.syncOptions.keepPureTagLinesInCardBody.desc"))
|
||||
.addToggle((toggle) => {
|
||||
this.markThemeToggle(toggle, this.plugin.settings.keepPureTagLinesInCardBody, (value) => {
|
||||
toggle.setValue(this.plugin.settings.keepPureTagLinesInCardBody).onChange((value) => {
|
||||
void this.plugin.updateSettings({ keepPureTagLinesInCardBody: value });
|
||||
});
|
||||
});
|
||||
|
|
@ -664,7 +646,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
.setName(t("settings.syncOptions.highlightsToCloze.name"))
|
||||
.setDesc(t("settings.syncOptions.highlightsToCloze.desc"))
|
||||
.addToggle((toggle) => {
|
||||
this.markThemeToggle(toggle, this.plugin.settings.convertHighlightsToCloze, (value) => {
|
||||
toggle.setValue(this.plugin.settings.convertHighlightsToCloze).onChange((value) => {
|
||||
void this.plugin.updateSettings({ convertHighlightsToCloze: value });
|
||||
});
|
||||
});
|
||||
|
|
@ -764,7 +746,7 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
|
|||
.setName(t("settings.deck.fileDeckEnabled.name"))
|
||||
.setDesc(t("settings.deck.fileDeckEnabled.desc"))
|
||||
.addToggle((toggle) => {
|
||||
this.markThemeToggle(toggle, this.plugin.settings.fileDeckEnabled, async (value) => {
|
||||
toggle.setValue(this.plugin.settings.fileDeckEnabled).onChange(async (value) => {
|
||||
await this.plugin.updateSettings({ fileDeckEnabled: value });
|
||||
this.renderCard("deck");
|
||||
});
|
||||
|
|
|
|||
29
styles.css
29
styles.css
|
|
@ -28,32 +28,3 @@
|
|||
cursor: not-allowed;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.anki-heading-sync-settings .ahs-theme-toggle {
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 999px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
background-color 140ms ease,
|
||||
border-color 140ms ease,
|
||||
opacity 140ms ease;
|
||||
}
|
||||
|
||||
.anki-heading-sync-settings .ahs-theme-toggle:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.anki-heading-sync-settings .ahs-theme-toggle[data-ahs-toggle-state="on"] {
|
||||
background: var(--interactive-accent);
|
||||
border-color: var(--interactive-accent-hover);
|
||||
}
|
||||
|
||||
.anki-heading-sync-settings .ahs-theme-toggle[data-ahs-toggle-state="on"]:hover {
|
||||
background: var(--interactive-accent-hover);
|
||||
}
|
||||
|
||||
.anki-heading-sync-settings .ahs-theme-toggle.is-disabled,
|
||||
.anki-heading-sync-settings .ahs-theme-toggle[aria-disabled="true"] {
|
||||
opacity: 0.72;
|
||||
}
|
||||
Loading…
Reference in a new issue