From b6901a49bf2003caaaec2d51ab689184149a35b0 Mon Sep 17 00:00:00 2001 From: Guillim Date: Wed, 16 Apr 2025 17:49:04 +0200 Subject: [PATCH] Fix-inline-height (#11608) Follow up from inline height #11553 related to PR #11442 we had some issues with hover styles Fixes https://github.com/twentyhq/twenty/issues/11442#issuecomment-2805893663 --------- Co-authored-by: etiennejouan Co-authored-by: Charles Bochet --- .../components/FullNameFieldDisplay.tsx | 4 ++-- .../display/components/NumberFieldDisplay.tsx | 2 +- .../display/components/TextFieldDisplay.tsx | 11 +++++----- .../RecordInlineCellDisplayMode.tsx | 6 +++++ .../RecordTitleCellTextFieldDisplay.tsx | 3 +-- .../display/components/BooleanDisplay.tsx | 12 +++++++--- .../display/components/CurrencyDisplay.tsx | 20 +++++------------ .../display/components/EllipsisDisplay.tsx | 3 +++ .../field/display/components/TextDisplay.tsx | 22 ++++++++++++++----- packages/twenty-front/vite.config.ts | 5 ++++- 10 files changed, 53 insertions(+), 35 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx index 3629109e6..bf997feea 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx @@ -1,7 +1,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay'; -import { OverflowingTextWithTooltip } from 'twenty-ui/display'; +import { TextDisplay } from '@/ui/field/display/components/TextDisplay'; export const FullNameFieldDisplay = () => { const { fieldValue } = useFullNameFieldDisplay(); @@ -10,5 +10,5 @@ export const FullNameFieldDisplay = () => { .filter(isNonEmptyString) .join(' '); - return ; + return ; }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx index d024c2388..b5ebb3cbd 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx @@ -1,7 +1,7 @@ import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useNumberFieldDisplay'; import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay'; -import { formatNumber } from '~/utils/format/number'; import { isDefined } from 'twenty-shared/utils'; +import { formatNumber } from '~/utils/format/number'; export const NumberFieldDisplay = () => { const { fieldValue, fieldDefinition } = useNumberFieldDisplay(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx index 7f67575fe..89a7c3ca2 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx @@ -10,12 +10,11 @@ export const TextFieldDisplay = () => { ? fieldDefinition.metadata?.settings?.displayedMaxRows : undefined; + const displayMaxRowCalculated = displayedMaxRows + ? displayedMaxRows + : displayedMaxRowsFromSettings; + return ( - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx index 4dcc59c0b..2aa83decd 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx @@ -48,10 +48,16 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + padding-top: 2px; + padding-bottom: 2px; `; const StyledEmptyField = styled.div` color: ${({ theme }) => theme.font.color.light}; + height: 20px; + display: flex; + align-items: center; `; export const RecordInlineCellDisplayMode = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index 32a08594e..31fd1db04 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx @@ -33,10 +33,9 @@ const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>` export const RecordTitleCellSingleTextDisplayMode = () => { const { recordId, fieldDefinition } = useContext(FieldContext); - const recordValue = useRecordValue(recordId); const isEmpty = - recordValue?.[fieldDefinition.metadata.fieldName].trim() === ''; + recordValue?.[fieldDefinition.metadata.fieldName]?.trim() === ''; const { openInlineCell } = useInlineCell(); diff --git a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx index d0ce25e1b..abfda56c5 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx @@ -13,19 +13,25 @@ type BooleanDisplayProps = { value: boolean | null | undefined; }; +const StyledContainer = styled.div` + height: 20px; + display: flex; + align-items: center; +`; + export const BooleanDisplay = ({ value }: BooleanDisplayProps) => { if (value === null || value === undefined) { - return <>; + return ; } const isTrue = value === true; return ( - <> + {isTrue ? : } {isTrue ? 'True' : 'False'} - + ); }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx index ce8f93778..c21898b2a 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx @@ -1,26 +1,16 @@ import { useTheme } from '@emotion/react'; -import { styled } from '@linaria/react'; import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata'; import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes'; +import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; +import { isDefined } from 'twenty-shared/utils'; import { formatAmount } from '~/utils/format/formatAmount'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; -import { isDefined } from 'twenty-shared/utils'; type CurrencyDisplayProps = { currencyValue: FieldCurrencyValue | null | undefined; }; -const StyledEllipsisDisplay = styled.div` - align-items: center; - display: flex; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -`; - export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => { const theme = useTheme(); @@ -35,11 +25,11 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => { : currencyValue?.amountMicros / 1000000; if (!shouldDisplayCurrency) { - return {0}; + return {0}; } return ( - + {isDefined(CurrencyIcon) && amountToDisplay !== null && ( <> { )} {amountToDisplay !== null ? formatAmount(amountToDisplay) : ''} - + ); }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx index 1e909c6e6..c021149a1 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx @@ -1,6 +1,9 @@ import { styled } from '@linaria/react'; const StyledEllipsisDisplay = styled.div<{ maxWidth?: number }>` + align-items: center; + display: flex; + height: 20px; max-width: ${({ maxWidth }) => (maxWidth ? maxWidth + 'px' : '100%')}; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx index 0a0ffa8f9..57d10e813 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx @@ -1,3 +1,5 @@ +import { styled } from '@linaria/react'; +import { isUndefined } from '@sniptt/guards'; import { OverflowingTextWithTooltip } from 'twenty-ui/display'; type TextDisplayProps = { @@ -5,12 +7,22 @@ type TextDisplayProps = { displayedMaxRows?: number; }; +const StyledContainer = styled.div<{ fixHeight: boolean }>` + height: ${({ fixHeight }) => (fixHeight ? '20px' : 'auto')}; + display: flex; + align-items: center; +`; + export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => { return ( - + + + ); }; diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts index bccf83537..ce8cc95c1 100644 --- a/packages/twenty-front/vite.config.ts +++ b/packages/twenty-front/vite.config.ts @@ -131,12 +131,15 @@ export default defineConfig(({ command, mode }) => { '**/RecordTableTd.tsx', '**/RecordTableHeaderDragDropColumn.tsx', '**/ActorDisplay.tsx', + '**/BooleanDisplay.tsx', + '**/CurrencyDisplay.tsx', + '**/TextDisplay.tsx', + '**/EllipsisDisplay.tsx', '**/AvatarChip.tsx', '**/URLDisplay.tsx', '**/EmailsDisplay.tsx', '**/PhonesDisplay.tsx', '**/MultiSelectDisplay.tsx', - ], babelOptions: { presets: ['@babel/preset-typescript', '@babel/preset-react'],