From 1ffe0c1c8a9843f1142ad6573b32176492e3a9db Mon Sep 17 00:00:00 2001 From: Xu Quan Date: Sun, 13 Apr 2025 17:37:58 +0800 Subject: [PATCH] feat: add auto hide action bar option in settings --- src/SettingTab.tsx | 15 ++++++++ .../layout/HorizontalSplitLayout.tsx | 12 +++++- src/components/layout/VerticalSplitLayout.tsx | 12 +++++- src/hooks/useSettingsHandler/index.tsx | 4 +- .../useAutoHideActionBar.tsx | 20 ++++++++++ src/locales/settings.ts | 8 ++++ src/settings.ts | 2 + styles.css | 37 +++++++++++++++---- 8 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 src/hooks/useSettingsHandler/useAutoHideActionBar.tsx diff --git a/src/SettingTab.tsx b/src/SettingTab.tsx index 40ef57c..a855b13 100644 --- a/src/SettingTab.tsx +++ b/src/SettingTab.tsx @@ -110,6 +110,21 @@ export class SettingTab extends PluginSettingTab { }); }); + new Setting(containerEl) + .setName(settingsCopy.autoHideActionBar.name) + .setDesc(settingsCopy.autoHideActionBar.desc) + .addToggle((cb) => { + cb.setValue(this.plugin.settings.autoHideActionBar); + cb.onChange(async (val) => { + this.plugin.settings.autoHideActionBar= val; + await this.plugin.saveSettings(); + this.plugin.triggerSettingsChangeEvent( + "autoHideActionBar", + val + ); + }); + }); + new Setting(containerEl) .setName(settingsCopy.showFolderIcon.name) .setDesc(settingsCopy.showFolderIcon.desc) diff --git a/src/components/layout/HorizontalSplitLayout.tsx b/src/components/layout/HorizontalSplitLayout.tsx index 3f206a0..e309da4 100644 --- a/src/components/layout/HorizontalSplitLayout.tsx +++ b/src/components/layout/HorizontalSplitLayout.tsx @@ -7,7 +7,10 @@ import { FileActionSection, FolderActionSection } from "./Actions"; import FolderTree from "../FolderTree"; import FileTree from "../FileTree"; import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf"; -import { useHighlightActionBar } from "src/hooks/useSettingsHandler"; +import { + useAutoHideActionBar, + useHighlightActionBar, +} from "src/hooks/useSettingsHandler"; import { useExplorer } from "src/hooks/useExplorer"; const HorizontalSplitLayout = () => { @@ -20,8 +23,12 @@ const HorizontalSplitLayout = () => { const pluginRef = useRef(null); useChangeActiveLeaf(); + const { settings } = plugin; const { highlightActionBar } = useHighlightActionBar( - plugin.settings.highlightActionBar + settings.highlightActionBar + ); + const { autoHideActionBar } = useAutoHideActionBar( + settings.autoHideActionBar ); const restoreLayout = () => { @@ -60,6 +67,7 @@ const HorizontalSplitLayout = () => { const getActionsContainerClassName = () => classNames("ffs__actions-container nav-header", { "ffs__actions-container--highlight": highlightActionBar, + "ffs__actions-container--auto-hide": autoHideActionBar, }); return ( diff --git a/src/components/layout/VerticalSplitLayout.tsx b/src/components/layout/VerticalSplitLayout.tsx index d0e864e..4be379f 100644 --- a/src/components/layout/VerticalSplitLayout.tsx +++ b/src/components/layout/VerticalSplitLayout.tsx @@ -9,7 +9,10 @@ import FileTree from "../FileTree"; import FolderTree from "../FolderTree"; import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf"; import { useExplorer } from "src/hooks/useExplorer"; -import { useHighlightActionBar } from "src/hooks/useSettingsHandler"; +import { + useAutoHideActionBar, + useHighlightActionBar, +} from "src/hooks/useSettingsHandler"; const VerticalSplitLayout = () => { const { plugin } = useExplorer(); @@ -24,8 +27,12 @@ const VerticalSplitLayout = () => { const pluginRef = useRef(null); useChangeActiveLeaf(); + const { settings } = plugin; const { highlightActionBar } = useHighlightActionBar( - plugin.settings.highlightActionBar + settings.highlightActionBar + ); + const { autoHideActionBar } = useAutoHideActionBar( + settings.autoHideActionBar ); const restoreLayout = () => { @@ -82,6 +89,7 @@ const VerticalSplitLayout = () => { const getActionsContainerClassName = () => classNames("ffs__actions-container nav-header", { "ffs__actions-container--highlight": highlightActionBar, + "ffs__actions-container--auto-hide": autoHideActionBar, }); const renderFoldersPane = () => { diff --git a/src/hooks/useSettingsHandler/index.tsx b/src/hooks/useSettingsHandler/index.tsx index f20748c..8594ee8 100644 --- a/src/hooks/useSettingsHandler/index.tsx +++ b/src/hooks/useSettingsHandler/index.tsx @@ -10,6 +10,7 @@ import { useHideRootFolder } from "./useHideRootFolder"; import { useFileItemSpacing } from "./useFileItemSpacing"; import { useShowFileItemDivider } from "./useShowFileItemDivider"; import { useHighlightActionBar } from "./useHighlightActionBar"; +import { useAutoHideActionBar } from "./useAutoHideActionBar"; export { useShowFolderIcon, @@ -23,5 +24,6 @@ export { useHideRootFolder, useFileItemSpacing, useShowFileItemDivider, - useHighlightActionBar + useHighlightActionBar, + useAutoHideActionBar }; diff --git a/src/hooks/useSettingsHandler/useAutoHideActionBar.tsx b/src/hooks/useSettingsHandler/useAutoHideActionBar.tsx new file mode 100644 index 0000000..164b900 --- /dev/null +++ b/src/hooks/useSettingsHandler/useAutoHideActionBar.tsx @@ -0,0 +1,20 @@ +import { useState } from "react"; + +import { useWatchSettingsChange } from "./useWatchSettingsChange"; + +export const useAutoHideActionBar = ( + defaultHide: boolean +): { autoHideActionBar: boolean } => { + const [hide, setHide] = useState(defaultHide); + + const onChangeHide = (event: CustomEvent) => { + const { changeKey, changeValue } = event.detail; + if (changeKey == "autoHideActionBar") { + setHide(changeValue); + } + }; + + useWatchSettingsChange(onChangeHide); + + return { autoHideActionBar: hide }; +}; diff --git a/src/locales/settings.ts b/src/locales/settings.ts index 866984e..3d34d9c 100644 --- a/src/locales/settings.ts +++ b/src/locales/settings.ts @@ -61,6 +61,10 @@ export const EN_SETTINGS: SettingsLocaleResource = { name: "Highlight action bar", desc: "When enabled, the top action buttons will have a background and margin to distinguish them from surrounding elements.", }, + autoHideActionBar: { + name: "Auto-hide action bar", + desc: "When enabled, the top action bar will be hidden by default and only appear when hovering over it.", + }, expandFolderOnClick: { name: "Expand folder on click", desc: "Choose whether to expand a folder by clicking on the toggle icon (▶/▼) or the folder name.", @@ -128,6 +132,10 @@ export const ZH_SETTINGS: SettingsLocaleResource = { name: "高亮操作栏", desc: "启用后，顶部操作按钮区域将添加背景色和边距，以增强与周围内容的区分。", }, + autoHideActionBar: { + name: "自动隐藏操作栏", + desc: "启用后，顶部操作栏默认隐藏，鼠标悬停时才会显示。", + }, expandFolderOnClick: { name: "点击展开文件夹", desc: "选择通过点击切换图标（▶/▼）或文件夹名称来展开文件夹。", diff --git a/src/settings.ts b/src/settings.ts index e3881b2..5235221 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -24,6 +24,7 @@ export interface FolderFileSplitterPluginSettings { showFileItemDivider: boolean; fileItemSpacing: FileItemSpacing; highlightActionBar: boolean; + autoHideActionBar: boolean; openPluginViewOnStartup: boolean; layoutMode: LayoutMode; showFilesFromSubfolders: boolean; @@ -40,6 +41,7 @@ export const DEFAULT_SETTINGS: FolderFileSplitterPluginSettings = { fileItemSpacing: ComfortableSpacing, showFileItemDivider: true, highlightActionBar: false, + autoHideActionBar: false, openPluginViewOnStartup: true, layoutMode: HorizontalSplitLayoutMode, showFilesFromSubfolders: false, diff --git a/styles.css b/styles.css index b10bb0d..1b922e6 100644 --- a/styles.css +++ b/styles.css @@ -52,10 +52,6 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content { } /* layout divider */ -.ffs__layout-divider { - padding: 2px 0; -} - .ffs__layout-divider:hover { border-top-color: var(--background-modifier-border); transition: all 50ms ease-in-out; @@ -64,12 +60,15 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content { .ffs__layout-divider--horizontal { border-left: 1px solid var(--divider-color); cursor: ew-resize; + padding: 0 2px; + margin-left: 4px; } .ffs__layout-divider--vertical { border-top: 1px solid var(--divider-color); cursor: ns-resize; margin-top: 16px; + padding: 2px 0; } /* Common Components */ @@ -124,6 +123,32 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content { margin: 8px 12px 4px; } +.ffs__actions-container svg.svg-icon { + transition: var(--anim-duration-fast) var(--anim-duration-fast) !important; +} + +.ffs__actions-container--auto-hide:not(:hover) + .ffs__actions-section + svg.svg-icon { + --icon-size: 0px; + width: 0px; + height: 0px; +} + +.ffs__layout + .ffs__actions-container--auto-hide:not(:hover) + .ffs__actions-section { + background-color: transparent !important; +} + +.ffs__actions-container--auto-hide:not(:hover) .ffs__action-button-wrapper { + flex-grow: 0; + background-color: var(--background-modifier-border); + padding: 2px; + width: unset; + height: unset; +} + .ffs__layout--vertical .ffs__actions-container { display: flex; justify-content: space-between; @@ -139,13 +164,9 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content { .ffs__actions-section { display: flex; align-items: center; -} - -.ffs__actions-section { font-weight: 500; color: var(--icon-color); font-size: 13px; - /* border: 1px solid red; */ } .ffs__collapsed-folders,