From b05feb81ed2fb549d488e933eb25156d6bf8dd83 Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 27 Aug 2024 21:42:24 +0000 Subject: [PATCH 1/5] Field name is oddly displayed when long --- .../SettingsObjectFieldItemTableRow.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 8793be03d520..0f34fe963c45 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 @@ -47,6 +47,12 @@ const StyledNameTableCell = styled(TableCell)` color: ${({ theme }) => theme.font.color.primary}; gap: ${({ theme }) => theme.spacing(2)}; `; +const StyledNameLabel = styled.div` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +`; const StyledIconTableCell = styled(TableCell)` justify-content: center; @@ -203,9 +209,15 @@ export const SettingsObjectFieldItemTableRow = ({ > {!!Icon && ( - + )} - {fieldMetadataItem.label} + + {fieldMetadataItem.label} + {typeLabel} From 023ded1565b631a3d4666395b74ba05975b78ba6 Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Wed, 28 Aug 2024 21:37:17 +0000 Subject: [PATCH 2/5] Field name is oddly displayed when long on field header --- .../twenty-front/src/modules/ui/layout/page/PageHeader.tsx | 3 ++- .../ui/navigation/bread-crumb/components/Breadcrumb.tsx | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index f9f9a1046e9c..5881e5cb25fb 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -56,7 +56,7 @@ const StyledTitleContainer = styled.div` font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: ${({ theme }) => theme.spacing(1)}; - max-width: 50%; + width: 100%; `; const StyledTopBarIconStyledTitleContainer = styled.div` @@ -65,6 +65,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div` flex: 1 0 auto; gap: ${({ theme }) => theme.spacing(1)}; flex-direction: row; + width: 100%; `; const StyledPageActionContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index d06cfc8263ca..ca324c19e19b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -15,6 +15,7 @@ const StyledWrapper = styled.nav` // font-weight: ${({ theme }) => theme.font.weight.semiBold}; gap: ${({ theme }) => theme.spacing(2)}; line-height: ${({ theme }) => theme.text.lineHeight.lg}; + max-width: 100%; `; const StyledLink = styled(Link)` @@ -24,6 +25,9 @@ const StyledLink = styled(Link)` const StyledText = styled.span` color: ${({ theme }) => theme.font.color.primary}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( @@ -33,7 +37,7 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( {link.href ? ( {link.children} ) : ( - {link.children} + {link.children} )} {index < links.length - 1 && '/'} From 47310fc7cafbbf86d841031d210f1f9c6ebbcae7 Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Thu, 29 Aug 2024 20:44:58 +0000 Subject: [PATCH 3/5] fix overflow for long object names --- .../SettingsObjectFieldItemTableRow.tsx | 8 ++++---- .../components/SettingsObjectItemTableRow.tsx | 16 ++++++++++++++-- .../bread-crumb/components/Breadcrumb.tsx | 8 +++++++- 3 files changed, 25 insertions(+), 7 deletions(-) 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 0f34fe963c45..c1cef9d42f65 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 @@ -47,11 +47,11 @@ const StyledNameTableCell = styled(TableCell)` color: ${({ theme }) => theme.font.color.primary}; gap: ${({ theme }) => theme.spacing(2)}; `; + const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; `; const StyledIconTableCell = styled(TableCell)` diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 0c69f4b81afe..c863a03e5acb 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -25,6 +25,12 @@ const StyledNameTableCell = styled(TableCell)` gap: ${({ theme }) => theme.spacing(2)}; `; +const StyledNameLabel = styled.div` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +`; + const StyledActionTableCell = styled(TableCell)` justify-content: center; padding-right: ${({ theme }) => theme.spacing(1)}; @@ -46,9 +52,15 @@ export const SettingsObjectMetadataItemTableRow = ({ {!!Icon && ( - + )} - {objectMetadataItem.labelPlural} + + {objectMetadataItem.labelPlural}{' '} + diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index ca324c19e19b..2366f5ab7344 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -16,11 +16,15 @@ const StyledWrapper = styled.nav` gap: ${({ theme }) => theme.spacing(2)}; line-height: ${({ theme }) => theme.text.lineHeight.lg}; max-width: 100%; + min-width: 0; `; const StyledLink = styled(Link)` color: inherit; text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledText = styled.span` @@ -35,7 +39,9 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( {links.map((link, index) => ( {link.href ? ( - {link.children} + + {link.children} + ) : ( {link.children} )} From 4784e723fbad6df8aef01ee211e9d75ef6e84bab Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Mon, 2 Sep 2024 17:26:02 +0000 Subject: [PATCH 4/5] add prop to handle styles on Breadcrumb and fix sidebar icon --- .../bread-crumb/components/Breadcrumb.tsx | 10 ++++++---- .../components/NavigationDrawerItem.tsx | 15 ++++++++++++--- .../data-model/SettingsObjectFieldEdit.tsx | 7 ++++++- .../SettingsObjectNewFieldStep2.tsx | 7 ++++++- 4 files changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index 2366f5ab7344..54f1dfcdb7c5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; -import { Fragment } from 'react'; +import { CSSProperties, Fragment } from 'react'; import { Link } from 'react-router-dom'; type BreadcrumbProps = { className?: string; - links: { children: string; href?: string }[]; + links: { children: string; href?: string; styles?: CSSProperties }[]; }; const StyledWrapper = styled.nav` @@ -39,11 +39,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( {links.map((link, index) => ( {link.href ? ( - + {link.children} ) : ( - {link.children} + + {link.children} + )} {index < links.length - 1 && '/'} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 80633976871a..a1ef582aaef3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -8,7 +8,12 @@ import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { Link, useNavigate } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; -import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui'; +import { + IconComponent, + MOBILE_VIEWPORT, + Pill, + TablerIconsProps, +} from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; const DEFAULT_INDENTATION_LEVEL = 1; @@ -22,7 +27,7 @@ export type NavigationDrawerItemProps = { subItemState?: NavigationDrawerSubItemState; to?: string; onClick?: () => void; - Icon: IconComponent; + Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element); active?: boolean; danger?: boolean; soon?: boolean; @@ -185,7 +190,11 @@ export const NavigationDrawerItem = ({ )} {Icon && ( - + )} {label} {soon && } diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index 8453e6837f73..d20bb8260183 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -176,10 +176,15 @@ export const SettingsObjectFieldEdit = () => { title={ { Date: Tue, 3 Sep 2024 14:19:49 +0200 Subject: [PATCH 5/5] Remove space --- .../object-details/components/SettingsObjectItemTableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index c863a03e5acb..27e1a97823cd 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -59,7 +59,7 @@ export const SettingsObjectMetadataItemTableRow = ({ /> )} - {objectMetadataItem.labelPlural}{' '} + {objectMetadataItem.labelPlural}