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

Add a notification for "tasks" in the navigation (#1489)

Browse Source 
* Add a notification for "tasks" in the navigation

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Add a notification for "tasks" in the navigation

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Fix icon import in TaskNavMenuItem

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Use object destructuring

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Rename dueTasks to dueTaskCount

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Complete Task notification display

* Fix lint

* Fix tests

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-13 02:16:51 +01:00
committed by GitHub
parent 92ef931d4d
commit cd946019f1
12 changed files with 187 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
front/src/modules/ui/navbar/components/NavItem.tsx
View File

@ -17,6 +17,7 @@ type NavItemProps = {
active?: boolean;
danger?: boolean;
soon?: boolean;
count?: number;
};
type StyledItemProps = {
@ -82,6 +83,21 @@ const StyledSoonPill = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const StyledItemCount = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.color.blue};
border-radius: ${({ theme }) => theme.border.radius.rounded};
color: ${({ theme }) => theme.grayScale.gray0};
display: flex;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: 16px;
justify-content: center;
margin-left: auto;
width: 16px;
`;
function NavItem({
label,
Icon,
@ -90,6 +106,7 @@ function NavItem({
active,
danger,
soon,
count,
}: NavItemProps) {
const theme = useTheme();
const navigate = useNavigate();
@ -120,6 +137,7 @@ function NavItem({
{Icon && <Icon size={theme.icon.size.md} />}
<StyledItemLabel>{label}</StyledItemLabel>
{soon && <StyledSoonPill>Soon</StyledSoonPill>}
{!!count && <StyledItemCount>{count}</StyledItemCount>}
</StyledItem>
);
}