From 041b1f21bf665a5aab8c19c772ff3a0da4cd64f7 Mon Sep 17 00:00:00 2001 From: Guillim Date: Thu, 28 Nov 2024 14:30:23 +0100 Subject: [PATCH] line breaks in tooltips & text (#8783) This feature goal is to : 1 - clean variables not used any longer 2 - add line breaks for tooltips and text wrapped Screenshot 2024-11-27 at 18 37 18 Screenshot 2024-11-27 at 18 37 31 Request From @Bonapara --------- Co-authored-by: guillim --- .../components/RecordInlineCellContainer.tsx | 11 ++++----- .../RecordInlineCellDisplayMode.tsx | 6 ++--- .../components/RecordInlineCellEditMode.tsx | 2 +- .../components/RecordTableCellEditMode.tsx | 4 ++-- .../field/display/components/TextDisplay.tsx | 6 ++++- .../field/input/components/TextAreaInput.tsx | 7 ++++-- .../tooltip/OverflowingTextWithTooltip.tsx | 23 +++++++++---------- 7 files changed, 30 insertions(+), 29 deletions(-) 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 605efccfa..c3f0ae951 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 @@ -39,7 +39,8 @@ const StyledLabelAndIconContainer = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; display: flex; gap: ${({ theme }) => theme.spacing(1)}; - height: 24px; + height: 18px; + padding-top: 3px; `; const StyledValueContainer = styled.div` @@ -61,7 +62,7 @@ const StyledInlineCellBaseContainer = styled.div` width: 100%; display: flex; height: fit-content; - line-height: 24px; + line-height: 18px; gap: ${({ theme }) => theme.spacing(1)}; user-select: none; justify-content: center; @@ -131,11 +132,7 @@ export const RecordInlineCellContainer = () => { )} {showLabel && label && ( - + )} {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */} 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 857df1b0d..837573ed1 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 @@ -42,13 +42,11 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div` align-content: center; align-items: center; color: ${({ theme }) => theme.font.color.primary}; - font-size: 'inherit'; - - font-weight: 'inherit'; + padding-top: 3px; + padding-bottom: 3px; height: fit-content; - min-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx index a6a4bec45..b2d187cc5 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx @@ -46,7 +46,7 @@ export const RecordInlineCellEditMode = ({ crossAxis: 0, } : { - mainAxis: -28, + mainAxis: -29, crossAxis: -4, }, ), diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx index 305230b3f..73e1bc31c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx @@ -37,8 +37,8 @@ export const RecordTableCellEditMode = ({ middleware: [ flip(), offset({ - mainAxis: -32, - crossAxis: 0, + mainAxis: -31, + crossAxis: -2, }), ], whileElementsMounted: autoUpdate, 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 0b9211e2f..019d1285f 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 @@ -6,5 +6,9 @@ type TextDisplayProps = { }; export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => ( - + ); diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx index af55300e5..663e32116 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx @@ -34,6 +34,7 @@ const StyledTextArea = styled(TextareaAutosize)` max-height: 400px; width: calc(100% - ${({ theme }) => theme.spacing(7)}); background: transparent; + line-height: 18px; `; const StyledTextAreaContainer = styled.div` @@ -41,7 +42,9 @@ const StyledTextAreaContainer = styled.div` border: ${({ theme }) => `1px solid ${theme.border.color.medium}`}; position: relative; width: 100%; - padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)}; + padding-top: ${({ theme }) => theme.spacing(2)}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; + border-radius: ${({ theme }) => theme.border.radius.sm}; @supports ( @@ -56,7 +59,7 @@ const StyledTextAreaContainer = styled.div` const StyledLightIconButtonContainer = styled.div` background: transparent; position: absolute; - top: 50%; + top: 18px; transform: translateY(-50%); right: 0; `; diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index a2f1058b4..63f124384 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -12,8 +12,6 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean; size: 'large' | 'small'; displayedMaxRows?: number; - isLabel: boolean; - allowDisplayWrap?: boolean; }>` cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')}; font-family: inherit; @@ -25,7 +23,7 @@ const StyledOverflowingText = styled.div<{ text-decoration: inherit; text-overflow: ellipsis; - + white-space: pre-wrap; height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')}; text-wrap: wrap; @@ -42,20 +40,21 @@ const StyledOverflowingText = styled.div<{ } `; +const Styledpre = styled.pre` + font-family: inherit; + white-space: pre-wrap; +`; + export const OverflowingTextWithTooltip = ({ size = 'small', text, isTooltipMultiline, displayedMaxRows, - isLabel, - allowDisplayWrap, }: { size?: 'large' | 'small'; text: string | null | undefined; isTooltipMultiline?: boolean; displayedMaxRows?: number; - isLabel?: boolean; - allowDisplayWrap?: boolean; }) => { const textElementId = `title-id-${+new Date()}`; @@ -81,7 +80,6 @@ export const OverflowingTextWithTooltip = ({ event.stopPropagation(); event.preventDefault(); }; - return ( <> - {isTooltipMultiline ? 
{text}
: ''} + {isTooltipMultiline ? ( + {text} + ) : ( + `${text || ''}` + )} , document.body,