Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add: objectName in fav folder #8785

Merged
merged 5 commits into from
Dec 19, 2024
Merged

add: objectName in fav folder #8785

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b01821
add: objectName in fav folder
harshrajeevsingh Nov 28, 2024
efbfa86
refactor
harshrajeevsingh Nov 29, 2024
d49f1a0
Merge remote-tracking branch 'upstream/main' into add/fav-object-name
ehconitin Dec 6, 2024
7b60d6f
Merge branch 'main' into add/fav-object-name
martmull Dec 19, 2024
91301ba
Add objectName in root favorites
martmull Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ export const CurrentWorkspaceMemberFavorites = ({
<NavigationDrawerSubItem
key={favorite.id}
label={favorite.labelIdentifier}
objectName={favorite.objectNameSingular}
Icon={() => <FavoriteIcon favorite={favorite} />}
to={favorite.link}
active={index === selectedFavoriteIndex}
Expand Down
1 change: 1 addition & 0 deletions .../twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
key={favorite.id}
className="navigation-drawer-item"
label={favorite.labelIdentifier}
objectName={favorite.objectNameSingular}
Icon={() => <FavoriteIcon favorite={favorite} />}
active={isLocationMatchingFavorite(
currentPath,
Expand Down
148 changes: 106 additions & 42 deletions ...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,14 +18,15 @@ 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;

export type NavigationDrawerItemProps = {
className?: string;
label: string;
objectName?: string;
indentationLevel?: NavigationDrawerItemIndentationLevel;
subItemState?: NavigationDrawerSubItemState;
to?: string;
Expand Down Expand Up @@ -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 &&
`
Expand Down Expand Up @@ -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};
Expand All @@ -154,7 +174,7 @@ const StyledKeyBoardShortcut = styled.span`
visibility: hidden;
`;

const StyledNavigationDrawerItemContainer = styled.span`
const StyledNavigationDrawerItemContainer = styled.div`
display: flex;
width: 100%;
`;
Expand All @@ -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;
harshrajeevsingh marked this conversation as resolved.
Show resolved Hide resolved
`;

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,
Expand Down Expand Up @@ -233,28 +281,41 @@ export const NavigationDrawerItem = ({
isNavigationDrawerExpanded={isNavigationDrawerExpanded}
isDraggable={isDraggable}
>
{showBreadcrumb && (
<NavigationDrawerAnimatedCollapseWrapper>
<NavigationDrawerItemBreadcrumb state={subItemState} />
</NavigationDrawerAnimatedCollapseWrapper>
)}
<StyledItemElementsContainer>
{showBreadcrumb && (
<NavigationDrawerAnimatedCollapseWrapper>
<NavigationDrawerItemBreadcrumb state={subItemState} />
</NavigationDrawerAnimatedCollapseWrapper>
)}

{Icon && (
<Icon
style={{ minWidth: theme.icon.size.md }}
size={theme.icon.size.md}
stroke={theme.icon.stroke.md}
color={
showBreadcrumb && !isSettingsPage && !isNavigationDrawerExpanded
? theme.font.color.light
: 'currentColor'
}
/>
<StyledIcon>
<Icon
style={{ minWidth: theme.icon.size.md }}
size={theme.icon.size.md}
stroke={theme.icon.stroke.md}
color={
showBreadcrumb &&
!isSettingsPage &&
!isNavigationDrawerExpanded
? theme.font.color.light
: 'currentColor'
}
/>
</StyledIcon>
)}

<NavigationDrawerAnimatedCollapseWrapper>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need that back

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@martmull I looked into it. But it was not possible. As I described in the description that having NavigationDrawerAnimatedCollapseWrapper on top of any text or div won't let the truncation property work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seen with @Bonapara. We are ok to remove the animated effect

<StyledItemLabel>{label}</StyledItemLabel>
</NavigationDrawerAnimatedCollapseWrapper>
<StyledLabelParent>
<StyledEllipsisContainer>
<StyledItemLabel>{label}</StyledItemLabel>
{objectName ? (
<StyledItemObjectName>
{' · '}
{capitalize(objectName)}
</StyledItemObjectName>
) : null}
harshrajeevsingh marked this conversation as resolved.
Show resolved Hide resolved
</StyledEllipsisContainer>
</StyledLabelParent>

<StyledSpacer />

Expand All @@ -280,14 +341,17 @@ export const NavigationDrawerItem = ({
<NavigationDrawerAnimatedCollapseWrapper>
{rightOptions && (
<StyledRightOptionsContainer
isMobile={isMobile}
active={active || false}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
Comment on lines 341 to 344
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: stopPropagation and preventDefault could interfere with keyboard navigation. Consider handling keyboard events separately.

>
{rightOptions}
<StyledRightOptionsVisbility
isMobile={isMobile}
active={active || false}
>
{rightOptions}
</StyledRightOptionsVisbility>
</StyledRightOptionsContainer>
)}
</NavigationDrawerAnimatedCollapseWrapper>
Expand Down
2 changes: 2 additions & 0 deletions ...-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type NavigationDrawerSubItemProps = NavigationDrawerItemProps;
export const NavigationDrawerSubItem = ({
className,
label,
objectName,
Icon,
to,
onClick,
Expand All @@ -24,6 +25,7 @@ export const NavigationDrawerSubItem = ({
<NavigationDrawerItem
className={className}
label={label}
objectName={objectName}
indentationLevel={2}
subItemState={subItemState}
Icon={Icon}
Expand Down
Loading