admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Bug Fix: created new div and p tag styles and wrap it on the workspace member as container (#7581)

Browse Source 
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>
This commit is contained in:
Syed Hamza Hussain
2024-10-18 02:55:50 +05:00
committed by GitHub
parent 249c7324a2
commit 6f5dc1c924
4 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
View File

@ -129,7 +129,9 @@ export const SettingsDataModelFieldSettingsFormCard = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldSettingsFormCardProps) => {
if (!previewableTypes.includes(fieldMetadataItem.type)) return null;
if (!previewableTypes.includes(fieldMetadataItem.type)) {
return null;
}
if (fieldMetadataItem.type === FieldMetadataType.Boolean) {
return (

1
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
View File

@ -23,7 +23,6 @@ type SettingsDataModelFieldRelationSettingsFormCardProps = {
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
display: grid;
flex: 1 1 100%;
`;

1
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
View File

@ -19,7 +19,6 @@ const StyledCard = styled(Card)`
`;
const StyledCardContent = styled(CardContent)`
display: grid;
padding: ${({ theme }) => theme.spacing(2)};
`;

18
packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
View File

@ -1,6 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
@ -14,15 +14,17 @@ export type SettingsDataModelObjectSummaryProps = {
const StyledObjectSummary = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: space-between;
`;
const StyledObjectName = styled.div`
align-items: center;
display: flex;
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(1)};
gap: ${({ theme }) => theme.spacing(2)};
max-width: 60%;
`;
const StyledIconContainer = styled.div`
flex-shrink: 0;
`;
export const SettingsDataModelObjectSummary = ({
@ -38,8 +40,10 @@ export const SettingsDataModelObjectSummary = ({
return (
<StyledObjectSummary className={className}>
<StyledObjectName>
<ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
{objectMetadataItem.labelPlural}
<StyledIconContainer>
<ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
</StyledIconContainer>
<OverflowingTextWithTooltip text={objectMetadataItem.labelPlural} />
</StyledObjectName>
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
</StyledObjectSummary>