From fdd3af5e94b60d0b47ffb0f45df1a840f2841c71 Mon Sep 17 00:00:00 2001 From: harshrajeevsingh Date: Fri, 22 Nov 2024 00:08:21 +0530 Subject: [PATCH 1/4] add: object name in fav drawer --- .../CurrentWorkspaceMemberFavorites.tsx | 1 + ...CurrentWorkspaceMemberFavoritesFolders.tsx | 1 + .../components/NavigationDrawerItem.tsx | 34 +++++++++++++++++-- .../components/NavigationDrawerSubItem.tsx | 2 ++ 4 files changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index 46c64acbd791..08f7075003cd 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -159,6 +159,7 @@ export const CurrentWorkspaceMemberFavorites = ({ } to={favorite.link} active={index === selectedFavoriteIndex} diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx index 77ac10ae16eb..56c72f6b44c3 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx @@ -111,6 +111,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => { key={favorite.id} className="navigation-drawer-item" label={favorite.labelIdentifier} + objectName={favorite.objectNameSingular} Icon={() => } active={isLocationMatchingFavorite( currentPath, 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 4c6936dd0a5c..8a3111504a43 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 @@ -26,6 +26,7 @@ export type NavigationDrawerItemIndentationLevel = 1 | 2; export type NavigationDrawerItemProps = { className?: string; label: string; + objectName?: string; indentationLevel?: NavigationDrawerItemIndentationLevel; subItemState?: NavigationDrawerSubItemState; to?: string; @@ -123,10 +124,30 @@ const StyledItemElementsContainer = styled.span` width: 100%; `; +const StyledLabelParent = styled.span` + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + overflow: hidden; +`; + const StyledItemLabel = styled.span` font-weight: ${({ theme }) => theme.font.weight.medium}; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + max-width: 12ch; +`; + +const StyledItemObjectName = styled.span` + display: block + color: ${({ theme }) => theme.font.color.extraLight}; + font-weight: ${({ theme }) => theme.font.weight.regular}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .navigation-drawer-item:hover & { + display: none; + } `; const StyledItemCount = styled.span` @@ -187,6 +208,7 @@ const StyledRightOptionsContainer = styled.div<{ export const NavigationDrawerItem = ({ className, label, + objectName, indentationLevel = DEFAULT_INDENTATION_LEVEL, Icon, to, @@ -252,9 +274,17 @@ export const NavigationDrawerItem = ({ /> )} - + {/* */} + {label} - + {objectName ? ( + + {' · '} + {objectName.charAt(0).toUpperCase() + objectName.slice(1)} + + ) : null} + + {/* */} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx index 6bc3ca67a9b6..27da17733a97 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx @@ -8,6 +8,7 @@ type NavigationDrawerSubItemProps = NavigationDrawerItemProps; export const NavigationDrawerSubItem = ({ className, label, + objectName, Icon, to, onClick, @@ -24,6 +25,7 @@ export const NavigationDrawerSubItem = ({ Date: Fri, 22 Nov 2024 00:09:53 +0530 Subject: [PATCH 2/4] remove unused code --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 2 -- 1 file changed, 2 deletions(-) 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 8a3111504a43..8f04d138fc79 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 @@ -274,7 +274,6 @@ export const NavigationDrawerItem = ({ /> )} - {/* */} {label} {objectName ? ( @@ -284,7 +283,6 @@ export const NavigationDrawerItem = ({ ) : null} - {/* */} From bdefe5979d8987ab6a0a84f437e271bcf70d3ea8 Mon Sep 17 00:00:00 2001 From: harshrajeevsingh Date: Fri, 22 Nov 2024 00:23:16 +0530 Subject: [PATCH 3/4] fix: StyledItemObjectName --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8f04d138fc79..3aaecba55b89 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 @@ -139,8 +139,8 @@ const StyledItemLabel = styled.span` `; const StyledItemObjectName = styled.span` - display: block - color: ${({ theme }) => theme.font.color.extraLight}; + display: block; + color: ${({ theme }) => theme.font.color.light}; font-weight: ${({ theme }) => theme.font.weight.regular}; overflow: hidden; text-overflow: ellipsis; From 0542fbb94168941da1e0ab057f24ac8f22e83508 Mon Sep 17 00:00:00 2001 From: harshrajeevsingh Date: Fri, 22 Nov 2024 16:34:01 +0530 Subject: [PATCH 4/4] fix: max-width only for fav items --- .../components/NavigationDrawerItem.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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 3aaecba55b89..2b2738bc7582 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 @@ -130,12 +130,16 @@ const StyledLabelParent = styled.span` overflow: hidden; `; -const StyledItemLabel = styled.span` +const StyledItemLabel = styled.span<{ hasObjectName: boolean }>` font-weight: ${({ theme }) => theme.font.weight.medium}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - max-width: 12ch; + ${({ hasObjectName }) => + hasObjectName && + ` + max-width: 12ch; + `} `; const StyledItemObjectName = styled.span` @@ -275,7 +279,9 @@ export const NavigationDrawerItem = ({ )} - {label} + + {label} + {objectName ? ( {' · '}