From fa738ec373bf2642a2d67dea65e851f4f8393505 Mon Sep 17 00:00:00 2001 From: NitinPSingh <71833171+NitinPSingh@users.noreply.github.com> Date: Mon, 5 Aug 2024 19:17:25 +0530 Subject: [PATCH] fix #5660 standardized relation icon (#6504) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #5660 - updated One to many [1:N] icon across app - created many to one icon [N:1] , and added it in app ![download (2)](https://github.com/user-attachments/assets/35ce05be-0f5f-4cd0-a1b7-7ab9062f74a0) ![download (1)](https://github.com/user-attachments/assets/57316e49-c931-4ab5-ad4b-d04b241724c3) --------- Co-authored-by: Félix Malfait --- .../data-model/constants/RelationTypes.ts | 7 ++++--- .../SettingsObjectFieldItemTableRow.tsx | 10 ++++++++-- .../src/display/icon/assets/many-to-one.svg | 17 +++++++++++++++++ .../icon/components/IconRelationManyToOne.tsx | 16 ++++++++++++++++ .../src/display/icon/components/TablerIcons.ts | 11 ++++++----- packages/twenty-ui/src/display/index.ts | 1 + 6 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 packages/twenty-ui/src/display/icon/assets/many-to-one.svg create mode 100644 packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts index 5fc89008d0..08127f6c98 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts @@ -1,6 +1,7 @@ import { IconComponent, - IconLayersLinked, + IconRelationManyToOne, + IconRelationOneToMany, IconRelationOneToOne, } from 'twenty-ui'; @@ -21,7 +22,7 @@ export const RELATION_TYPES: Record< > = { [RelationMetadataType.OneToMany]: { label: 'Has many', - Icon: IconLayersLinked, + Icon: IconRelationOneToMany, imageSrc: OneToManySvg, }, [RelationMetadataType.OneToOne]: { @@ -31,7 +32,7 @@ export const RELATION_TYPES: Record< }, MANY_TO_ONE: { label: 'Belongs to one', - Icon: IconLayersLinked, + Icon: IconRelationManyToOne, imageSrc: OneToManySvg, isImageFlipped: true, }, diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index c2d5fc1ef9..f564892e05 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -1,6 +1,6 @@ -import { ReactNode, useMemo } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { ReactNode, useMemo } from 'react'; import { Nullable, useIcons } from 'twenty-ui'; import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata'; @@ -13,6 +13,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; import { RELATION_TYPES } from '../../constants/RelationTypes'; +import { RelationMetadataType } from '~/generated-metadata/graphql'; import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType'; type SettingsObjectFieldItemTableRowProps = { @@ -89,7 +90,12 @@ export const SettingsObjectFieldItemTableRow = ({ + + + + + + \ No newline at end of file diff --git a/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx new file mode 100644 index 0000000000..09695c43c5 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx @@ -0,0 +1,16 @@ +import { useTheme } from '@emotion/react'; + +import IconRelationManyToOneRaw from '@ui/display/icon/assets/many-to-one.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; + +type IconRelationManyToOneProps = Pick; + +export const IconRelationManyToOne = (props: IconRelationManyToOneProps) => { + const theme = useTheme(); + const size = props.size ?? 24; + const stroke = props.stroke ?? theme.icon.stroke.md; + + return ( + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 3c1942ba82..39576b2b92 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -3,6 +3,7 @@ export { Icon123, IconAlertCircle, IconAlertTriangle, + IconApi, IconApps, IconArchive, IconArchiveOff, @@ -51,7 +52,9 @@ export { IconColorSwatch, IconMessageCircle as IconComment, IconCopy, + IconCreativeCommonsSa, IconCreditCard, + IconCsv, IconCurrencyBaht, IconCurrencyDirham, IconCurrencyDollar, @@ -85,8 +88,8 @@ export { IconFilter, IconFilterOff, IconFocusCentered, - IconFunction, IconForbid, + IconFunction, IconGripVertical, IconH1, IconH2, @@ -169,9 +172,7 @@ export { IconVideo, IconWand, IconWorld, - IconX, - IconCreativeCommonsSa, - IconApi, - IconCsv, + IconX } from '@tabler/icons-react'; export type { TablerIconsProps } from '@tabler/icons-react'; + diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index 7752c515af..fd659f04f7 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -15,6 +15,7 @@ export * from './icon/components/IconGmail'; export * from './icon/components/IconGoogle'; export * from './icon/components/IconGoogleCalendar'; export * from './icon/components/IconMicrosoft'; +export * from './icon/components/IconRelationManyToOne'; export * from './icon/components/IconTwentyStar'; export * from './icon/components/IconTwentyStarFilled'; export * from './icon/components/TablerIcons';