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

Fix array and links display (#8671)

Browse Source 
## Before

![image](https://github.com/user-attachments/assets/ebecb45b-d3c1-4c80-9d90-726e37d2d417)

![image](https://github.com/user-attachments/assets/33e85593-9459-4790-9ae6-a79265f33b5a)

## After

![image](https://github.com/user-attachments/assets/a5174069-bed3-4e02-ae98-550a418243c5)

![image](https://github.com/user-attachments/assets/f2d0dd16-225c-4788-bb90-d47875d8b5f3)
This commit is contained in:
martmull
2024-11-22 12:06:31 +01:00
committed by GitHub
parent aa8b0ff04a
commit 76be1df66a
7 changed files with 25 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
View File

@ -1,62 +1,18 @@
import {
BORDER_COMMON,
OverflowingTextWithTooltip,
THEME_COMMON,
} from 'twenty-ui';
import { Chip, ChipVariant } from 'twenty-ui';
import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import styled from '@emotion/styled';
type ArrayDisplayProps = {
value: FieldArrayValue;
isFocused?: boolean;
isInputDisplay?: boolean;
};
const themeSpacing = THEME_COMMON.spacingMultiplicator;
const StyledContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeSpacing * 1}px;
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
width: 100%;
`;
const StyledTag = styled.div<{ isInputDisplay?: boolean }>`
background-color: ${({ theme, isInputDisplay }) =>
isInputDisplay ? 'transparent' : theme.background.tertiary};
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
border-radius: ${BORDER_COMMON.radius.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
`;
export const ArrayDisplay = ({
value,
isFocused,
isInputDisplay = false,
}: ArrayDisplayProps) => {
return isFocused ? (
<ExpandableList isChipCountDisplayed>
{value?.map((item, index) => (
<StyledTag key={index}>
<OverflowingTextWithTooltip text={item} />
</StyledTag>
export const ArrayDisplay = ({ value }: ArrayDisplayProps) => {
return (
<ExpandableList>
{value?.map((item) => (
<Chip variant={ChipVariant.Highlighted} label={item} />
))}
</ExpandableList>
) : (
<StyledContainer>
{value?.map((item, index) => (
<StyledTag key={index} isInputDisplay={isInputDisplay}>
<OverflowingTextWithTooltip text={item} />
</StyledTag>
))}
</StyledContainer>
);
};

35
packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
View File

@ -1,6 +1,5 @@
import { styled } from '@linaria/react';
import { useMemo } from 'react';
import { LinkType, RoundedLink, SocialLink, THEME_COMMON } from 'twenty-ui';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@ -11,25 +10,9 @@ import { getUrlHostName } from '~/utils/url/getUrlHostName';
type LinksDisplayProps = {
value?: FieldLinksValue;
isFocused?: boolean;
};
const themeSpacing = THEME_COMMON.spacingMultiplicator;
const StyledContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeSpacing * 1}px;
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
width: 100%;
`;
export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
export const LinksDisplay = ({ value }: LinksDisplayProps) => {
const links = useMemo(
() =>
[
@ -53,8 +36,8 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
[value?.primaryLinkLabel, value?.primaryLinkUrl, value?.secondaryLinks],
);
return isFocused ? (
<ExpandableList isChipCountDisplayed>
return (
<ExpandableList>
{links.map(({ url, label, type }, index) =>
type === LinkType.LinkedIn || type === LinkType.Twitter ? (
<SocialLink key={index} href={url} type={type} label={label} />
@ -63,15 +46,5 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
),
)}
</ExpandableList>
) : (
<StyledContainer>
{links.map(({ url, label, type }, index) =>
type === LinkType.LinkedIn || type === LinkType.Twitter ? (
<SocialLink key={index} href={url} type={type} label={label} />
) : (
<RoundedLink key={index} href={url} label={label} />
),
)}
</StyledContainer>
);
};