From 64b41c9da8ec52d61be38cb9f3da7c89ef90e936 Mon Sep 17 00:00:00 2001 From: caffae Date: Sat, 24 Aug 2024 03:09:22 +0800 Subject: [PATCH] CSS improvement and new feature to show all outlines --- main.ts | 84 +++++++++++++++++++++++++++++++++++++++--------------- styles.css | 45 ++++++++++++++++++++++++++--- 2 files changed, 102 insertions(+), 27 deletions(-) diff --git a/main.ts b/main.ts index b99d577..3cc444e 100644 --- a/main.ts +++ b/main.ts @@ -9,6 +9,7 @@ interface CurrentFolderNotesDisplaySettings { prettyTitleCase: boolean; includeSubfolderNotes: boolean; includeCurrentFileOutline: boolean; + includeAllFilesOutline: boolean; // iconUsed: string; } @@ -18,6 +19,7 @@ const DEFAULT_SETTINGS: Partial = { prettyTitleCase: true, includeSubfolderNotes: false, includeCurrentFileOutline: true, + includeAllFilesOutline: false, // iconUsed: 'folder', } @@ -191,20 +193,26 @@ export class CurrentFolderNotesDisplayView extends ItemView { // Function to create clickable headings - createClickableHeadings(container: HTMLElement, currentFileContent: string, currentFilePath: string): void { + createClickableHeadings(container: HTMLElement, currentFileContent: string, currentFilePath: string, addExtraHeadingCSS: boolean): void { const headings: RegExpMatchArray | null = currentFileContent.match(/^(#+)\s+(.*)$/gm); if (headings) { headings.forEach((heading: string) => { const headingLevelMatch: RegExpMatchArray | null = heading.match(/^(#+)/); if (headingLevelMatch) { - const headingLevel: number = headingLevelMatch[0].length; + // const headingLevel: number = headingLevelMatch[0].length; let headingText: string = heading.replace(/^(#+)\s+/, ''); // Use extractAlias to get the alias from the heading text headingText = this.extractAlias(headingText); + // Add a right arrow symbol to the heading text + let headingLabel = '→ ' + headingText; - const p: HTMLElement = container.createEl('p', { text: headingText }); - p.style.marginLeft = `${headingLevel * 10}px`; + const p: HTMLElement = container.createEl('p', { text: headingLabel }); + // p.style.marginLeft = `${headingLevel * 10}px`; + p.classList.add('basic-heading'); + if (addExtraHeadingCSS) { + p.classList.add('extra-heading-style'); + } p.addEventListener('click', async () => { this.app.workspace.openLinkText('#' + headingText, currentFilePath, false); // do an escape to deselect the text @@ -213,6 +221,17 @@ export class CurrentFolderNotesDisplayView extends ItemView { // selection.removeAllRanges(); // } }); + + // Add hover effect + p.onmouseover = () => { + // console.log('Mouse over:', headingText); + p.classList.add('hover-style-heading'); + } + // Remove hover effect when not hovering + p.onmouseout = () => { + // console.log('Mouse out:', headingText); + p.classList.remove('hover-style-heading'); + } } }); } @@ -350,19 +369,10 @@ export class CurrentFolderNotesDisplayView extends ItemView { // filteredFiles.sort((a, b) => a.basename.localeCompare(b.basename)); filteredFiles.sort((a, b) => sequenceWithPrefixOrLongest(a.basename) - sequenceWithPrefixOrLongest(b.basename)); - // check for headings - let MyHeadings = false; - let currentFileContent = ''; - if (this.plugin.settings.includeCurrentFileOutline) { - const currentFile = this.app.workspace.getActiveFile(); - if (currentFile) { - currentFileContent = await this.app.vault.read(currentFile); - MyHeadings = true; - } - } + // Iterate over the files and add their names to the container - filteredFiles.forEach(file => { + for (const file of filteredFiles) { const p = container.createEl('p'); const a = p.createEl('a', { text: file.basename }); if (this.plugin.settings.prettyTitleCase) { @@ -373,28 +383,46 @@ export class CurrentFolderNotesDisplayView extends ItemView { // If the file path matches the current file path, assign the 'current-file' class if (file.path === currentFilePath) { a.className += ' current-file'; - a.innerText = '> ' + a.innerText; - - if (MyHeadings) { - this.createClickableHeadings(container as HTMLElement, currentFileContent, currentFilePath); + a.innerText = '\u2605 ' + a.innerText; + } + + // check for headings + var MyHeadings = false; + var ThisFileContent = ''; + // var currentFile = this.app.workspace.getActiveFile(); + if (this.plugin.settings.includeAllFilesOutline || this.plugin.settings.includeCurrentFileOutline) { + if (file) { + ThisFileContent = await this.app.vault.read(file); + MyHeadings = true; + } + } + + if (this.plugin.settings.includeAllFilesOutline && file.path !== currentFilePath) { + if (MyHeadings) { + this.createClickableHeadings(container as HTMLElement, ThisFileContent, file.path, false); + } + } + + if ((this.plugin.settings.includeAllFilesOutline || this.plugin.settings.includeCurrentFileOutline) && file.path === currentFilePath) { + if (MyHeadings) { + this.createClickableHeadings(container as HTMLElement, ThisFileContent, file.path, true); } - } // make pretty when hover a.onmouseover = () => { - a.classList.add('hover-style'); + a.classList.add('hover-style-file'); } // and remove when not hovering a.onmouseout = () => { - a.classList.remove('hover-style'); + a.classList.remove('hover-style-file'); } // When a note is clicked, open it in the workspace a.addEventListener('click', () => { this.app.workspace.openLinkText(file.basename, parentFolderPath); }); - }); + } } } @@ -475,6 +503,16 @@ class CurrentFolderNotesDisplaySettingTab extends PluginSettingTab { await this.plugin.saveSettings(); })); + new Setting(containerEl) + .setName('Include outline of all files in the current folder') + .setDesc('Include outline of all files in the current folder') + .addToggle(toggle => toggle + .setValue(this.plugin.settings.includeAllFilesOutline) + .onChange(async (value) => { + this.plugin.settings.includeAllFilesOutline = value; + await this.plugin.saveSettings(); + })); + // option to pick icon // let iconButton: HTMLElement; // Declare the iconButton variable diff --git a/styles.css b/styles.css index bd0683b..7ab4c5a 100644 --- a/styles.css +++ b/styles.css @@ -5,15 +5,52 @@ margin: 0px; padding: 0px; cursor: pointer; - color: var(--text-normal); + color: var(--text-small); text-decoration: none; - font-size: var(--font-small); + font-size: var(--font-ui-medium); + font-family: var(--font-interface-theme); + line-height: var(--line-height-tight); } .current-file { - color: var(--text-muted); + color: var(--text-accent); + padding-top: 0.3em; + padding-bottom: 0.3em; + background-color: var(--color-base-00); + /* background-color: var(--text-selection); */ + /* background-color: var(--text-highlight-bg); */ + font-size: var(--font-ui-larger); + /* font-family: var(--font-interface-theme); */ + font-weight: var(--font-bold) } -.hover-style { +.basic-heading { + /* color: var(--text-normal); */ + /* color: var(--italic-color); */ + /* Add a little indicator prepend */ + padding-left: 1em; + padding-top: 0.1em; + padding-bottom: 0.1em; + font-size: var(--font-ui-small); + /* font-family: var(--font-interface-theme); */ + +} + +.extra-heading-style { + color: var(--text-accent); + padding-left: 1em; + padding-top: 0.1em; + padding-bottom: 0.1em; + font-size: var(--font-ui-medium); + /* background-color: var(--color-base-00); */ + /* font-family: var(--font-interface-theme); */ +} + +.hover-style-file { + background-color: var(--interactive-hover); +} + +p.hover-style-heading { + /* color: var(--interactive-normal); */ background-color: var(--interactive-hover); } \ No newline at end of file