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

fix(settings): mask sticky section headers

Browse source 
中文: 为设置页 sticky 标题条增加向上遮罩，并保持标题字号放大、灰色边框加粗、无阴影，避免滚动时设置内容露到标题上方。

English: Add an upward mask for sticky settings section headers while keeping the enlarged title, thicker gray border, and no-shadow styling so scrolled content cannot bleed above the header.
This commit is contained in:
Dusk 2026-04-25 15:45:51 +08:00
parent daac6a204a
commit 997aa5bc14
2 changed files with 66 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -519,15 +519,37 @@ describe("PluginSettingTab", () => {
tab.display();
for (const cardId of ["card-types", "sync-content", "scope", "deck", "commands"] as const) {
const card = queryByDataset(tab.containerEl, "settingsCard", cardId);
const stickyHeader = queryByDataset(tab.containerEl, "settingsCardStickyHeader", cardId);
const stickyMask = queryByDataset(tab.containerEl, "settingsCardStickyMask", cardId);
const header = queryByDataset(tab.containerEl, "settingsCardToggle", cardId);
expect(header.style.position).toBe("sticky");
expect(header.style.top).toBe("0");
expect(header.style.zIndex).toBe("30");
const body = queryByDataset(tab.containerEl, "settingsCardBody", cardId);
expect(card.style.position).toBe("relative");
expect(card.style.zIndex).toBe("0");
expect(stickyHeader.style.position).toBe("sticky");
expect(stickyHeader.style.top).toBe("0");
expect(stickyHeader.style.zIndex).toBe("80");
expect(stickyHeader.style.width).toBe("100%");
expect(stickyHeader.style.background).toBe("var(--background-primary)");
expect(stickyHeader.style.border).toBe("2px solid var(--background-modifier-border)");
expect(stickyHeader.style.boxShadow).toBe("none");
expect(stickyMask.style.position).toBe("absolute");
expect(stickyMask.style.top).toBe("-96px");
expect(stickyMask.style.height).toBe("96px");
expect(stickyMask.style.background).toBe("var(--background-primary)");
expect(stickyMask.style.pointerEvents).toBe("none");
expect(header.style.position).toBe("relative");
expect(header.style.display).toBe("flex");
expect(header.style.width).toBe("100%");
expect(header.style.background).toBe("var(--background-primary)");
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)");
expect(header.style.background).toBe("transparent");
expect(header.style.fontSize).toBe("1.5em");
expect(header.style.fontWeight).toBe("600");
expect(header.style.border).toBe("none");
expect(header.style.boxShadow).toBe("none");
expect(body.style.position).toBe("relative");
expect(body.style.zIndex).toBe("0");
expect(body.style.paddingTop).toBe("8px");
}
});

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

@ -36,12 +36,14 @@ const FOLDER_TREE_STATUS_LOADING: UserFacingMessage = { key: "settings.scope.loa
const TEXT_SAVE_DEBOUNCE_MS = 500;
const SETTINGS_CARD_ORDER = ["card-types", "sync-content", "scope", "deck", "commands"] as const;
const VISIBLE_CARD_TYPE_CONFIG_IDS = ["basic", "qa-group", "cloze"] as const;
const STICKY_HEADER_MASK_HEIGHT = "96px";
type SettingsCardId = (typeof SETTINGS_CARD_ORDER)[number];
type NoteTypeCacheCheckStatus = "idle" | "checking" | "same" | "changed" | "failed";
interface SettingsCardShell {
cardEl: HTMLElement;
stickyHeaderEl: HTMLElement;
headerEl: HTMLButtonElement;
bodyEl: HTMLElement;
}
@ -113,36 +115,63 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
for (const cardId of SETTINGS_CARD_ORDER) {
const cardEl = containerEl.createDiv();
cardEl.dataset.settingsCard = cardId;
cardEl.style.position = "relative";
cardEl.style.zIndex = "0";
const headerEl = cardEl.createEl("button") as HTMLButtonElement;
const stickyHeaderEl = cardEl.createDiv();
stickyHeaderEl.dataset.settingsCardStickyHeader = cardId;
stickyHeaderEl.style.position = "sticky";
stickyHeaderEl.style.top = "0";
stickyHeaderEl.style.zIndex = "80";
stickyHeaderEl.style.display = "block";
stickyHeaderEl.style.width = "100%";
stickyHeaderEl.style.maxWidth = "100%";
stickyHeaderEl.style.boxSizing = "border-box";
stickyHeaderEl.style.background = "var(--background-primary)";
stickyHeaderEl.style.border = "2px solid var(--background-modifier-border)";
stickyHeaderEl.style.borderRadius = "0";
stickyHeaderEl.style.boxShadow = "none";
const stickyHeaderMaskEl = stickyHeaderEl.createDiv();
stickyHeaderMaskEl.dataset.settingsCardStickyMask = cardId;
stickyHeaderMaskEl.style.position = "absolute";
stickyHeaderMaskEl.style.left = "0";
stickyHeaderMaskEl.style.right = "0";
stickyHeaderMaskEl.style.top = `-${STICKY_HEADER_MASK_HEIGHT}`;
stickyHeaderMaskEl.style.height = STICKY_HEADER_MASK_HEIGHT;
stickyHeaderMaskEl.style.background = "var(--background-primary)";
stickyHeaderMaskEl.style.pointerEvents = "none";
const headerEl = stickyHeaderEl.createEl("button") as HTMLButtonElement;
headerEl.type = "button";
headerEl.dataset.settingsCardToggle = cardId;
headerEl.style.position = "sticky";
headerEl.style.top = "0";
headerEl.style.zIndex = "30";
headerEl.style.position = "relative";
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.fontSize = "1.5em";
headerEl.style.fontWeight = "600";
headerEl.style.background = "transparent";
headerEl.style.border = "none";
headerEl.style.borderBottom = "1px solid var(--background-modifier-border)";
headerEl.style.borderRadius = "0";
headerEl.style.marginBottom = "8px";
headerEl.style.textAlign = "left";
headerEl.style.boxShadow = "0 6px 14px rgba(0, 0, 0, 0.08)";
headerEl.style.boxShadow = "none";
headerEl.addEventListener("click", () => {
this.toggleCard(cardId);
});
const bodyEl = cardEl.createDiv();
bodyEl.dataset.settingsCardBody = cardId;
bodyEl.style.position = "relative";
bodyEl.style.zIndex = "0";
bodyEl.style.paddingTop = "8px";
this.cardShells.set(cardId, {
cardEl,
stickyHeaderEl,
headerEl,
bodyEl,
});