admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Favorites Folders Fast Followups (#8920)

Browse Source 
Fixes :
<img width="716" alt="Screenshot 2024-12-06 at 3 45 41 PM"
src="https://github.com/user-attachments/assets/61fdf355-0d0a-4ed7-befa-ada23341a58f">

Fixes: Reduce menu width to 160px and it should appear below three dots
<img width="394" alt="Screenshot 2024-12-06 at 3 46 49 PM"
src="https://github.com/user-attachments/assets/b1266f83-9b6f-445b-9409-d7f691776bd0">

Fixes: The right margin should be 2px
<img width="1134" alt="Screenshot 2024-12-06 at 3 47 45 PM"
src="https://github.com/user-attachments/assets/b6dd857c-6575-418d-8e32-64cd4e5d4e85">

Fixes:
Requirement: Clicking the heart Icon should put the record as favorite.
It shouldn't open the menu on first click. It should only on second
click, when the record is already a favorite.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-12-17 16:45:36 +05:30
committed by GitHub
parent ac2894c87c
commit c63842925f
5 changed files with 63 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -77,7 +77,7 @@ const StyledItem = styled('button', {
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(0.5)};
padding-top: ${({ theme }) => theme.spacing(1)};
margin-top: ${({ indentationLevel }) =>

37
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
View File

@ -17,7 +17,10 @@ const StyledTitle = styled.div`
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: ${({ theme }) => theme.spacing(5)};
padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(0.5)};
padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
justify-content: space-between;
&:hover {
@ -36,38 +39,21 @@ type StyledRightIconProps = {
const StyledRightIcon = styled.div<StyledRightIconProps>`
cursor: pointer;
margin-left: ${({ theme }) => theme.spacing(2)};
transition: opacity 150ms ease-in-out;
opacity: ${({ isMobile }) => (isMobile ? 1 : 0)};
display: flex;
align-items: center;
justify-content: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
width: ${({ theme }) => theme.spacing(5)};
height: ${({ theme }) => theme.spacing(5)};
:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
.section-title-container:hover & {
opacity: 1;
}
&:active {
cursor: pointer;
}
`;
type NavigationDrawerSectionTitleProps = {
onClick?: () => void;
onRightIconClick?: () => void;
label: string;
rightIcon?: React.ReactNode;
};
export const NavigationDrawerSectionTitle = ({
onClick,
onRightIconClick,
label,
rightIcon,
}: NavigationDrawerSectionTitleProps) => {
@ -85,24 +71,15 @@ export const NavigationDrawerSectionTitle = ({
}
};
const handleRightIconClick = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
if (isDefined(onRightIconClick)) {
onRightIconClick();
}
};
if (loading && isDefined(currentUser)) {
return <NavigationDrawerSectionTitleSkeletonLoader />;
}
return (
<StyledTitle className="section-title-container" onClick={handleTitleClick}>
<StyledLabel>{label}</StyledLabel>
<StyledTitle className="section-title-container">
<StyledLabel onClick={handleTitleClick}>{label}</StyledLabel>
{rightIcon && (
<StyledRightIcon isMobile={isMobile} onClick={handleRightIconClick}>
{rightIcon}
</StyledRightIcon>
<StyledRightIcon isMobile={isMobile}>{rightIcon}</StyledRightIcon>
)}
</StyledTitle>
);