From 2b16ea76c65ad1e17745cf4e7eb1fe5037a36e43 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Tue, 14 Nov 2023 23:27:38 +0000 Subject: [PATCH] update the setting ui --- src/ui/settingTabs.ts | 267 +++++++++++++++++++++++++++--------------- 1 file changed, 175 insertions(+), 92 deletions(-) diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index 95ca328..7a28084 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -91,38 +91,71 @@ export class ObsidianSettingTab extends PluginSettingTab { this.plugin.settings.NextButton = value; await this.plugin.saveSettings(); await this.plugin.commands.updateCommand(); + + // Clear existing components + notionAPINextEl.empty(); + databaseIDNextEl.empty(); + + if (value) { + new Setting(notionAPINextEl) + .setName(i18nConfig.NotionAPI) + .setDesc(i18nConfig.NotionAPIDesc) + .addText((text) => { + text.inputEl.type = 'password'; + return text + .setPlaceholder(i18nConfig.NotionAPIText) + .setValue(this.plugin.settings.notionAPINext) + .onChange(async (value) => { + this.plugin.settings.notionAPINext = value; + await this.plugin.saveSettings(); + }) + }); + + notionAPINextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + notionAPINextEl.style.paddingTop = value ? "0.75em" : "0"; + + new Setting(databaseIDNextEl) + .setName(i18nConfig.DatabaseID) + .setDesc(i18nConfig.NotionAPIDesc) + .addText((text) => { + text.inputEl.type = 'password'; + return text + .setPlaceholder(i18nConfig.DatabaseIDText) + .setValue(this.plugin.settings.databaseIDNext) + .onChange(async (value) => { + this.plugin.settings.databaseIDNext = value; + await this.plugin.saveSettings(); + }) + } + ); + + databaseIDNextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + databaseIDNextEl.style.paddingTop = value ? "0.75em" : "0"; + + } else { + notionAPINextEl.style.borderTop = "none"; + notionAPINextEl.style.paddingTop = "0"; + databaseIDNextEl.style.borderTop = "none"; + databaseIDNextEl.style.paddingTop = "0"; + } }) ); - new Setting(containerEl) - .setName(i18nConfig.NotionAPI) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionAPIText) - .setValue(this.plugin.settings.notionAPINext) - .onChange(async (value) => { - this.plugin.settings.notionAPINext = value; - await this.plugin.saveSettings(); - }) - }); + const notionAPINextEl = containerEl.createDiv('api-next', (div) => { + div.style.alignItems = "center"; + div.style.borderTop = "none"; + div.style.paddingBottom = "0"; + } + ); + + const databaseIDNextEl = containerEl.createDiv('databaseID-next', (div) => { + div.style.alignItems = "center"; + div.style.borderTop = "none"; + div.style.paddingBottom = "0"; + } + ); - const notionDatabaseID = new Setting(containerEl) - .setName(i18nConfig.DatabaseID) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.DatabaseIDText) - .setValue(this.plugin.settings.databaseIDNext) - .onChange(async (value) => { - this.plugin.settings.databaseIDNext = value; - await this.plugin.saveSettings(); - }) - } - ); // notionDatabaseID.controlEl.querySelector('input').type='password' @@ -142,49 +175,112 @@ export class ObsidianSettingTab extends PluginSettingTab { this.plugin.settings.GeneralButton = value; await this.plugin.saveSettings(); await this.plugin.commands.updateCommand(); + + // Clear existing components + CustomTitleEl.empty(); + notionAPIGeneralEl.empty(); + databaseIDGeneralEl.empty(); + + if (value) { + new Setting(CustomTitleEl) + .setName(i18nConfig.NotionCustomTitle) + .setDesc(i18nConfig.NotionCustomTitleDesc) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.CustomTitleButton) + .onChange(async (value) => { + this.plugin.settings.CustomTitleButton = value; + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + + // Clear existing components + dynamicSettingContainer.empty(); + + // Add new components based on the toggle value + if (this.plugin.settings.CustomTitleButton) { + new Setting(dynamicSettingContainer) + .setName(i18nConfig.NotionCustomTitleName) + .setDesc(i18nConfig.NotionCustomTitleNameDesc) + .addText((text) => + text + .setPlaceholder(i18nConfig.NotionCustomTitleText) + .setValue(this.plugin.settings.CustomTitleName) + .onChange(async (value) => { + this.plugin.settings.CustomTitleName = value; + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + + // Clear existing components + CustomTitleEl.empty(); + }) + ); + dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + dynamicSettingContainer.style.paddingTop = value ? "0.75em" : "0"; + } else { + dynamicSettingContainer.style.borderTop = "none"; + dynamicSettingContainer.style.paddingTop = "0"; + } + }) + ); + + CustomTitleEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + CustomTitleEl.style.paddingTop = value ? "0.75em" : "0"; + + new Setting(notionAPIGeneralEl) + .setName(i18nConfig.NotionAPI) + .setDesc(i18nConfig.NotionAPIDesc) + .addText((text) => { + text.inputEl.type = 'password'; + return text + .setPlaceholder(i18nConfig.NotionAPIText) + .setValue(this.plugin.settings.notionAPIGeneral) + .onChange(async (value) => { + this.plugin.settings.notionAPIGeneral = value; + await this.plugin.saveSettings(); + }) + }); + + notionAPIGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + notionAPIGeneralEl.style.paddingTop = value ? "0.75em" : "0"; + + + new Setting(databaseIDGeneralEl) + .setName(i18nConfig.DatabaseID) + .setDesc(i18nConfig.NotionAPIDesc) + .addText((text) => { + text.inputEl.type = 'password'; + return text + .setPlaceholder(i18nConfig.NotionIDText) + .setValue(this.plugin.settings.databaseIDGeneral) + .onChange(async (value) => { + this.plugin.settings.databaseIDGeneral = value; + await this.plugin.saveSettings(); + }) + } + ); + + databaseIDGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; + databaseIDGeneralEl.style.paddingTop = value ? "0.75em" : "0"; + + } else { + CustomTitleEl.style.borderTop = "none"; + CustomTitleEl.style.paddingTop = "0"; + notionAPIGeneralEl.style.borderTop = "none"; + notionAPIGeneralEl.style.paddingTop = "0"; + databaseIDGeneralEl.style.borderTop = "none"; + databaseIDGeneralEl.style.paddingTop = "0"; + } }) ); - new Setting(containerEl) - .setName(i18nConfig.NotionCustomTitle) - .setDesc(i18nConfig.NotionCustomTitleDesc) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.CustomTitleButton) - .onChange(async (value) => { - this.plugin.settings.CustomTitleButton = value; - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); - - // Clear existing components - dynamicSettingContainer.empty(); - - // Add new components based on the toggle value - if (this.plugin.settings.CustomTitleButton) { - new Setting(dynamicSettingContainer) - .setName(i18nConfig.NotionCustomTitleName) - .setDesc(i18nConfig.NotionCustomTitleNameDesc) - .addText((text) => - text - .setPlaceholder(i18nConfig.NotionCustomTitleText) - .setValue(this.plugin.settings.CustomTitleName) - .onChange(async (value) => { - this.plugin.settings.CustomTitleName = value; - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); - }) - ); - dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; - dynamicSettingContainer.style.paddingTop = value ? "0.75em" : "0"; - } else { - dynamicSettingContainer.style.borderTop = "none"; - dynamicSettingContainer.style.paddingTop = "0"; - } - }) - ); + const CustomTitleEl = containerEl.createDiv('api-general', (div) => { + div.style.alignItems = "center"; + div.style.borderTop = "none"; + div.style.paddingBottom = "0"; + } + ); const dynamicSettingContainer = containerEl.createDiv('setting-popover', (div) => { - div.style.display = "flex"; div.style.alignItems = "center"; div.style.borderTop = "none"; div.style.paddingBottom = "0"; @@ -201,35 +297,22 @@ export class ObsidianSettingTab extends PluginSettingTab { // await this.plugin.saveSettings(); // }) // ); - new Setting(containerEl) - .setName(i18nConfig.NotionAPI) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionAPIText) - .setValue(this.plugin.settings.notionAPIGeneral) - .onChange(async (value) => { - this.plugin.settings.notionAPIGeneral = value; - await this.plugin.saveSettings(); - }) - }); - new Setting(containerEl) - .setName(i18nConfig.DatabaseID) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionIDText) - .setValue(this.plugin.settings.databaseIDGeneral) - .onChange(async (value) => { - this.plugin.settings.databaseIDGeneral = value; - await this.plugin.saveSettings(); - }) - } - ); + const notionAPIGeneralEl = containerEl.createDiv('api-general', (div) => { + div.style.alignItems = "center"; + div.style.borderTop = "none"; + div.style.paddingBottom = "0"; + } + ); + + const databaseIDGeneralEl = containerEl.createDiv('databaseID-general', (div) => { + div.style.alignItems = "center"; + div.style.borderTop = "none"; + div.style.paddingBottom = "0"; + } + ); + // Custom Database Settings