feat(ui): add UI setting for toggling between inline and above icon i…

…n title (#286)
FlorianWoelki · May 1, 2024 · db80941 · db80941
1 parent 201bd98
commit db80941
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/settings/data.ts b/src/settings/data.ts
@@ -1,5 +1,10 @@
 export type EmojiStyle = 'none' | 'native' | 'twemoji';
 
+export enum IconInTitlePosition {
+  Above = 'above',
+  Inline = 'inline',
+}
+
 export interface ExtraMarginSettings {
   /**
    * Controls the extra margin on the top of the icon.
@@ -119,6 +124,11 @@ export interface IconFolderSettings {
    * @default false
    */
   iconInTitleEnabled: boolean;
+  /**
+   * Sets the default position of the icon in the title of a file.
+   * @default 'above'
+   */
+  iconInTitlePosition: IconInTitlePosition;
   /**
    * Sets whether the plugin should check in the background if icons are missing.
    * @default false
@@ -179,6 +189,7 @@ export const DEFAULT_SETTINGS: IconFolderSettings = {
   },
   iconInTabsEnabled: false,
   iconInTitleEnabled: false,
+  iconInTitlePosition: IconInTitlePosition.Above,
   iconInFrontmatterEnabled: false,
   iconInFrontmatterFieldName: 'icon',
   iconColorInFrontmatterFieldName: 'iconColor',

diff --git a/src/settings/ui/toggleIconInTitle.ts b/src/settings/ui/toggleIconInTitle.ts
@@ -1,19 +1,39 @@
-import { MarkdownView, Setting } from 'obsidian';
+import { DropdownComponent, MarkdownView, Setting } from 'obsidian';
 import { calculateInlineTitleSize } from '@app/lib/util/text';
 import IconFolderSetting from './iconFolderSetting';
-import icon from '../../lib/icon';
-import titleIcon from '../../lib/icon-title';
-import { InlineTitleView } from '../../@types/obsidian';
+import icon from '@lib/icon';
+import titleIcon from '@lib/icon-title';
+import { InlineTitleView } from '@app/@types/obsidian';
+import { IconInTitlePosition } from '@app/settings/data';
 
 export default class ToggleIconInTitle extends IconFolderSetting {
+  private dropdown: DropdownComponent;
+
   public display(): void {
     new Setting(this.containerEl)
       .setName('Toggle icon in title')
       .setDesc('Toggles the visibility of an icon above the title of a file.')
+      .addDropdown((dropdown) => {
+        this.dropdown = dropdown;
+        dropdown.addOptions({
+          above: 'Above title',
+          inline: 'Next to title',
+        });
+        dropdown.setValue(this.plugin.getSettings().iconInTitlePosition);
+        dropdown.onChange(async (value) => {
+          this.plugin.getSettings().iconInTitlePosition =
+            value as IconInTitlePosition;
+          await this.plugin.saveIconFolderData();
+        });
+      })
       .addToggle((toggle) => {
         toggle
           .setValue(this.plugin.getSettings().iconInTitleEnabled)
           .onChange(async (enabled) => {
+            if (this.dropdown) {
+              this.dropdown.setDisabled(!enabled);
+            }
+
             this.plugin.getSettings().iconInTitleEnabled = enabled;
             await this.plugin.saveIconFolderData();