From 0be38340feb314709d7446cbe451bce372078627 Mon Sep 17 00:00:00 2001 From: FlorianWoelki Date: Tue, 16 Jul 2024 10:20:35 +0200 Subject: [PATCH] refactor: use toggle for adding and removing lucide icon pack (#527) --- src/icon-pack-manager.ts | 50 ++++++++++++++++--------------- src/lib/icon.ts | 6 +++- src/main.ts | 12 +++++++- src/settings/data.ts | 14 +++++---- src/settings/ui/customIconPack.ts | 32 +++++++++++++------- src/util.ts | 2 +- 6 files changed, 74 insertions(+), 42 deletions(-) diff --git a/src/icon-pack-manager.ts b/src/icon-pack-manager.ts index 10dae6a1..9fd1d00a 100644 --- a/src/icon-pack-manager.ts +++ b/src/icon-pack-manager.ts @@ -61,26 +61,28 @@ export const setIconPacks = (newIconPacks: IconPack[]): void => { iconPacks = newIconPacks; }; -export const addLucideIconsPack = (): void => { +export const addLucideIconsPack = (plugin: IconizePlugin): void => { iconPacks.push({ name: LUCIDE_ICON_PACK_NAME, prefix: 'Li', custom: false, - icons: getIconIds() - .map((iconId) => iconId.replace(/^lucide-/, '')) - .map((iconId) => { - const iconEl = getIcon(iconId); - iconEl.removeClass('svg-icon'); // Removes native `svg-icon` class. - return { - name: getNormalizedName(iconId), - filename: iconId, - prefix: 'Li', - svgElement: iconEl?.outerHTML, - svgContent: iconEl?.innerHTML, - svgViewbox: '', - iconPackName: LUCIDE_ICON_PACK_NAME, - }; - }), + icons: plugin.doesUseNativeLucideIconPack() + ? getIconIds() + .map((iconId) => iconId.replace(/^lucide-/, '')) + .map((iconId) => { + const iconEl = getIcon(iconId); + iconEl.removeClass('svg-icon'); // Removes native `svg-icon` class. + return { + name: getNormalizedName(iconId), + filename: iconId, + prefix: 'Li', + svgElement: iconEl?.outerHTML, + svgContent: iconEl?.innerHTML, + svgViewbox: '', + iconPackName: LUCIDE_ICON_PACK_NAME, + }; + }) + : [], }); }; @@ -374,12 +376,12 @@ export const createIconPackPrefix = (iconPackName: string): string => { }; export const loadUsedIcons = async (plugin: IconizePlugin, icons: string[]) => { - const iconPacks = [ - ...(await listPath(plugin)).folders.map((iconPack) => - iconPack.split('/').pop(), - ), - LUCIDE_ICON_PACK_NAME, - ]; + const iconPacks = (await listPath(plugin)).folders.map((iconPack) => + iconPack.split('/').pop(), + ); + if (plugin.doesUseNativeLucideIconPack()) { + iconPacks.push(LUCIDE_ICON_PACK_NAME); + } for (let i = 0; i < icons.length; i++) { const entry = icons[i]; @@ -431,7 +433,7 @@ export const loadIcon = async ( if ( iconPack === LUCIDE_ICON_PACK_NAME && - !plugin.getSettings().useCustomLucideIconPack + plugin.doesUseNativeLucideIconPack() ) { // Native lucide icons already exist for Obsidian. const lucideIcons = iconPacks.find( @@ -524,7 +526,7 @@ export const initIconPacks = async (plugin: IconizePlugin): Promise => { const prefix = createIconPackPrefix(zipFile); if ( zipFile === LUCIDE_ICON_PACK_NAME && - !plugin.getSettings().useCustomLucideIconPack + !plugin.doesUseCustomLucideIconPack() ) { continue; } diff --git a/src/lib/icon.ts b/src/lib/icon.ts index 089bb050..0703f780 100644 --- a/src/lib/icon.ts +++ b/src/lib/icon.ts @@ -7,6 +7,7 @@ import iconTabs from './icon-tabs'; import { getFileItemInnerTitleEl, getFileItemTitleEl } from '@app/util'; import { Icon, + LUCIDE_ICON_PACK_NAME, extractIconToIconPack, getAllIconPacks, getIconFromIconPack, @@ -36,7 +37,10 @@ const checkMissingIcons = async ( const iconPrefix = iconNameWithPrefix.substring(0, iconNextIdentifier); const iconPackName = getIconPackNameByPrefix(iconPrefix); - if (!plugin.getSettings().useCustomLucideIconPack) { + if ( + iconPackName === LUCIDE_ICON_PACK_NAME && + !plugin.doesUseCustomLucideIconPack() + ) { return; } diff --git a/src/main.ts b/src/main.ts index 6b8ddb64..8d1b2e8e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -108,7 +108,9 @@ export default class IconizePlugin extends Plugin { await migrate(this); const usedIconNames = icon.getAllWithPath(this).map((value) => value.icon); - addLucideIconsPack(); + if (!this.doesUseCustomLucideIconPack()) { + addLucideIconsPack(this); + } await loadUsedIcons(this, usedIconNames); this.app.workspace.onLayoutReady(() => this.handleChangeLayout()); @@ -914,6 +916,14 @@ export default class IconizePlugin extends Plugin { return this.registeredFileExplorers; } + doesUseCustomLucideIconPack(): boolean { + return this.getSettings().lucideIconPackType === 'custom'; + } + + doesUseNativeLucideIconPack(): boolean { + return this.getSettings().lucideIconPackType === 'native'; + } + /** * Returns a possible data path by the given value. This function checks for * direct icon and custom rules. diff --git a/src/settings/data.ts b/src/settings/data.ts index 2838bc4c..738e39b3 100644 --- a/src/settings/data.ts +++ b/src/settings/data.ts @@ -5,6 +5,8 @@ export enum IconInTitlePosition { Inline = 'inline', } +export type LucideIconPackType = 'none' | 'custom' | 'native'; + export interface ExtraMarginSettings { /** * Controls the extra margin on the top of the icon. @@ -166,11 +168,13 @@ export interface IconFolderSettings { */ iconIdentifier: string; /** - * Whether to use the custom or native lucide icon pack or not. - * `false` refers to using the native lucide icon pack. - * @default false + * Specifies which Lucide icon pack to use. + * - 'none': Don't use any Lucide icon pack + * - 'native': Use the native Lucide icon pack + * - 'custom': Use a custom Lucide icon pack + * @default 'native' */ - useCustomLucideIconPack: boolean; + lucideIconPackType: LucideIconPackType; /** * Sets whether the plugin should be in debug mode. This will enable more logging * in the console. @@ -203,6 +207,6 @@ export const DEFAULT_SETTINGS: IconFolderSettings = { iconsInNotesEnabled: true, iconsInLinksEnabled: true, iconIdentifier: ':', - useCustomLucideIconPack: false, + lucideIconPackType: 'native', debugMode: false, }; diff --git a/src/settings/ui/customIconPack.ts b/src/settings/ui/customIconPack.ts index 388e3198..e45dbc17 100644 --- a/src/settings/ui/customIconPack.ts +++ b/src/settings/ui/customIconPack.ts @@ -15,6 +15,7 @@ import { import IconizePlugin from '@app/main'; import { readFileSync } from '@app/util'; import icon from '@app/lib/icon'; +import { LucideIconPackType } from '../data'; export default class CustomIconPackSetting extends IconFolderSetting { private textComponent: TextComponent; @@ -104,7 +105,14 @@ export default class CustomIconPackSetting extends IconFolderSetting { }); }); - getAllIconPacks().forEach((iconPack) => { + // Sorts lucide icon pack always to the top. + const iconPacks = [...getAllIconPacks()].sort((a, b) => { + if (a.name === LUCIDE_ICON_PACK_NAME) return -1; + if (b.name === LUCIDE_ICON_PACK_NAME) return 1; + return a.name.localeCompare(b.name); + }); + + iconPacks.forEach((iconPack) => { const isLucideIconPack = iconPack.name === LUCIDE_ICON_PACK_NAME; const additionalLucideDescription = '(Native Pack has fewer icons but 100% Obsidian Sync support)'; @@ -147,17 +155,21 @@ export default class CustomIconPackSetting extends IconFolderSetting { // }); if (isLucideIconPack) { - iconPackSetting.addToggle((toggle) => { - toggle.setTooltip('Use custom Lucide Icons Pack'); - toggle.setValue(this.plugin.getSettings().useCustomLucideIconPack); - toggle.onChange(async (value) => { - toggle.setDisabled(true); + iconPackSetting.addDropdown((dropdown) => { + dropdown.addOptions({ + native: 'Native', + custom: 'Custom', + none: 'None', + } satisfies Record); + dropdown.setValue(this.plugin.getSettings().lucideIconPackType); + dropdown.onChange(async (value: LucideIconPackType) => { + dropdown.setDisabled(true); new Notice('Changing icon packs...'); - this.plugin.getSettings().useCustomLucideIconPack = value; + this.plugin.getSettings().lucideIconPackType = value; await this.plugin.saveIconFolderData(); - if (!value) { + if (value === 'native' || value === 'none') { await removeCustomLucideIconPack(this.plugin); - addLucideIconsPack(); + addLucideIconsPack(this.plugin); } else { await addCustomLucideIconPack(this.plugin); await icon.checkMissingIcons( @@ -166,7 +178,7 @@ export default class CustomIconPackSetting extends IconFolderSetting { ); } - toggle.setDisabled(false); + dropdown.setDisabled(false); new Notice('Done. This change requires a restart of Obsidian'); }); }); diff --git a/src/util.ts b/src/util.ts index 134c1ef7..0c021945 100644 --- a/src/util.ts +++ b/src/util.ts @@ -91,7 +91,7 @@ export const saveIconToIconPack = ( const iconPackName = getIconPackNameByPrefix(iconPrefix); if ( iconPackName === LUCIDE_ICON_PACK_NAME && - !plugin.getSettings().useCustomLucideIconPack + !plugin.doesUseCustomLucideIconPack() ) { return; }