diff --git a/src/ui/settingGeneralTabs.ts b/src/ui/settingGeneralTabs.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/ui/settingModal.ts b/src/ui/settingModal.ts new file mode 100644 index 0000000..a464a42 --- /dev/null +++ b/src/ui/settingModal.ts @@ -0,0 +1,86 @@ +import { + Modal, + Setting, + PluginSettingTab, + ButtonComponent +} from 'obsidian'; + +import { i18nConfig } from "../lang/I18n"; +import ObsidianSyncNotionPlugin from "../main"; + +export class SettingModal extends Modal { + plugin: ObsidianSyncNotionPlugin; + + constructor(plugin: ObsidianSyncNotionPlugin) { + super(plugin.app); + this.plugin = plugin; + } + + onOpen() { + let {contentEl} = this; + contentEl.addClass('sync-to-notion-modal'); + + new Setting(contentEl) + .setName(i18nConfig.GeneralSetting) + .setDesc(i18nConfig.GeneralSetting) + .addToggle((toggle) => { + toggle + .setValue(this.plugin.settings.enableNotionNext) + .onChange(async (value) => { + this.plugin.settings.enableNotionNext = value; + await this.plugin.saveSettings(); + }); + }) + .addToggle((toggle) => { + toggle + .setValue(this.plugin.settings.enableNotionGeneral) + .onChange(async (value) => { + this.plugin.settings.enableNotionGeneral = value; + await this.plugin.saveSettings(); + }); + }); + + new Setting(contentEl) + .setName(i18nConfig.NotionNextSettingHeader) + .setDesc(i18nConfig.NotionNextSettingHeader) + .addText((text) => { + text + .setPlaceholder(i18nConfig.NotionAPI) + .setValue(this.plugin.settings.notionAPI) + .onChange(async (value) => { + this.plugin.settings.notionAPI = value; + await this.plugin.saveSettings(); + }); + }) + .addText((text) => { + text + .setPlaceholder(i18nConfig.DatabaseID) + .setValue(this.plugin.settings.databaseIDNext) + .onChange(async (value) => { + this.plugin.settings.databaseIDNext = value; + await this.plugin.saveSettings(); + }); + }) + .addText((text) => { + text + .setPlaceholder(i18nConfig.BannerUrl) + .setValue(this.plugin.settings.bannerUrl) + .onChange(async (value) => { + this.plugin.settings.bannerUrl = value; + await this.plugin.saveSettings(); + }); + }) + .addText((text) => { + text + .setPlaceholder(i18nConfig.NotionUser) + .setValue(this.plugin.settings.notionUser) + .onChange(async (value) => { + this.plugin.settings.notionUser = value; + await this.plugin.saveSettings(); + }); + }); + + new Setting(contentEl) + } + +} diff --git a/src/ui/settingNextTabs.ts b/src/ui/settingNextTabs.ts new file mode 100644 index 0000000..5de4f83 --- /dev/null +++ b/src/ui/settingNextTabs.ts @@ -0,0 +1,48 @@ +import {App, PluginSettingTab, Setting} from "obsidian"; +import ObsidianSyncNotionPlugin from "../main"; +import {i18nConfig} from "../lang/I18n"; +import {ObsidianSettingTab} from "./settingTabs"; + +export class SettingNextTab extends PluginSettingTab { + plugin: ObsidianSyncNotionPlugin; + private settingTab: ObsidianSettingTab; + + constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab) { + super(app, plugin); + this.plugin = plugin; + this.settingTab = settingTab; + } + + display(): void { + + // notion next database settings + + this.settingTab.containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) + + new Setting(this.settingTab.containerEl) + .setName(i18nConfig.NotionNextButton) + .setDesc(i18nConfig.NotionNextButtonDesc) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.NextButton) + .onChange(async (value) => { + this.plugin.settings.NextButton = value; + + this.settingTab.updateSettingEl(notionAPINextEl, value) + + this.settingTab.updateSettingEl(databaseIDNextEl, value) + + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + }) + ); + + + const notionAPINextEl = this.settingTab.createStyleDiv('api-next', this.plugin.settings.NextButton) + this.settingTab.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') + + const databaseIDNextEl = this.settingTab.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) + this.settingTab.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') + } + +} diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index 4478cfc..f9cbf02 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -1,6 +1,8 @@ -import { App, PluginSettingTab, Setting } from "obsidian"; -import { i18nConfig } from "../lang/I18n"; +import {App, ButtonComponent, PluginSettingTab, Setting} from "obsidian"; +import {i18nConfig} from "../lang/I18n"; import ObsidianSyncNotionPlugin from "../main"; +import {SettingModal} from "./settingModal"; +import {SettingNextTab} from "./settingNextTabs"; export interface PluginSettings { NextButton: boolean; @@ -62,33 +64,70 @@ export class ObsidianSettingTab extends PluginSettingTab { this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser, 'notionUser') - containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) + + // add new button + + new Setting(containerEl) + .setName("Add New Database") + .setDesc("Add New Database") + .addButton((button: ButtonComponent): ButtonComponent => { + return button + .setTooltip("Add New Database") + .setIcon("plus") + .onClick(async () => { + let modal = new SettingModal(this.plugin); + + modal.onClose = () => { + // if (modal.saved) { + // const database = { + // + // } + // this.plugin.addDatabase(database); + // + // this.plugin.calloutManager.addDatabase(database); + // + // this.display(); + // } + } + + modal.open(); + }); + }); - new Setting(containerEl) - .setName(i18nConfig.NotionNextButton) - .setDesc(i18nConfig.NotionNextButtonDesc) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.NextButton) - .onChange(async (value) => { - this.plugin.settings.NextButton = value; - this.updateSettingEl(notionAPINextEl, value) + // notion next database settings - this.updateSettingEl(databaseIDNextEl, value) + const NextTabs = new SettingNextTab(this.app, this.plugin, this); - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); - }) - ); + NextTabs.display(); - - const notionAPINextEl = this.createStyleDiv('api-next', this.plugin.settings.NextButton) - this.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') - - const databaseIDNextEl = this.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) - this.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') + // containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) + // + // new Setting(containerEl) + // .setName(i18nConfig.NotionNextButton) + // .setDesc(i18nConfig.NotionNextButtonDesc) + // .addToggle((toggle) => + // toggle + // .setValue(this.plugin.settings.NextButton) + // .onChange(async (value) => { + // this.plugin.settings.NextButton = value; + // + // this.updateSettingEl(notionAPINextEl, value) + // + // this.updateSettingEl(databaseIDNextEl, value) + // + // await this.plugin.saveSettings(); + // await this.plugin.commands.updateCommand(); + // }) + // ); + // + // + // const notionAPINextEl = this.createStyleDiv('api-next', this.plugin.settings.NextButton) + // this.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') + // + // const databaseIDNextEl = this.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) + // this.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') // General Database Settings @@ -206,13 +245,13 @@ export class ObsidianSettingTab extends PluginSettingTab { } // create a function to create a div with a style for pop over elements - private createStyleDiv(className: string, commandValue: boolean = false) { + public createStyleDiv(className: string, commandValue: boolean = false) { return this.containerEl.createDiv(className, (div) => { this.updateSettingEl(div, commandValue); }); } // update the setting display style in the setting tab - private updateSettingEl(element: HTMLElement, commandValue: boolean) { + public updateSettingEl(element: HTMLElement, commandValue: boolean) { element.style.borderTop = commandValue ? "1px solid var(--background-modifier-border)" : "none"; element.style.paddingTop = commandValue ? "0.75em" : "0"; element.style.display = commandValue ? "block" : "none"; @@ -220,7 +259,7 @@ export class ObsidianSettingTab extends PluginSettingTab { } // function to add one setting element in the setting tab. - private createSettingEl(containerEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, settingsKey: string) { + public createSettingEl(containerEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, settingsKey: string) { if (type === 'password') { return new Setting(containerEl) .setName(name)