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

New Empty States (#3465)

Browse Source 
New empty states
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Kanav Arora
2024-01-30 15:31:56 +05:30
committed by GitHub
parent 96bcddc056
commit b07d67c624
27 changed files with 315 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -4,6 +4,13 @@ import { ActivityCreateButton } from '@/activities/components/ActivityCreateButt
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineActivities';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { TimelineItemsContainer } from './TimelineItemsContainer';
@ -20,31 +27,6 @@ const StyledMainContainer = styled.div`
justify-content: center;
`;
const StyledTimelineEmptyContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
`;
const StyledEmptyTimelineTitle = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
`;
const StyledEmptyTimelineSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.extraLight};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export const Timeline = ({
targetableObject,
}: {
@ -67,9 +49,14 @@ export const Timeline = ({
if (showEmptyState) {
return (
<StyledTimelineEmptyContainer>
<StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
<StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
<StyledEmptyContainer>
<AnimatedPlaceholder type="emptyTimeline" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Add your first Activity</StyledEmptyTitle>
<StyledEmptySubTitle>
There are no activities associated with this record.{' '}
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
<ActivityCreateButton
onNoteClick={() =>
openCreateActivity({
@ -84,7 +71,7 @@ export const Timeline = ({
})
}
/>
</StyledTimelineEmptyContainer>
</StyledEmptyContainer>
);
}