diff --git a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx index 71ed0965a..d3c5091c2 100644 --- a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx @@ -22,10 +22,14 @@ export interface RenameTextBoxProps extends React.HTMLAttributes lines?: number; // Temporary solution for TruncatedText in list view idleClassName?: string; + toggleBy?: 'shortcut' | 'click' | 'all'; } export const RenameTextBox = forwardRef( - ({ name, onRename, disabled, className, idleClassName, lines, ...props }, _ref) => { + ( + { name, onRename, disabled, className, idleClassName, lines, toggleBy = 'all', ...props }, + _ref + ) => { const os = useOperatingSystem(); const [isRenaming, drag] = useSelector(explorerStore, (s) => [s.isRenaming, s.drag]); @@ -114,7 +118,7 @@ export const RenameTextBox = forwardRef( }; useShortcut('renameObject', (e) => { - if (dialogManager.isAnyDialogOpen()) return; + if (dialogManager.isAnyDialogOpen() || toggleBy === 'click') return; e.preventDefault(); if (allowRename) blur(); else if (!disabled) setAllowRename(true); @@ -136,11 +140,12 @@ export const RenameTextBox = forwardRef( }, [allowRename, highlightText]); useEffect(() => { + if (toggleBy === 'click') return; if (!disabled) { if (isRenaming && !allowRename) setAllowRename(true); else explorerStore.isRenaming = allowRename; } else resetState(); - }, [isRenaming, disabled, allowRename]); + }, [isRenaming, disabled, allowRename, toggleBy]); useEffect(() => { const onMouseDown = (event: MouseEvent) => { diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx index 375ae238b..eaa08e487 100644 --- a/interface/app/$libraryId/Explorer/Inspector/index.tsx +++ b/interface/app/$libraryId/Explorer/Inspector/index.tsx @@ -56,6 +56,7 @@ import { FileThumb } from '../FilePath/Thumb'; import { useQuickPreviewStore } from '../QuickPreview/store'; import { explorerStore } from '../store'; import { uniqueId, useExplorerItemData } from '../util'; +import { RenamableItemText } from '../View/RenamableItemText'; import FavoriteButton from './FavoriteButton'; import MediaData from './MediaData'; import Note from './Note'; @@ -209,10 +210,10 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => { ...new Set( (item.item?.file_paths || []).map((fp) => fp.location_id).filter(Boolean) ) - ] + ] : item.type === 'Path' - ? [item.item.location_id] - : []; + ? [item.item.location_id] + : []; }, [item]); const fileLocations = @@ -270,10 +271,17 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => { return ( <> -

- {name} - {extension && `.${extension}`} -

+
+ +
{objectData && (
diff --git a/interface/app/$libraryId/Explorer/View/RenamableItemText.tsx b/interface/app/$libraryId/Explorer/View/RenamableItemText.tsx index da9580da2..65a418eac 100644 --- a/interface/app/$libraryId/Explorer/View/RenamableItemText.tsx +++ b/interface/app/$libraryId/Explorer/View/RenamableItemText.tsx @@ -17,7 +17,8 @@ import { RenameTextBox, RenameTextBoxProps } from '../FilePath/RenameTextBox'; import { useQuickPreviewStore } from '../QuickPreview/store'; import { explorerStore } from '../store'; -interface Props extends Pick { +interface Props + extends Pick { item: ExplorerItem; allowHighlight?: boolean; style?: React.CSSProperties; @@ -155,12 +156,14 @@ export const RenamableItemText = ({ allowHighlight = true, ...props }: Props) => onRename={handleRename} className={clsx( 'font-medium', + props.className, (props.selected || props.highlight) && allowHighlight && ['bg-accent', !isDark && 'text-white'] )} style={props.style} lines={props.lines} idleClassName={props.idleClassName} + toggleBy={props.toggleBy} /> ); };