From e9c3e9414ec8695d3a5ec7e3a04c0f1c292f8424 Mon Sep 17 00:00:00 2001 From: Simon Cambier Date: Wed, 8 Feb 2023 18:11:11 +0100 Subject: [PATCH] #107 - updated WIP layout --- assets/styles.css | 34 ++++++++++++-- src/components/ResultItemVault.svelte | 65 +++++++++++++++++++-------- src/settings.ts | 16 ------- src/tools/utils.ts | 6 +++ 4 files changed, 84 insertions(+), 37 deletions(-) diff --git a/assets/styles.css b/assets/styles.css index b9c3ac7..58b3254 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -4,10 +4,30 @@ .omnisearch-result { white-space: normal; display: flex; - flex-direction: column; + flex-direction: row; + justify-content: space-between; + flex-wrap: nowrap; +} + +.omnisearch-result__title-container { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 5px; + flex-wrap: wrap; } .omnisearch-result__title { + align-items: center; + display: flex; + gap: 5px; +} + +.omnisearch-result__folder-path { + font-size: 0.75rem; + align-items: center; + display: flex; + gap: 5px; } .omnisearch-result__counter { @@ -27,12 +47,20 @@ color: var(--text-muted); } +.omnisearch-result__image-container { + flex-basis: 20%; + text-align: right +} + .omnisearch-highlight { } .omnisearch-default-highlight { - color: var(--text-normal); - background-color: var(--text-highlight-bg); + text-decoration: underline; + text-decoration-color: var(--text-highlight-bg); + text-decoration-thickness: 3px; + text-underline-offset: -1px; + text-decoration-skip-ink: none; } .omnisearch-input-container { diff --git a/src/components/ResultItemVault.svelte b/src/components/ResultItemVault.svelte index 5e55589..94cd5e3 100644 --- a/src/components/ResultItemVault.svelte +++ b/src/components/ResultItemVault.svelte @@ -4,17 +4,24 @@ import { highlighter, isFileImage, + isFilePDF, makeExcerpt, + pathWithoutFilename, removeDiacritics, stringsToRegex, } from '../tools/utils' import ResultItemContainer from './ResultItemContainer.svelte' + import { onMount } from 'svelte' + import { setIcon } from 'obsidian' export let selected = false export let note: ResultNote let imagePath: string | null = null let title = '' + let notePath = '' + let folderPathIcon + let filePathIcon $: { imagePath = null @@ -31,10 +38,21 @@ $: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1) $: glyph = false //cacheManager.getLiveDocument(note.path)?.doesNotExist $: { - title = settings.showShortName ? note.basename : note.path + title = note.basename + notePath = pathWithoutFilename(note.path) if (settings.ignoreDiacritics) { title = removeDiacritics(title) } + + // Icons + if (folderPathIcon) { + setIcon(folderPathIcon, 'folder-open') + } + if (filePathIcon) { + if (isFileImage(note.path)) setIcon(filePathIcon, 'file-image') + else if (isFilePDF(note.path)) setIcon(filePathIcon, 'file-line-chart') + else setIcon(filePathIcon, 'file-text') + } } @@ -44,31 +62,42 @@ on:click on:mousemove selected="{selected}"> -
-
-
- - {@html title.replace(reg, highlighter)} - +
+
+ + + {@html title.replace(reg, highlighter)} - {#if note.matches.length > 0} - - {note.matches.length} {note.matches.length > 1 - ? 'matches' - : 'match'} - - {/if} + + + + + + + + + + + +
+ + {notePath}
+
+
{#if $showExcerpt}
{@html cleanedContent.replace(reg, highlighter)}
{/if} -
- {#if imagePath} - - {/if} + + {#if imagePath} +
+ +
+ {/if} +
diff --git a/src/settings.ts b/src/settings.ts index 120c1e0..d2ed971 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -32,8 +32,6 @@ export interface OmnisearchSettings extends WeightingSettings { imagesIndexing: boolean /** Activate the small 🔍 button on Obsidian's ribbon */ ribbonIcon: boolean - /** Display short filenames in search results, instead of the full path */ - showShortName: boolean /** Display the small contextual excerpt in search results */ showExcerpt: boolean /** Render line returns with
in excerpts */ @@ -295,19 +293,6 @@ export class SettingsTab extends PluginSettingTab { }) ) - // Display note names without the full path - new Setting(containerEl) - .setName('Hide full path in results list') - .setDesc( - 'In the search results, only show the note name, without the full path.' - ) - .addToggle(toggle => - toggle.setValue(settings.showShortName).onChange(async v => { - settings.showShortName = v - await saveSettings(this.plugin) - }) - ) - // Highlight results new Setting(containerEl) .setName('Highlight matching words in results') @@ -390,7 +375,6 @@ export const DEFAULT_SETTINGS: OmnisearchSettings = { PDFIndexing: false, imagesIndexing: false, - showShortName: false, ribbonIcon: true, showExcerpt: true, renderLineReturnInExcerpts: true, diff --git a/src/tools/utils.ts b/src/tools/utils.ts index fb392c9..1b2f7c2 100644 --- a/src/tools/utils.ts +++ b/src/tools/utils.ts @@ -43,6 +43,12 @@ export function removeFrontMatter(text: string): string { return text.replace(regexYaml, '') } +export function pathWithoutFilename(path: string): string { + const split = path.split('/') + split.pop() + return split.join('/') +} + export function wait(ms: number): Promise { return new Promise(resolve => { setTimeout(resolve, ms)