Align field values with fixed width for field key. (#5821)

Made the alignment consistent with the field panel. This uses 90px as
the key label width.

**Issue:** #5730 

**Changes:**
- Add a label width of 90 to FieldContext Provider in useFieldContext
function
- Add a label width of 90 to ActivityTargetsInlineCell component

**Screen recording form local testing:**



https://github.com/twentyhq/twenty/assets/120792086/e150530b-4163-4a69-9bd5-119a2f202d4f

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
This commit is contained in:
marteenaf 2024-06-11 17:24:40 +01:00 committed by GitHub
parent 3440889ad0
commit 6d7782eb5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 0 deletions

View File

@ -1,3 +1,4 @@
import { useContext } from 'react';
import { Key } from 'ts-key-enum'; import { Key } from 'ts-key-enum';
import { IconArrowUpRight, IconPencil } from 'twenty-ui'; import { IconArrowUpRight, IconPencil } from 'twenty-ui';
@ -6,6 +7,7 @@ import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTa
import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode'; import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
import { Activity } from '@/activities/types/Activity'; import { Activity } from '@/activities/types/Activity';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope'; import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider'; import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope'; import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer'; import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
@ -29,6 +31,8 @@ export const ActivityTargetsInlineCell = ({
useActivityTargetObjectRecords(activity); useActivityTargetObjectRecords(activity);
const { closeInlineCell } = useInlineCell(); const { closeInlineCell } = useInlineCell();
const { fieldDefinition } = useContext(FieldContext);
useScopedHotkeys( useScopedHotkeys(
Key.Escape, Key.Escape,
() => { () => {
@ -48,6 +52,7 @@ export const ActivityTargetsInlineCell = ({
IconLabel={showLabel ? IconArrowUpRight : undefined} IconLabel={showLabel ? IconArrowUpRight : undefined}
showLabel={showLabel} showLabel={showLabel}
readonly={readonly} readonly={readonly}
labelWidth={fieldDefinition?.labelWidth}
editModeContent={ editModeContent={
<ActivityTargetInlineCellEditMode <ActivityTargetInlineCellEditMode
activity={activity} activity={activity}

View File

@ -72,6 +72,7 @@ export const useFieldContext = ({
showLabel: true, showLabel: true,
position: fieldPosition, position: fieldPosition,
objectMetadataItem, objectMetadataItem,
labelWidth: 90,
}), }),
useUpdateRecord: useUpdateRecord:
customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation, customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation,