obsidian-plugin/panatgithub_AnkiHeadingSync
1
0
Fork 0
mirror of https://github.com/panatgithub/AnkiHeadingSync.git synced 2026-07-22 06:51:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(settings): use sticky section header bars

Browse source 
中文: 将设置页卡片标题改为整行 sticky 条幅，滚动时提供有背景遮挡的分组标题效果。

English: Turn settings card toggles into full-width sticky section header bars with background coverage while scrolling.
This commit is contained in:
Dusk 2026-04-25 14:59:51 +08:00
parent e76c107041
commit daac6a204a
2 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/presentation/settings/PluginSettingTab.test.ts
View file

@ -521,10 +521,13 @@ describe("PluginSettingTab", () => {
for (const cardId of ["card-types", "sync-content", "scope", "deck", "commands"] as const) {
const header = queryByDataset(tab.containerEl, "settingsCardToggle", cardId);
expect(header.style.position).toBe("sticky");
expect(header.style.top).toBe("8px");
expect(header.style.zIndex).toBe("20");
expect(header.style.top).toBe("0");
expect(header.style.zIndex).toBe("30");
expect(header.style.display).toBe("flex");
expect(header.style.width).toBe("100%");
expect(header.style.background).toBe("var(--background-primary)");
expect(header.style.boxShadow).toBe("0 2px 8px rgba(0, 0, 0, 0.08)");
expect(header.style.borderBottom).toBe("1px solid var(--background-modifier-border)");
expect(header.style.boxShadow).toBe("0 6px 14px rgba(0, 0, 0, 0.08)");
}
});

17
src/presentation/settings/PluginSettingTab.ts
View file

@ -118,11 +118,22 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
headerEl.type = "button";
headerEl.dataset.settingsCardToggle = cardId;
headerEl.style.position = "sticky";
headerEl.style.top = "8px";
headerEl.style.zIndex = "20";
headerEl.style.top = "0";
headerEl.style.zIndex = "30";
headerEl.style.display = "flex";
headerEl.style.alignItems = "center";
headerEl.style.justifyContent = "flex-start";
headerEl.style.width = "100%";
headerEl.style.maxWidth = "100%";
headerEl.style.padding = "10px 14px";
headerEl.style.background = "var(--background-primary)";
headerEl.style.backdropFilter = "blur(8px)";
headerEl.style.border = "none";
headerEl.style.borderBottom = "1px solid var(--background-modifier-border)";
headerEl.style.borderRadius = "0";
headerEl.style.marginBottom = "8px";
headerEl.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.08)";
headerEl.style.textAlign = "left";
headerEl.style.boxShadow = "0 6px 14px rgba(0, 0, 0, 0.08)";
headerEl.addEventListener("click", () => {
this.toggleCard(cardId);
});