From 9b01821f1b37738d7010842e2f23d00904985548 Mon Sep 17 00:00:00 2001 From: harshrajeevsingh Date: Thu, 28 Nov 2024 13:40:33 +0530 Subject: [PATCH 1/3] add: objectName in fav folder --- .../CurrentWorkspaceMemberFavorites.tsx | 1 + ...CurrentWorkspaceMemberFavoritesFolders.tsx | 1 + .../components/NavigationDrawerItem.tsx | 148 +++++++++++++----- .../components/NavigationDrawerSubItem.tsx | 2 + 4 files changed, 110 insertions(+), 42 deletions(-) diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index d45d8ef654df..f03f56d63996 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -160,6 +160,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 81d1e08affba..c27d11066f3a 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx @@ -115,6 +115,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..2fafa44e6a70 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 @@ -6,7 +6,7 @@ import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import isPropValid from '@emotion/is-prop-valid'; -import { useTheme } from '@emotion/react'; +import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ReactNode } from 'react'; import { Link } from 'react-router-dom'; @@ -18,7 +18,7 @@ import { TablerIconsProps, } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; - +import { capitalize } from '~/utils/string/capitalize'; const DEFAULT_INDENTATION_LEVEL = 1; export type NavigationDrawerItemIndentationLevel = 1 | 2; @@ -26,6 +26,7 @@ export type NavigationDrawerItemIndentationLevel = 1 | 2; export type NavigationDrawerItemProps = { className?: string; label: string; + objectName?: string; indentationLevel?: NavigationDrawerItemIndentationLevel; subItemState?: NavigationDrawerSubItemState; to?: string; @@ -87,8 +88,9 @@ const StyledItem = styled('button', { width: ${(props) => !props.isNavigationDrawerExpanded - ? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px` - : '100%'}; + ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(6)})` + : `calc(100% - ${props.theme.spacing(2)})`}; + ${({ isDraggable }) => isDraggable && ` @@ -116,19 +118,37 @@ const StyledItem = styled('button', { } `; -const StyledItemElementsContainer = styled.span` +const StyledItemElementsContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; width: 100%; `; -const StyledItemLabel = styled.span` - font-weight: ${({ theme }) => theme.font.weight.medium}; +const StyledLabelParent = styled.div` + display: flex; + align-items: center; + flex: 1 1 auto; + white-space: nowrap; + min-width: 0px; + overflow: hidden; + text-overflow: clip; +`; +const StyledEllipsisContainer = styled.div` + color: ${({ theme }) => theme.font.color.light}; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `; +const StyledItemLabel = styled.span` + color: ${({ theme }) => theme.font.color.secondary}; + font-weight: ${({ theme }) => theme.font.weight.medium}; +`; +const StyledItemObjectName = styled.span` + color: ${({ theme }) => theme.font.color.light}; + font-weight: ${({ theme }) => theme.font.weight.regular}; +`; + const StyledItemCount = styled.span` align-items: center; background-color: ${({ theme }) => theme.color.blue}; @@ -154,7 +174,7 @@ const StyledKeyBoardShortcut = styled.span` visibility: hidden; `; -const StyledNavigationDrawerItemContainer = styled.span` +const StyledNavigationDrawerItemContainer = styled.div` display: flex; width: 100%; `; @@ -163,30 +183,58 @@ const StyledSpacer = styled.span` flex-grow: 1; `; -const StyledRightOptionsContainer = styled.div<{ - isMobile: boolean; - active: boolean; -}>` - margin-left: auto; - visibility: ${({ isMobile, active }) => - isMobile || active ? 'visible' : 'hidden'}; +const StyledIcon = styled.div` + flex-shrink: 0; + flex-grow: 0; + margin-right: 8px; +`; + +const StyledRightOptionsContainer = styled.div` display: flex; align-items: center; justify-content: center; - :hover { - background: ${({ theme }) => theme.background.transparent.light}; - } - width: ${({ theme }) => theme.spacing(6)}; + flex-shrink: 0; + flex-grow: 0; height: ${({ theme }) => theme.spacing(6)}; border-radius: ${({ theme }) => theme.border.radius.sm}; +`; + +const visibleStateStyles = css` + clip-path: unset; + display: flex; + height: unset; + opacity: 1; + overflow: unset; + position: unset; + width: unset; +`; + +const StyledRightOptionsVisbility = styled.div<{ + isMobile: boolean; + active: boolean; +}>` + display: block; + opacity: 0; + transition: opacity 150ms; + position: absolute; + padding-left: ${({ theme }) => theme.spacing(2)}; + overflow: hidden; + clip-path: inset(1px); + white-space: nowrap; + height: 1px; + width: 1px; + + ${({ isMobile, active }) => (isMobile || active) && visibleStateStyles} + .navigation-drawer-item:hover & { - visibility: visible; + ${visibleStateStyles} } `; export const NavigationDrawerItem = ({ className, label, + objectName, indentationLevel = DEFAULT_INDENTATION_LEVEL, Icon, to, @@ -233,28 +281,41 @@ export const NavigationDrawerItem = ({ isNavigationDrawerExpanded={isNavigationDrawerExpanded} isDraggable={isDraggable} > - {showBreadcrumb && ( - - - - )} + {showBreadcrumb && ( + + + + )} + {Icon && ( - + + + )} - - {label} - + + + {label} + {objectName ? ( + + {' · '} + {capitalize(objectName)} + + ) : null} + + @@ -280,14 +341,17 @@ export const NavigationDrawerItem = ({ {rightOptions && ( { e.stopPropagation(); e.preventDefault(); }} > - {rightOptions} + + {rightOptions} + )} 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, 29 Nov 2024 17:15:07 +0530 Subject: [PATCH 2/3] refactor --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 7 ++++--- 1 file changed, 4 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 2fafa44e6a70..9929de82d604 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 @@ -19,6 +19,7 @@ import { } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { capitalize } from '~/utils/string/capitalize'; + const DEFAULT_INDENTATION_LEVEL = 1; export type NavigationDrawerItemIndentationLevel = 1 | 2; @@ -186,7 +187,7 @@ const StyledSpacer = styled.span` const StyledIcon = styled.div` flex-shrink: 0; flex-grow: 0; - margin-right: 8px; + margin-right: ${({ theme }) => theme.spacing(2)}; `; const StyledRightOptionsContainer = styled.div` @@ -308,12 +309,12 @@ export const NavigationDrawerItem = ({ {label} - {objectName ? ( + {objectName && ( {' · '} {capitalize(objectName)} - ) : null} + )} From 91301ba750447b7e42d46d6465ac5143bbd84011 Mon Sep 17 00:00:00 2001 From: martmull Date: Thu, 19 Dec 2024 11:35:40 +0100 Subject: [PATCH 3/3] Add objectName in root favorites --- .../components/CurrentWorkspaceMemberOrphanFavorites.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx index a32fdbd33b01..2db37d492891 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx @@ -59,6 +59,7 @@ export const CurrentWorkspaceMemberOrphanFavorites = () => { accent="tertiary" /> } + objectName={favorite.objectNameSingular} isDragging={isDragging} />