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

Minor fixes empty state (#3703)

Browse Source 
* Minor fixes for Timeline empty states
* Refactored TimelineCreateButtonGroup
This commit is contained in:
Lucas Bordeau
2024-01-31 12:12:51 +01:00
committed by GitHub
parent ba77d7430a
commit d7e4b4116f
7 changed files with 62 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { TimelineCreateButtonGroup } from '@/activities/timeline/components/TimelineCreateButtonGroup';
import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineActivities';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
@ -36,8 +35,6 @@ export const Timeline = ({
targetableObject,
});
const openCreateActivity = useOpenCreateActivityDrawer();
const showEmptyState = initialized && activities.length === 0;
const showLoadingState = !initialized;
@ -57,20 +54,7 @@ export const Timeline = ({
There are no activities associated with this record.{' '}
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
<ActivityCreateButton
onNoteClick={() =>
openCreateActivity({
type: 'Note',
targetableObjects: [targetableObject],
})
}
onTaskClick={() =>
openCreateActivity({
type: 'Task',
targetableObjects: [targetableObject],
})
}
/>
<TimelineCreateButtonGroup targetableObject={targetableObject} />
</StyledEmptyContainer>
);
}

53
packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx Normal file
View File

@ -0,0 +1,53 @@
import { useSetRecoilState } from 'recoil';
import { Button, ButtonGroup } from 'tsup.ui.index';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import {
IconCheckbox,
IconNotes,
IconPaperclip,
} from '@/ui/display/icon/index';
import { TAB_LIST_COMPONENT_ID } from '@/ui/layout/show-page/components/ShowPageRightContainer';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
export const TimelineCreateButtonGroup = ({
targetableObject,
}: {
targetableObject: ActivityTargetableObject;
}) => {
const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const setActiveTabId = useSetRecoilState(getActiveTabIdState());
const openCreateActivity = useOpenCreateActivityDrawer();
return (
<ButtonGroup variant={'secondary'}>
<Button
Icon={IconNotes}
title="Note"
onClick={() =>
openCreateActivity({
type: 'Note',
targetableObjects: [targetableObject],
})
}
/>
<Button
Icon={IconCheckbox}
title="Task"
onClick={() =>
openCreateActivity({
type: 'Task',
targetableObjects: [targetableObject],
})
}
/>
<Button
Icon={IconPaperclip}
title="File"
onClick={() => setActiveTabId('files')}
/>
</ButtonGroup>
);
};