diff --git a/constants/defaultSettings.ts b/constants/defaultSettings.ts index 75af3fd..cba0172 100644 --- a/constants/defaultSettings.ts +++ b/constants/defaultSettings.ts @@ -61,6 +61,7 @@ export const PREDEFINED_TEMPLATES: StatusTemplate[] = [ ]; export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = { + fileExplorerIconPosition: "absolute-right", statusColors: { active: "var(--text-success)", onHold: "var(--text-warning)", diff --git a/integrations/file-explorer/file-explorer-integration.tsx b/integrations/file-explorer/file-explorer-integration.tsx index 3787d12..3bce7cd 100644 --- a/integrations/file-explorer/file-explorer-integration.tsx +++ b/integrations/file-explorer/file-explorer-integration.tsx @@ -5,6 +5,7 @@ import { IElementProcessor, } from "@/core/lazyElementObserver"; import { NoteStatusService } from "@/core/noteStatusService"; +import settingsService from "@/core/settingsService"; import { GroupedStatuses } from "@/types/noteStatus"; import { Plugin, TFile, View } from "obsidian"; import { createRoot } from "react-dom/client"; @@ -89,7 +90,15 @@ export class FileExplorerIntegration implements IElementProcessor { if (existingIcon) { existingIcon.remove(); } - const icon = createSpan({ cls: this.ICON_CLASS }); + + let positionClassName = ""; + if ( + settingsService.settings.fileExplorerIconPosition === + "absolute-right" + ) { + positionClassName = "custom-icon__absolute-right"; + } + const icon = createSpan({ cls: [this.ICON_CLASS, positionClassName] }); const root = createRoot(icon); root.render( , ); - element.prepend(icon); + if ( + settingsService.settings.fileExplorerIconPosition === + "file-name-right" + ) { + element.append(icon); + } else { + element.prepend(icon); + } } private openModalInfo(statuses: GroupedStatuses) { diff --git a/styles/components/file-explorer.css b/styles/components/file-explorer.css index c0bf985..2ad913c 100644 --- a/styles/components/file-explorer.css +++ b/styles/components/file-explorer.css @@ -3,11 +3,14 @@ ========================================================================== */ .custom-icon { - position: absolute; - left: 0; display: inline-flex; } +.custom-icon__absolute-right { + position: absolute; + right: 0; +} + .status-wrapper { position: relative; display: inline-block; diff --git a/types/pluginSettings.ts b/types/pluginSettings.ts index 7810f8d..c51d32a 100644 --- a/types/pluginSettings.ts +++ b/types/pluginSettings.ts @@ -8,6 +8,10 @@ export interface StatusTemplate { } export type PluginSettings = { + fileExplorerIconPosition: + | "absolute-right" + | "file-name-left" + | "file-name-right"; statusColors: Record; showStatusBar: boolean; autoHideStatusBar: boolean;