Syed Hamza Hussain
6f5dc1c924
Hello, Hope you are doing well.I created a special style for the text to make sure it stays in one line and wont exceed the width if the text width will be more then 80px it will ecplise and set ... at the end of the text. I created these 2 styles variables and wrap my text in these styles StyledObjectSummary StyledEllipsisParagraph Fixes #7574 #Screens Shots <img width="1268" alt="Screenshot 2024-10-10 at 10 58 04 PM" src="https://github.com/user-attachments/assets/2d3ef2c5-c4c8-489b-a205-50a48b986d60"> <img width="530" alt="Screenshot 2024-10-10 at 10 58 20 PM" src="https://github.com/user-attachments/assets/e0d1cb48-dbc9-427a-99ac-54269c574360"> --------- Co-authored-by: Charles Bochet <charles@twenty.com>
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui';
|
|
|
|
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
|
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
|
|
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
|
|
|
|
export type SettingsDataModelObjectSummaryProps = {
|
|
className?: string;
|
|
objectMetadataItem: ObjectMetadataItem;
|
|
};
|
|
|
|
const StyledObjectSummary = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
const StyledObjectName = styled.div`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
max-width: 60%;
|
|
`;
|
|
|
|
const StyledIconContainer = styled.div`
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
export const SettingsDataModelObjectSummary = ({
|
|
className,
|
|
objectMetadataItem,
|
|
}: SettingsDataModelObjectSummaryProps) => {
|
|
const theme = useTheme();
|
|
|
|
const { getIcon } = useIcons();
|
|
const ObjectIcon = getIcon(objectMetadataItem.icon);
|
|
const objectTypeLabel = getObjectTypeLabel(objectMetadataItem);
|
|
|
|
return (
|
|
<StyledObjectSummary className={className}>
|
|
<StyledObjectName>
|
|
<StyledIconContainer>
|
|
<ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
|
|
</StyledIconContainer>
|
|
<OverflowingTextWithTooltip text={objectMetadataItem.labelPlural} />
|
|
</StyledObjectName>
|
|
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
|
|
</StyledObjectSummary>
|
|
);
|
|
};
|