From ea850f323abbdc288a56ad9e596885a9f9b612fd Mon Sep 17 00:00:00 2001 From: Etienne <45695613+etiennejouan@users.noreply.github.com> Date: Wed, 23 Apr 2025 10:46:10 +0200 Subject: [PATCH] Fix inline cell interactions (#11686) @bosiraphael I've slightly updated [your recent pr](https://github.com/twentyhq/twenty/pull/11654) - before Screenshot 2025-04-22 at 17 48 26 - after Screenshot 2025-04-22 at 17 47 41 closes https://github.com/twentyhq/core-team-issues/issues/831 and https://github.com/twentyhq/core-team-issues/issues/828 --- .../hooks/useOpenFieldInputEditMode.ts | 5 ++++- .../components/RecordInlineCellContainer.tsx | 2 -- .../record-show/components/FieldsCard.tsx | 15 +++++++++++++-- .../RecordTitleFullNameFieldDisplay.tsx | 15 ++++++++++++++- .../ui/input/types/TitleInputHotkeyScope.ts | 1 + 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts index 0aae2c4b8..1f3ad72f1 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts @@ -15,6 +15,7 @@ import { } from '@/object-record/record-field/types/FieldMetadata'; import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects'; import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject'; +import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2'; @@ -30,7 +31,9 @@ export const useOpenFieldInputEditMode = () => { const { openActivityTargetCellEditMode } = useOpenActivityTargetCellEditMode(); - const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope(); + const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope( + INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY, + ); const openFieldInput = useRecoilCallback( ({ snapshot }) => diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index 86ffd9fb1..adac60d49 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -44,7 +44,6 @@ const StyledLabelAndIconContainer = styled.div` const StyledValueContainer = styled.div<{ readonly: boolean }>` cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; display: flex; - flex-grow: 1; min-width: 0; position: relative; @@ -80,7 +79,6 @@ const StyledInlineCellBaseContainer = styled.div` gap: ${({ theme }) => theme.spacing(1)}; user-select: none; align-items: center; - justify-content: center; `; export const StyledSkeletonDiv = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx index faae2cd10..08894a990 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx @@ -8,6 +8,7 @@ import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/uti import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useIsRecordReadOnly } from '@/object-record/record-field/hooks/useIsRecordReadOnly'; import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; +import { isFieldValueReadOnly } from '@/object-record/record-field/utils/isFieldValueReadOnly'; import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader'; @@ -117,7 +118,12 @@ export const FieldsCard = ({ }), useUpdateRecord: useUpdateOneObjectRecordMutation, isDisplayModeFixHeight: true, - isReadOnly: isRecordReadOnly, + isReadOnly: isFieldValueReadOnly({ + objectNameSingular, + fieldName: fieldMetadataItem.name, + fieldType: fieldMetadataItem.type, + isRecordReadOnly, + }), }} > { .join(' ') .trim(); + const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope( + INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY, + ); return ( - openInlineCell()}> + { + setHotkeyScopeAndMemorizePreviousScope( + TitleInputHotkeyScope.TitleFullNameInput, + ); + openInlineCell(); + }} + > {!content ? ( Untitled ) : ( diff --git a/packages/twenty-front/src/modules/ui/input/types/TitleInputHotkeyScope.ts b/packages/twenty-front/src/modules/ui/input/types/TitleInputHotkeyScope.ts index 4f265fa3b..123420ac2 100644 --- a/packages/twenty-front/src/modules/ui/input/types/TitleInputHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/input/types/TitleInputHotkeyScope.ts @@ -1,3 +1,4 @@ export enum TitleInputHotkeyScope { TitleInput = 'title-input', + TitleFullNameInput = 'title-full-name-input', }