From 8e537c0f0a6a7d39d48638a3085d137c3203e263 Mon Sep 17 00:00:00 2001 From: Lost Paul <70213368+LostPaul@users.noreply.github.com> Date: Tue, 19 Sep 2023 21:31:58 +0200 Subject: [PATCH] Setting tabs --- src/Settings.ts | 419 ++++++++++++++++----------- src/functions/folderNoteFunctions.ts | 1 + styles.css | 29 ++ 3 files changed, 280 insertions(+), 169 deletions(-) diff --git a/src/Settings.ts b/src/Settings.ts index 2d96c58..4826080 100644 --- a/src/Settings.ts +++ b/src/Settings.ts @@ -7,6 +7,7 @@ import { FrontMatterTitlePluginHandler } from './events/FrontMatterTitle'; import ConfirmationModal from "./modals/ConfirmCreation"; import { yamlSettings } from './folderOverview/FolderOverview'; import { FolderOverviewSettings } from './folderOverview/ModalSettings'; + export interface FolderNotesSettings { syncFolderName: boolean; ctrlKey: boolean; @@ -36,7 +37,8 @@ export interface FolderNotesSettings { enabled: boolean; explorer: boolean; path: boolean; - } + }, + settingsTab: string; } export const DEFAULT_SETTINGS: FolderNotesSettings = { @@ -83,22 +85,92 @@ export const DEFAULT_SETTINGS: FolderNotesSettings = { enabled: false, explorer: true, path: true, - } + }, + settingsTab: 'general' }; + export class SettingsTab extends PluginSettingTab { plugin: FolderNotesPlugin; app: App; excludeFolders: ExcludedFolder[]; + settingsPage!: HTMLElement; constructor(app: App, plugin: FolderNotesPlugin) { super(app, plugin); } + TABS = { + GENERAL: { + name: 'General', + id: 'general' + }, + FOLDER_OVERVIEW: { + name: 'Folder overview', + id: 'folder_overview' + }, + EXCLUDE_FOLDERS: { + name: 'Exclude folders', + id: 'exclude_folders' + }, + FILE_EXPLORER: { + name: 'File explorer', + id: 'file_explorer', + }, + PATH: { + name: 'Path', + id: 'path' + } + } + renderSettingsPage(tabId: string) { + this.settingsPage.empty(); + console.log(tabId); + switch (tabId.toLocaleLowerCase()) { + case this.TABS.GENERAL.id: + this.renderGeneral(); + break; + case this.TABS.FOLDER_OVERVIEW.id: + this.renderFolderOverview(); + break; + case this.TABS.EXCLUDE_FOLDERS.id: + this.renderExcludeFolders(); + break; + case this.TABS.FILE_EXPLORER.id: + this.renderFileExplorer(); + break; + case this.TABS.PATH.id: + this.renderPath(); + break; + } + + } display(): void { const { containerEl } = this; containerEl.empty(); - containerEl.createEl('h2', { text: 'Folder notes settings' }); - + const tabBar = containerEl.createEl('nav', { cls: 'fn-settings-tab-bar' }); + for (const [tabId, tabInfo] of Object.entries(this.TABS)) { + const tabEl = tabBar.createEl('div', { cls: 'fn-settings-tab' }); + const tabName = tabEl.createEl('div', { cls: 'fn-settings-tab-name', text: tabInfo.name }); + console.log(this.plugin.settings.settingsTab, tabId); + if (this.plugin.settings.settingsTab.toLocaleLowerCase() === tabId.toLocaleLowerCase()) { + tabEl.addClass('fn-settings-tab-active'); + } + tabEl.addEventListener('click', () => { + // @ts-ignore + for (const tabEl of tabBar.children) { + tabEl.removeClass('fn-settings-tab-active'); + this.plugin.settings.settingsTab = tabId.toLocaleLowerCase(); + this.plugin.saveSettings(); + } + tabEl.addClass('fn-settings-tab-active'); + this.renderSettingsPage(tabId); + }); + } + this.settingsPage = containerEl.createDiv({ cls: 'fn-settings-page' }); + this.renderSettingsPage(this.plugin.settings.settingsTab); + } + renderGeneral() { + this.settingsPage.createEl('h1', { text: 'General settings' }); + const containerEl = this.settingsPage; const nameSetting = new Setting(containerEl) .setName('Folder note name') .setDesc('{{folder_name}} will be replaced with the name of the folder') @@ -135,19 +207,6 @@ export class SettingsTab extends PluginSettingTab { await this.plugin.saveSettings(); }) ); - - new Setting(containerEl) - .setName('Manage folder overview defaults') - .setDesc('Manage the default settings for the folder overview plugin') - .addButton((button) => - button - .setButtonText('Manage') - .setCta() - .onClick(async () => { - new FolderOverviewSettings(this.plugin.app, this.plugin, this.plugin.settings.defaultOverview, null, null, true).open(); - }) - ); - const setting = new Setting(containerEl); const desc = document.createDocumentFragment(); desc.append( @@ -234,20 +293,6 @@ export class SettingsTab extends PluginSettingTab { }) ); } - const disableSetting = new Setting(containerEl); - disableSetting.setName('Disable folder collapsing'); - disableSetting.setDesc('Disable the ability to collapse folders by clicking exactly on the folder name'); - disableSetting.addToggle((toggle) => - toggle - .setValue(!this.plugin.settings.enableCollapsing) - .onChange(async (value) => { - this.plugin.settings.enableCollapsing = !value; - await this.plugin.saveSettings(); - }) - ); - disableSetting.infoEl.appendText('Requires a restart to take effect'); - disableSetting.infoEl.style.color = this.app.vault.getConfig('accentColor') as string || '#7d5bed'; - if (Platform.isDesktopApp) { new Setting(containerEl) .setName('Key for creating folder note') @@ -269,40 +314,6 @@ export class SettingsTab extends PluginSettingTab { }); } - new Setting(containerEl) - .setName('Only open folder notes through the name') - .setDesc('Only open folder notes in the file explorer by clicking on the folder name') - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.allowWhitespaceCollapsing) - .onChange(async (value) => { - if (!value) { - document.body.classList.add('fn-whitespace-stop-collapsing'); - } else { - document.body.classList.remove('fn-whitespace-stop-collapsing'); - } - this.plugin.settings.allowWhitespaceCollapsing = value; - await this.plugin.saveSettings(); - }) - ); - - new Setting(containerEl) - .setName('Hide folder note') - .setDesc('Hide the folder note in the file explorer') - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.hideFolderNote) - .onChange(async (value) => { - this.plugin.settings.hideFolderNote = value; - await this.plugin.saveSettings(); - if (value) { - document.body.classList.add('hide-folder-note'); - } else { - document.body.classList.remove('hide-folder-note'); - } - this.display(); - }) - ); new Setting(containerEl) .setName('Sync folder name') .setDesc('Automatically rename the folder note when the folder name is changed') @@ -345,18 +356,45 @@ export class SettingsTab extends PluginSettingTab { ); new Setting(containerEl) - .setName('Use submenus') - .setDesc('Use submenus for file/folder commands') + .setName('Enable front matter title plugin integration') + .setDesc('Automatically rename a folder name when the folder note is renamed') .addToggle((toggle) => toggle - .setValue(this.plugin.settings.useSubmenus) + .setValue(this.plugin.settings.frontMatterTitle.enabled) .onChange(async (value) => { - this.plugin.settings.useSubmenus = value; + this.plugin.settings.frontMatterTitle.enabled = value; await this.plugin.saveSettings(); + if (value) { + this.plugin.fmtpHandler = new FrontMatterTitlePluginHandler(this.plugin); + } else { + if (this.plugin.fmtpHandler) { + this.plugin.updateBreadcrumbs(true); + } + this.plugin.app.vault.getFiles().forEach((file) => { + this.plugin.fmtpHandler?.handleRename({ id: '', result: false, path: file.path }, false); + }); + this.plugin.fmtpHandler?.deleteEvent(); + this.plugin.fmtpHandler = null; + } this.display(); }) ); + new Setting(containerEl) + .setName('Create folder note for every folder') + .setDesc('Create a folder note for every folder in the vault') + .addButton((cb) => { + cb.setIcon('plus'); + cb.setTooltip('Create folder notes'); + cb.onClick(async () => { + + new ConfirmationModal(this.app, this.plugin).open(); + }); + }); + } + renderFileExplorer() { + const containerEl = this.settingsPage; + this.settingsPage.createEl('h1', { text: 'File explorer settings' }); new Setting(containerEl) .setName('Add underline to folders with folder notes') .setDesc('Add an underline to folders that have a folder note in the file explorer') @@ -374,7 +412,148 @@ export class SettingsTab extends PluginSettingTab { }) ); + new Setting(containerEl) + .setName('Hide folder note') + .setDesc('Hide the folder note in the file explorer') + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.hideFolderNote) + .onChange(async (value) => { + this.plugin.settings.hideFolderNote = value; + await this.plugin.saveSettings(); + if (value) { + document.body.classList.add('hide-folder-note'); + } else { + document.body.classList.remove('hide-folder-note'); + } + this.display(); + }) + ); + new Setting(containerEl) + .setName('Only open folder notes through the name') + .setDesc('Only open folder notes in the file explorer by clicking on the folder name') + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.allowWhitespaceCollapsing) + .onChange(async (value) => { + if (!value) { + document.body.classList.add('fn-whitespace-stop-collapsing'); + } else { + document.body.classList.remove('fn-whitespace-stop-collapsing'); + } + this.plugin.settings.allowWhitespaceCollapsing = value; + await this.plugin.saveSettings(); + }) + ); + const disableSetting = new Setting(containerEl); + disableSetting.setName('Disable folder collapsing'); + disableSetting.setDesc('Disable the ability to collapse folders by clicking exactly on the folder name'); + disableSetting.addToggle((toggle) => + toggle + .setValue(!this.plugin.settings.enableCollapsing) + .onChange(async (value) => { + this.plugin.settings.enableCollapsing = !value; + await this.plugin.saveSettings(); + }) + ); + disableSetting.infoEl.appendText('Requires a restart to take effect'); + disableSetting.infoEl.style.color = this.app.vault.getConfig('accentColor') as string || '#7d5bed'; + + new Setting(containerEl) + .setName('Use submenus') + .setDesc('Use submenus for file/folder commands') + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.useSubmenus) + .onChange(async (value) => { + this.plugin.settings.useSubmenus = value; + await this.plugin.saveSettings(); + this.display(); + }) + ); + + if (this.plugin.settings.frontMatterTitle.enabled) { + new Setting(containerEl) + .setName('Change folder name in the file explorer') + .setDesc('Automatically rename a folder name in the file explorer when the folder note is renamed') + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.frontMatterTitle.explorer) + .onChange(async (value) => { + this.plugin.settings.frontMatterTitle.explorer = value; + await this.plugin.saveSettings(); + this.plugin.app.vault.getFiles().forEach((file) => { + this.plugin.fmtpHandler?.handleRename({ id: '', result: false, path: file.path }, false); + }); + }) + ); + } + } + renderExcludeFolders() { + this.settingsPage.createEl('h1', { text: 'Exclude folders settings' }); + const containerEl = this.settingsPage; + const manageExcluded = new Setting(containerEl) + .setHeading() + .setClass('fn-excluded-folder-heading') + .setName('Manage excluded folders'); + const desc3 = document.createDocumentFragment(); + desc3.append( + 'Add {regex} at the beginning of the folder name to use a regex pattern.', + desc3.createEl('br'), + 'Use * before and after to exclude folders that include the name between the *s.', + desc3.createEl('br'), + 'Use * before the folder name to exclude folders that end with the folder name.', + desc3.createEl('br'), + 'Use * after the folder name to exclude folders that start with the folder name.', + ); + manageExcluded.setDesc(desc3); + manageExcluded.infoEl.appendText('The regexes and wildcards are only for the folder name, not the path.'); + manageExcluded.infoEl.createEl('br'); + manageExcluded.infoEl.appendText('If you want to switch to a folder path delete the pattern first.'); + manageExcluded.infoEl.style.color = this.app.vault.getConfig('accentColor') as string || '#7d5bed'; + + new Setting(containerEl) + .setName('Add excluded folder') + .setClass('add-exclude-folder-item') + .addButton((cb) => { + cb.setIcon('plus'); + cb.setClass('add-exclude-folder'); + cb.setTooltip('Add excluded folder'); + cb.onClick(() => { + const excludedFolder = new ExcludedFolder('', this.plugin.settings.excludeFolders.length); + addExcludeFolderListItem(this, containerEl, excludedFolder); + addExcludedFolder(this.plugin, excludedFolder); + this.display(); + }); + }); + this.plugin.settings.excludeFolders.sort((a, b) => a.position - b.position).forEach((excludedFolder) => { + if (excludedFolder.string?.trim() !== '' && excludedFolder.path?.trim() === '') { + addExcludePatternListItem(this, containerEl, excludedFolder); + } else { + addExcludeFolderListItem(this, containerEl, excludedFolder); + } + }); + } + renderFolderOverview() { + this.settingsPage.createEl('h1', { text: 'Folder overview settings' }); + const containerEl = this.settingsPage; + new Setting(containerEl) + .setName('Manage folder overview defaults') + .setDesc('Manage the default settings for the folder overview plugin') + .addButton((button) => + button + .setButtonText('Manage') + .setCta() + .onClick(async () => { + new FolderOverviewSettings(this.plugin.app, this.plugin, this.plugin.settings.defaultOverview, null, null, true).open(); + }) + ); + + } + renderPath() { + this.settingsPage.createEl('h1', { text: 'Path settings' }); + const containerEl = this.settingsPage; new Setting(containerEl) .setName('Open folder note through path') .setDesc('Open a folder note when clicking on a folder name in the path if it is a folder note') @@ -408,48 +587,7 @@ export class SettingsTab extends PluginSettingTab { } new Setting(containerEl) - .setName('Enable front matter title plugin integration') - .setDesc('Automatically rename a folder name when the folder note is renamed') - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.frontMatterTitle.enabled) - .onChange(async (value) => { - this.plugin.settings.frontMatterTitle.enabled = value; - await this.plugin.saveSettings(); - if (value) { - this.plugin.fmtpHandler = new FrontMatterTitlePluginHandler(this.plugin); - } else { - if (this.plugin.fmtpHandler) { - this.plugin.updateBreadcrumbs(true); - } - this.plugin.app.vault.getFiles().forEach((file) => { - this.plugin.fmtpHandler?.handleRename({ id: '', result: false, path: file.path }, false); - }); - this.plugin.fmtpHandler?.deleteEvent(); - this.plugin.fmtpHandler = null; - } - this.display(); - }) - ); - - if (this.plugin.settings.frontMatterTitle.enabled) { - new Setting(containerEl) - .setName('Include file explorer') - .setDesc('Automatically rename a folder name in the file explorer when the folder note is renamed') - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.frontMatterTitle.explorer) - .onChange(async (value) => { - this.plugin.settings.frontMatterTitle.explorer = value; - await this.plugin.saveSettings(); - this.plugin.app.vault.getFiles().forEach((file) => { - this.plugin.fmtpHandler?.handleRename({ id: '', result: false, path: file.path }, false); - }); - }) - ); - - new Setting(containerEl) - .setName('Include path above note') + .setName('Change folder name in the path') .setDesc('Automatically rename a folder name in the path above a note when the folder note is renamed') .addToggle((toggle) => toggle @@ -464,65 +602,9 @@ export class SettingsTab extends PluginSettingTab { } }) ); - } - - - new Setting(containerEl) - .setName('Create folder note for every folder') - .setDesc('Create a folder note for every folder in the vault') - .addButton((cb) => { - cb.setIcon('plus'); - cb.setTooltip('Create folder notes'); - cb.onClick(async () => { - - new ConfirmationModal(this.app, this.plugin).open(); - }); - }); - - - const manageExcluded = new Setting(containerEl) - .setHeading() - .setClass('fn-excluded-folder-heading') - .setName('Manage excluded folders'); - const desc3 = document.createDocumentFragment(); - desc3.append( - 'Add {regex} at the beginning of the folder name to use a regex pattern.', - desc.createEl('br'), - 'Use * before and after to exclude folders that include the name between the *s.', - desc.createEl('br'), - 'Use * before the folder name to exclude folders that end with the folder name.', - desc.createEl('br'), - 'Use * after the folder name to exclude folders that start with the folder name.', - ); - manageExcluded.setDesc(desc3); - manageExcluded.infoEl.appendText('The regexes and wildcards are only for the folder name, not the path.'); - manageExcluded.infoEl.createEl('br'); - manageExcluded.infoEl.appendText('If you want to switch to a folder path delete the pattern first.'); - manageExcluded.infoEl.style.color = this.app.vault.getConfig('accentColor') as string || '#7d5bed'; - - new Setting(containerEl) - .setName('Add excluded folder') - .setClass('add-exclude-folder-item') - .addButton((cb) => { - cb.setIcon('plus'); - cb.setClass('add-exclude-folder'); - cb.setTooltip('Add excluded folder'); - cb.onClick(() => { - const excludedFolder = new ExcludedFolder('', this.plugin.settings.excludeFolders.length); - addExcludeFolderListItem(this, containerEl, excludedFolder); - addExcludedFolder(this.plugin, excludedFolder); - this.display(); - }); - }); - this.plugin.settings.excludeFolders.sort((a, b) => a.position - b.position).forEach((excludedFolder) => { - if (excludedFolder.string?.trim() !== '' && excludedFolder.path?.trim() === '') { - addExcludePatternListItem(this, containerEl, excludedFolder); - } else { - addExcludeFolderListItem(this, containerEl, excludedFolder); - } - }); } + updateFolderNotes(oldTemplate: string, newTemplate: string) { this.plugin.settings.folderNoteName = newTemplate; this.plugin.saveSettings(); @@ -580,5 +662,4 @@ export class SettingsTab extends PluginSettingTab { }); new Notice('Finished switching storage location'); } - } diff --git a/src/functions/folderNoteFunctions.ts b/src/functions/folderNoteFunctions.ts index f3182a3..d1af57d 100644 --- a/src/functions/folderNoteFunctions.ts +++ b/src/functions/folderNoteFunctions.ts @@ -146,6 +146,7 @@ export function getFolderNote(plugin: FolderNotesPlugin, folderPath: string, sto folder.path = fileName; path = `${fileName}`; } + let folderNote = plugin.app.vault.getAbstractFileByPath(path + plugin.settings.folderNoteType); if (folderNote instanceof TFile) { return folderNote; diff --git a/styles.css b/styles.css index 6adfeb0..eb1212b 100644 --- a/styles.css +++ b/styles.css @@ -176,4 +176,33 @@ .pointer-cursor { cursor: pointer !important; +} + + +/* Setting tab style */ +.fn-settings-tab-bar { + display: flex; + flex-direction: row; +} + +.fn-settings-tab { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--size-4-2); + padding: 10px; + border: 1px solid var(--background-modifier-border) +} + +.fn-settings-tab-active { + background-color: var(--color-accent); + color: var(--text-on-accent); +} + +.fn-settings-tab-name { + font-weight: bold; +} + +.fn-settings-tab-icon { + display: flex; } \ No newline at end of file