diff --git a/README.md b/README.md index f64a586..1fcb328 100644 --- a/README.md +++ b/README.md @@ -4,20 +4,11 @@ An obsidian plugin that extends the functionality of comments and highlights. ![](./docs/media/screenshot.png) ## Features -- Explore comments/highlights of the active file using a sidebar view 🎬. -- Create notes from comments/highlights using the editor context menu 🎬. -- Copy comments/highlights of selected files using the file-explorer context menu. 🎬. -- Assign custom styles to different types of comments/highlights based on their label (e.g., ``, ``) 🎬. -- Use a trigger phrase to insert a labeled comment (e.g., `//todo` to insert ``) 🎬. +- Explore comments/highlights of the active file in a sidebar view [🎬](https://raw.githubusercontent.com/ycnmhd/obsidian-enhanced-annotations/main/docs/media/sidebar.gif) +- Create notes from comments/highlights using the editor context menu [🎬](https://raw.githubusercontent.com/ycnmhd/obsidian-enhanced-annotations/main/docs/media/notes.gif) +- Copy comments/highlights of selected files using the file-explorer context menu. [🎬](https://raw.githubusercontent.com/ycnmhd/obsidian-enhanced-annotations/main/docs/media/clipboard.gif) +- Assign custom styles to different types of comments/highlights based on their label (e.g., ``, ``) [🎬](https://raw.githubusercontent.com/ycnmhd/obsidian-enhanced-annotations/main/docs/media/styling.gif) +- Use a trigger phrase to insert a labeled comment (e.g., `//todo` to insert ``) [🎬](https://raw.githubusercontent.com/ycnmhd/obsidian-enhanced-annotations/main/docs/media/autocomplete.gif) -## Installation -The plugin is not available in the community plugins store yet. - -### BRAT (recommended) -[Quick guide](https://github.com/TfTHacker/obsidian42-brat/tree/ac60154446f64ecfb950fa068a8bc1c14f8bdbbe?tab=readme-ov-file#adding-a-beta-plugin). - -### Manual -- Download `main.js`, `styles.css` and `manifest.json` from [releases](https://github.com/ycnmhd/obsidian-enhanced-annotations/releases) to `vault/.obsidian/plugins/enhanced-annotations/`. -- Refresh the `community plugins list` in `Obsidian`, and enable the `Enhanced Annotations` plugin. diff --git a/manifest.json b/manifest.json index aedd710..8fc6a27 100644 --- a/manifest.json +++ b/manifest.json @@ -1,9 +1,9 @@ { "id": "enhanced-annotations", "name": "Enhanced Annotations", - "version": "0.1.1", + "version": "0.1.2", "minAppVersion": "0.15.0", - "description": "Adds features to comments and highlights.", + "description": "Add a sidebar view for comments and highlights.", "author": "ycnmhd", "isDesktopOnly": true } \ No newline at end of file diff --git a/package.json b/package.json index fe0f906..d029870 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "enhanced-annotations", - "version": "0.1.1", + "version": "0.1.2", "description": "", "scripts": { "dev": "node esbuild.config.mjs", diff --git a/src/commands/commands.ts b/src/commands/commands.ts index acbc7bf..4009ddd 100644 --- a/src/commands/commands.ts +++ b/src/commands/commands.ts @@ -96,14 +96,11 @@ export const addInsertCommentCommands = (plugin: EnhancedAnnotations) => { }, ]; - for (const { name, hotkeys, editorCallback } of commands) { + for (const { name, editorCallback } of commands) { plugin.addCommand({ id: slugify(name), editorCallback, name: name, - hotkeys: plugin.settings.getValue().commands.assignHotkeys - ? hotkeys - : undefined, }); } }; diff --git a/src/helpers/debounce.ts b/src/helpers/debounce.ts deleted file mode 100644 index 82573f1..0000000 --- a/src/helpers/debounce.ts +++ /dev/null @@ -1,17 +0,0 @@ -export const debounce = void>( - func: T, - delay: number, -): ((...args: Parameters) => () => void) => { - let timeoutId: NodeJS.Timeout; - - return function (...args: Parameters) { - clearTimeout(timeoutId); - - timeoutId = setTimeout(() => { - func(...args); - }, delay); - return () => { - clearTimeout(timeoutId); - }; - }; -}; diff --git a/src/main.ts b/src/main.ts index 0eedf5d..f878f39 100644 --- a/src/main.ts +++ b/src/main.ts @@ -109,14 +109,20 @@ export default class LabeledAnnotations extends Plugin { async activateView() { this.app.workspace.detachLeavesOfType(SIDEBAR_OUTLINE_VIEW_TYPE); - await this.app.workspace.getRightLeaf(false).setViewState({ - type: SIDEBAR_OUTLINE_VIEW_TYPE, - active: true, - }); - - this.app.workspace.revealLeaf( - this.app.workspace.getLeavesOfType(SIDEBAR_OUTLINE_VIEW_TYPE)[0], + const leaves = this.app.workspace.getLeavesOfType( + SIDEBAR_OUTLINE_VIEW_TYPE, ); + if (leaves.length === 0) { + await this.app.workspace.getRightLeaf(false).setViewState({ + type: SIDEBAR_OUTLINE_VIEW_TYPE, + active: true, + }); + this.app.workspace.revealLeaf( + this.app.workspace.getLeavesOfType( + SIDEBAR_OUTLINE_VIEW_TYPE, + )[0], + ); + } } registerSubscription(...callback: (() => void)[]) { diff --git a/src/settings/default-settings.ts b/src/settings/default-settings.ts index 54e33ec..ad78a23 100644 --- a/src/settings/default-settings.ts +++ b/src/settings/default-settings.ts @@ -19,10 +19,6 @@ export const DEFAULT_SETTINGS = (): Settings => ({ }, defaultPalette: 'bright', }, - commands: { - enableLabelCommands: false, - assignHotkeys: false, - }, outline: { fontSize: 12, showLabelsFilter: false, diff --git a/src/settings/settings-reducer.ts b/src/settings/settings-reducer.ts index 89ec4cf..25f6781 100644 --- a/src/settings/settings-reducer.ts +++ b/src/settings/settings-reducer.ts @@ -127,9 +127,6 @@ export type SettingsActions = | { type: 'TOGGLE_TRUNCATE_FILE_NAME'; } - | { - type: 'TOGGLE_ASSIGN_HOTKEYS'; - } | { type: 'SET_DEFAULT_PALETTE'; payload: { palette: DefaultPalette } }; const updateState = (store: Settings, action: SettingsActions) => { @@ -229,8 +226,6 @@ const updateState = (store: Settings, action: SettingsActions) => { store.clipboard.templates[name] = template; } else if (action.type === 'TOGGLE_TRUNCATE_FILE_NAME') { store.notes.truncateFileName = !store.notes.truncateFileName; - } else if (action.type === 'TOGGLE_ASSIGN_HOTKEYS') { - store.commands.assignHotkeys = !store.commands.assignHotkeys; } else if (action.type === 'SET_DEFAULT_PALETTE') { store.decoration.defaultPalette = action.payload.palette; } diff --git a/src/settings/settings-tab/components/auto-suggest-settings.ts b/src/settings/settings-tab/components/auto-suggest-settings.ts index 5f0aea0..c45c75d 100644 --- a/src/settings/settings-tab/components/auto-suggest-settings.ts +++ b/src/settings/settings-tab/components/auto-suggest-settings.ts @@ -2,13 +2,17 @@ import { Setting } from 'obsidian'; import LabeledAnnotations from '../../../main'; import { l } from '../../../lang/lang'; import { CommentFormat } from '../../settings-type'; +import { settingsHeader } from '../../../status-bar/helpers/class-names'; type Props = { containerEl: HTMLElement; plugin: LabeledAnnotations; }; export const AutoSuggestSettings = ({ plugin, containerEl }: Props) => { - containerEl.createEl('h3', { text: l.SETTINGS_AUTO_SUGGEST_TITLE }); + new Setting(containerEl) + .setName(l.SETTINGS_AUTO_SUGGEST_TITLE) + .setHeading() + .settingEl.addClass(settingsHeader); const settings = plugin.settings.getValue(); new Setting(containerEl) .setName(l.SETTINGS_AUTO_SUGGEST_ENABLE) diff --git a/src/settings/settings-tab/components/clipboard-settings.ts b/src/settings/settings-tab/components/clipboard-settings.ts index 2591261..5c66bca 100644 --- a/src/settings/settings-tab/components/clipboard-settings.ts +++ b/src/settings/settings-tab/components/clipboard-settings.ts @@ -6,6 +6,7 @@ import { copiedAnnotationsTemplates, copiedAnnotationsVariables, } from '../../../clipboard/helpers/annotations-to-text'; +import { settingsHeader } from '../../../status-bar/helpers/class-names'; type Props = { containerEl: HTMLElement; @@ -16,7 +17,10 @@ export const ClipboardSettings = ({ plugin, containerEl }: Props) => { const settings = plugin.settings; const render = () => { containerEl.empty(); - containerEl.createEl('h3', { text: l.SETTINGS_CLIPBOARD_TITLE }); + new Setting(containerEl) + .setName(l.SETTINGS_CLIPBOARD_TITLE) + .setHeading() + .settingEl.addClass(settingsHeader); for (const Key of ['Front', 'Header', 'Comment', 'Highlight']) { const key = Key.toLowerCase() as ClipboardTemplateSection; diff --git a/src/settings/settings-tab/components/commands-settings.ts b/src/settings/settings-tab/components/commands-settings.ts deleted file mode 100644 index 73ea36f..0000000 --- a/src/settings/settings-tab/components/commands-settings.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Setting } from 'obsidian'; -import LabeledAnnotations from '../../../main'; -import { l } from '../../../lang/lang'; - -type Props = { - containerEl: HTMLElement; - plugin: LabeledAnnotations; -}; -export const CommandsSettings = ({ plugin, containerEl }: Props) => { - containerEl.createEl('h3', { text: l.SETTINGS_COMMANDS_TITLE }); - const settings = plugin.settings.getValue(); - new Setting(containerEl) - .setName(l.SETTINGS_COMMANDS_ASSIGN_HOTKEYS) - .setDesc(l.SETTINGS_COMMANDS_ASSIGN_HOTKEYS_DESC) - .addToggle((toggle) => { - toggle.setValue(settings.commands.assignHotkeys).onChange((value) => - plugin.settings.dispatch({ - type: 'TOGGLE_ASSIGN_HOTKEYS', - }), - ); - }); -}; diff --git a/src/settings/settings-tab/components/label-settings/labels-settings.ts b/src/settings/settings-tab/components/label-settings/labels-settings.ts index 47bf044..be9b9c0 100644 --- a/src/settings/settings-tab/components/label-settings/labels-settings.ts +++ b/src/settings/settings-tab/components/label-settings/labels-settings.ts @@ -3,13 +3,17 @@ import { l } from '../../../../lang/lang'; import { Setting } from 'obsidian'; import { TagSettings } from './components/tag-settings'; import { DefaultPalette } from '../../../settings-type'; +import { settingsHeader } from '../../../../status-bar/helpers/class-names'; type Props = { containerEl: HTMLElement; plugin: LabeledAnnotations; }; export const LabelsSettings = ({ plugin, containerEl }: Props) => { - containerEl.createEl('h3', { text: l.SETTINGS_LABELS_STYLES_TITLE }); + new Setting(containerEl) + .setName(l.SETTINGS_LABELS_STYLES_TITLE) + .setHeading() + .settingEl.addClass(settingsHeader); const settings = plugin.settings.getValue(); const render = () => { containerEl.empty(); diff --git a/src/settings/settings-tab/components/note-settings/helpers/folder-suggestions.ts b/src/settings/settings-tab/components/note-settings/helpers/folder-suggestions.ts index cdb3932..48b2402 100644 --- a/src/settings/settings-tab/components/note-settings/helpers/folder-suggestions.ts +++ b/src/settings/settings-tab/components/note-settings/helpers/folder-suggestions.ts @@ -1,62 +1,44 @@ -/* credit: https://github.com/liamcain/obsidian-periodic-notes/blob/10fa35874d92750508967d4f1e58b3fa0eb87996/src/ui/file-suggest.ts#L1 */ -import { TAbstractFile, TFile, TFolder } from "obsidian"; -import { TextInputSuggest } from "./text-input-suggest"; - -export class FileSuggest extends TextInputSuggest { - getSuggestions(inputStr: string): TFile[] { - const abstractFiles = this.app.vault.getAllLoadedFiles(); - const files: TFile[] = []; - const lowerCaseInputStr = inputStr.toLowerCase(); - - abstractFiles.forEach((file: TAbstractFile) => { - if ( - file instanceof TFile && - file.extension === "md" && - file.path.toLowerCase().contains(lowerCaseInputStr) - ) { - files.push(file); - } - }); - - return files; - } - - renderSuggestion(file: TFile, el: HTMLElement): void { - el.setText(file.path); - } - - selectSuggestion(file: TFile): void { - this.inputEl.value = file.path; - this.inputEl.trigger("input"); - this.close(); - } -} - -export class FolderSuggest extends TextInputSuggest { - getSuggestions(inputStr: string): TFolder[] { - const abstractFiles = this.app.vault.getAllLoadedFiles(); - const folders: TFolder[] = []; - const lowerCaseInputStr = inputStr.toLowerCase(); - - abstractFiles.forEach((folder: TAbstractFile) => { - if ( - folder instanceof TFolder && - folder.path.toLowerCase().contains(lowerCaseInputStr) - ) { - folders.push(folder); - } - }); - - return folders; - } - - renderSuggestion(file: TFolder, el: HTMLElement): void { - el.setText(file.path); - } - - selectSuggestion(file: TFolder): void { - this.inputEl.value = file.path; - this.inputEl.trigger("input"); - this.close(); - } +import { AbstractInputSuggest, App, TFolder } from 'obsidian'; + +export class FolderSuggest extends AbstractInputSuggest { + content: Set; + + constructor( + app: App, + private inputEl: HTMLInputElement, + private onSelectCallback: (value: string) => void, + ) { + super(app, inputEl); + this.content = this.loadContent(); + } + + loadContent(): Set { + const abstractFiles = this.app.vault.getAllLoadedFiles(); + const folders: Set = new Set(); + + for (const folder of abstractFiles) { + if (folder instanceof TFolder) { + folders.add(folder.path); + } + } + + return folders; + } + + getSuggestions(inputStr: string): string[] { + const lowerCaseInputStr = inputStr.toLocaleLowerCase(); + return [...this.content].filter((content) => + content.toLocaleLowerCase().contains(lowerCaseInputStr), + ); + } + renderSuggestion(content: string, el: HTMLElement): void { + el.setText(content); + } + + selectSuggestion(content: string): void { + this.onSelectCallback(content); + this.inputEl.value = content; + this.inputEl.blur(); + this.close(); + } } diff --git a/src/settings/settings-tab/components/note-settings/helpers/text-input-suggest.ts b/src/settings/settings-tab/components/note-settings/helpers/text-input-suggest.ts deleted file mode 100644 index 6de3611..0000000 --- a/src/settings/settings-tab/components/note-settings/helpers/text-input-suggest.ts +++ /dev/null @@ -1,196 +0,0 @@ -/* credit: https://github.com/liamcain/obsidian-periodic-notes/blob/10fa35874d92750508967d4f1e58b3fa0eb87996/src/ui/suggest.ts#L1 */ -import { App, ISuggestOwner, Scope } from "obsidian"; -import { createPopper, Instance as PopperInstance } from "@popperjs/core"; - -const wrapAround = (value: number, size: number): number => { - return ((value % size) + size) % size; -}; - -class Suggest { - private owner: ISuggestOwner; - private values: T[]; - private suggestions: HTMLDivElement[]; - private selectedItem: number; - private containerEl: HTMLElement; - - constructor( - owner: ISuggestOwner, - containerEl: HTMLElement, - scope: Scope - ) { - this.owner = owner; - this.containerEl = containerEl; - - containerEl.on( - "click", - ".suggestion-item", - this.onSuggestionClick.bind(this) - ); - containerEl.on( - "mousemove", - ".suggestion-item", - this.onSuggestionMouseover.bind(this) - ); - - scope.register([], "ArrowUp", (event) => { - if (!event.isComposing) { - this.setSelectedItem(this.selectedItem - 1, true); - return false; - } - }); - - scope.register([], "ArrowDown", (event) => { - if (!event.isComposing) { - this.setSelectedItem(this.selectedItem + 1, true); - return false; - } - }); - - scope.register([], "Enter", (event) => { - if (!event.isComposing) { - this.useSelectedItem(event); - return false; - } - }); - } - - onSuggestionClick(event: MouseEvent, el: HTMLDivElement): void { - event.preventDefault(); - - const item = this.suggestions.indexOf(el); - this.setSelectedItem(item, false); - this.useSelectedItem(event); - } - - onSuggestionMouseover(_event: MouseEvent, el: HTMLDivElement): void { - const item = this.suggestions.indexOf(el); - this.setSelectedItem(item, false); - } - - setSuggestions(values: T[]) { - this.containerEl.empty(); - const suggestionEls: HTMLDivElement[] = []; - - values.forEach((value) => { - const suggestionEl = this.containerEl.createDiv("suggestion-item"); - this.owner.renderSuggestion(value, suggestionEl); - suggestionEls.push(suggestionEl); - }); - - this.values = values; - this.suggestions = suggestionEls; - this.setSelectedItem(0, false); - } - - useSelectedItem(event: MouseEvent | KeyboardEvent) { - const currentValue = this.values[this.selectedItem]; - if (currentValue) { - this.owner.selectSuggestion(currentValue, event); - } - } - - setSelectedItem(selectedIndex: number, scrollIntoView: boolean) { - const normalizedIndex = wrapAround( - selectedIndex, - this.suggestions.length - ); - const prevSelectedSuggestion = this.suggestions[this.selectedItem]; - const selectedSuggestion = this.suggestions[normalizedIndex]; - - prevSelectedSuggestion?.removeClass("is-selected"); - selectedSuggestion?.addClass("is-selected"); - - this.selectedItem = normalizedIndex; - - if (scrollIntoView) { - selectedSuggestion.scrollIntoView(false); - } - } -} - -export abstract class TextInputSuggest implements ISuggestOwner { - protected app: App; - protected inputEl: HTMLInputElement; - - private popper: PopperInstance; - private scope: Scope; - private suggestEl: HTMLElement; - private suggest: Suggest; - - constructor(app: App, inputEl: HTMLInputElement) { - this.app = app; - this.inputEl = inputEl; - this.scope = new Scope(); - - this.suggestEl = createDiv("suggestion-container"); - const suggestion = this.suggestEl.createDiv("suggestion"); - this.suggest = new Suggest(this, suggestion, this.scope); - - this.scope.register([], "Escape", this.close.bind(this)); - - this.inputEl.addEventListener("input", this.onInputChanged.bind(this)); - this.inputEl.addEventListener("focus", this.onInputChanged.bind(this)); - this.inputEl.addEventListener("blur", this.close.bind(this)); - this.suggestEl.on( - "mousedown", - ".suggestion-container", - (event: MouseEvent) => { - event.preventDefault(); - } - ); - } - - onInputChanged(): void { - const inputStr = this.inputEl.value; - const suggestions = this.getSuggestions(inputStr); - - if (suggestions.length > 0) { - this.suggest.setSuggestions(suggestions); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - this.open((this.app).dom.appContainerEl, this.inputEl); - } - } - - open(container: HTMLElement, inputEl: HTMLElement): void { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (this.app).keymap.pushScope(this.scope); - - container.appendChild(this.suggestEl); - this.popper = createPopper(inputEl, this.suggestEl, { - placement: "bottom-start", - modifiers: [ - { - name: "sameWidth", - enabled: true, - fn: ({ state, instance }) => { - // Note: positioning needs to be calculated twice - - // first pass - positioning it according to the width of the popper - // second pass - position it with the width bound to the reference element - // we need to early exit to avoid an infinite loop - const targetWidth = `${state.rects.reference.width}px`; - if (state.styles.popper.width === targetWidth) { - return; - } - state.styles.popper.width = targetWidth; - instance.update(); - }, - phase: "beforeWrite", - requires: ["computeStyles"], - }, - ], - }); - } - - close(): void { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (this.app).keymap.popScope(this.scope); - - this.suggest.setSuggestions([]); - this.popper.destroy(); - this.suggestEl.detach(); - } - - abstract getSuggestions(inputStr: string): T[]; - abstract renderSuggestion(item: T, el: HTMLElement): void; - abstract selectSuggestion(item: T): void; -} diff --git a/src/settings/settings-tab/components/note-settings/note-settings.ts b/src/settings/settings-tab/components/note-settings/note-settings.ts index f591b4c..7acf577 100644 --- a/src/settings/settings-tab/components/note-settings/note-settings.ts +++ b/src/settings/settings-tab/components/note-settings/note-settings.ts @@ -28,8 +28,9 @@ export const NoteSettings = ({ containerEl, plugin }: Props) => { plugin, }); }; - containerEl.createEl('h3', { text: l.SETTINGS_NOTE_CREATION_TITLE }); - + new Setting(containerEl) + .setName(l.SETTINGS_NOTE_CREATION_TITLE) + .setHeading(); const settings = plugin.settings; const noteSettings = settings.getValue().notes; @@ -51,17 +52,18 @@ export const NoteSettings = ({ containerEl, plugin }: Props) => { new Setting(containerEl) .setName(l.SETTINGS_NOTE_CREATION_FOLDER) .addSearch((cb) => { - new FolderSuggest(plugin.app, cb.inputEl); - cb.setPlaceholder(l.SETTINGS_NOTE_CREATION_FOLDER_PLACEHOLDER) - .setValue(noteSettings.defaultFolder) - .onChange((e) => { - if (e) { - settings.dispatch({ - type: 'SET_NOTES_FOLDER', - payload: { folder: e }, - }); - } - }); + const onSelectCallback = (e: string) => { + if (e) { + settings.dispatch({ + type: 'SET_NOTES_FOLDER', + payload: { folder: e }, + }); + } + }; + new FolderSuggest(plugin.app, cb.inputEl, onSelectCallback); + cb.setValue(noteSettings.defaultFolder).setPlaceholder( + l.SETTINGS_NOTE_CREATION_FOLDER_PLACEHOLDER, + ); }); new Setting(containerEl) diff --git a/src/settings/settings-tab/components/tts-settings.ts b/src/settings/settings-tab/components/tts-settings.ts index a136e64..c469f71 100644 --- a/src/settings/settings-tab/components/tts-settings.ts +++ b/src/settings/settings-tab/components/tts-settings.ts @@ -2,6 +2,7 @@ import { Setting } from 'obsidian'; import LabeledAnnotations from '../../../main'; import { DEFAULT_SETTINGS } from '../../default-settings'; import { l } from '../../../lang/lang'; +import { settingsHeader } from '../../../status-bar/helpers/class-names'; type Props = { containerEl: HTMLElement; @@ -15,7 +16,10 @@ export const TTSSettings = ({ plugin, containerEl }: Props) => { containerEl, }); }; - containerEl.createEl('h3', { text: l.SETTINGS_TTS_TITLE }); + new Setting(containerEl) + .setName(l.SETTINGS_TTS_TITLE) + .setHeading() + .settingEl.addClass(settingsHeader); new Setting(containerEl) .addDropdown((component) => { const voices = window.speechSynthesis diff --git a/src/settings/settings-tab/settings-tab.ts b/src/settings/settings-tab/settings-tab.ts index b8fbcc0..d84623b 100644 --- a/src/settings/settings-tab/settings-tab.ts +++ b/src/settings/settings-tab/settings-tab.ts @@ -5,7 +5,6 @@ import { TTSSettings } from './components/tts-settings'; import { NoteSettings } from './components/note-settings/note-settings'; import { LabelsSettings } from './components/label-settings/labels-settings'; import { ClipboardSettings } from './components/clipboard-settings'; -import { CommandsSettings } from './components/commands-settings'; export class SettingsTab extends PluginSettingTab { plugin: LabeledAnnotations; @@ -40,9 +39,5 @@ export class SettingsTab extends PluginSettingTab { plugin: this.plugin, containerEl: containerEl.createEl('div'), }); - CommandsSettings({ - plugin: this.plugin, - containerEl: containerEl.createEl('div'), - }); }; } diff --git a/src/settings/settings-type.ts b/src/settings/settings-type.ts index 3cafad6..da5e5ff 100644 --- a/src/settings/settings-type.ts +++ b/src/settings/settings-type.ts @@ -64,10 +64,6 @@ export type Settings = { }; defaultPalette: DefaultPalette; }; - commands: { - enableLabelCommands: boolean; - assignHotkeys: boolean; - }; outline: { showSearchInput: boolean; fontSize: number; diff --git a/src/status-bar/helpers/class-names.ts b/src/status-bar/helpers/class-names.ts new file mode 100644 index 0000000..06d0476 --- /dev/null +++ b/src/status-bar/helpers/class-names.ts @@ -0,0 +1,3 @@ +export const displayNone = 'enhanced-annotations__display-none'; + +export const settingsHeader = 'enhanced-annotations__settings-header'; diff --git a/src/status-bar/helpers/toggle-element-visibility.ts b/src/status-bar/helpers/toggle-element-visibility.ts deleted file mode 100644 index 0600c1c..0000000 --- a/src/status-bar/helpers/toggle-element-visibility.ts +++ /dev/null @@ -1,11 +0,0 @@ -const className = 'enhanced-annotations__display-none'; -export const toggleElementVisibility = ( - element: HTMLElement, - visible: boolean, -) => { - if (visible) { - element.removeClass(className); - } else { - element.addClass(className); - } -}; diff --git a/src/status-bar/status-bar.ts b/src/status-bar/status-bar.ts index f77d9f6..c00eba8 100644 --- a/src/status-bar/status-bar.ts +++ b/src/status-bar/status-bar.ts @@ -6,7 +6,7 @@ import { pluralize } from '../helpers/pluralize'; import { get } from 'svelte/store'; import { TFile } from 'obsidian'; import { createTooltip } from './helpers/create-tooltip'; -import { toggleElementVisibility } from './helpers/toggle-element-visibility'; +import { displayNone } from './helpers/class-names'; export class StatusBar { private elements: { @@ -86,20 +86,20 @@ export class StatusBar { const numberOfComments = comments.length; const numberOfHighlights = highlights.length; if (numberOfComments) { - toggleElementVisibility(this.elements.comments, true); + this.elements.comments.toggleClass(displayNone, false); this.elements.comments.setText( `${pluralize(numberOfComments, 'comment', 'comments')}`, ); } else { - toggleElementVisibility(this.elements.comments, false); + this.elements.comments.toggleClass(displayNone, true); } if (numberOfHighlights) { - toggleElementVisibility(this.elements.highlights, true); + this.elements.highlights.toggleClass(displayNone, false); this.elements.highlights.setText( `${pluralize(numberOfHighlights, 'highlight', 'highlights')}`, ); } else { - toggleElementVisibility(this.elements.highlights, false); + this.elements.highlights.toggleClass(displayNone, true); } }; diff --git a/src/styles.css b/src/styles.css index 4f14471..9aab47a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -27,3 +27,7 @@ align-items: center; gap: 10px; } + +.enhanced-annotations__settings-header{ + margin-top: 40px; +}