From 0f4e6cc28d67a74daab8325f462dde705aeeadb6 Mon Sep 17 00:00:00 2001 From: Xu Quan Date: Sat, 12 Apr 2025 16:04:29 +0800 Subject: [PATCH] feat: add file item spacing option to control whether add padding on file item --- src/SettingTab.tsx | 21 +++++++++++++++++++ src/components/File/Content.tsx | 18 ++++++++++++++-- src/components/FileTree/index.tsx | 2 +- src/hooks/useSettingsHandler/index.tsx | 2 ++ .../useSettingsHandler/useFileItemSpacing.tsx | 21 +++++++++++++++++++ src/locales/settings.ts | 16 ++++++++++++++ src/settings.ts | 6 ++++++ styles.css | 3 +++ 8 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 src/hooks/useSettingsHandler/useFileItemSpacing.tsx diff --git a/src/SettingTab.tsx b/src/SettingTab.tsx index c99c403..53db824 100644 --- a/src/SettingTab.tsx +++ b/src/SettingTab.tsx @@ -1,7 +1,10 @@ import { App, PluginSettingTab, Setting } from "obsidian"; import FolderFileSplitterPlugin from "./main"; import { + ComfortableSpacing, + CompactSpacing, ExpandFolderByClickingOnElement, + FileItemSpacing, HorizontalSplitLayoutMode, LayoutMode, VerticalSplitLayoutMode, @@ -122,6 +125,24 @@ export class SettingTab extends PluginSettingTab { }); }); + new Setting(containerEl) + .setName(settingsCopy.fileItemSpacing.name) + .setDesc(settingsCopy.fileItemSpacing.desc) + .addDropdown((cb) => { + const { options } = settingsCopy.fileItemSpacing; + cb.addOption(ComfortableSpacing, options?.comfortable ?? ""); + cb.addOption(CompactSpacing, options?.compact ?? ""); + cb.setValue(this.plugin.settings.fileItemSpacing); + cb.onChange(async (val: FileItemSpacing) => { + this.plugin.settings.fileItemSpacing = val; + await this.plugin.saveSettings(); + this.plugin.triggerSettingsChangeEvent( + "fileItemSpacing", + val + ); + }); + }); + this.createHeader(containerEl, headersCopy.folderAndFileBehavior); new Setting(containerEl) .setName(settingsCopy.hideRootFolder.name) diff --git a/src/components/File/Content.tsx b/src/components/File/Content.tsx index 8e8e782..5d08eba 100644 --- a/src/components/File/Content.tsx +++ b/src/components/File/Content.tsx @@ -4,7 +4,10 @@ import { useEffect, useRef, useState } from "react"; import { ExplorerStore } from "src/store"; import { FolderListModal } from "../FolderListModal"; -import { useShowFileDetail } from "src/hooks/useSettingsHandler"; +import { + useFileItemSpacing, + useShowFileDetail, +} from "src/hooks/useSettingsHandler"; import FileDetail from "./Detail"; import useRenderEditableName from "src/hooks/useRenderEditableName"; import { FILE_OPERATION_COPY } from "src/locales"; @@ -46,6 +49,9 @@ const FileContent = ({ file, deleteFile }: FileProps) => { const { showFileDetail } = useShowFileDetail( plugin.settings.showFileDetail ); + const { fileItemSpacing } = useFileItemSpacing( + plugin.settings.fileItemSpacing + ); const isFocused = focusedFile?.path === file.path; const onSaveName = (name: string) => renameFile(file, name); @@ -205,7 +211,15 @@ const FileContent = ({ file, deleteFile }: FileProps) => { } }} > -
+
{renderFileName()}
diff --git a/src/components/FileTree/index.tsx b/src/components/FileTree/index.tsx index 9e03861..421f048 100644 --- a/src/components/FileTree/index.tsx +++ b/src/components/FileTree/index.tsx @@ -28,7 +28,7 @@ const FileTree = ({ onOpenFoldersPane = () => {} }: Props) => { const renderFile = (file: TFile, disableDrag?: boolean) => ( onDeleteFileFromList(file)} disableDrag={disableDrag} diff --git a/src/hooks/useSettingsHandler/index.tsx b/src/hooks/useSettingsHandler/index.tsx index 990bad8..bc25657 100644 --- a/src/hooks/useSettingsHandler/index.tsx +++ b/src/hooks/useSettingsHandler/index.tsx @@ -7,6 +7,7 @@ import { useLayoutMode } from "./useLayoutMode"; import { useShowFilesFromSubfolders } from "./useShowFilesFromSubfolders"; import { useOpenDestinationFolder } from "./useOpenDestinationFolder"; import { useHideRootFolder } from "./useHideRootFolder"; +import { useFileItemSpacing } from "./useFileItemSpacing"; export { useShowFolderIcon, @@ -18,4 +19,5 @@ export { useShowFilesFromSubfolders, useOpenDestinationFolder, useHideRootFolder, + useFileItemSpacing, }; diff --git a/src/hooks/useSettingsHandler/useFileItemSpacing.tsx b/src/hooks/useSettingsHandler/useFileItemSpacing.tsx new file mode 100644 index 0000000..99fff3a --- /dev/null +++ b/src/hooks/useSettingsHandler/useFileItemSpacing.tsx @@ -0,0 +1,21 @@ +import { useState } from "react"; + +import { useWatchSettingsChange } from "./useWatchSettingsChange"; +import { FileItemSpacing } from "src/settings"; + +export const useFileItemSpacing = ( + defaultSpacing: FileItemSpacing +): { fileItemSpacing: FileItemSpacing } => { + const [spacing, setSpacing] = useState(defaultSpacing); + + const onChangeSpacing = (event: CustomEvent) => { + const { changeKey, changeValue } = event.detail; + if (changeKey == "fileItemSpacing") { + setSpacing(changeValue); + } + }; + + useWatchSettingsChange(onChangeSpacing); + + return { fileItemSpacing: spacing }; +}; diff --git a/src/locales/settings.ts b/src/locales/settings.ts index fac56bc..207b8ca 100644 --- a/src/locales/settings.ts +++ b/src/locales/settings.ts @@ -45,6 +45,14 @@ export const EN_SETTINGS: SettingsLocaleResource = { name: "Show folder icon", desc: "Enable this option to display icon next to folder, enhancing visual distinction between folders and files. ", }, + fileItemSpacing: { + name: "File item spacing", + desc: "Control the vertical spacing between file items in the list. Choose a compact or comfortable layout.", + options: { + compact: "Compact", + comfortable: "Comfortable", + }, + }, expandFolderOnClick: { name: "Expand folder on click", desc: "Choose whether to expand a folder by clicking on the toggle icon (▶/▼) or the folder name.", @@ -96,6 +104,14 @@ export const ZH_SETTINGS: SettingsLocaleResource = { name: "显示文件夹图标", desc: "启用后，文件夹旁会显示图标，便于区分文件夹和文件。", }, + fileItemSpacing: { + name: "文件项间距", + desc: "控制文件列表中各个文件项之间的垂直间距。可选择紧凑或宽松的布局风格。", + options: { + compact: "紧凑", + comfortable: "宽松", + }, + }, expandFolderOnClick: { name: "点击展开文件夹", desc: "选择通过点击切换图标（▶/▼）或文件夹名称来展开文件夹。", diff --git a/src/settings.ts b/src/settings.ts index 4b724de..bedc4a4 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -11,12 +11,17 @@ export type LayoutMode = | typeof HorizontalSplitLayoutMode | typeof VerticalSplitLayoutMode; +export const CompactSpacing = "Compact"; +export const ComfortableSpacing = "Comfortable"; +export type FileItemSpacing = typeof CompactSpacing | typeof ComfortableSpacing; + export interface FolderFileSplitterPluginSettings { expandFolderByClickingOn: ExpandFolderByClickingOnElement; includeSubfolderFilesCount: boolean; showFolderHierarchyLines: boolean; showFolderIcon: boolean; showFileDetail: boolean; + fileItemSpacing: FileItemSpacing; openPluginViewOnStartup: boolean; layoutMode: LayoutMode; showFilesFromSubfolders: boolean; @@ -30,6 +35,7 @@ export const DEFAULT_SETTINGS: FolderFileSplitterPluginSettings = { showFolderHierarchyLines: false, showFolderIcon: true, showFileDetail: true, + fileItemSpacing: ComfortableSpacing, openPluginViewOnStartup: true, layoutMode: HorizontalSplitLayoutMode, showFilesFromSubfolders: false, diff --git a/styles.css b/styles.css index a96fcff..cf932c3 100644 --- a/styles.css +++ b/styles.css @@ -257,6 +257,9 @@ div.ffs__file-content { display: grid; grid-template-rows: auto auto; gap: 4px; +} + +.ffs__file-content-header--comfortable { padding: 8px 0px; }