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;