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 <img width="329" alt="Screenshot 2024-11-27 at 18 37 18" src="https://github.com/user-attachments/assets/b3d7ed76-df30-4377-9d73-08d55c0f5c49"> <img width="468" alt="Screenshot 2024-11-27 at 18 37 31" src="https://github.com/user-attachments/assets/48ef343e-6071-4a89-a73f-fb271f8284c0"> Request From @Bonapara --------- Co-authored-by: guillim <guillaume@twenty.com>
This commit is contained in:
Guillim
@ -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 && (
|
||||
<StyledLabelContainer width={labelWidth}>
|
||||
<OverflowingTextWithTooltip
|
||||
text={label}
|
||||
isLabel={true}
|
||||
displayedMaxRows={1}
|
||||
/>
|
||||
<OverflowingTextWithTooltip text={label} displayedMaxRows={1} />
|
||||
</StyledLabelContainer>
|
||||
)}
|
||||
{/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -46,7 +46,7 @@ export const RecordInlineCellEditMode = ({
|
||||
crossAxis: 0,
|
||||
}
|
||||
: {
|
||||
mainAxis: -28,
|
||||
mainAxis: -29,
|
||||
crossAxis: -4,
|
||||
},
|
||||
),
|
||||
|
||||
@ -37,8 +37,8 @@ export const RecordTableCellEditMode = ({
|
||||
middleware: [
|
||||
flip(),
|
||||
offset({
|
||||
mainAxis: -32,
|
||||
crossAxis: 0,
|
||||
mainAxis: -31,
|
||||
crossAxis: -2,
|
||||
}),
|
||||
],
|
||||
whileElementsMounted: autoUpdate,
|
||||
|
||||
@ -6,5 +6,9 @@ type TextDisplayProps = {
|
||||
};
|
||||
|
||||
export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => (
|
||||
<OverflowingTextWithTooltip text={text} displayedMaxRows={displayedMaxRows} />
|
||||
<OverflowingTextWithTooltip
|
||||
text={text}
|
||||
displayedMaxRows={displayedMaxRows}
|
||||
isTooltipMultiline={true}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
`;
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<StyledOverflowingText
|
||||
@ -89,8 +87,6 @@ export const OverflowingTextWithTooltip = ({
|
||||
cursorPointer={isTitleOverflowing}
|
||||
size={size}
|
||||
displayedMaxRows={displayedMaxRows}
|
||||
allowDisplayWrap={allowDisplayWrap}
|
||||
isLabel={isLabel ?? false}
|
||||
ref={textRef}
|
||||
id={textElementId}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
@ -103,7 +99,6 @@ export const OverflowingTextWithTooltip = ({
|
||||
<div onClick={handleTooltipClick}>
|
||||
<AppTooltip
|
||||
anchorSelect={`#${textElementId}`}
|
||||
content={isTooltipMultiline ? undefined : (text ?? '')}
|
||||
offset={5}
|
||||
isOpen
|
||||
noArrow
|
||||
@ -111,7 +106,11 @@ export const OverflowingTextWithTooltip = ({
|
||||
positionStrategy="absolute"
|
||||
delay={TooltipDelay.mediumDelay}
|
||||
>
|
||||
{isTooltipMultiline ? <pre>{text}</pre> : ''}
|
||||
{isTooltipMultiline ? (
|
||||
<Styledpre>{text}</Styledpre>
|
||||
) : (
|
||||
`${text || ''}`
|
||||
)}
|
||||
</AppTooltip>
|
||||
</div>,
|
||||
document.body,
|
||||
|
||||
Reference in New Issue
Block a user